build: Move to less for styles

src/less/emulator.less

@@ -0,0 +1,16 @@
+#emulator {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+
+  > div {
+    white-space: pre;
+    font: 14px monospace;
+    line-height: 14px
+  }
+
+  > canvas {
+    display: none;
+    margin: auto;
+  }
+}

src/less/floppy.less

@@ -0,0 +1,15 @@
+#floppy-path {
+  font-size: .6rem;
+  width: 100%;
+  height: 30px;
+  padding-left: 8px;
+  border-color: #000 #fff #fff #000;
+  border-style: solid;
+  border-width: 2px;
+  background-color: #c3c3c3;
+  line-height: 27px;
+}
+
+#file-input {
+  display: none;
+}

src/less/info.less

@@ -0,0 +1,7 @@
+#information {
+  text-align: center;
+  position: absolute;
+  width: 100vw;
+  bottom: 50px;
+  font-size: 18px;
+}

src/less/root.less

@@ -0,0 +1,77 @@
+@import "./status.less";
+@import "./emulator.less";
+@import "./info.less";
+@import "./floppy.less";
+
+/* GENERAL RESETS */
+
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: #000;
+}
+
+body.paused > #emulator {
+  display: none;
+}
+
+body.paused {
+  background: #008080;
+  font-family: Courier;
+}
+
+#buttons {
+  user-select: none;
+}
+
+section {
+  display: flex;
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  align-items: center;
+  justify-content: center;
+}
+
+.card {
+  width: 75%;
+  max-width: 700px;
+  min-width: 400px;
+}
+
+.windows95 {
+  nav .nav-link,
+  nav .nav-logo {
+    height: 30px;
+    line-height: 1.5;
+  }
+
+  nav .nav-logo img {
+    margin-left: 2px;
+    max-height: 20px;
+  }
+
+  nav .nav-logo > span {
+    position: absolute;
+    top: 9px;
+    left: 37px;
+    font-weight: bold;
+  }
+
+  .btn:focus {
+    border-color: #fff #000 #000 #fff;
+    outline: 5px auto -webkit-focus-ring-color;
+  }
+
+  .btn.active:before,
+  .btn:focus:before,
+  button.active:before,
+  button:focus:before,
+  input[type=submit].active:before,
+  input[type=submit]:focus:before {
+    border-color: #dedede grey grey #dedede;
+  }
+}

src/renderer/style/resets.css

@@ -1,33 +0,0 @@
-/* GENERAL RESETS */
-
-.windows95 nav .nav-link,
-.windows95 nav .nav-logo {
-  height: 30px;
-  line-height: 1.5;
-}
-
-.windows95 nav .nav-logo img {
-  margin-left: 2px;
-  max-height: 20px;
-}
-
-.windows95 nav .nav-logo > span {
-  position: absolute;
-  top: 9px;
-  left: 37px;
-  font-weight: bold;
-}
-
-.windows95 .btn:focus {
-  border-color: #fff #000 #000 #fff;
-  outline: 5px auto -webkit-focus-ring-color;
-}
-
-.windows95 .btn.active:before,
-.windows95 .btn:focus:before,
-.windows95 button.active:before,
-.windows95 button:focus:before,
-.windows95 input[type=submit].active:before,
-.windows95 input[type=submit]:focus:before {
-  border-color: #dedede grey grey #dedede;
-}

src/renderer/style/style.css

@@ -1,75 +0,0 @@
-@import "./resets.css";
-@import "./status.css";
-
-html, body {
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  background: #000;
-}
-
-body.paused > #emulator {
-  display: none;
-}
-
-body.paused {
-  background: #008080;
-  font-family: Courier;
-}
-
-#buttons {
-  user-select: none;
-}
-
-#floppy-path {
-  font-size: .6rem;
-  width: 100%;
-  height: 30px;
-  padding-left: 8px;
-  border-color: #000 #fff #fff #000;
-  border-style: solid;
-  border-width: 2px;
-  background-color: #c3c3c3;
-  line-height: 27px;
-}
-
-#information {
-  text-align: center;
-  position: absolute;
-  width: 100vw;
-  bottom: 50px;
-  font-size: 18px;
-}
-
-#emulator {
-  display: flex
-}
-
-#emulator canvas {
-  margin: auto;
-}
-
-#file-input {
-  display: none;
-}
-
-section {
-  display: none;
-}
-
-section.visible {
-  display: flex;
-  position: absolute;
-  width: 100vw;
-  height: 100vh;
-  align-items: center;
-  justify-content: center;
-}
-
-.card {
-  width: 75%;
-  max-width: 700px;
-  min-width: 400px;
-}