// Colours
// Light theme colors $background_color : fff; $text_color : #222; $blue : #2a76dd; $blue_hover : #6ca0e8; $gray_text : rgb(116, 129, 141); $gray_element : rgb(230, 236, 241); $gray_light : rgb(245, 247, 249); $red : rgb(255, 70, 66);
@mixin color($property, $var, $fallback){
#{$property}: $fallback; // This is a fallback for browsers that don't support the next line. #{$property}: var($var, $fallback);
}
@mixin frosted-glass{
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { -webkit-backdrop-filter: saturate(180%) blur(20px) brightness(150%); backdrop-filter: saturate(180%) blur(20px) brightness(150%); // transition: background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1); }
}
// Dark theme colors .theme-dark{
--background-color : #121212; --text-color : rgba(255, 255, 255, 0.87); --gray-element : rgba(255, 255, 255, 0.38); --gray-text : rgba(255, 255, 255, 0.6); --float-color : #222; --dark-shadow1 : #000; --dark-shadow2 : rgba(0,0,0,0.5); --dark-shadow3 : rgba(0,0,0,0.1); --dark-frosted-glass : #22222280; #navbar{ @include frosted-glass; }
}
.theme-transit {
transition: background-color 1s;
}
// Fonts
$font_normal : -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; $font_code : SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
// Font Sizes
$Huge : 32pt; // main-header $huge : 27pt; // header $LARGE : 22pt; // h1 $Large : 18pt; // h2 $large : 16pt; // h3
$normalsize : 14pt;
$small : 13pt; $footnotesize : 12pt;
// $Huge : 2.7rem; // main-header // $huge : 2.2rem; // header // $LARGE : 2rem; // h1 // $Large : 1.7rem; // h2 // $large : 1.5rem; // h3
// $normalsize : 1.1rem;
// $small : 1rem; // $footnotesize : 0.9rem;
@mixin indented-box($side-color) {
padding-left: 10px; margin: 10px; border-left: 4px solid $side-color;
}
@mixin float-card {
z-index: 2; border-radius: 10px; border-width: 0px; margin: 10px 0; box-shadow: 9px 9px 16px rgba(0,0,0,0.1), -9px -9px 16px rgba(0,0,0,0.01); box-shadow: 9px 9px 16px var(--dark-shadow2, rgba(0,0,0,0.1)), -9px -9px 16px var(--dark-shadow3, rgba(0,0,0,0.01)); @include color(background-color, --float-color, #fff);
}
@mixin gray-link {
a { @include color(color, --gray-text, $gray_text); @content; &:hover { color: $blue_hover; } }
}
// Break Points $desktop-min-width: 1000px; $phone-max-width: 500px;
@mixin tablet {
@media only screen and (min-width: #{$phone-max-width}) and (max-width: #{$desktop-min-width}) { @content; }
}
@mixin phone {
@media only screen and (max-width: #{$phone-max-width}) { @content; }
}