sass

18 files changed, 572 insertions, 427 deletions

diff --git a/Cargo.lock b/Cargo.lock
index 798d24f..0969b40 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -225,6 +225,17 @@ dependencies = [
 
 [[package]]
 name = "ahash"
+version = "0.7.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fcb51a0695d8f838b1ee009b3fbf66bda078cd64590202a864a8f3e8c4315c47"
+dependencies = [
+ "getrandom 0.2.8",
+ "once_cell",
+ "version_check",
+]
+
+[[package]]
+name = "ahash"
 version = "0.8.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2c99f64d1e06488f620f932677e24bc6e2897582980441ae90a671415bd7ec2f"
@@ -268,6 +279,15 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "fc7eb209b1518d6bb87b283c20095f5228ecda460da70b44f0802523dea6da04"
 
 [[package]]
+name = "ansi_term"
+version = "0.12.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d52a9bb7ec0cf484c551830a7ce27bd20d67eac647e1befb56b0be4ee39a55d2"
+dependencies = [
+ "winapi",
+]
+
+[[package]]
 name = "anyhow"
 version = "1.0.69"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -555,6 +575,17 @@ dependencies = [
 ]
 
 [[package]]
+name = "atty"
+version = "0.2.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d9b39be18770d11421cdb1b9947a45dd3f37e93092cbf377614828a319d5fee8"
+dependencies = [
+ "hermit-abi 0.1.19",
+ "libc 0.2.139",
+ "winapi",
+]
+
+[[package]]
 name = "autocfg"
 version = "1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -810,6 +841,21 @@ dependencies = [
 
 [[package]]
 name = "clap"
+version = "2.34.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a0610544180c38b88101fecf2dd634b174a62eef6946f84dfc6a7127512b381c"
+dependencies = [
+ "ansi_term",
+ "atty",
+ "bitflags",
+ "strsim 0.8.0",
+ "textwrap",
+ "unicode-width",
+ "vec_map",
+]
+
+[[package]]
+name = "clap"
 version = "4.1.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ec0b0588d44d4d63a87dbd75c136c166bbfd9a86a31cb89e09906521c7d3f5e3"
@@ -819,7 +865,7 @@ dependencies = [
  "clap_lex",
  "is-terminal",
  "once_cell",
- "strsim",
+ "strsim 0.10.0",
  "termcolor",
 ]
 
@@ -878,6 +924,12 @@ dependencies = [
 ]
 
 [[package]]
+name = "codemap"
+version = "0.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b9e769b5c8c8283982a987c6e948e540254f1058d5a74b8794914d4ef5fc2a24"
+
+[[package]]
 name = "combine"
 version = "4.6.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -1133,7 +1185,7 @@ dependencies = [
  "ident_case",
  "proc-macro2",
  "quote",
- "strsim",
+ "strsim 0.10.0",
  "syn",
 ]
 
