parent
dfe14639b2
commit
1aecdf3333
@ -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.
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
@use "sass:color"
|
||||||
|
|
||||||
|
$bg: #FFFDF3
|
||||||
|
$bg0: #{color.adjust($bg, $lightness: -5%, $hue: -7deg, $saturation: -50%)}
|
||||||
|
$fg: #011627
|
||||||
@ -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
|
||||||
@ -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
|
||||||
@ -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
|
||||||
@ -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
|
||||||
@ -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)
|
||||||
Loading…
Reference in new issue