|
- @font-face {
- font-family: 'Encode Sans';
- font-stretch: semi-expanded;
- font-weight: 400;
- src:
- local('Encode Sans Semi Expanded'),
- local('Encode Sans');
- }
-
- @font-face {
- font-family: 'Encode Sans';
- font-stretch: semi-expanded;
- font-weight: 700;
- src:
- local('Encode Sans Semi Expanded Bold'),
- local('Encode Sans Semi Expanded'),
- local('Encode Sans');
- }
-
- @font-face {
- font-family: 'Encode Sans';
- font-stretch: condensed;
- font-weight: 100;
- src:
- local('Encode Sans Condensed Thin'),
- local('Encode Sans Condensed'),
- local('Encode Sans');
- }
-
- @font-face {
- font-family: 'Encode Sans';
- font-stretch: condensed;
- font-weight: 200;
- src:
- local('Encode Sans Condensed ExtraLight'),
- local('Encode Sans Condensed Extra Light'),
- local('Encode Sans Condensed'),
- local('Encode Sans');
- }
-
- @font-face {
- font-family: 'Encode Sans';
- font-stretch: condensed;
- font-weight: 300;
- src:
- local('Encode Sans Condensed Light'),
- local('Encode Sans Condensed'),
- local('Encode Sans');
- }
-
- :root {
- --color-shade: #000;
- --color-active: #f90;
- --font-family-base: 'Encode Sans Semi Expanded', 'Encode Sans', system-ui;
- --font-stretch-base: semi-expanded;
- --font-weight-base: 400;
- --line-height-base: 2;
- --font-family-headings:'Encode Sans Condensed', 'Encode Sans', system-ui;
- --font-stretch-headings: condensed;
- --font-weight-headings: 100;
- --line-height-headings: 1.5;
- --font-family-monospace: 'mononoki';
- --font-size-root: 16px;
- --color-negative: #222;
- --color-positive: #eee;
- --color-accent: #C78AB3;
- --opacity-light: 0.25;
- --opacity-lighter: 0.5;
- --opacity-lightest: 0.75;
-
- --color-code-number: #74f95e;
- --color-code-keyword: #ff4389;
- --color-code-type: #5097D2;
- --color-code-instance-attribute: #76a7d2;
- --color-code-function: #67c252;
- --color-code-parameter: #915ec2;
- --color-code-property: #ffa1c9;
- --color-code-string: #eed371;
- --color-code-variable: #8bc275;
- --color-code-regexp: #74A72B;
- --color-code-url: #0099CC;
- --color-code-global: #C28050;
- }
-
- :root {
- --color-bg: var(--color-negative, white);
- --color-fg: var(--color-positive, black);
- background-color: var(--color-bg);
- color: var(--color-fg);
- 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, 2);
- transition-property: color, background-color;
- transition-timing-function: ease;
- transition-duration: 350ms;
- }
-
- 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: var(--font-weight-headings, 400);
- 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: var(--font-weight-headings, 400);
- 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);
- }
-
- a {
- color: var(--color-accent);
- }
-
- code {
- font-family: var(--font-family-monospace), monospace;
- }
-
- pre {
- font-family: var(--font-family-monospace), monospace;
- }
|