173 lines
4.1 KiB
SCSS
173 lines
4.1 KiB
SCSS
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic|Roboto+Slab:400,700|Inconsolata:400,700);
|
|
@font-face {
|
|
font-family: "DoulosSIL";
|
|
font-display: swap;
|
|
src: url("https://langue.phundrak.com/fonts/DoulosSIL-R.woff");
|
|
}
|
|
@font-face {
|
|
font-family: "Noto Sans Runes";
|
|
font-display: swap;
|
|
src: url("../fonts/NotoSansRunic-Regular.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: "Helvetica Neue";
|
|
font-display: swap;
|
|
src: url("../fonts/HelveticaNeue.ttf");
|
|
}
|
|
|
|
// Themes /////////////////////////////////////////////////////////////////////
|
|
|
|
$dark: rgba(52, 73, 94, 1);
|
|
$accent1: rgba(66, 191, 221, 1);
|
|
$accent2: rgba(92, 172, 126, 1);
|
|
$accent3: rgba(197, 193, 155, 1);
|
|
$light: #ddd;
|
|
$grey1: #f8f8f8;
|
|
$grey2: #dbe1e8;
|
|
$grey3: #b2becd;
|
|
$grey4: #6c7983;
|
|
$grey5: #454e56;
|
|
$grey6: #12181b;
|
|
$gradient-top: linear-gradient(0deg, $dark, $accent1, $accent2, $accent3, $light);
|
|
$gradient-right: linear-gradient(90deg, $dark, $accent1, $accent2, $accent3, $light);
|
|
$gradient-bottom: linear-gradient(180deg, $dark, $accent1, $accent2, $accent3, $light);
|
|
$gradient-left: linear-gradient(270deg, $dark, $accent1, $accent2, $accent3, $light);
|
|
$gradient-top-right: linear-gradient(45deg, $dark, $accent1, $accent2, $accent3, $light);
|
|
$gradient-bottom-right: linear-gradient(135deg, $dark, $accent1, $accent2, $accent3, $light);
|
|
$gradient-top-left: linear-gradient(225deg, $dark, $accent1, $accent2, $accent3, $light);
|
|
$gradient-bottom-left: linear-gradient(315deg, $dark, $accent1, $accent2, $accent3, $light);
|
|
$gradient-radial: radial-gradient( $dark, $accent1, $accent2, $accent3, $light);
|
|
|
|
.light {
|
|
$bg-nav: linear-gradient(to right, $grey1, $grey3);
|
|
$bg-dropdown: $grey1;
|
|
$text: $light;
|
|
$border-color: $accent1;
|
|
$bg-solar: $accent3;
|
|
|
|
transition: background 500ms ease-in-out, color 1s ease-in-out;
|
|
|
|
color: $dark;
|
|
background: $light;
|
|
|
|
.navbar {
|
|
background: $grey3;
|
|
}
|
|
}
|
|
|
|
.dark {
|
|
$background: $dark;
|
|
$foreground: $light;
|
|
$bg-nav: linear-gradient(to right, $grey5, $grey6);
|
|
$bg-dropdown: $grey6;
|
|
$text: $dark;
|
|
$border-color: $dark;
|
|
$bg-solar: $accent3;
|
|
|
|
transition: background 500ms ease-in-out, color 1s ease-in-out;
|
|
|
|
color: $light;
|
|
background: $dark;
|
|
|
|
.navbar {
|
|
color: $light;
|
|
background: $grey6;
|
|
}
|
|
}
|
|
|
|
/* Style *********************************************************************/
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: "Noto Sans Runes", "DoulosSIL", "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
|
|
transition: background 500ms ease-in-out, color 1s ease-in-out;
|
|
|
|
header, .navbar {
|
|
transition: background 500ms ease-in-out, color 1s ease-in-out;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
a {
|
|
color: currentColor;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.navbar {
|
|
height: 70px;
|
|
width: 100%;
|
|
}
|
|
|
|
.navbar-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
height: 100%;
|
|
background: $accent3;
|
|
color: $dark;
|
|
}
|
|
|
|
header {
|
|
padding: 1em;
|
|
margin-bottom: 1em;
|
|
padding-bottom: 3.5em;
|
|
text-align: center;
|
|
clip-path: polygon(50% 0%, 100% 0, 100% 65%, 50% 100%, 0 65%, 0 0);
|
|
color: $light;
|
|
background: $accent2;
|
|
}
|
|
|
|
.dropdown {
|
|
position: absolute;
|
|
width: 500px;
|
|
opacity: 0;
|
|
z-index: 2;
|
|
background: blue;
|
|
border-top: 2px solid white;
|
|
|
|
border-bottom-right-radius: 8px;
|
|
border-bottom-left-radius: 8px;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
height: 3rem;
|
|
margin-top: 2rem;
|
|
padding: 0.5rem;
|
|
|
|
box-shadow: rgba(2, 8, 20, 0.1) 0px 0.175em 0.5em;
|
|
transform: translateX(-40%);
|
|
|
|
transition: opacity .15s ease-out;
|
|
}
|
|
|
|
#theme-dropdown {
|
|
width: 300px;
|
|
transform: translateX(-95%);
|
|
}
|
|
|
|
.has-dropdown {
|
|
&:focus-within {
|
|
.dropdown {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown-item {
|
|
a {
|
|
width: 100%;
|
|
height: 100%;
|
|
size: 0.7rem;
|
|
padding-left: 10px;
|
|
font-weight: bold;
|
|
}
|
|
}
|