This repository has been archived on 2023-02-26. You can view files and clone it, but cannot push or open issues or pull requests.
langue-phundrak-com/web/style/style.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;
}
}