127 lines
1.7 KiB
SCSS
127 lines
1.7 KiB
SCSS
@use "colours.scss";
|
|
|
|
body {
|
|
background-color: colours.$background;
|
|
font-family: 'Roboto Mono';
|
|
font-size: large;
|
|
}
|
|
|
|
a:link,
|
|
a:visited,
|
|
a:hover,
|
|
a:active {
|
|
color: colours.$links;
|
|
background-color: transparent;
|
|
text-decoration: none;
|
|
}
|
|
|
|
// Headers.
|
|
h1 {
|
|
font-size: 2.5em;
|
|
color: colours.$h1;
|
|
}
|
|
|
|
h2 {
|
|
color: colours.$h2;
|
|
}
|
|
|
|
h3 {
|
|
color: colours.$h3;
|
|
}
|
|
|
|
h4 {
|
|
color: colours.$h4;
|
|
}
|
|
|
|
h5 {
|
|
color: colours.$h5;
|
|
}
|
|
|
|
h6 {
|
|
color: colours.$h6;
|
|
}
|
|
|
|
blockquote>p {
|
|
color: colours.$blockquote;
|
|
}
|
|
|
|
ul li {
|
|
color: colours.$text;
|
|
}
|
|
|
|
ol li {
|
|
color: colours.$text;
|
|
}
|
|
|
|
code {
|
|
color: colours.$code;
|
|
}
|
|
|
|
li {
|
|
color: colours.$white;
|
|
}
|
|
|
|
em,
|
|
strong {
|
|
color: colours.$blockquote;
|
|
}
|
|
|
|
hr {
|
|
background: linear-gradient(to right, colours.$h1, colours.$h1, colours.$h2, colours.$h3, colours.$h4, colours.$h5, colours.$h6, colours.$h6);
|
|
height: 5px;
|
|
border: 0;
|
|
}
|
|
/* GAY colour for special stuff */
|
|
.special {
|
|
background: linear-gradient(to right, colours.$h1, colours.$h2, colours.$h3, colours.$h4, colours.$h5, colours.$h6, colours.$h1, colours.$h1);
|
|
background-size: 200% auto;
|
|
background-clip: text;
|
|
color: transparent;
|
|
|
|
/* animation stuff */
|
|
animation: animatingGradient 1s linear infinite;
|
|
}
|
|
|
|
@keyframes animatingGradient {
|
|
0% {
|
|
background-position: 200% 50%;
|
|
}
|
|
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
#vaxandi_forritari {
|
|
color: colours.$h1;
|
|
}
|
|
|
|
#aspiring_game_developer {
|
|
color: colours.$h2;
|
|
}
|
|
|
|
#amateur_linguist {
|
|
color: colours.$h3;
|
|
}
|
|
|
|
#frolicking_photographer {
|
|
color: colours.$h4;
|
|
}
|
|
|
|
#adventuring_animator {
|
|
color: colours.$h5;
|
|
}
|
|
|
|
#music_enjoyer {
|
|
color: colours.$h6;
|
|
}
|
|
|
|
#subtitle {
|
|
color: colours.$dates;
|
|
}
|
|
|
|
#text,
|
|
p {
|
|
color: colours.$text;
|
|
}
|