ccdfd37fe9
Rename all src/*.css to src/_*.scss partials and convert style.css to style.scss with SASS imports. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
91 lines
2.6 KiB
SCSS
91 lines
2.6 KiB
SCSS
@import "src/reset";
|
|
@import "src/html";
|
|
@import "src/generic";
|
|
@import "src/texts";
|
|
@import "src/header";
|
|
@import "src/nav";
|
|
@import "src/article";
|
|
@import "src/virtual";
|
|
@import "src/home";
|
|
@import "src/grid";
|
|
@import "src/newsletter";
|
|
@import "src/footer";
|
|
@import "src/toggle-light-mode";
|
|
@import "src/print";
|
|
@import "src/toc";
|
|
|
|
:root {
|
|
--color-primary--transparent: rgba(255, 255, 255, 0.86);
|
|
|
|
/* --color-secondary-rgb: 120, 171, 150;
|
|
--color-secondary: rgba(var(--color-secondary-rgb), 0.86);
|
|
--color-secondary--light: rgba(var(--color-secondary-rgb), 0.2);
|
|
--color-secondary--x-light: rgb(var(--color-secondary-rgb), 0.1);
|
|
|
|
--color-tertiary-rgb: 253, 68, 26;
|
|
--color-tertiary: rgba(var(--color-tertiary-rgb), 0.86);
|
|
--color-tertiary--light: rgba(var(--color-tertiary-rgb), 0.2);
|
|
--color-tertiary--x-light: rgb(var(--color-tertiary-rgb), 0.1); */
|
|
--color-secondary-rgb: 200, 200, 200;
|
|
--color-secondary: rgba(var(--color-secondary-rgb), 0.86);
|
|
--color-secondary--light: rgba(var(--color-secondary-rgb), 0.2);
|
|
--color-secondary--x-light: rgb(var(--color-secondary-rgb), 0.1);
|
|
|
|
--color-tertiary-rgb: 200, 200, 200;
|
|
--color-tertiary: rgba(var(--color-tertiary-rgb), 0.86);
|
|
--color-tertiary--light: rgba(var(--color-tertiary-rgb), 0.2);
|
|
--color-tertiary--x-light: rgb(var(--color-tertiary-rgb), 0.1);
|
|
|
|
--unit--horizontal: 5vw;
|
|
--unit--vertical: 1.7rem;
|
|
--unit--vertical-relative: calc(
|
|
var(--unit--vertical) * var(--window-height-factor)
|
|
);
|
|
|
|
--font-size-s: 0.8rem;
|
|
--font-size-m: calc(var(--font-size-s) * 1.5);
|
|
--font-size-l: calc(var(--font-size-m) * 1.5);
|
|
--font-size-xl: calc(var(--font-size-l) * 1.5);
|
|
--font-size-xxl: calc(var(--font-size-xl) * 1.5);
|
|
|
|
--font-weight-light: 200;
|
|
--font-weight-bold: 400;
|
|
--font-weight-extra-bold: 550;
|
|
|
|
--opacity-light: 0.6;
|
|
|
|
--curve-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--color-background: #000;
|
|
--color-primary: #ffffff;
|
|
|
|
--font-weight-light: 200;
|
|
}
|
|
[data-theme="light"] {
|
|
--color-background: #ffffff;
|
|
--color-primary: #000;
|
|
|
|
--color-secondary-rgb: 140, 140, 140;
|
|
--font-weight-light: 240;
|
|
}
|
|
|
|
@media screen and (min-width: 640px) {
|
|
:root {
|
|
--unit--horizontal: 2.5vw;
|
|
--unit--vertical: 1.7rem;
|
|
|
|
--font-size-s: 0.9rem;
|
|
--font-size-m: calc(var(--font-size-s) * 1.5);
|
|
--font-size-l: calc(var(--font-size-m) * 1.5);
|
|
--font-size-xl: calc(var(--font-size-l) * 1.5);
|
|
--font-size-xxl: calc(var(--font-size-xl) * 1.5);
|
|
|
|
/* --font-weight-light: 200;
|
|
--font-weight-bold: 400;
|
|
--font-weight-extra-bold: 550; */
|
|
|
|
--body-padding: calc(10 * var(--unit--horizontal));
|
|
}
|
|
}
|