294 lines
6.9 KiB
CSS
294 lines
6.9 KiB
CSS
@font-face {
|
|
font-family: "Shadow";
|
|
font-display: swap;
|
|
src: url("/static/shadow-font/Shadow-Regular.eot");
|
|
src: url("/static/shadow-font/Shadow-Regular.woff") format("woff"),
|
|
url("/static/shadow-font/Shadow-Regular.otf") format("opentype"),
|
|
url("/static/shadow-font/Shadow-Regular.svg") format("svg");
|
|
}
|
|
|
|
:root {
|
|
/* FONTS */
|
|
--title-font: Shadow, Georgia, serif;
|
|
--text-font: 'Roboto', Helvetica, sans-serif;
|
|
|
|
/* FONTS */
|
|
--font-size-default: 14pt;
|
|
--font-size-accent: 24pt;
|
|
--font-size-second: 12pt;
|
|
|
|
--font-size-h1: 5rem;
|
|
--font-size-h2: 3rem;
|
|
--font-size-h3: 1.5rem;
|
|
|
|
--letter-spacing: normal;
|
|
|
|
/* COLOR */
|
|
--color-text: hsl(0, 0%, 15%);
|
|
--color-text-second: hsl(240, 10%, 60%);
|
|
--color-text-opposite: hsl(0, 0%, 95%);
|
|
|
|
--color-link: hsl(0, 0%, 85%);
|
|
--color-link-opposite: hsl(0, 0%, 35%);
|
|
|
|
--color-back-main: oklch(0.95 0 0);
|
|
--color-back: white;
|
|
--color-back-opposite: hsl(0, 0%, 15%);
|
|
|
|
--color-shadow: rgba(27, 51, 88, 0.25);
|
|
--color-hover: none;
|
|
|
|
/* SIZE */
|
|
--size-xs: 0.35rem;
|
|
--size-s: 0.75rem;
|
|
--size-m: 1.25rem;
|
|
--size-l: 3rem;
|
|
--size-xl: 5rem;
|
|
|
|
/* EFFECTS */
|
|
--radius: 24px;
|
|
--radius-small: 12px;
|
|
--shadow:
|
|
0 2px 4px rgba(27, 51, 88, 0.2),
|
|
0 4px 8px -8px rgba(0, 0, 0, 0.2),
|
|
0 8px 16px -8px rgba(0, 0, 0, 0.3);
|
|
--shadow: none;
|
|
--shadow-active:
|
|
0 4px 8px oklch(0.32 0.07 258.8 / 0.2),
|
|
0 8px 16px -16px rgba(0, 0, 0, 0.2),
|
|
0 16px 32px -16px rgba(0, 0, 0, 0.3);
|
|
--border: none;
|
|
|
|
/* SPECIAL */
|
|
--article-line-height: 1.5em;
|
|
--embed-video-ratio: 56.25%;
|
|
|
|
/* CONTENT */
|
|
--content-width: 75%;
|
|
--content-margin: 0;
|
|
|
|
--text-max-width: 800px;
|
|
|
|
/* KAZIMIR */
|
|
--kazimir-caption-margin: 0px;
|
|
--picture-wide-increase: 100px;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
min-width: 320px;
|
|
|
|
color: var(--color-text);
|
|
background-color: var(--color-back-main);
|
|
|
|
font-family: var(--text-font);
|
|
letter-spacing: var(--letter-spacing);
|
|
}
|
|
|
|
/* TITLE */
|
|
h1 {
|
|
font-family: var(--title-font);
|
|
text-align: center;
|
|
font-size: var(--font-size-h1);
|
|
|
|
hyphens: none;
|
|
}
|
|
|
|
h2 {
|
|
font-family: var(--title-font);
|
|
margin: var(--size-m) 0;
|
|
font-size: var(--font-size-h2);
|
|
|
|
hyphens: none;
|
|
}
|
|
|
|
h3 {
|
|
margin-bottom: var(--size-s);
|
|
font-size: var(--font-size-h3);
|
|
|
|
hyphens: none;
|
|
}
|
|
|
|
/* a.invisible {
|
|
border-bottom: none;
|
|
} */
|
|
|
|
.opposite a {
|
|
color: var(--color-text-opposite);
|
|
border-bottom-color: var(--color-link-opposite);
|
|
}
|
|
|
|
.opposite a:hover {
|
|
border-bottom-color: var(--color-text-opposite);
|
|
}
|
|
|
|
/* MOBILE */
|
|
@media (max-width: 31.25em) {
|
|
:root, .theme-contrast {
|
|
--font-size-default: 14pt !important;
|
|
--font-size-accent: 16pt !important;
|
|
--font-size-h1: 1.5rem !important;
|
|
--font-size-h2: 1.5rem !important;
|
|
--font-size-h3: 1.25rem !important;
|
|
|
|
--content-width: 100% !important;
|
|
--content-margin: var(--size-m) !important;
|
|
--content-wide-margin: var(--size-m) var(--size-m) !important;
|
|
|
|
--picture-wide-increase: 0px !important;
|
|
}
|
|
}
|
|
|
|
/* DARK THEME */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
/* TEXT COLOR */
|
|
--color-text: hsl(240, 10%, 80%);
|
|
--color-text-second: hsl(240, 10%, 60%);
|
|
--color-text-opposite: hsl(240, 10%, 15%);
|
|
|
|
--color-back-main: hsl(240, 10%, 10%);
|
|
--color-back: hsl(240, 10%, 15%);
|
|
--color-back-active: hsl(240, 10%, 20%);
|
|
--color-back-opposite: hsl(240, 10%, 80%);
|
|
--color-link: hsl(240, 10%, 40%);
|
|
--color-link-opposite: hsl(240, 10%, 60%);
|
|
|
|
--shadow: none;
|
|
--shadow-active: none;
|
|
}
|
|
}
|
|
|
|
/* CONTRAST THEME */
|
|
.theme-contrast {
|
|
/*margin-top: 235px;*/
|
|
|
|
/* EFFECTS */
|
|
--shadow: none;
|
|
--shadow-active: none;
|
|
|
|
/* FONTS */
|
|
/*--font-size-default: 16pt;*/
|
|
/*--font-size-accent: 24pt;*/
|
|
/*--font-size-second: 14pt;*/
|
|
|
|
--font-size-h1: 5rem;
|
|
--font-size-h2: 3rem;
|
|
--font-size-h3: 1.5rem;
|
|
|
|
/* OTHER */
|
|
--radius: 0;
|
|
--radius-small: 0;
|
|
--border: 5px solid var(--color-back-opposite);
|
|
}
|
|
|
|
.theme-contrast.font-sans-serif {
|
|
--title-font: "Roboto", Helvetica, sans-serif;
|
|
--text-font: "Roboto", Helvetica, sans-serif;
|
|
}
|
|
|
|
.theme-contrast.font-serif {
|
|
--title-font: "Times New Roman", serif;
|
|
--text-font: "Times New Roman", serif;
|
|
}
|
|
|
|
.theme-contrast.black-on-white {
|
|
--color-text: black;
|
|
--color-text-second: black;
|
|
--color-text-opposite: white;
|
|
--color-back-main: white;
|
|
--color-back: white;
|
|
--color-back-opposite: black;
|
|
|
|
--color-hover: white;
|
|
--color-hover-back: black;
|
|
|
|
--color-back-active: black;
|
|
--color-link: black;
|
|
--color-link-opposite: white;
|
|
}
|
|
|
|
.theme-contrast.white-on-black {
|
|
--color-text: white;
|
|
--color-text-second: white;
|
|
--color-text-opposite: black;
|
|
--color-back-main: black;
|
|
--color-back: black;
|
|
--color-back-opposite: white;
|
|
|
|
--color-hover: black;
|
|
--color-hover-back: white;
|
|
|
|
/*--color-back-active: hsl(240, 10%, 20%);*/
|
|
/*--color-link: hsl(240, 10%, 40%);*/
|
|
/*--color-link-opposite: hsl(240, 10%, 60%);*/
|
|
}
|
|
|
|
.theme-contrast.blue-on-blue {
|
|
--color-text: oklch(32% 24% 253deg);
|
|
--color-text-second: oklch(32% 24% 253deg);
|
|
--color-text-opposite: oklch(84% 21% 245deg);
|
|
--color-back-main: oklch(84% 21% 245deg);
|
|
--color-back: oklch(84% 21% 245deg);
|
|
--color-back-opposite: oklch(32% 24% 253deg);
|
|
|
|
--color-hover: oklch(84% 21% 245deg);
|
|
--color-hover-back: oklch(32% 24% 253deg);
|
|
|
|
/*--color-back-active: hsl(240, 10%, 20%);*/
|
|
/*--color-link: hsl(240, 10%, 40%);*/
|
|
/*--color-link-opposite: hsl(240, 10%, 60%);*/
|
|
}
|
|
|
|
.theme-contrast.brown-on-yellow {
|
|
--color-text: oklch(41% 3% 92deg);
|
|
--color-text-second: oklch(41% 3% 92deg);
|
|
--color-text-opposite: oklch(96% 9% 101deg);
|
|
--color-back-main: oklch(96% 9% 101deg);
|
|
--color-back: oklch(96% 9% 101deg);
|
|
--color-back-opposite: oklch(41% 3% 92deg);
|
|
|
|
--color-hover: oklch(96% 9% 101deg);
|
|
--color-hover-back: oklch(41% 3% 92deg);
|
|
|
|
/*--color-back-active: hsl(240, 10%, 20%);*/
|
|
/*--color-link: hsl(240, 10%, 40%);*/
|
|
/*--color-link-opposite: hsl(240, 10%, 60%);*/
|
|
}
|
|
|
|
.theme-contrast.green-on-brown {
|
|
--color-text: oklch(85% 47% 128deg);
|
|
--color-text-second: oklch(85% 47% 128deg);
|
|
--color-text-opposite: oklch(29% 10% 61deg);
|
|
--color-back-main: oklch(29% 10% 61deg);
|
|
--color-back: oklch(29% 10% 61deg);
|
|
--color-back-opposite: oklch(85% 47% 128deg);
|
|
|
|
--color-hover: oklch(29% 10% 61deg);
|
|
--color-hover-back: oklch(85% 47% 128deg);
|
|
|
|
/*--color-back-active: hsl(240, 10%, 20%);*/
|
|
/*--color-link: hsl(240, 10%, 40%);*/
|
|
/*--color-link-opposite: hsl(240, 10%, 60%);*/
|
|
}
|
|
|
|
.theme-contrast.no-images img {
|
|
display: none;
|
|
}
|
|
|
|
/*.theme-contrast.no-images img:after {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 1px solid black;
|
|
}*/
|