From d669adeb2fe9dd64b9ef08a2960d1b5ba2553ff9 Mon Sep 17 00:00:00 2001 From: ElnuDev Date: Wed, 14 Jun 2023 16:37:34 -0700 Subject: [PATCH] Navbar mockup --- styles/sass/style.scss | 81 +++++++++++++++++++++++++-- templates/index.html.tera | 115 ++++++++++++++++++++++---------------- 2 files changed, 144 insertions(+), 52 deletions(-) diff --git a/styles/sass/style.scss b/styles/sass/style.scss index 6ecb9fa..437c45e 100644 --- a/styles/sass/style.scss +++ b/styles/sass/style.scss @@ -1,11 +1,82 @@ +@use "sass:color"; + +$bg: #FFFDF3; +$bg0: #{color.adjust($bg, $lightness: -5%, $hue: -2%, $saturation: -50%)}; +$fg: #011627; + +:root { + --bg: #{$bg}; + --fg: #{$fg}; +} + body { - font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - background: #1e1e2e; - color: #c6d0f5; + 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; +} + +#content { + width: 100%; + background: var(--bg); + border-radius: 4px; + overflow: hidden; + box-shadow: 0 0 16px rgba(0, 0, 0, 0.125); + + & > div { + padding: 1em; + } + + 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; + + & > * { + padding: 0.45em; + + & > * { + vertical-align: middle; + } + } + + & > a { + color: var(--fg); + font-weight: bold; + + &:hover { + border: none; + --fg: #{$fg}; + --bg: #{$bg}; + background: var(--bg); + cursor: pointer; + } + } + + & > :last-child { + margin-left: auto; + } + + img { + height: 32px; + border-radius: 100%; + } + } } -b, strong { - color: #eff1f5; +.svg-inline { + height: 1em; + vertical-align: -0.125em; } a { diff --git a/templates/index.html.tera b/templates/index.html.tera index 4363870..66f95ba 100644 --- a/templates/index.html.tera +++ b/templates/index.html.tera @@ -2,58 +2,79 @@ Tegaki Tuesday + + + -

Welcome to Tegaki Tuesday #{{ challenge }}!

- Previous - Next -
- - - {% for line in content.japanese %} - {% for subline in line %} +
+ +
+

Welcome to Tegaki Tuesday #{{ challenge }}!

+ Previous + Next +
+ + + {% for line in content.japanese %} + {% for subline in line %} +

+ {%- for word in subline -%} + {%- if word.dictionary -%} + + {%- endif -%} + {% for segment in word.text -%} + {{ segment.kanji }}({{ segment.furigana | safe }}) + {%- endfor -%} + {%- if word.dictionary -%} + + {%- endif -%} + {%- endfor -%} +

+ {% endfor %} + {% endfor %} +
+ {% if content.translation %}

- {%- for word in subline -%} - {%- if word.dictionary -%} - - {%- endif -%} - {% for segment in word.text -%} - {{ segment.kanji }}({{ segment.furigana | safe }}) - {%- endfor -%} - {%- if word.dictionary -%} - - {%- endif -%} - {%- endfor -%} + Translation + {% if content.translation.author %}by {{ content.translation.author }}{% endif %} + {% if content.translation.site %} via + {% if content.translation.site.link %} + {{ content.translation.site.name }} + {% else %} + {{ content.translation.site.name }} + {% endif %} + {%- endif -%}

- {% endfor %} - {% endfor %} -
- {% if content.translation %} -

- Translation - {% if content.translation.author %}by {{ content.translation.author }}{% endif %} - {% if content.translation.site %} via - {% if content.translation.site.link %} - {{ content.translation.site.name }} - {% else %} - {{ content.translation.site.name }} - {% endif %} {%- endif -%} -

- {%- endif -%} - {%- if content.suggester -%} -

This challenge was suggested by {{ content.suggester }} using the -h suggest command.

- {%- endif -%} + {%- if content.suggester -%} +

This challenge was suggested by {{ content.suggester }} using the -h suggest command.

+ {%- endif -%} +
+
\ No newline at end of file