Cleanup assets and copy over old styles and title

app/Dioxus.toml

@@ -6,7 +6,7 @@ name = "app"
 [web.app]
 
 # HTML title tag content
-title = "app"
+title = "Band Sessions"
 
 # include `assets` in web platform
 [web.resource]

app/assets/main.css

@@ -1,107 +0,0 @@
-/* App-wide styling */
-body {
-    background-color: #0f1116;
-    color: #ffffff;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    margin: 20px;
-}
-
-#hero {
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-#links {
-    width: 400px;
-    text-align: left;
-    font-size: x-large;
-    color: white;
-    display: flex;
-    flex-direction: column;
-}
-
-#links a {
-    color: white;
-    text-decoration: none;
-    margin-top: 20px;
-    margin: 10px 0px;
-    border: white 1px solid;
-    border-radius: 5px;
-    padding: 10px;
-}
-
-#links a:hover {
-    background-color: #1f1f1f;
-    cursor: pointer;
-}
-
-#header {
-    max-width: 1200px;
-}
-
-/* Navbar */
-#navbar {
-    display: flex;
-    flex-direction: row;
-}
-
-#navbar a {
-    color: #ffffff;
-    margin-right: 20px;
-    text-decoration: none;
-    transition: color 0.2s ease;
-}
-
-#navbar a:hover {
-    cursor: pointer;
-    color: #91a4d2;
-}
-
-/* Blog page */
-#blog {
-    margin-top: 50px;
-}
-
-#blog a {
-    color: #ffffff;
-    margin-top: 50px;
-}
-
-/* Echo */
-#echo {
-    width: 360px;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 50px;
-    background-color: #1e222d;
-    padding: 20px;
-    border-radius: 10px;
-}
-
-#echo > h4 {
-    margin: 0px 0px 15px 0px;
-}
-
-
-#echo > input {
-    border: none;
-    border-bottom: 1px white solid;
-    background-color: transparent;
-    color: #ffffff;
-    transition: border-bottom-color 0.2s ease;
-    outline: none;
-    display: block;
-    padding: 0px 0px 5px 0px;
-    width: 100%;
-}
-
-#echo > input:focus {
-    border-bottom-color: #6d85c6;
-}
-
-#echo > p {
-    margin: 20px 0px 0px auto;
-}

app/assets/styles.css

@@ -0,0 +1,112 @@
+:root {
+    --darkred: darkred;
+    --darkgreen: #196e0a;
+    --darkgray: #292929;
+    --gray: #606060;
+    --white: white;
+    --black: black;
+    --red: red;
+    --yellow: #bbbb11;
+    --green: #1fd51f;
+}
+
+ul {
+    list-style-position: inside;
+}
+
+body {
+    font-size: 2rem;
+}
+
+html, body {
+    margin: 0;
+    padding: 0;
+}
+
+p {
+    margin: 0;
+}
+
+@media screen and (max-width: 1000px) {
+    body {
+        font-size: 3rem;
+    }
+}
+
+.background {
+    background-color: var(--darkgray);
+    color: var(--white);
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    overflow: scroll;
+}
+
+.column {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.box {
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto;
+    width: 80%;
+    max-width: 800px;
+    box-sizing: border-box;
+}
+
+.wide {
+    width: 100%;
+    max-width: 1000px;
+}
+
+.button {
+    cursor: pointer;
+}
+
+.button:hover {
+    filter: brightness(1.2);
+}
+
+.elem-background {
+    background-color: var(--darkgreen);
+}
+
+.error-background {
+    background-color: var(--darkred);
+}
+
+.highlight-background {
+    background-color: var(--green);
+}
+
+.cancel-background {
+    background-color: var(--red);
+}
+
+.change-background {
+    background-color: var(--yellow);
+}
+
+.small-text {
+    color: var(--darkgray);
+    font-size: 1rem;
+    text-align: left;
+}
+
+.strikethrough {
+    text-decoration: line-through;
+}
+
+.bold {
+    font-weight: bold;
+}

app/src/main.rs

@@ -1,6 +1,6 @@
 use dioxus::prelude::*;
 
-const MAIN_CSS: Asset = asset!("/assets/main.css");
+const MAIN_CSS: Asset = asset!("/assets/styles.css");
 
 fn main() {
   launch(App);