diff --git a/app/Dioxus.toml b/app/Dioxus.toml index 182899c..01eb18c 100644 --- a/app/Dioxus.toml +++ b/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] diff --git a/app/assets/favicon.ico b/app/assets/favicon.ico deleted file mode 100644 index eed0c09..0000000 Binary files a/app/assets/favicon.ico and /dev/null differ diff --git a/app/assets/header.svg b/app/assets/header.svg deleted file mode 100644 index 3581419..0000000 --- a/app/assets/header.svg +++ /dev/null @@ -1,171 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/app/assets/main.css b/app/assets/main.css deleted file mode 100644 index 0a59527..0000000 --- a/app/assets/main.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/app/assets/styles.css b/app/assets/styles.css new file mode 100644 index 0000000..0df9cb7 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/app/src/main.rs b/app/src/main.rs index ef61cf5..ad864d1 100644 --- a/app/src/main.rs +++ b/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);