@@ -1358,7 +1410,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6412a21e0bde7c0918f7fb44bbbb86b5e1f88e63c026a4e747cc7af02f76dfbe"
 dependencies = [
  "accesskit",
- "ahash",
+ "ahash 0.8.3",
  "epaint",
  "nohash-hasher",
  "tracing",
@@ -1474,7 +1526,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "12e78b5c58a1f7f621f9d546add2adce20636422c9b251e29f749e8a2f713c95"
 dependencies = [
  "ab_glyph",
- "ahash",
+ "ahash 0.8.3",
  "atomic_refcell",
  "bytemuck",
  "ecolor",
@@ -1871,6 +1923,30 @@ dependencies = [
 ]
 
 [[package]]
+name = "grass"
+version = "0.12.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "85cc4b64880a2264a41f9eab431780e72a68a6c88b9bddef361ba638812d572e"
+dependencies = [
+ "clap 2.34.0",
+ "grass_compiler",
+]
+
+[[package]]
+name = "grass_compiler"
+version = "0.12.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8e4feeef87d958eebd4d55431040768b93a5b088202198e0b203adc3c1d468c6"
+dependencies = [
+ "codemap",
+ "indexmap",
+ "lasso",
+ "once_cell",
+ "phf",
+ "rand",
+]
+
+[[package]]
 name = "group"
 version = "0.12.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -1902,6 +1978,15 @@ dependencies = [
 
 [[package]]
 name = "hashbrown"
+version = "0.11.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ab5ef0d4909ef3724cc8cce6ccc8572c5c817592e9285f5464f8e86f8bd3726e"
+dependencies = [
+ "ahash 0.7.6",
+]
+
+[[package]]
+name = "hashbrown"
 version = "0.12.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8a9ee70c43aaf417c914396645a0fa852624801b24ebb7ae78fe8272889ac888"
@@ -1939,6 +2024,15 @@ checksum = "95505c38b4572b2d910cecb0281560f54b440a19336cbbcb27bf6ce6adc6f5a8"
 
 [[package]]
 name = "hermit-abi"
+version = "0.1.19"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "62b467343b94ba476dcb2500d242dadbb39557df889310ac77c5d99100aaac33"
+dependencies = [
+ "libc 0.2.139",
+]
+
+[[package]]
+name = "hermit-abi"
 version = "0.2.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ee512640fe35acbfb4bb779db6f0d80704c2cacfa2e39b601ef3e3f47d1ae4c7"
@@ -2111,7 +2205,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1885e79c1fc4b10f0e172c475f458b7f7b93061064d98c3293e98c5ba0c8b399"
 dependencies = [
  "autocfg",
- "hashbrown",
+ "hashbrown 0.12.3",
 ]
 
 [[package]]
@@ -2244,7 +2338,7 @@ version = "0.1.0"
 dependencies = [
  "anyhow",
  "async-std",
- "clap",
+ "clap 4.1.6",
  "client-native-lib",
  "crossbeam-channel",
  "eframe",
@@ -2261,7 +2355,7 @@ version = "0.1.0"
 dependencies = [
  "anyhow",
  "bytes",
- "clap",
+ "clap 4.1.6",
  "client-native-lib",
  "env_logger",
  "log",
@@ -2274,6 +2368,7 @@ version = "0.1.0"
 dependencies = [
  "env_logger",
  "futures-util",
+ "grass",
  "hyper",
  "include_dir",
  "listenfd",
@@ -2301,6 +2396,15 @@ dependencies = [
 ]
 
 [[package]]
+name = "lasso"
+version = "0.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "aeb7b21a526375c5ca55f1a6dfd4e1fad9fa4edd750f530252a718a44b2608f0"
+dependencies = [
+ "hashbrown 0.11.2",
+]
+
+[[package]]
 name = "lazy_static"
 version = "1.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -2390,7 +2494,7 @@ version = "0.0.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "62bb907fe88d54d8d9ce32a3cceab4218ed2f6b7d35617cafe9adf84e43919cb"
 dependencies = [
- "libc 0.1.12",
+ "libc 0.2.139",
 ]
 
 [[package]]
@@ -2844,6 +2948,50 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "478c572c3d73181ff3c2539045f6eb99e5491218eae919370993b890cdbdd98e"
 
 [[package]]
+name = "phf"
+version = "0.10.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fabbf1ead8a5bcbc20f5f8b939ee3f5b0f6f281b6ad3468b84656b658b455259"
+dependencies = [
+ "phf_macros",
+ "phf_shared",
+ "proc-macro-hack",
+]
+
+[[package]]
+name = "phf_generator"
+version = "0.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5d5285893bb5eb82e6aaf5d59ee909a06a16737a8970984dd7746ba9283498d6"
+dependencies = [
+ "phf_shared",
+ "rand",
+]
+
+[[package]]
+name = "phf_macros"
+version = "0.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "58fdf3184dd560f160dd73922bea2d5cd6e8f064bf4b13110abd81b03697b4e0"
+dependencies = [
+ "phf_generator",
+ "phf_shared",
+ "proc-macro-hack",
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "phf_shared"
+version = "0.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b6796ad771acdc0123d2a88dc428b5e38ef24456743ddb1744ed628f9815c096"
+dependencies = [
+ "siphasher",
+]
+
+[[package]]
 name = "pin-project"
 version = "1.0.12"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -2999,6 +3147,12 @@ dependencies = [
 ]
 
 [[package]]
+name = "proc-macro-hack"
+version = "0.5.20+deprecated"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dc375e1527247fe1a97d8b7156678dfe7c1af2fc075c9a4db3690ecd2a148068"
+
+[[package]]
 name = "proc-macro2"
 version = "1.0.51"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -3154,7 +3308,7 @@ name = "rift"
 version = "0.1.0"
 dependencies = [
  "bytes",
- "clap",
+ "clap 4.1.6",
  "client-native-lib",
  "env_logger",
  "humansize",
@@ -3538,6 +3692,12 @@ dependencies = [
 ]
 
 [[package]]
+name = "siphasher"
+version = "0.3.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7bd3e3206899af3f8b12af284fafc038cc1dc2b41d1b89dd17297221c5d225de"
+
+[[package]]
 name = "slab"
 version = "0.4.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
@@ -3636,6 +3796,12 @@ checksum = "9df65f20698aeed245efdde3628a6b559ea1239bbb871af1b6e3b58c413b2bd1"
 
 [[package]]
 name = "strsim"
+version = "0.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8ea5119cdb4c55b55d432abb513a0429384878c15dde60cc77b1c99de1a95a6a"
+
+[[package]]
+name = "strsim"
 version = "0.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "73473c0e59e6d5812c5dfe2a064a6444949f089e20eec9a2e5506596494e4623"
@@ -3721,6 +3887,15 @@ dependencies = [
 ]
 
 [[package]]
+name = "textwrap"
+version = "0.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d326610f408c7a4eb6f51c37c330e496b08506c9457c9d34287ecc38809fb060"
+dependencies = [
+ "unicode-width",
+]
+
+[[package]]
 name = "thiserror"
 version = "1.0.38"
 source = "registry+https://github.com/rust-lang/crates.io-index"
diff --git a/client-web/public/app.html b/client-web/public/app.html
index 66062d9..a6dc852 100644
--- a/client-web/public/app.html
+++ b/client-web/public/app.html
@@ -8,7 +8,7 @@
             content="A simple secure web conferencing application using webrtc"
         />
         <script async type="module" src="/assets/bundle.js"></script>
-        <link rel="stylesheet" href="/assets/style/master.css" />
+        <link rel="stylesheet" href="/style.css" />
         <title>keks-meet</title>
     </head>
     <body>
diff --git a/client-web/public/assets/style/chat.css b/client-web/public/assets/style/chat.css
deleted file mode 100644
index b4e1dbf..0000000
--- a/client-web/public/assets/style/chat.css
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
-    This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
-    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
-    Copyright (C) 2022 metamuffin <metamuffin@disroot.org>
-*/
-.chat {
-    position: fixed;
-    z-index: 70;
-
-    right: 1em;
-    bottom: 5em;
-
-    width: min(30em, 50vw);
-    height: min(50em, 70vh);
-
-    background-color: var(--bg);
-    border-radius: 1em;
-    padding: 2em;
-}
-
-.chat .message {
-    margin: 0.2em;
-}
-.chat .author {
-    font-weight: bold;
-}
-.chat .text {
-    color: white;
-}
-.chat .image {
-    width: min(20em, 30vw);
-    max-height: 50em; /* TODO squishes the image if too high */
-}
-
-.chat .messages {
-    height: calc(100% - 3em);
-    width: 100%;
-    overflow: scroll;
-}
-.chat .controls {
-    padding: 1em;
-}
-.chat input {
-    font-size: x-large;
-    width: 100%;
-}
diff --git a/client-web/public/assets/style/logger.css b/client-web/public/assets/style/logger.css
deleted file mode 100644
index 5e08ec9..0000000
--- a/client-web/public/assets/style/logger.css
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
-    This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
-    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
-    Copyright (C) 2022 metamuffin <metamuffin@disroot.org>
-*/
-.logger-container {
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    transition: width 1s;
-
-    background-color: rgba(0, 0, 0, 0.376);
-    border-radius: 0.2em;
-    border: 0px solid transparent;
-    padding: 0.2em;
-}
-
-.logger-error {
-    font-size: 1.5em !important;
-    color: red;
-}
-.logger-warn {
-    font-size: 1.5em !important;
-    color: yellow;
-}
-
-.logger-line {
-    font-size: 1em;
-    height: 1.2em;
-    font-family: monospace;
-    animation-name: appear;
-    animation-timing-function: linear;
-    animation-duration: 0.3s;
-    animation-fill-mode: forwards;
-}
-.logger-line-disappear {
-    animation-name: disappear;
-    animation-timing-function: linear;
-    animation-duration: 1s;
-    animation-fill-mode: forwards;
-}
-
-@keyframes appear {
-    from {
-        margin-top: -1.2em;
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes disappear {
-    from {
-        opacity: 1;
-    }
-    to {
-        margin-top: -1.2em;
-        opacity: 0;
-    }
-}
diff --git a/client-web/public/assets/style/master.css b/client-web/public/assets/style/master.css
deleted file mode 100644
index d4cdac8..0000000
--- a/client-web/public/assets/style/master.css
+++ /dev/null
@@ -1,168 +0,0 @@
-/*
-    This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
-    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
-    Copyright (C) 2022 metamuffin <metamuffin@disroot.org>
-*/
-@import url("../font/include.css");
-@import url("./logger.css");
-@import url("./chat.css");
-@import url("./room.css");
-@import url("./prefs.css");
-@import url("./menu.css");
-@import url("/overrides.css");
-
-* {
-    font-family: "Ubuntu", sans-serif;
-    color: white;
-    margin: 0px;
-    padding: 0px;
-}
-
-body.start {
-    background-image: linear-gradient(var(--ac-dark-transparent), black 150%),
-        url("./tile-backdrop.svg");
-    background-attachment: fixed;
-    background-size: cover, 750px;
-    background-color: var(--ac-dark);
-    position: absolute;
-    inset: 0;
-    display: flex;
-    place-content: center;
-    align-items: center;
-    overflow: hidden;
-}
-
-body {
-    font-weight: 300;
-    background-color: var(--bg-dark);
-    height: 100vh;
-    width: 100vw;
-    justify-content: left;
-}
-
-h1 {
-    text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75);
-    font-size: 5em;
-    font-weight: 700;
-    text-align: center;
-    margin-bottom: 0.1em;
-}
-
-input[type="button"],
-button {
-    padding: 0.5em;
-    margin: 0.25em;
-    background-color: var(--ac);
-    border: 0px solid transparent;
-    border-radius: 3px;
-}
-
-input[type="button"]:hover,
-button:hover {
-    filter: brightness(130%);
-}
-
-input[type="button"].active,
-button.active {
-    filter: hue-rotate(20deg);
-}
-
-input[type="text"],
-select,
-input[type="number"] {
-    background-color: var(--bg-dark);
-    border: 1px solid var(--ac-light);
-}
-
-input:disabled,
-button:disabled {
-    filter: sepia(90%);
-}
-
-.start-box {
-    text-align: center;
-    position: absolute;
-    max-width: 64em;
-}
-
-.instructions {
-    margin-bottom: 0.5em;
-    font-size: x-large;
-    color: #c5c5c5;
-    text-align: left;
-}
-
-.start-box input[type="text"] {
-    margin: 2em 0 1em 0;
-    width: 25em;
-    font-weight: 500;
-    color: whitesmoke;
-    border: 0.15em solid var(--ac);
-    background-color: rgba(0, 0, 0, 0.3);
-    backdrop-filter: blur(5px);
-    border-radius: 0.5em;
-    outline: none;
-}
-
-.start-box input[type="text"]:focus {
-    transition: 0.1s ease-out;
-    background-color: rgba(0, 0, 0, 0.5);
-    border-color: lightgray !important;
-}
-
-.start-box input[type="button"] {
-    margin: 1em 0 1em 0;
-    border-radius: 0.5em;
-    font-size: x-large;
-    width: 12em;
-    padding: 0.5em;
-    font-weight: 500;
-    color: white;
-    background-color: var(--ac);
-    backdrop-filter: blur(5px);
-    border: 0;
-    cursor: pointer;
-    border: 0.15em solid var(--ac);
-}
-
-.start-box .description {
-    margin-bottom: 1.5em;
-    font-size: x-large;
-    font-weight: bold;
-    text-align: center;
-}
-
-#room-id-input {
-    padding: 0.5em;
-    font-size: x-large;
-}
-
-@media (max-width: 1100px) {
-    .start-box {
-        max-width: 90%;
-    }
-    .start-box input[type="text"] {
-        width: 90%;
-    }
-}
-
-@media (max-width: 900px) and (max-height: 700px), (max-height: 550px) {
-    h1 {
-        font-size: 3em;
-        font-weight: 700;
-        text-align: center;
-    }
-    .instructions {
-        font-size: large;
-    }
-    .start-box .description {
-        font-size: large;
-    }
-    #room-id-input {
-        padding: 0.5em;
-        font-size: large;
-    }
-    .start-box input[type="button"] {
-        font-size: large;
-    }
-}
diff --git a/client-web/public/assets/style/menu.css b/client-web/public/assets/style/menu.css
deleted file mode 100644
index 73f7125..0000000
--- a/client-web/public/assets/style/menu.css
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
-    This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
-    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
-    Copyright (C) 2022 metamuffin <metamuffin@disroot.org>
-*/
-
-
-.bottom-menu {
-    background-color: var(--bg);
-    padding: 0.5em;
-    position: fixed;
-    bottom: 0.5em;
-    border: 0px solid transparent;
-    border-radius: 5px;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 100;
-}
-
-.menu-br {
-    position: fixed;
-    bottom: 0px;
-    right: 0px;
-    display: block;
-    text-align: right;
-}
-.menu-br .version {
-    font-size: medium;
-    font-weight: bold;
-    color: var(--ac-light);
-    padding: 0.5em;
-}
diff --git a/client-web/public/assets/style/prefs.css b/client-web/public/assets/style/prefs.css
deleted file mode 100644
index f31c4ca..0000000
--- a/client-web/public/assets/style/prefs.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
-    This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
-    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
-    Copyright (C) 2022 metamuffin <metamuffin@disroot.org>
-*/
-.prefs-overlay {
-    position: fixed;
-    z-index: 80;
-
-    left: 50%;
-    bottom: 5em;
-    transform: translateX(-50%);
-
-    width: min(50em, 80vw);
-    height: min(40em, 60vh);
-
-    background-color: var(--bg);
-    border-radius: 1em;
-    padding: 2em;
-    overflow-y: auto;
-}
diff --git a/client-web/public/assets/style/room.css b/client-web/public/assets/style/room.css
deleted file mode 100644
index ad84325..0000000
--- a/client-web/public/assets/style/room.css
+++ /dev/null
@@ -1,75 +0,0 @@
-/*
-    This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
-    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
-    Copyright (C) 2022 metamuffin <metamuffin@disroot.org>
-*/
-.room {
-    overflow-y: scroll;
-}
-
-.user {
-    background-color: var(--bg);
-    border: 0px solid transparent;
-    border-radius: 5px;
-    padding: 1em;
-    margin: 0.5em;
-    vertical-align: top;
-    min-width: fit-content;
-    height: 13em;
-    display: inline-block;
-    position: relative;
-}
-
-.user .info .name {
-    font-weight: 400;
-}
-
-.user.local .info .name {
-    text-decoration: underline;
-}
-
-.user .info {
-    margin-bottom: 1em;
-}
-
-.user .resource {
-    display: inline-block;
-    vertical-align: top;
-}
-
-.media {
-    max-height: 9em;
-    border: 0px solid transparent;
-    border-radius: 5px;
-}
-
-.local-controls {
-    display: inline;
-}
-
-.local-controls::before {
-    content: "|";
-}
-
-.transfer-status {
-    background-color: #00000040;
-}
-
-.progress-bar {
-    z-index: -1;
-    padding: 0px;
-    margin: 0px;
-    height: 6px;
-    border-radius: 3px;
-    background-color: var(--ac-light);
-}
-
-
-.resource-track>div {
-    border: 2px solid transparent;
-    border-radius: 4px;
-}
-
-.resource-track>div.audio-active {
-    border: 2px solid var(--ac-light);
-}
diff --git a/client-web/public/assets/style/tile-backdrop.svg b/client-web/public/assets/tile-backdrop.svg
index 15ea791..15ea791 100644
--- a/client-web/public/assets/style/tile-backdrop.svg
+++ b/client-web/public/assets/tile-backdrop.svg
diff --git a/client-web/public/start.html b/client-web/public/start.html
index 42c8799..e15fc47 100644
--- a/client-web/public/start.html
+++ b/client-web/public/start.html
@@ -3,15 +3,20 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <meta name="description" content="A simple secure web conferencing application using webrtc">
-        <link rel="stylesheet" href="/assets/style/master.css" />
+        <meta
+            name="description"
+            content="A simple secure web conferencing application using webrtc"
+        />
+        <link rel="stylesheet" href="/style.css" />
         <title>keks-meet</title>
     </head>
     <body class="start">
         <div class="start-box">
             <h1>keks-meet</h1>
-            <p class="description">A simple secure conferencing application using webrtc</p>
-            <br>
+            <p class="description">
+                A simple secure conferencing application using webrtc
+            </p>
+            <br />
             <p class="instructions">
                 To get started, click 'Join' and share the URL with your
                 partner. You can also optionally customize the URL by entering a
@@ -28,7 +33,9 @@
             </noscript>
             <script>
                 function random_room() {
-                    const random = window.crypto.getRandomValues(new Uint8Array(32));
+                    const random = window.crypto.getRandomValues(
+                        new Uint8Array(32)
+                    );
                     return Array.from(random)
                         .map((b) => b.toString(16).padStart(2, "0"))
                         .join("");
@@ -38,7 +45,7 @@
                 room_input.type = "text";
                 room_input.id = "room-id-input";
                 room_input.placeholder = `Override room name: ${random_room()}`;
-                room_input.ariaLabel = "Room Secret"
+                room_input.ariaLabel = "Room Secret";
 
                 const submit = document.createElement("input");
                 submit.type = "button";
diff --git a/client-web/style/chat.sass b/client-web/style/chat.sass
new file mode 100644
index 0000000..b877333
--- /dev/null
+++ b/client-web/style/chat.sass
@@ -0,0 +1,38 @@
+/*
+ This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
+ which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+ Copyright (C) 2023 metamuffin <metamuffin@disroot.org>
+
+.chat
+    position: fixed
+    z-index: 70
+
+    right: 1em
+    bottom: 5em
+
+    width: min(30em, 50vw)
+    height: min(50em, 70vh)
+
+    background-color: var(--bg)
+    border-radius: 1em
+    padding: 2em
+
+    .message
+        margin: 0.2em
+    .author
+        font-weight: bold
+    .text
+        color: white
+    .image
+        width: min(20em, 30vw)
+        max-height: 50em // TODO squishes the image if too high
+
+    .messages
+        height: calc(100% - 3em)
+        width: 100%
+        overflow: scroll
+    .controls
+        padding: 1em
+    input
+        font-size: x-large
+        width: 100%
diff --git a/client-web/style/logger.sass b/client-web/style/logger.sass
new file mode 100644
index 0000000..d5e80c8
--- /dev/null
+++ b/client-web/style/logger.sass
@@ -0,0 +1,54 @@
+/*
+ This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
+ which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+ Copyright (C) 2023 metamuffin <metamuffin@disroot.org>
+
+.logger-container
+    position: absolute
+    top: 0px
+    right: 0px
+    transition: width 1s
+
+    background-color: rgba(0, 0, 0, 0.376)
+    border-radius: 0.2em
+    border: 0px solid transparent
+    padding: 0.2em
+
+.logger-error
+    font-size: 1.5em !important
+    color: red
+
+.logger-warn
+    font-size: 1.5em !important
+    color: yellow
+
+.logger-line
+    font-size: 1em
+    height: 1.2em
+    font-family: monospace
+    animation-name: appear
+    animation-timing-function: linear
+    animation-duration: 0.3s
+    animation-fill-mode: forwards
+
+.logger-line-disappear
+    animation-name: disappear
+    animation-timing-function: linear
+    animation-duration: 1s
+    animation-fill-mode: forwards
+
+@keyframes appear
+    from
+        margin-top: -1.2em
+        opacity: 0
+
+    to
+        opacity: 1
+
+@keyframes disappear
+    from
+        opacity: 1
+
+    to
+        margin-top: -1.2em
+        opacity: 0
diff --git a/client-web/style/master.sass b/client-web/style/master.sass
new file mode 100644
index 0000000..5ca6028
--- /dev/null
+++ b/client-web/style/master.sass
@@ -0,0 +1,148 @@
+/*
+ This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
+ which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+ Copyright (C) 2023 metamuffin <metamuffin@disroot.org>
+
+@use 'chat'
+@use 'logger'
+@use 'room'
+@use 'prefs'
+@use 'menu'
+
+@import url("/assets/font/include.css")
+@import url("/overrides.css")
+
+*
+    font-family: "Ubuntu", sans-serif
+    color: white
+    margin: 0px
+    padding: 0px
+
+body.start
+    background-image: linear-gradient(var(--ac-dark-transparent), black 150%), url("/assets/tile-backdrop.svg")
+    background-attachment: fixed
+    background-size: cover, 750px
+    background-color: var(--ac-dark)
+    position: absolute
+    inset: 0
+    display: flex
+    place-content: center
+    align-items: center
+    overflow: hidden
+
+body
+    font-weight: 300
+    background-color: var(--bg-dark)
+    height: 100vh
+    width: 100vw
+    justify-content: left
+
+h1
+    text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75)
+    font-size: 5em
+    font-weight: 700
+    text-align: center
+    margin-bottom: 0.1em
+
+input[type="button"],
+button
+    padding: 0.5em
+    margin: 0.25em
+    background-color: var(--ac)
+    border: 0px solid transparent
+    border-radius: 3px
+
+input[type="button"]:hover,
+button:hover
+    filter: brightness(130%)
+
+input[type="button"].active,
+button.active
+    filter: hue-rotate(20deg)
+
+input[type="text"],
+select,
+input[type="number"]
+    background-color: var(--bg-dark)
+    border: 1px solid var(--ac-light)
+
+input:disabled,
+button:disabled
+    filter: sepia(90%)
+
+.start-box
+    text-align: center
+    position: absolute
+    max-width: 64em
+
+.instructions
+    margin-bottom: 0.5em
+    font-size: x-large
+    color: #c5c5c5
+    text-align: left
+
+.start-box input[type="text"]
+    margin: 2em 0 1em 0
+    width: 25em
+    font-weight: 500
+    color: whitesmoke
+    border: 0.15em solid var(--ac)
+    background-color: rgba(0, 0, 0, 0.3)
+    backdrop-filter: blur(5px)
+    border-radius: 0.5em
+    outline: none
+
+.start-box input[type="text"]:focus
+    transition: 0.1s ease-out
+    background-color: rgba(0, 0, 0, 0.5)
+    border-color: lightgray !important
+
+.start-box input[type="button"]
+    margin: 1em 0 1em 0
+    border-radius: 0.5em
+    font-size: x-large
+    width: 12em
+    padding: 0.5em
+    font-weight: 500
+    color: white
+    background-color: var(--ac)
+    backdrop-filter: blur(5px)
+    border: 0
+    cursor: pointer
+    border: 0.15em solid var(--ac)
+
+.start-box .description
+    margin-bottom: 1.5em
+    font-size: x-large
+    font-weight: bold
+    text-align: center
+
+#room-id-input
+    padding: 0.5em
+    font-size: x-large
+
+@media (max-width: 1100px)
+    .start-box
+        max-width: 90%
+
+    .start-box input[type="text"]
+        width: 90%
+
+@media (max-width: 900px) and (max-height: 700px), (max-height: 550px)
+    h1
+        font-size: 3em
+        font-weight: 700
+        text-align: center
+
+    .instructions
+        font-size: large
+
+    .start-box .description
+        font-size: large
+
+    #room-id-input
+        padding: 0.5em
+        font-size: large
+
+    .start-box input[type="button"]
+        font-size: large
diff --git a/client-web/style/menu.sass b/client-web/style/menu.sass
new file mode 100644
index 0000000..ec1c35c
--- /dev/null
+++ b/client-web/style/menu.sass
@@ -0,0 +1,29 @@
+/*
+ This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
+ which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+ Copyright (C) 2023 metamuffin <metamuffin@disroot.org>
+
+
+.bottom-menu
+    background-color: var(--bg)
+    padding: 0.5em
+    position: fixed
+    bottom: 0.5em
+    border: 0px solid transparent
+    border-radius: 5px
+    left: 50%
+    transform: translateX(-50%)
+    z-index: 100
+
+.menu-br
+    position: fixed
+    bottom: 0px
+    right: 0px
+    display: block
+    text-align: right
+
+.menu-br .version
+    font-size: medium
+    font-weight: bold
+    color: var(--ac-light)
+    padding: 0.5em
diff --git a/client-web/style/prefs.sass b/client-web/style/prefs.sass
new file mode 100644
index 0000000..07a18b9
--- /dev/null
+++ b/client-web/style/prefs.sass
@@ -0,0 +1,20 @@
+/*
+ This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
+ which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+ Copyright (C) 2023 metamuffin <metamuffin@disroot.org>
+
+.prefs-overlay
+    position: fixed
+    z-index: 80
+
+    left: 50%
+    bottom: 5em
+    transform: translateX(-50%)
+
+    width: min(50em, 80vw)
+    height: min(40em, 60vh)
+
+    background-color: var(--bg)
+    border-radius: 1em
+    padding: 2em
+    overflow-y: auto
diff --git a/client-web/style/room.sass b/client-web/style/room.sass
new file mode 100644
index 0000000..0c6d8d7
--- /dev/null
+++ b/client-web/style/room.sass
@@ -0,0 +1,61 @@
+/*
+ This file is part of keks-meet (https://codeberg.org/metamuffin/keks-meet)
+ which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+ Copyright (C) 2023 metamuffin <metamuffin@disroot.org>
+
+.room
+    overflow-y: scroll
+
+.user
+    background-color: var(--bg)
+    border: 0px solid transparent
+    border-radius: 5px
+    padding: 1em
+    margin: 0.5em
+    vertical-align: top
+    min-width: fit-content
+    height: 13em
+    display: inline-block
+    position: relative
+
+.user .info .name
+    font-weight: 400
+
+.user.local .info .name
+    text-decoration: underline
+
+.user .info
+    margin-bottom: 1em
+
+.user .resource
+    display: inline-block
+    vertical-align: top
+
+.media
+    max-height: 9em
+    border: 0px solid transparent
+    border-radius: 5px
+
+.local-controls
+    display: inline
+
+.local-controls::before
+    content: "|"
+
+.transfer-status
+    background-color: #00000040
+
+.progress-bar
+    z-index: -1
+    padding: 0px
+    margin: 0px
+    height: 6px
+    border-radius: 3px
+    background-color: var(--ac-light)
+
+.resource-track>div
+    border: 2px solid transparent
+    border-radius: 4px
+
+.resource-track>div.audio-active
+    border: 2px solid var(--ac-light)
diff --git a/server/Cargo.toml b/server/Cargo.toml
index 22413a2..b0fb111 100644
--- a/server/Cargo.toml
+++ b/server/Cargo.toml
@@ -15,7 +15,4 @@ serde = { version = "1.0.152", features = ["derive"] }
 serde_json = "1.0.93"
 include_dir = "0.7.3"
 toml = "0.7.2"
-
-[features]
-default = []
-standalone = []
+grass = "0.12.4"
diff --git a/server/src/assets.rs b/server/src/assets.rs
index 51b0025..6047164 100644
--- a/server/src/assets.rs
+++ b/server/src/assets.rs
@@ -1,4 +1,9 @@
-#[cfg(not(feature = "standalone"))]
+use std::fs::read_to_string;
+
+use grass::StdFs;
+use log::error;
+
+#[cfg(debug_assertions)]
 #[macro_export]
 macro_rules! s_file {
     ($path: literal, $content_type: literal) => {
@@ -6,7 +11,7 @@ macro_rules! s_file {
     };
 }
 
-#[cfg(not(feature = "standalone"))]
+#[cfg(debug_assertions)]
 #[macro_export]
 macro_rules! s_asset_dir {
     () => {
@@ -14,7 +19,7 @@ macro_rules! s_asset_dir {
     };
 }
 
-#[cfg(feature = "standalone")]
+#[cfg(not(debug_assertions))]
 #[macro_export]
 macro_rules! s_file {
     ($path: literal, $content_type: literal) => {
@@ -28,7 +33,7 @@ macro_rules! s_file {
     };
 }
 
-#[cfg(feature = "standalone")]
+#[cfg(not(debug_assertions))]
 #[macro_export]
 macro_rules! s_asset_dir {
     () => {{
@@ -49,3 +54,17 @@ macro_rules! s_asset_dir {
         })
     }};
 }
+
+pub fn css_bundle() -> String {
+    grass::from_string(
+        read_to_string("../client-web/style/master.sass").unwrap(),
+        &grass::Options::default()
+            .input_syntax(grass::InputSyntax::Sass)
+            .load_path("../client-web/style")
+            .fs(&StdFs),
+    )
+    .unwrap_or_else(|err| {
+        error!("sass compile failed: {err}");
+        String::from("/* sass compile failed */")
+    })
+}