tegakituesday
/
tegakituesday.com
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Start reorganizing styles

Browse Source
rust
Elnu 1 year ago
parent dfe14639b2
commit 1aecdf3333
10 changed files with 256 additions and 236 deletions
Show Stats Download Patch File Download Diff File

7
styles/sass/README.md
Unescape View File

@ -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.

5
styles/sass/_theme.sass
Unescape View File

@ -0,0 +1,5 @@
@use "sass:color"
$bg: #FFFDF3
$bg0: #{color.adjust($bg, $lightness: -5%, $hue: -7deg, $saturation: -50%)}
$fg: #011627

21
styles/sass/challenge.sass
Unescape View File

@ -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

42
styles/sass/general.sass
Unescape View File

@ -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

55
styles/sass/nav.sass
Unescape View File

@ -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

62
styles/sass/servers.sass
Unescape View File

@ -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

263
styles/sass/style.sass
Unescape View File

@ -1,244 +1,41 @@
@use "sass:color" @use "_theme" as *
$bg: #FFFDF3 @use "general"
$bg0: #{color.adjust($bg, $lightness: -5%, $hue: -7deg, $saturation: -50%)} @use "servers"
$fg: #011627 @use "nav"
@use "challenge"
:root @use "submissions"
--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
#content, dialog #content, dialog
background: var(--bg) background: var(--bg)
box-shadow: 0 0 16px rgba(0, 0, 0, 0.125) box-shadow: 0 0 16px rgba(0, 0, 0, 0.125)
border: none border: none
border-radius: 4px 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
#content #content
width: 100% width: 100%
height: 100% height: 100%
display: grid display: grid
grid-template-areas: "nav nav" "challenge submissions" grid-template-areas: "nav nav" "challenge submissions"
grid-template-columns: 30em auto grid-template-columns: 30em auto
grid-template-rows: min-content auto grid-template-rows: min-content auto
overflow: hidden 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
img #nav
height: 32px grid-area: nav
border-radius: 100%
& > div #challenge
overflow: scroll grid-area: challenge
display: flex
flex-direction: column
gap: 1em
footer
margin-top: auto
text-align: center
#challenge
padding: 1em
*
box-sizing: border-box !important
#submissions #submissions
grid-area: 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
h1 #challenge, #submissions
text-align: center overflow: scroll
display: flex
flex-direction: column
gap: 1em
&:first-child footer
margin-top: 0 margin-top: auto
text-align: center

31
styles/sass/submissions.sass
Unescape View File

@ -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)

2
templates/base.html.tera
Unescape View File

@ -14,7 +14,7 @@
{% include "modal" %} {% include "modal" %}
{% endif %} {% endif %}
<div id="content"> <div id="content">
<nav>{% block nav %}{% include "nav" %}{% endblock %}</nav> <nav id="nav">{% block nav %}{% include "nav" %}{% endblock %}</nav>
<div id="challenge"> <div id="challenge">
<div>{% block content %}{% endblock %}</div> <div>{% block content %}{% endblock %}</div>
<footer> <footer>

4
templates/nav.html.tera
Unescape View File

@ -1,7 +1,7 @@
{% if challenge %} {% if challenge %}
<a class="link" href="/{{ challenge - 1 }}"><svg class="svg-inline" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 278.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"></path></svg></a> <a class="link" href="/{{ challenge - 1 }}"><svg class="icon" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 278.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"></path></svg></a>
<input type="number" min="1" value="{{ challenge }}" autocomplete="false"> <input type="number" min="1" value="{{ challenge }}" autocomplete="false">
<a class="link" href="/{{ challenge + 1 }}"><svg class="svg-inline" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"></path></svg></a> <a class="link" href="/{{ challenge + 1 }}"><svg class="icon" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"></path></svg></a>
{% endif %} {% endif %}
{% if content.song %} {% if content.song %}
<div> <div>

Write Preview
Loading…
Cancel
Save