website/assets/scss/base.scss

79 lines
1.6 KiB
SCSS
Raw Normal View History

@import "custom";
@import "~bootstrap";
2021-08-07 10:34:39 +02:00
@import "fonts";
2021-08-05 22:07:24 +02:00
2021-08-05 13:51:44 +02:00
$black: #141414;
$orange: #d6972a;
$font: 'Fira Code', monospace;
html {
height: 100%;
}
body {
background-color: $black;
background-image: url("../images/background.png");
color: $orange;
font-family: $font;
height: 100%;
2021-08-06 09:51:41 +02:00
&.nineties {
color: $black;
-webkit-animation: background 2s linear infinite;
-moz-animation: background 2s linear infinite;
animation: background 2s linear infinite;
background: linear-gradient(to right, red, orange, yellow, green, aqua, blue, violet, red, orange, yellow, green, aqua, blue, violet, red);
background-size: 200% 100%;
2021-08-06 10:41:12 +02:00
font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive;
2021-08-06 09:51:41 +02:00
@-webkit-keyframes background {
0%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes background {
0%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes background {
0%{background-position:100% 50%}
100%{background-position:0% 50%}
}
a {
2021-08-06 09:51:41 +02:00
color: $black;
}
2021-08-06 09:51:41 +02:00
}
.nineties-toggle {
position: absolute;
top: 0;
right: 0;
}
2021-08-05 13:51:44 +02:00
a {
color: $orange;
}
.container {
display: flex;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
flex-direction: column;
2021-08-06 10:02:12 +02:00
padding: 10px;
2021-08-05 13:51:44 +02:00
}
header {
text-align: center;
ul {
display: flex;
flex-direction: row;
2021-08-05 22:07:24 +02:00
flex-wrap: wrap;
2021-08-05 13:51:44 +02:00
justify-content: space-around;
list-style: none;
2021-08-05 14:31:18 +02:00
padding: 0;
2021-08-05 13:51:44 +02:00
}
}
}