From 1aecdf33332179e207d306cc452ea4bca0131897 Mon Sep 17 00:00:00 2001 From: ElnuDev Date: Thu, 6 Jul 2023 12:56:54 -0700 Subject: [PATCH] Start reorganizing styles --- styles/sass/README.md | 7 + styles/sass/_theme.sass | 5 + styles/sass/challenge.sass | 21 +++ styles/sass/general.sass | 42 ++++++ styles/sass/nav.sass | 55 ++++++++ styles/sass/servers.sass | 62 +++++++++ styles/sass/style.sass | 263 ++++------------------------------- styles/sass/submissions.sass | 31 +++++ templates/base.html.tera | 2 +- templates/nav.html.tera | 4 +- 10 files changed, 256 insertions(+), 236 deletions(-) create mode 100644 styles/sass/README.md create mode 100644 styles/sass/_theme.sass create mode 100644 styles/sass/challenge.sass create mode 100644 styles/sass/general.sass create mode 100644 styles/sass/nav.sass create mode 100644 styles/sass/servers.sass create mode 100644 styles/sass/submissions.sass diff --git a/styles/sass/README.md b/styles/sass/README.md new file mode 100644 index 0000000..57672c1 --- /dev/null +++ b/styles/sass/README.md @@ -0,0 +1,7 @@ +To watch for changes, run the following: + +```SH +sass --watch style.sass:../css/style.css +``` + +Assuming the direnv environment is activate, dart-sass should already be installed. \ No newline at end of file diff --git a/styles/sass/_theme.sass b/styles/sass/_theme.sass new file mode 100644 index 0000000..95cb219 --- /dev/null +++ b/styles/sass/_theme.sass @@ -0,0 +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 diff --git a/styles/sass/challenge.sass b/styles/sass/challenge.sass new file mode 100644 index 0000000..1079059 --- /dev/null +++ b/styles/sass/challenge.sass @@ -0,0 +1,21 @@ +#challenge + padding: 1em + +a + &.noun + color: #a6e3a1 + + &.adjective + color: #f38ba8 + + &.verb + color: #87b0f9 + + &.adverb + color: #94e2d5 + + &.particle + color: #f9e2af + + &.phrase + color: #fab387 \ No newline at end of file diff --git a/styles/sass/general.sass b/styles/sass/general.sass new file mode 100644 index 0000000..575ab4e --- /dev/null +++ b/styles/sass/general.sass @@ -0,0 +1,42 @@ +@use "_theme" as * + +:root + --bg: #{$bg} + --fg: #{$fg} + +body + font-family: 'Nunito', 'K Gothic', sans-serif + margin: 0 + display: flex + width: 100% + height: 100vh + box-sizing: border-box + padding: 2em + background: $bg0 + color: var(--fg) + font-size: 1.25em + +input[type=number] + background: var(--bg) + color: var(--fg) + border: none + outline: none + font: inherit + text-align: center + width: 4em + appearance: textfield + +a + text-decoration: none + + &:hover + text-decoration: underline + text-decoration-thickness: 2px + text-decoration-skip-ink: none + text-underline-offset: 4px + +h1 + text-align: center + + &:first-child + margin-top: 0 \ No newline at end of file diff --git a/styles/sass/nav.sass b/styles/sass/nav.sass new file mode 100644 index 0000000..cfb7094 --- /dev/null +++ b/styles/sass/nav.sass @@ -0,0 +1,55 @@ +@use "_theme" as * + +nav + --bg: #{$fg} + --fg: #{$bg} + background: var(--bg) + color: var(--fg) + box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.125) + display: flex + + .dropdown + position: relative + display: flex + padding: 0 + + .dropdown-content + flex-direction: column + position: absolute + top: 100% + right: 0 + min-width: 100% + + &:not(:hover) .dropdown-content + display: none !important + + & > *, .dropdown .link + padding: 0.45em + + & > * + vertical-align: middle + + .link + color: var(--fg) + font-weight: bold + white-space: nowrap + + a.link + text-decoration: none + + & > .right + margin-left: auto + + img + height: 32px + border-radius: 100% + +.dropdown:hover > .link, nav > .link:hover + --fg: #{$fg} + --bg: #{$bg} + background: var(--bg) + cursor: pointer + +.icon + height: 1.5em + vertical-align: middle \ No newline at end of file diff --git a/styles/sass/servers.sass b/styles/sass/servers.sass new file mode 100644 index 0000000..82ac11f --- /dev/null +++ b/styles/sass/servers.sass @@ -0,0 +1,62 @@ +.servers + display: flex + gap: 0.5em + + & > :not(.recommended) + // To match the missing recommended label + padding-bottom: 1em + + & > * + display: flex + flex-direction: column + gap: 0.5em + border: 2px solid + border-radius: 0.5em + padding: 0.5em + width: 100% + align-items: center + text-align: center + + img + width: 96px + border-radius: 100% + border: 2px solid + + .name + display: flex + flex-grow: 1 + align-items: center + + .joinButton + display: inline + background: seagreen + color: white + font: inherit + font-weight: bold + border: none + outline: none + padding: 0.25em 0.5em 0.25em 0.5em + border-radius: 2px + + &:disabled, &.disabled + background: gray + + .recommended + border-color: mediumseagreen + + .label-wrapper + height: 0 + + .label + position: relative + width: fit-content + border: auto + bottom: 0px + background: mediumseagreen + color: white + font-weight: bold + font-size: 0.75em + text-transform: uppercase + padding: 0 0.5em 0 0.5em + border-radius: 2px + user-select: none \ No newline at end of file diff --git a/styles/sass/style.sass b/styles/sass/style.sass index c06d2be..d5b6e66 100644 --- a/styles/sass/style.sass +++ b/styles/sass/style.sass @@ -1,244 +1,41 @@ -@use "sass:color" +@use "_theme" as * -$bg: #FFFDF3 -$bg0: #{color.adjust($bg, $lightness: -5%, $hue: -7deg, $saturation: -50%)} -$fg: #011627 - -:root - --bg: #{$bg} - --fg: #{$fg} - -body - font-family: 'Nunito', 'K Gothic', sans-serif - margin: 0 - display: flex - width: 100% - height: 100vh - box-sizing: border-box - padding: 2em - background: $bg0 - color: var(--fg) - font-size: 1.25em +@use "general" +@use "servers" +@use "nav" +@use "challenge" +@use "submissions" #content, dialog - background: var(--bg) - box-shadow: 0 0 16px rgba(0, 0, 0, 0.125) - border: none - border-radius: 4px - -input[type=number] - background: var(--bg) - color: var(--fg) - border: none - outline: none - font: inherit - text-align: center - width: 4em - appearance: textfield + background: var(--bg) + box-shadow: 0 0 16px rgba(0, 0, 0, 0.125) + border: none + border-radius: 4px #content - width: 100% - height: 100% - display: grid - grid-template-areas: "nav nav" "challenge submissions" - grid-template-columns: 30em auto - grid-template-rows: min-content auto - overflow: hidden - - nav - grid-area: nav - --bg: #{$fg} - --fg: #{$bg} - background: var(--bg) - color: var(--fg) - box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.125) - display: flex - - .dropdown - position: relative - display: flex - padding: 0 - - .dropdown-content - flex-direction: column - position: absolute - top: 100% - right: 0 - min-width: 100% - - &:not(:hover) .dropdown-content - display: none !important - - & > *, .dropdown .link - padding: 0.45em - - & > * - vertical-align: middle - - .link - color: var(--fg) - font-weight: bold - white-space: nowrap - - & > .right - margin-left: auto + width: 100% + height: 100% + display: grid + grid-template-areas: "nav nav" "challenge submissions" + grid-template-columns: 30em auto + grid-template-rows: min-content auto + overflow: hidden - img - height: 32px - border-radius: 100% +#nav + grid-area: nav - & > div - overflow: scroll - display: flex - flex-direction: column - gap: 1em - - footer - margin-top: auto - text-align: center - - #challenge - padding: 1em - -* - box-sizing: border-box !important +#challenge + grid-area: challenge #submissions - grid-area: submissions - background: rgba(0, 0, 0, 0.125) - padding: 1em - - & > div - width: 100% - column-count: 3 - margin: 0 - - $gap: 0.5em - - gap: $gap - - & > figure - background: rgba(0, 0, 0, 0.125) - padding: $gap - width: 100% - box-sizing: border-box - margin: 0 - margin-bottom: $gap - break-inside: avoid-column - text-align: center - - & > img - width: 100% - cursor: pointer - - &:hover - border: none - filter: brightness(1.25) - -.dropdown:hover > .link, nav > .link:hover - border: none - --fg: #{$fg} - --bg: #{$bg} - background: var(--bg) - cursor: pointer - -.svg-inline - height: 1em - vertical-align: -0.125em - -a - text-decoration: none - - &:hover - border-bottom: 2px solid - - &.noun - color: #a6e3a1 - - &.adjective - color: #f38ba8 - - &.verb - color: #87b0f9 - - &.adverb - color: #94e2d5 - - &.particle - color: #f9e2af - - &.phrase - color: #fab387 - -.servers - display: flex - gap: 0.5em - - & > :not(.recommended) - // To match the missing recommended label - padding-bottom: 1em - - & > * - display: flex - flex-direction: column - gap: 0.5em - border: 2px solid - border-radius: 0.5em - padding: 0.5em - width: 100% - align-items: center - text-align: center - - img - width: 96px - border-radius: 100% - border: 2px solid - - .name - display: flex - flex-grow: 1 - align-items: center - - .joinButton - display: inline - background: seagreen - color: white - font: inherit - font-weight: bold - border: none - outline: none - padding: 0.25em 0.5em 0.25em 0.5em - border-radius: 2px - - &:disabled, &.disabled - background: gray - - .recommended - border-color: mediumseagreen - - .label-wrapper - height: 0 - - .label - position: relative - width: fit-content - border: auto - bottom: 0px - background: mediumseagreen - color: white - font-weight: bold - font-size: 0.75em - text-transform: uppercase - padding: 0 0.5em 0 0.5em - border-radius: 2px - user-select: none - -.icon - height: 1.5em - vertical-align: middle + grid-area: submissions -h1 - text-align: center +#challenge, #submissions + overflow: scroll + display: flex + flex-direction: column + gap: 1em - &:first-child - margin-top: 0 + footer + margin-top: auto + text-align: center \ No newline at end of file diff --git a/styles/sass/submissions.sass b/styles/sass/submissions.sass new file mode 100644 index 0000000..fd6c065 --- /dev/null +++ b/styles/sass/submissions.sass @@ -0,0 +1,31 @@ +#submissions + grid-area: submissions + background: rgba(0, 0, 0, 0.125) + padding: 1em + + & > div + width: 100% + column-count: 3 + margin: 0 + + $gap: 0.5em + + gap: $gap + + & > figure + background: rgba(0, 0, 0, 0.125) + padding: $gap + width: 100% + box-sizing: border-box + margin: 0 + margin-bottom: $gap + break-inside: avoid-column + text-align: center + + & > img + width: 100% + cursor: pointer + + &:hover + border: none + filter: brightness(1.25) \ No newline at end of file diff --git a/templates/base.html.tera b/templates/base.html.tera index b6090a5..81d19b8 100644 --- a/templates/base.html.tera +++ b/templates/base.html.tera @@ -14,7 +14,7 @@ {% include "modal" %} {% endif %}
- +
{% block content %}{% endblock %}