Want to contribute? Fork me on Codeberg.org!
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
245 lines
4.0 KiB
245 lines
4.0 KiB
@use "sass:color"
|
|
|
|
$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
|
|
|
|
#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
|
|
|
|
#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
|
|
|
|
img
|
|
height: 32px
|
|
border-radius: 100%
|
|
|
|
& > 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
|
|
|
|
#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
|
|
text-align: center
|
|
|
|
&:first-child
|
|
margin-top: 0
|