From 7109b3435d61e8ec1bc8f69fdf7e9d53276200cc Mon Sep 17 00:00:00 2001 From: ElnuDev Date: Fri, 28 Mar 2025 18:30:01 -0700 Subject: [PATCH] UI refresh --- tegakituesday/src/utils/furigana.rs | 4 ++ tegakituesday/styles/sass/_theme.sass | 6 +-- tegakituesday/styles/sass/challenge.sass | 56 +++++++++++++++++++-- tegakituesday/styles/sass/general.sass | 37 ++++++++++++-- tegakituesday/styles/sass/nav.sass | 11 ++-- tegakituesday/styles/sass/style.sass | 7 ++- tegakituesday/styles/sass/submissions.sass | 9 +++- tegakituesday/templates/base.html.tera | 8 ++- tegakituesday/templates/challenge.html.tera | 22 +++++++- tegakituesday/templates/user.html.tera | 3 +- 10 files changed, 140 insertions(+), 23 deletions(-) diff --git a/tegakituesday/src/utils/furigana.rs b/tegakituesday/src/utils/furigana.rs index 5000e30..8d40838 100644 --- a/tegakituesday/src/utils/furigana.rs +++ b/tegakituesday/src/utils/furigana.rs @@ -11,6 +11,10 @@ pub fn furigana_to_html(text: &str) -> String { // so { needs to be escaped as \{ // Curly brace literals \{ need to have their backslash escaped as \\{ // TODO: Modify so only wraps continuous sections of furigana + if text.trim().is_empty() { + // Don't return empty if text is empty + return String::new(); + } let re = Regex::new(r"\[([^\]]*)\]\{([^\\}]*)}").unwrap(); format!( "{}", diff --git a/tegakituesday/styles/sass/_theme.sass b/tegakituesday/styles/sass/_theme.sass index 95cb219..b9a880b 100644 --- a/tegakituesday/styles/sass/_theme.sass +++ b/tegakituesday/styles/sass/_theme.sass @@ -1,5 +1,5 @@ @use "sass:color" -$bg: #FFFDF3 -$bg0: #{color.adjust($bg, $lightness: -5%, $hue: -7deg, $saturation: -50%)} -$fg: #011627 \ No newline at end of file +$bg: #fefdfa +$bg0: #fefefa +$fg: #1a1110 \ No newline at end of file diff --git a/tegakituesday/styles/sass/challenge.sass b/tegakituesday/styles/sass/challenge.sass index 1079059..1ff8042 100644 --- a/tegakituesday/styles/sass/challenge.sass +++ b/tegakituesday/styles/sass/challenge.sass @@ -1,6 +1,38 @@ -#challenge - padding: 1em +@use "_theme" as * +$wave: 10px +$wave_scale: 2 + +#challenge + box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.125) + z-index: 1 + background: #3f313a + + iframe + background: black + width: 100% + aspect-ratio: 16/9 + margin: 0 + + #challenge-description, footer + padding: 1em + + #challenge-content + padding: 1em + padding-top: calc(1em - $wave) + padding-bottom: calc(1em - $wave) + font-size: 1.25em + $shadow: #1a1110 + $shadow-size: 1px + text-shadow: calc(-1 * $shadow-size) calc(-1 * $shadow-size) 0 $shadow, calc(-1 * $shadow-size) 0px 0 $shadow, calc(-1 * $shadow-size) $shadow-size 0 $shadow, 0px $shadow-size 0 $shadow, $shadow-size $shadow-size 0 $shadow, $shadow-size 0px 0 $shadow, $shadow-size calc(-1 * $shadow-size) 0 $shadow, 0px calc(-1 * $shadow-size) 0 $shadow; + background: #23191e + + p + margin: 0 + + a:hover + text-decoration: none + border-bottom: 3px solid a &.noun color: #a6e3a1 @@ -18,4 +50,22 @@ a color: #f9e2af &.phrase - color: #fab387 \ No newline at end of file + color: #fab387 + +.wave + --size: #{$wave} + --R: calc(var(--size)*1.28) + + mask: radial-gradient(var(--R) at 50% calc(1.8*var(--size)),#000 99%,#0000 101%) calc(50% - 2*var(--size)) 0/calc(4*var(--size)) 100%, radial-gradient(var(--R) at 50% calc(-.8*var(--size)),#0000 99%,#000 101%) 50% var(--size)/calc(4*var(--size)) 100% repeat-x + background: #23191e + $height: calc($wave * 2) + height: $height + flex-shrink: 0 + + &.wave-bottom + transform: scaleY(-1) scaleX($wave_scale) + + &.wave-top + transform: scaleX($wave_scale) translateX($wave * $wave_scale) + margin-top: -$height + pointer-events: none \ No newline at end of file diff --git a/tegakituesday/styles/sass/general.sass b/tegakituesday/styles/sass/general.sass index 575ab4e..b37bd44 100644 --- a/tegakituesday/styles/sass/general.sass +++ b/tegakituesday/styles/sass/general.sass @@ -12,10 +12,13 @@ body height: 100vh box-sizing: border-box padding: 2em - background: $bg0 - color: var(--fg) + background: #2b2028 + color: var(--bg) font-size: 1.25em +b, strong + color: white + input[type=number] background: var(--bg) color: var(--fg) @@ -27,6 +30,7 @@ input[type=number] appearance: textfield a + color: #9fe2bf text-decoration: none &:hover @@ -38,5 +42,30 @@ a h1 text-align: center - &:first-child - margin-top: 0 \ No newline at end of file +:first-child + margin-top: 0 + + margin-bottom: 0 + +.avatar + border-radius: 100% + display: inline + height: 2em + vertical-align: middle + background: #5e595d + +button + border: none + color: inherit + font: inherit + background: #3f313a + border: 3px solid #1a1110 + border-radius: 0.25em + box-shadow: 0px 2px #1a1110 + cursor: pointer + + &:active + box-shadow: none + transform: translateY(2px) + background: transparent + color: #3f313a \ No newline at end of file diff --git a/tegakituesday/styles/sass/nav.sass b/tegakituesday/styles/sass/nav.sass index cfb7094..112449d 100644 --- a/tegakituesday/styles/sass/nav.sass +++ b/tegakituesday/styles/sass/nav.sass @@ -5,8 +5,10 @@ nav --fg: #{$bg} background: var(--bg) color: var(--fg) - box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.125) + box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.5) display: flex + align-items: center + z-index: 2 .dropdown position: relative @@ -51,5 +53,8 @@ nav cursor: pointer .icon - height: 1.5em - vertical-align: middle \ No newline at end of file + height: 1em + vertical-align: middle + +nav .icon + height: 1.5em \ No newline at end of file diff --git a/tegakituesday/styles/sass/style.sass b/tegakituesday/styles/sass/style.sass index d5b6e66..d8f751e 100644 --- a/tegakituesday/styles/sass/style.sass +++ b/tegakituesday/styles/sass/style.sass @@ -10,7 +10,6 @@ background: var(--bg) box-shadow: 0 0 16px rgba(0, 0, 0, 0.125) border: none - border-radius: 4px #content width: 100% @@ -19,7 +18,7 @@ grid-template-areas: "nav nav" "challenge submissions" grid-template-columns: 30em auto grid-template-rows: min-content auto - overflow: hidden + border: 4px solid $fg #nav grid-area: nav @@ -31,10 +30,10 @@ grid-area: submissions #challenge, #submissions - overflow: scroll + overflow-x: hidden; + overflow-y: scroll display: flex flex-direction: column - gap: 1em footer margin-top: auto diff --git a/tegakituesday/styles/sass/submissions.sass b/tegakituesday/styles/sass/submissions.sass index fd6c065..35df2fe 100644 --- a/tegakituesday/styles/sass/submissions.sass +++ b/tegakituesday/styles/sass/submissions.sass @@ -1,6 +1,8 @@ +@use "_theme" as * + #submissions + background: #3f313a grid-area: submissions - background: rgba(0, 0, 0, 0.125) padding: 1em & > div @@ -13,7 +15,9 @@ gap: $gap & > figure - background: rgba(0, 0, 0, 0.125) + background: #5c4f57 + box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.125) + border-radius: 0.5em padding: $gap width: 100% box-sizing: border-box @@ -23,6 +27,7 @@ text-align: center & > img + border-radius: 0.5em width: 100% cursor: pointer diff --git a/tegakituesday/templates/base.html.tera b/tegakituesday/templates/base.html.tera index 81d19b8..3760fcb 100644 --- a/tegakituesday/templates/base.html.tera +++ b/tegakituesday/templates/base.html.tera @@ -16,7 +16,7 @@
-
{% block content %}{% endblock %}
+ {% block content %}{% endblock %}