88 lines
1.7 KiB
SCSS
88 lines
1.7 KiB
SCSS
:root {
|
|
// Pull the tokens and generate custom props
|
|
@each $color in $stalfos-colors {
|
|
#{'--color-' + nth($color, 1)}: #{nth($color, 2)};
|
|
}
|
|
|
|
// Set theme aliases
|
|
--color-mode: 'light';
|
|
--color-bg: #{get-color('light')};
|
|
--color-bg-glare: #{get-color('light')};
|
|
--color-text: #{get-color('dark')};
|
|
--color-text-glare: #{get-color('dark')};
|
|
--color-selection-text: #{get-color('light')};
|
|
--color-selection-bg: #{get-color('dark')};
|
|
--color-stroke: #{get-color('mid')};
|
|
--color-action-bg: #{get-color('primary')};
|
|
--color-action-text: #{get-color('dark')};
|
|
--color-theme-primary: #{get-color('primary')};
|
|
--color-theme-primary-glare: #{get-color('primary-glare')};
|
|
--color-theme-highlight: #{get-color('highlight')};
|
|
--color-theme-highlight-block: #{get-color('highlight')};
|
|
--color-theme-secondary: #{get-color('secondary')};
|
|
--color-light-gray: #{get-color('light-gray')};
|
|
--color-light-blue: #{get-color('light-blue')};
|
|
--color-white: #{get-color('light')};
|
|
}
|
|
|
|
body {
|
|
color: var(--color-text);
|
|
background-color: var(--color-bg);
|
|
}
|
|
|
|
main {
|
|
overflow: hidden;
|
|
}
|
|
|
|
::selection {
|
|
color: var(--color-white);
|
|
background-color: var(--color-secondary);
|
|
}
|
|
|
|
a:not([class]),
|
|
a:not([class]):visited {
|
|
color: var(--color-dark);
|
|
font-weight: 600;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.link {
|
|
font-weight: 400;
|
|
color: var(--color-dark);
|
|
|
|
&:visited {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.return-link {
|
|
align-self: flex-end;
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
margin-top: 2rem;
|
|
color: var(--color-dark);
|
|
|
|
&:visited {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.justify-end {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.ml-1 {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.align-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.fw-600 {
|
|
font-weight: 600;
|
|
}
|