179 lines
3.5 KiB
CSS
179 lines
3.5 KiB
CSS
@import url('https://fonts.googleapis.com/css?family=PT+Sans&display=swap');
|
|
|
|
:root {
|
|
/* FONTS */
|
|
--title-font: Shadow, Georgia, serif;
|
|
--text-font: 'PT Sans', 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;
|
|
|
|
/* COLOR */
|
|
--color-text: hsl(0, 0%, 15%);
|
|
--color-text-second: hsl(240, 10%, 70%);
|
|
--color-text-opposite: hsl(0, 0%, 95%);
|
|
|
|
--color-link: hsl(0, 0%, 85%);
|
|
--color-link-opposite: hsl(0, 0%, 35%);
|
|
|
|
--color-back-main: white;
|
|
--color-back: white;
|
|
--color-back-opposite: hsl(0, 0%, 15%);
|
|
|
|
--color-shadow: rgba(27, 51, 88, 0.25);
|
|
|
|
/* SIZE */
|
|
--size-xs: 0.35em;
|
|
--size-s: 0.75em;
|
|
--size-m: 1em;
|
|
--size-l: 2em;
|
|
--size-xl: 3em;
|
|
|
|
/* EFFECTS */
|
|
--radius: 16px;
|
|
--shadow: 0 0 8px var(--color-shadow);
|
|
--shadow-active:
|
|
0 12px 24px -8px rgba(27, 51, 88, 0.25),
|
|
0 8px 16px -8px rgba(0, 0, 0, 0.3);
|
|
|
|
/* SPECIAL */
|
|
--article-line-height: 1.5em;
|
|
--menu-mark-thickness: 4px;
|
|
--embed-video-ratio: 56.25%;
|
|
|
|
/* CONTENT */
|
|
--content-width: 60%;
|
|
--content-margin: 0;
|
|
--content-wide-width: 100%;
|
|
--content-wide-margin: var(--size-l) var(--size-xl);
|
|
|
|
/* KAZIMIR */
|
|
--kazimir-caption-margin: 0px;
|
|
--kazimir-radius: 10px;
|
|
--kazimir-image-increase: 50px;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
min-width: 320px;
|
|
|
|
color: var(--color-text);
|
|
background-color: var(--color-back-main);
|
|
}
|
|
|
|
footer {
|
|
padding: var(--size-m);
|
|
color: var(--color-text-opposite);
|
|
background-color: var(--color-back-opposite);
|
|
font-size: var(--font-size-second);
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
font-size: var(--font-size-h1);
|
|
|
|
hyphens: none;
|
|
}
|
|
|
|
h2 {
|
|
margin: var(--size-m) 0;
|
|
font-size: var(--font-size-h2);
|
|
|
|
hyphens: none;
|
|
}
|
|
|
|
h3 {
|
|
margin: var(--size-m) 0;
|
|
|
|
font-size: var(--font-size-h3);
|
|
|
|
hyphens: none;
|
|
}
|
|
|
|
h1,
|
|
h2 {
|
|
font-family: var(--title-font);
|
|
}
|
|
|
|
a {
|
|
color: var(--color-text);
|
|
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--color-link);
|
|
}
|
|
|
|
a:hover {
|
|
border-bottom: 2px solid var(--color-text);
|
|
}
|
|
|
|
a:active {
|
|
border-width: 2px;
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
.noscroll {
|
|
overflow: hidden;
|
|
}
|
|
|
|
@media (max-width: 31.25em) {
|
|
:root {
|
|
--font-size-default: 14pt;
|
|
--font-size-accent: 16pt;
|
|
--font-size-h1: 1.5rem;
|
|
--font-size-h2: 1.5rem;
|
|
--font-size-h3: 1.25rem;
|
|
|
|
--content-width: 100%;
|
|
--content-margin: var(--size-m);
|
|
--content-wide-margin: var(--size-m) var(--size-m);
|
|
|
|
--kazimir-image-increase: 0px;
|
|
}
|
|
}
|
|
|
|
/* DARK THEME */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
/* TEXT COLOR */
|
|
--color-text: hsl(240, 10%, 80%);
|
|
--color-text-second: hsl(240, 10%, 40%);
|
|
--color-text-opposite: hsl(240, 10%, 15%);
|
|
|
|
--color-back-main: hsl(240, 10%, 10%);
|
|
--color-back: hsl(240, 10%, 15%);
|
|
--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;
|
|
}
|
|
}
|