382 lines
10 KiB
SCSS
382 lines
10 KiB
SCSS
// importing sass built-in modules
|
|
@use 'sass:color';
|
|
@use 'sass:map';
|
|
|
|
////////////////////////////////////////////////////////////////
|
|
// ANIMATIONS
|
|
////////////////////////////////////////////////////////////////
|
|
// animation to be used when summary is being opened
|
|
// doesn't work on closing because of the limitation of details tag
|
|
@keyframes slide-down {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-1rem);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////
|
|
// MIXINS
|
|
////////////////////////////////////////////////////////////////
|
|
// mixin to add underline under link
|
|
@mixin underliner($clr-2, $clr-1: transparent, $transition: true) {
|
|
border-bottom: 2px solid $clr-1;
|
|
|
|
@if $transition {
|
|
transition: border 0.4s;
|
|
}
|
|
|
|
&:hover {
|
|
border-bottom: 2px solid $clr-2;
|
|
}
|
|
}
|
|
|
|
// MIXINS TO TURN SCSS VARIABLES INTO CSS VARIABLES:
|
|
@mixin themed-css-variables($theme) {
|
|
@each $var, $values in $themed-variables {
|
|
--#{$var}: #{map.get($values, $theme)};
|
|
}
|
|
}
|
|
@mixin misc-css-variables {
|
|
@each $var, $value in $misc-variables {
|
|
--#{$var}: #{$value};
|
|
}
|
|
}
|
|
|
|
// MIXIN TO ADD FONTS
|
|
$font-type-map: (
|
|
'Thin': 100,
|
|
'ExtraLight': 200,
|
|
'Light': 300,
|
|
'Regular': 400,
|
|
'Medium': 500,
|
|
'SemiBold': 600,
|
|
'Bold': 700,
|
|
'ExtraBold': 800,
|
|
'Black': 900,
|
|
);
|
|
|
|
@mixin font($font-name, $font-types...) {
|
|
// looping over the argument list $font-types
|
|
@each $font-type in $font-types {
|
|
// setting initial values
|
|
$weight: normal;
|
|
$style: normal;
|
|
// font names to be used in the src
|
|
$font-name-string: '#{$font-name}-#{$font-type}';
|
|
|
|
// changing weight property for font-type that has weight defined in the font-type-map map
|
|
@if (map.has-key($font-type-map, $font-type)) {
|
|
$weight: map.get($font-type-map, $font-type);
|
|
}
|
|
// changing style property if the font-type value is Italic
|
|
@if ($font-type == 'Italic') {
|
|
$style: italic;
|
|
}
|
|
|
|
// filling all the properties
|
|
@font-face {
|
|
font-family: $font-name;
|
|
src: local($font-name),
|
|
url('/font/#{$font-name-string}.woff2') format('woff2');
|
|
font-weight: $weight;
|
|
font-style: $style;
|
|
font-display: swap;
|
|
}
|
|
}
|
|
}
|
|
////////////////////////////////////////////////////////////////
|
|
// BREAKPOINTS
|
|
////////////////////////////////////////////////////////////////
|
|
// declaration of breakpoints
|
|
// using em for accessibility reasons(see: https://zellwk.com/blog/media-query-units/)
|
|
// 1em = 16px
|
|
$breakpoints: (
|
|
bp-1100: 68.75em,
|
|
bp-900: 56.25em,
|
|
bp-725: 45.32em,
|
|
bp-550: 34.375em,
|
|
bp-450: 28.125em,
|
|
bp-400: 25em,
|
|
bp-350: 21.875em,
|
|
);
|
|
|
|
// mixin to handle known and unknown breakpoints:
|
|
@mixin bp($given-breakpoint) {
|
|
// just assigning the given value to a new variable since we're going to change it conditionally;
|
|
$breakpoint: $given-breakpoint;
|
|
// if $breakpoints map contains the given variable then getting it's value
|
|
@if map.has-key($breakpoints, $breakpoint) {
|
|
$breakpoint: map.get($breakpoints, $breakpoint);
|
|
}
|
|
// and then using it for media query. This will also work for straight out values(50em or 800px, for example)
|
|
@media screen and (max-width: $breakpoint) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
////////////////////////////////////////////////////////////////
|
|
// VARIABLES
|
|
////////////////////////////////////////////////////////////////
|
|
// BASE COLOR DEFINITIONS:
|
|
$clr-primary: #f3e3e2;
|
|
$clr-secondary: #4d0011;
|
|
$clr-tertiary: #0f2c67;
|
|
$clr-alpha: #2f3542;
|
|
$clr-beta: #485460;
|
|
$clr-gamma: #ddd;
|
|
// unused
|
|
// $clr-quatenary: #232946;
|
|
// $clr-delta: #1e272e;
|
|
// $clr-epsilon: #ccc;
|
|
// $clr-zeta: #eee;
|
|
// VARIABLES MAPS:
|
|
$misc-variables: (
|
|
// 1) FONTS:
|
|
ff-base: ('NunitoSans', sans-serif),
|
|
ff-alt-alpha: ('Montserrat', sans-serif),
|
|
fs-2000: 20rem,
|
|
fs-1700: 17rem,
|
|
fs-1500: 15rem,
|
|
fs-1200: 12rem,
|
|
fs-1000: 10rem,
|
|
fs-400: 4rem,
|
|
fs-350: 3.5rem,
|
|
fs-320: 3.2rem,
|
|
fs-300: 3rem,
|
|
fs-280: 2.8rem,
|
|
fs-250: 2.5rem,
|
|
fs-220: 2.2rem,
|
|
fs-200: 2rem,
|
|
fs-180: 1.8rem,
|
|
fs-160: 1.6rem,
|
|
fs-140: 1.4rem,
|
|
fs-120: 1.2rem,
|
|
// 2) MISCELLANEOUS:
|
|
border-radius: 0.5em,
|
|
spacer-200: 2rem,
|
|
spacer-050: 0.5rem,
|
|
spacer-100: 1rem,
|
|
spacer-300: 3rem,
|
|
spacer-500: 5rem,
|
|
spacer-800: 8rem,
|
|
theme-swticher-rotation-unchecked: -180deg,
|
|
theme-swticher-rotation-checked: 180deg
|
|
);
|
|
$themed-variables: (
|
|
// BIG LAYOUTS:
|
|
// 1) BASE:
|
|
clr-base-bg:
|
|
(
|
|
light: color.scale($clr-primary, $lightness: 50%),
|
|
// light: lighten($clr-primary, 5%),
|
|
dark: color.scale($clr-tertiary, $lightness: -82%),
|
|
),
|
|
clr-base-heading: (
|
|
light: darken($clr-tertiary, 9%),
|
|
dark: color.scale($clr-primary, $lightness: -10%, $saturation: -70%),
|
|
),
|
|
clr-base-heading-alt-alpha: (
|
|
light: initial,
|
|
dark: initial,
|
|
),
|
|
clr-base-text: (
|
|
light: $clr-alpha,
|
|
dark: $clr-gamma,
|
|
),
|
|
clr-base-text-alt-alpha: (
|
|
light: $clr-beta,
|
|
dark: $clr-gamma,
|
|
),
|
|
clr-base-link: (
|
|
light: color.scale($clr-tertiary, $lightness: 5%),
|
|
dark: color.scale($clr-secondary, $lightness: 80%),
|
|
),
|
|
clr-base-link-hover: (
|
|
light: color.scale($clr-tertiary, $lightness: 20%),
|
|
dark: color.scale($clr-secondary, $lightness: 70%, $saturation: 90%),
|
|
),
|
|
// 2) HEADER & FOOTER(HF):
|
|
clr-hf-bg:
|
|
(
|
|
light: color.scale($clr-primary, $lightness: -15%),
|
|
// dark: color.scale($clr-primary, $lightness: -90%, $saturation: -50%),
|
|
dark: color.scale($clr-tertiary, $lightness: -55%, $saturation: 80%),
|
|
),
|
|
clr-hf-logo: (
|
|
light: color.scale($clr-secondary, $lightness: 12%),
|
|
dark: lighten($clr-secondary, 50%),
|
|
),
|
|
clr-hf-text: (
|
|
light: darken($clr-tertiary, 10%),
|
|
dark: lighten($clr-primary, 3%),
|
|
),
|
|
clr-hf-text-alt-alpha: (
|
|
light: color.scale($clr-alpha, $lightness: -10%),
|
|
dark: $clr-gamma,
|
|
),
|
|
clr-hf-link: (
|
|
light: color.scale($clr-tertiary, $lightness: 5%),
|
|
dark: color.scale($clr-secondary, $lightness: 85%),
|
|
),
|
|
clr-hf-link-hover: (
|
|
light: color.scale($clr-tertiary, $lightness: 15%, $saturation: 50%),
|
|
dark: color.scale($clr-secondary, $lightness: 78%, $saturation: 95%),
|
|
),
|
|
// SMALLER COMPONENTS:
|
|
// 3) CARD:
|
|
clr-card-bg:
|
|
(
|
|
light: $clr-primary,
|
|
dark: color.scale($clr-tertiary, $lightness: -45%, $saturation: 50%),
|
|
),
|
|
clr-card-bg-alt-alpha: (
|
|
light: color.scale($clr-primary, $lightness: 30%),
|
|
dark: color.scale($clr-tertiary, $lightness: -70%),
|
|
),
|
|
clr-card-heading: (
|
|
light: color.scale($clr-tertiary, $lightness: -35%),
|
|
dark: color.scale($clr-secondary, $lightness: 85%, $saturation: 0%),
|
|
),
|
|
clr-card-heading-alt-alpha: (
|
|
light: color.scale($clr-tertiary, $lightness: -15%),
|
|
dark: color.scale($clr-secondary, $lightness: 92%),
|
|
),
|
|
clr-card-text: (
|
|
light: $clr-alpha,
|
|
dark: color.scale($clr-primary, $lightness: 10%),
|
|
),
|
|
clr-card-text-alt-alpha: (
|
|
light: $clr-beta,
|
|
dark: color.scale($clr-beta, $lightness: 40%),
|
|
),
|
|
clr-card-icon: (
|
|
light: lighten($clr-secondary, 10%),
|
|
dark: color.scale($clr-secondary, $lightness: 60%),
|
|
),
|
|
clr-card-icon-alt-alpha: (
|
|
light: lighten($clr-beta, 5%),
|
|
dark: color.scale($clr-beta, $lightness: 5%),
|
|
),
|
|
clr-card-icon-alt-beta: (
|
|
light: $clr-tertiary,
|
|
dark: color.scale($clr-secondary, $lightness: 60%),
|
|
),
|
|
clr-card-link: (
|
|
light: $clr-secondary,
|
|
dark: color.scale($clr-secondary, $lightness: 75%),
|
|
),
|
|
clr-card-link-hover: (
|
|
light: lighten($clr-secondary, 10%),
|
|
dark: color.scale($clr-secondary, $lightness: 80%, $saturation: 90%),
|
|
),
|
|
clr-card-link-alt-alpha: (
|
|
light: color.scale($clr-tertiary, $lightness: 5%),
|
|
dark: color.scale($clr-secondary, $lightness: 80%),
|
|
),
|
|
clr-card-link-hover-alt-alpha: (
|
|
light: color.scale($clr-tertiary, $lightness: 20%),
|
|
dark: color.scale($clr-secondary, $lightness: 70%, $saturation: 90%),
|
|
),
|
|
gradient-card-bg: (
|
|
light:
|
|
linear-gradient(
|
|
to top,
|
|
rgba($clr-primary, 1),
|
|
rgba(lighten($clr-secondary, 10%), 0.5)
|
|
),
|
|
dark:
|
|
linear-gradient(
|
|
to top,
|
|
rgba(color.scale($clr-tertiary, $lightness: -45%, $saturation: 50%), 1),
|
|
rgba(color.scale($clr-primary, $lightness: -90%), 0.8)
|
|
),
|
|
),
|
|
clr-card-border: (
|
|
light: darken($clr-secondary, 5%),
|
|
dark: color.scale($clr-secondary, $lightness: 60%),
|
|
),
|
|
// 4) BUTTONS:
|
|
clr-button:
|
|
(
|
|
light: $clr-secondary,
|
|
dark: lighten($clr-secondary, 3%),
|
|
),
|
|
clr-button-hover: (
|
|
light: lighten($clr-secondary, 3%),
|
|
dark: lighten($clr-secondary, 6%),
|
|
),
|
|
clr-button-text: (
|
|
light: lighten($clr-primary, 5%),
|
|
dark: lighten($clr-primary, 10%),
|
|
),
|
|
clr-button-alt-alpha: (
|
|
light: lighten($clr-tertiary, 5%),
|
|
dark: color.scale($clr-tertiary, $lightness: -15%),
|
|
),
|
|
clr-button-hover-alt-alpha: (
|
|
light: lighten($clr-tertiary, 15%),
|
|
dark: color.scale($clr-tertiary, $lightness: 5%),
|
|
),
|
|
clr-button-text-alt-alpha: (
|
|
light: color.scale($clr-primary, $lightness: 50%),
|
|
dark: color.scale($clr-primary, $lightness: 50%),
|
|
),
|
|
// MISCELLANEOUS
|
|
// 5) SHADOWS:
|
|
shadow-button:
|
|
(
|
|
light: 3px 3px 2px rgba(#000, 0.4),
|
|
dark: 3px 3px 2px rgba(#000, 1),
|
|
),
|
|
shadow-button-hover: (
|
|
light: 7px 7px 3px rgba(#000, 0.3),
|
|
dark: 7px 7px 3px rgba(#000, 0.6),
|
|
),
|
|
shadow-button-active: (
|
|
light: 6px 6px 2px rgba(#000, 0.5),
|
|
dark: 6px 6px 2px rgba(#000, 0.8),
|
|
),
|
|
shadow-card: (
|
|
light: 0 0.5rem 1rem rgba(#000, 0.3),
|
|
dark: 2px 2px 3px 2px rgba(#000, 1),
|
|
),
|
|
// 6) THEME SWITCHER ICON
|
|
clr-theme-switcher-unchecked:
|
|
(
|
|
light: $clr-tertiary,
|
|
dark: lighten($clr-secondary, 70%),
|
|
),
|
|
clr-theme-switcher-checked: (
|
|
light: $clr-tertiary,
|
|
dark: lighten($clr-secondary, 70%),
|
|
),
|
|
// 7) SCROLLBAR:
|
|
clr-scrollbar-track:
|
|
(
|
|
light: transparent,
|
|
dark: transparent,
|
|
),
|
|
clr-scrollbar-thumb: (
|
|
light: $clr-tertiary,
|
|
dark: $clr-primary,
|
|
),
|
|
clr-scrollbar-thumb-hover: (
|
|
light: $clr-tertiary,
|
|
dark: lighten($clr-primary, 10%),
|
|
),
|
|
// 8) SELECTION:
|
|
clr-selection-bg:
|
|
(
|
|
light: color.scale($clr-secondary, $lightness: 5%),
|
|
dark: color.scale($clr-secondary, $lightness: 90%),
|
|
),
|
|
clr-selection-text: (
|
|
light: color.scale($clr-primary, $lightness: 15%),
|
|
dark: color.scale($clr-tertiary, $lightness: -20%),
|
|
)
|
|
);
|