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.
105 lines
1.5 KiB
105 lines
1.5 KiB
@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: '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;
|
|
}
|
|
}
|
|
|
|
& > .right {
|
|
margin-left: auto;
|
|
}
|
|
|
|
img {
|
|
height: 32px;
|
|
border-radius: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
} |