Extract style out of index.html as it grows

Yukaii · Yukaii · commit 133709b520d9 · 2017-02-17T23:35:16.000+08:00
diff --git a/app.css b/app.css
@@ -0,0 +1,87 @@
+html,
+body {
+	margin: 0;
+	height: 100%;
+	background-color: #f8f8f8;
+	overflow: hidden;
+	font-family: Arial, Helvetica, sans-serif;
+}
+
+body {
+	display: flex;
+	flex-direction: column;
+}
+
+webview {
+	flex: 1;
+}
+
+#title-bar {
+	-webkit-app-region: drag;
+	padding: 0.3em 0.7em;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	background-color: #f8f8f8;
+	color: #484848;
+	transition: color 0.5s, background-color 0.5s;
+}
+
+#title-bar.dark {
+	background-color: #333333;
+	color: white;
+}
+
+#title-bar .window-control {
+	float: right;
+	-webkit-app-region: no-drag;
+}
+
+navbar {
+	height: 23px;
+	align-items: center;
+	width: 100%;
+	display: flex;
+	-webkit-app-region: drag;
+	background-color: #f8f8f8;
+	color: #484848;
+	transition: color 0.5s, background-color 0.5s;
+}
+
+#navbar-container {
+	font-size: 0.9em;
+	font-family: "Courier New", Courier, monospace;
+	display: flex;
+	flex: 1;
+	justify-content: space-between;
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+navbar.dark {
+	background-color: #333333;
+	color: white;
+}
+
+navbar.dark .control-buttons>*:hover {
+	color: white;
+}
+
+#navbar-container .control-buttons {
+	flex: 1;
+	display: flex;
+}
+
+#navbar-container .control-buttons>* {
+	margin: 0 .3em;
+	cursor: pointer;
+	-webkit-user-select: none;
+	-webkit-app-region: no-drag;
+	height: 23px;
+	display: flex;
+	align-items: center;
+}
+
+#navbar-container .control-buttons>*:hover {
+	color: #c1c1c1;
+}
diff --git a/index.html b/index.html
@@ -5,97 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" href="vendor/font-awesome.min.css">
-    <style>
-      html, body {
-        margin: 0;
-        height: 100%;
-        background-color: #f8f8f8;
-        overflow: hidden;
-        font-family: Arial, Helvetica, sans-serif;
-      }
-
-      body {
-        display: flex;
-        flex-direction: column;
-      }
-
-      webview {
-        flex: 1;
-      }
-
-      #title-bar {
-        -webkit-app-region: drag;
-        padding: 0.3em 0.7em;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-
-        background-color: #f8f8f8;
-        color: #484848;
-
-        transition: color 0.5s, background-color 0.5s;
-      }
-
-      #title-bar.dark {
-        background-color: #333333;
-        color: white;
-      }
-
-      #title-bar .window-control {
-        float: right;
-        -webkit-app-region: no-drag;
-      }
-
-      navbar {
-        height: 23px;
-        align-items: center;
-        width: 100%;
-        display: flex;
-        -webkit-app-region: drag;
-        background-color: #f8f8f8;
-        color: #484848;
-
-        transition: color 0.5s, background-color 0.5s;
-      }
-
-      #navbar-container {
-        font-size: 0.9em;
-        font-family: "Courier New", Courier, monospace;
-        display: flex;
-        flex: 1;
-        justify-content: space-between;
-        -webkit-user-select: none;
-        user-select: none;
-      }
-
-      navbar.dark {
-        background-color: #333333;
-        color: white;
-      }
-
-      navbar.dark .control-buttons > *:hover {
-        color: white;
-      }
-
-      #navbar-container .control-buttons {
-        flex: 1;
-        display: flex;
-      }
-
-      #navbar-container .control-buttons > * {
-        margin: 0 .3em;
-        cursor: pointer;
-        -webkit-user-select: none;
-        -webkit-app-region: no-drag;
-        height: 23px;
-        display: flex;
-        align-items: center;
-      }
-
-      #navbar-container .control-buttons > *:hover {
-        color: #c1c1c1;
-      }
-    </style>
+    <link rel="stylesheet" type="text/css" href="./app.css">
   </head>
   <body>
     <div id="title-bar">
