Switch to sass

frontend/package.json

@@ -11,6 +11,7 @@
     "@types/react": "^16.9.19",
     "@types/react-dom": "^16.9.5",
     "antd": "^3.26.9",
+    "node-sass": "^4.13.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "3.3.1",

frontend/src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

frontend/src/App.sass

@@ -0,0 +1,38 @@
+.App 
+  text-align: center
+
+
+.App-logo 
+  height: 40vmin
+  pointer-events: none
+
+
+@media (prefers-reduced-motion: no-preference) 
+  .App-logo 
+    animation: App-logo-spin infinite 20s linear
+  
+
+
+.App-header 
+  background-color: #282c34
+  min-height: 100vh
+  display: flex
+  flex-direction: column
+  align-items: center
+  justify-content: center
+  font-size: calc(10px + 2vmin)
+  color: white
+
+
+.App-link 
+  color: #61dafb
+
+
+@keyframes App-logo-spin 
+  from 
+    transform: rotate(0deg)
+  
+  to 
+    transform: rotate(360deg)
+  
+

frontend/src/App.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useRef, useState} from 'react';
-import './App.css';
+import './App.sass';
 import logo from "./via-logo.svg"
 import {Row} from "antd"
 import socket from "./util/socket";

frontend/src/components/Lobby.tsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import {Card, Col, InputNumber, Row} from "antd"
 import socket, {emit} from "../util/socket";
-import "../css/lobby.css";
+import "../css/lobby.sass";
 import beer from "../img/beer.png"
 import {NumberParam, useQueryParam} from 'use-query-params';
 

frontend/src/css/lobby.css

@@ -1,16 +0,0 @@
-#centurion-title {
-    font-size: 3.5rem;
-    text-align: center;
-    min-height: inherit;
-}
-
-.hints {
-    font-size: 2rem;
-    text-align: center;
-}
-
-.control {
-    font-size: 1.3rem;
-    margin-top: 10em;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-}

frontend/src/css/lobby.sass

@@ -0,0 +1,14 @@
+#centurion-title
+    font-size: 3.5rem
+    text-align: center
+    min-height: inherit
+
+.hints 
+    font-size: 2rem
+    text-align: center
+
+
+.control 
+    font-size: 1.3rem
+    margin-top: 10em
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)

frontend/src/index.css

@@ -1,55 +0,0 @@
-@import '~antd/dist/antd.css';
-
-@font-face {
-  font-family: 'SourceSansPro';
-  src: local('SourceSansPro'), url(./SourceSansPro.otf) format('opentype');
-}
-
-:root {
-    --footer-height: 4.5em;
-    --content-height: calc(100vh - var(--footer-height));
-}
-
-body {
-    font-family: 'SourceSansPro', sans-serif;
-    background-color: #e5e5e5;
-}
-
-.feed {
-    max-height: var(--content-height);
-    overflow: hidden;
-    padding: 0.5em;
-}
-
-.feed-item {
-    background-color: whitesmoke;
-    padding: 0.5em;
-    margin-bottom: 1em;
-    min-height: 5em;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-    border-radius: 2px;
-}
-
-.content {
-    padding: 1rem;
-    height: var(--content-height)
-}
-
-.via-logo {
-    width: auto;
-    height: 4em;
-}
-
-.sider {
-    text-align: center;
-}
-
-h1 {
-    min-height: 3em;
-}
-
-footer {
-    border-top: 1px solid lightgray;
-    padding: 0.25em 0.5em;
-    height: 4.5em;
-}

frontend/src/index.sass

@@ -0,0 +1,53 @@
+@import '~antd/dist/antd.css'
+
+@font-face 
+  font-family: 'SourceSansPro'
+  src: local('SourceSansPro'), url('./SourceSansPro.otf') format('opentype')
+
+
+$footer-height: 4.5em
+$content-height: calc(100vh - $footer-height)
+
+
+body 
+    font-family: 'SourceSansPro', sans-serif
+    background-color: #e5e5e5
+
+
+.feed 
+    max-height: $content-height
+    overflow: hidden
+    padding: 0.5em
+
+
+.feed-item 
+    background-color: whitesmoke
+    padding: 0.5em
+    margin-bottom: 1em
+    min-height: 5em
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)
+    border-radius: 2px
+
+
+.content 
+    padding: 1rem
+    height: $content-height
+
+
+.via-logo 
+    width: auto
+    height: 4em
+
+
+.sider 
+    text-align: center
+
+
+h1 
+    min-height: 3em
+
+
+footer 
+    border-top: 1px solid lightgray
+    padding: 0.25em 0.5em
+    height: 4.5em

frontend/src/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+import './index.sass';
 
 import App from './App';