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

Convert SCSS to Sass

Browse Source
rust
Elnu 1 year ago
parent 43b2f58897
commit a936117827
2 changed files with 244 additions and 280 deletions
Show Stats Download Patch File Download Diff File

244
styles/sass/style.sass
Unescape View File

@ -0,0 +1,244 @@
@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

280
styles/sass/style.scss
Unescape View File

@ -1,280 +0,0 @@
@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;
}
}
Write Preview
Loading…
Cancel
Save