|
|
@@ -0,0 +1,166 @@ |
|
|
|
@font-face { |
|
|
|
font-family: 'mononoki'; |
|
|
|
font-weight: 400; |
|
|
|
font-style: normal; |
|
|
|
font-display: swap; |
|
|
|
src: |
|
|
|
local('mononoki'), |
|
|
|
url(fonts/mononoki/mononoki-Regular.woff2) format('woff2'); |
|
|
|
} |
|
|
|
|
|
|
|
@font-face { |
|
|
|
font-family: 'mononoki'; |
|
|
|
font-weight: 700; |
|
|
|
font-style: normal; |
|
|
|
font-display: swap; |
|
|
|
src: |
|
|
|
local('mononoki Bold'), |
|
|
|
local('mononoki'), |
|
|
|
url(fonts/mononoki/mononoki-Bold.woff2) format('woff2'); |
|
|
|
} |
|
|
|
|
|
|
|
@font-face { |
|
|
|
font-family: 'mononoki'; |
|
|
|
font-weight: 400; |
|
|
|
font-style: italic; |
|
|
|
font-display: swap; |
|
|
|
src: |
|
|
|
local('mononoki Italic'), |
|
|
|
local('mononoki'), |
|
|
|
url(fonts/mononoki/mononoki-Italic.woff2) format('woff2'); |
|
|
|
} |
|
|
|
|
|
|
|
@font-face { |
|
|
|
font-family: 'mononoki'; |
|
|
|
font-weight: 700; |
|
|
|
font-style: italic; |
|
|
|
font-display: swap; |
|
|
|
src: |
|
|
|
local('mononoki Bold Italic'), |
|
|
|
local('mononoki BoldItalic'), |
|
|
|
local('mononoki'), |
|
|
|
url(fonts/mononoki/mononoki-BoldItalic.woff2) format('woff2'); |
|
|
|
} |
|
|
|
|
|
|
|
:root { |
|
|
|
--font-family-base: 'Encode Sans', system-ui; |
|
|
|
--font-stretch-base: semi-expanded; |
|
|
|
--font-weight-base: 400; |
|
|
|
--line-height-base: 1.5em; |
|
|
|
--font-family-headings: 'Encode Sans', system-ui; |
|
|
|
--font-stretch-headings: condensed; |
|
|
|
--font-weight-headings: 100; |
|
|
|
--line-height-headings: 1.125em; |
|
|
|
--font-family-monospace: 'mononoki'; |
|
|
|
--font-size-root: 16px; |
|
|
|
--opacity-light: 0.25; |
|
|
|
--opacity-lighter: 0.5; |
|
|
|
--opacity-lightest: 0.75; |
|
|
|
} |
|
|
|
|
|
|
|
:root { |
|
|
|
--color-bg: var(--color-negative, white); |
|
|
|
--color-fg: var(--color-positive, black); |
|
|
|
--color-accent: var(--color-primary, blue); |
|
|
|
--color-active: var(--color-secondary, red); |
|
|
|
} |
|
|
|
|
|
|
|
@media (prefers-color-scheme: dark) { |
|
|
|
:root { |
|
|
|
--color-bg: var(--color-negative, black); |
|
|
|
--color-fg: var(--color-positive, white); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
:root { |
|
|
|
font-size: var(--font-size-root); |
|
|
|
font-family: var(--font-family-base), sans-serif; |
|
|
|
font-stretch: var(--font-stretch-base, normal); |
|
|
|
font-weight: var(--font-weight-base, 400); |
|
|
|
line-height: var(--line-height-base, 1.5); |
|
|
|
transition-property: color, background-color; |
|
|
|
transition-timing-function: ease; |
|
|
|
transition-duration: 350ms; |
|
|
|
} |
|
|
|
|
|
|
|
@media only screen { |
|
|
|
:root { |
|
|
|
background-color: var(--color-bg); |
|
|
|
color: var(--color-fg); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
h1 { |
|
|
|
font-family: var(--font-family-headings), sans-serif; |
|
|
|
font-stretch: var(--font-stretch-headings, normal); |
|
|
|
font-weight: var(--font-weight-headings, 400); |
|
|
|
line-height: var(--line-height-headings, 1.5); |
|
|
|
} |
|
|
|
|
|
|
|
h2 { |
|
|
|
font-family: var(--font-family-headings), sans-serif; |
|
|
|
font-stretch: var(--font-stretch-headings, normal); |
|
|
|
font-weight: calc(var(--font-weight-headings, 400) / 100 * 150); |
|
|
|
line-height: var(--line-height-headings, 1.5); |
|
|
|
} |
|
|
|
|
|
|
|
h3 { |
|
|
|
font-family: var(--font-family-headings), sans-serif; |
|
|
|
font-stretch: var(--font-stretch-headings, normal); |
|
|
|
font-weight: calc(var(--font-weight-headings, 400) / 100 * 250); |
|
|
|
line-height: var(--line-height-headings, 1.5); |
|
|
|
} |
|
|
|
|
|
|
|
h4 { |
|
|
|
font-family: var(--font-family-headings), sans-serif; |
|
|
|
font-stretch: var(--font-stretch-headings, normal); |
|
|
|
font-weight: var(--font-weight-headings, 400); |
|
|
|
line-height: var(--line-height-headings, 1.5); |
|
|
|
} |
|
|
|
|
|
|
|
h5 { |
|
|
|
font-family: var(--font-family-headings), sans-serif; |
|
|
|
font-stretch: var(--font-stretch-headings, normal); |
|
|
|
font-weight: var(--font-weight-headings, 400); |
|
|
|
line-height: var(--line-height-headings, 1.5); |
|
|
|
} |
|
|
|
|
|
|
|
h6 { |
|
|
|
font-family: var(--font-family-headings), sans-serif; |
|
|
|
font-stretch: var(--font-stretch-headings, normal); |
|
|
|
font-weight: var(--font-weight-headings, 400); |
|
|
|
line-height: var(--line-height-headings, 1.5); |
|
|
|
} |
|
|
|
|
|
|
|
code { |
|
|
|
font-family: var(--font-family-monospace), monospace; |
|
|
|
} |
|
|
|
|
|
|
|
pre { |
|
|
|
font-family: var(--font-family-monospace), monospace; |
|
|
|
} |
|
|
|
|
|
|
|
a { |
|
|
|
color: inherit; |
|
|
|
text-decoration: none; |
|
|
|
} |
|
|
|
|
|
|
|
@media only screen { |
|
|
|
a { |
|
|
|
color: var(--color-accent); |
|
|
|
text-decoration: underline; |
|
|
|
} |
|
|
|
|
|
|
|
a:focus { |
|
|
|
color: var(--color-active); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
::selection { |
|
|
|
background-color: var(--color-active); |
|
|
|
color: var(--color-fg); |
|
|
|
} |
|
|
|
|
|
|
|
:root { |
|
|
|
caret-color: var(--color-active); |
|
|
|
} |