blog/assets/scss/_predefined.scss
2024-08-08 17:49:52 +02:00

129 lines
3.0 KiB
SCSS

// Colors
$theme: hsl(172, 99%, 26%);
$text: hsl(204, 28%, 93%);
$light-grey: #292e32; // #494f5c;
$dark-grey: #3B3E48;
$highlight-grey: #7d828a;
$midnightblue: #2c3e50;
$typewriter: hsl(172, 100%, 36%);
// Fonts
$fonts: "IBM Plex Sans Light", "Segoe UI", Candara, sans-serif;
$code-fonts: "IBM Plex Mono", Consolas, "Andale Mono WT", "Andale Mono", Menlo, Monaco, monospace;
@font-face {
font-family: 'IBM Plex Sans Light';
font-style: normal;
font-weight: 400;
src: local('IBM Plex Sans Light'),
local('IBMPlexSans-Light'),
url('/fonts/IBMPlexSans-Light.woff2') format('woff2');
}
@font-face {
font-family: 'IBM Plex Sans Light';
font-style: italic;
font-weight: 400;
src: local('IBM Plex Sans Light Italic'),
local('IBMPlexSans-LightItalic'),
url('/fonts/IBMPlexSans-LightItalic.woff2') format('woff2');
}
@font-face {
font-family: 'IBM Plex Sans Light';
font-style: normal;
font-weight: 700;
src: local('IBM Plex Sans Medm'),
local('IBMPlexSans-Medm'),
url('/fonts/IBMPlexSans-Medium.woff2') format('woff2');
}
@font-face {
font-family: 'IBM Plex Sans Light';
font-style: italic;
font-weight: 700;
src: local('IBM Plex Sans Medm Italic'),
local('IBMPlexSans-MedmItalic'),
url('/fonts/IBMPlexSans-MediumItalic.woff2') format('woff2');
}
@font-face {
font-family: 'IBM Plex Mono Light';
font-style: normal;
font-weight: 400;
src: local('IBM Plex Mono Light'),
local('IBMPlexMono-Light'),
url('/fonts/IBMPlexMono-Light.woff2') format('woff2');
}
@font-face {
font-family: 'IBM Plex Mono Light';
font-style: italic;
font-weight: 400;
src: local('IBM Plex Mono Light Italic'),
local('IBMPlexMono-LightItalic'),
url('/fonts/IBMPlexMono-LightItalic.woff2') format('woff2');
}
@font-face {
font-family: 'IBM Plex Mono Light';
font-style: normal;
font-weight: 700;
src: local('IBM Plex Mono Medm'),
local('IBMPlexMono-Medm'),
url('/fonts/IBMPlexMono-Medium.woff2') format('woff2');
}
@font-face {
font-family: 'IBM Plex Mono Light';
font-style: italic;
font-weight: 700;
src: local('IBM Plex Mono Medm Italic'),
local('IBMPlexMono-MedmItalic'),
url('/fonts/IBMPlexMono-MediumItalic.woff2') format('woff2');
}
//Admonition
$admonition-background: (
'note': rgba(68, 138, 255, 0.1),
'info': rgba(0, 184, 212, 0.1),
'tip': rgba(0, 191, 165, 0.1),
'success': rgba(0, 200, 83, 0.1),
'warning': rgba(255, 145, 0, 0.1),
'failure': rgba(255, 82, 82, 0.1),
'danger': rgba(255, 23, 68, 0.1),
'bug': rgba(245, 0, 87, 0.1),
) !default;
$admonition-color: (
'note': #448aff,
'info': #00b8d4,
'tip': #00bfa5,
'success': #00c853,
'warning': #ff9100,
'failure': #ff5252,
'danger': #ff1744,
'bug': #f50057,
) !default;
// Mixins
@mixin dimmed {
opacity: .6;
}
@mixin aTag {
a {
word-wrap: break-word;
border: none;
box-shadow: inset 0 -4px 0 $theme;
transition-property: box-shadow;
transition-duration: .1s;
&:hover {
box-shadow: inset 0 -1em 0 $theme;
}
}
}