fonts & colors

This commit is contained in:
Julie Blanc 2025-12-09 14:05:53 +01:00
parent 790eb7414e
commit 678698b55d
45 changed files with 792 additions and 46 deletions

4
package-lock.json generated
View file

@ -1833,6 +1833,7 @@
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
"dev": true,
"license": "MIT",
"peer": true,
"engines": {
"node": ">=12"
},
@ -2011,6 +2012,7 @@
"integrity": "sha512-+VUy01yfDqNmIVMd/LLKl2TTtY0ovZN0rTonh+FhKr65mFwIYgU9WzgIZKS7U9/SPCQvWTsTGx9jyt+qRm/XFw==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@bufbuild/protobuf": "^2.5.0",
"buffer-builder": "^0.2.0",
@ -2489,6 +2491,7 @@
"integrity": "sha512-NL8jTlbo0Tn4dUEXEsUg8KeyG/Lkmc4Fnzb8JXN/Ykm9G4HNImjtABMJgkQoVjOBN/j2WAwDTRytdqJbZsah7w==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"esbuild": "^0.25.0",
"fdir": "^6.5.0",
@ -2563,6 +2566,7 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.25.tgz",
"integrity": "sha512-YLVdgv2K13WJ6n+kD5owehKtEXwdwXuj2TTyJMsO7pSeKw2bfRNZGjhB7YzrpbMYj5b5QsUebHpOqR3R3ziy/g==",
"license": "MIT",
"peer": true,
"dependencies": {
"@vue/compiler-dom": "3.5.25",
"@vue/compiler-sfc": "3.5.25",

View file

@ -1,20 +1,21 @@
button {
cursor: pointer;
border: 1px solid var(--color-browngray-300);
color: var(--color-browngray-300);
border: 1px solid var(--color-interface-300);
color: var(--color-interface-300);
background-color: var(--color-panel-bg);
border-radius: var(--border-radius);
padding: 0.1rem 0.3rem;
&.active {
border: 1px solid #000;
color: #000;
border: 1px solid var(--color-interface-700);
color: var(--color-interface-700);
background-color: var(--color-interface-100);
}
&.tab {
&.active {
background-color: #000;
background-color: var(--color-txt);
color: #fff;
border: none;
}

View file

@ -0,0 +1,162 @@
// DM Sans - Variable font (recommended)
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/DMSans/DMSans[opsz,wght].woff2') format('woff2-variations');
font-weight: 100 1000;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/DMSans/DMSans-Italic[opsz,wght].woff2') format('woff2-variations');
font-weight: 100 1000;
font-style: italic;
font-display: swap;
}
// DM Sans - Static weights (fallback)
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/DMSans/DMSans-Thin.woff2') format('woff2');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/DMSans/DMSans-ExtraLight.woff2') format('woff2');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/DMSans/DMSans-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/DMSans/DMSans-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/DMSans/DMSans-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/DMSans/DMSans-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/DMSans/DMSans-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/DMSans/DMSans-ExtraBold.woff2') format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/DMSans/DMSans-Black.woff2') format('woff2');
font-weight: 900;
font-style: normal;
font-display: swap;
}
// Inconsolata - Monospace font
@font-face {
font-family: 'Inconsolata';
src: url('/assets/fonts/Inconsolata/Inconsolata-Thin.woff2') format('woff2');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inconsolata';
src: url('/assets/fonts/Inconsolata/Inconsolata-ExtraLight.woff2') format('woff2');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inconsolata';
src: url('/assets/fonts/Inconsolata/Inconsolata-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inconsolata';
src: url('/assets/fonts/Inconsolata/Inconsolata-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inconsolata';
src: url('/assets/fonts/Inconsolata/Inconsolata-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inconsolata';
src: url('/assets/fonts/Inconsolata/Inconsolata-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inconsolata';
src: url('/assets/fonts/Inconsolata/Inconsolata-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inconsolata';
src: url('/assets/fonts/Inconsolata/Inconsolata-ExtraBold.woff2') format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inconsolata';
src: url('/assets/fonts/Inconsolata/Inconsolata-Black.woff2') format('woff2');
font-weight: 900;
font-style: normal;
font-display: swap;
}

View file

@ -1,9 +1,19 @@
select,
input[type="text"],
input[type="number"] {
background-color: var(--color-browngray-300);
background-color: white;
// border-radius: 4px;
min-height: 20px;
border: 1px solid var(--color-interface-200);
background-color: var(--color-interface-100);
font-family: var(--sans-serif);
}
.field--view-only {
opacity: 0.3;
}

View file

@ -1,15 +1,10 @@
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
input,
select,
figcaption,
label {
font-family: sans-serif;
body {
font-family: var(--sans-serif);
color: var(--color-txt);
}
// code,
// pre,
// .monospace {
// font-family: 'Inconsolata', monospace;
// }

View file

@ -1,8 +1,78 @@
:root {
--color-panel-bg: #e8e6e5;
--color-browngray-050: #f5f3f0;
--color-browngray-200: #d0c4ba;
--color-browngray-300: #b5a9a1;
--color-interface-050: #f5f5f5;
--color-interface-100: #e2e6ed;
--color-interface-200: #d7dce8;
--color-interface-300: #c0c4d1;
--color-interface-400: #bec4d4;
--color-interface-900: #3e414c;
// MARRON
--color-interface-050: #fcf7f4;
--color-interface-100: #f5eae4;
--color-interface-200: #e9d4c8;
--color-interface-300: #d8b7a6;
--color-interface-400: #c39986;
--color-interface-500: #ad826f;
--color-interface-600: #916b5b;
--color-interface-700: #755548;
--color-interface-800: #5c443a;
--color-interface-900: #46342b;
// BRONZESUBTIL
--color-interface-050: #f5f0ed;
--color-interface-050: #f8f5f4;
--color-interface-100: #efe9e6;
--color-interface-200: #e0d5d0;
--color-interface-300: #cabbb5;
--color-interface-400: #b2a29c;
--color-interface-500: #998985;
--color-interface-600: #7f716e;
--color-interface-700: #675b58;
--color-interface-800: #5b4f4c;
--color-interface-900: #483c39;
//CHAMPAGNE
// --color-interface-050: #f9f6f4;
// --color-interface-100: #f2ebe6;
// --color-interface-200: #e6d8cf;
// --color-interface-300: #d4c2b7;
// --color-interface-400: #c2ac9d;
// --color-interface-500: #ac9383;
// --color-interface-600: #927a6a;
// --color-interface-700: #776356;
// --color-interface-800: #5e4e45;
// --color-interface-900: #473a32;
// GREY
// --color-interface-050: #f7f6f4;
// --color-interface-100: #eceae6;
// --color-interface-200: #dedbd6;
// --color-interface-300: #c9c5be;
// --color-interface-400: #b4afa7;
// --color-interface-500: #9d978f;
// --color-interface-600: #86817a;
// --color-interface-700: #6e6a63;
// --color-interface-800: #55534d;
// --color-interface-900: #3e3c37;
--color-txt: var(--color-interface-800);
--color-panel-bg: var(--color-interface-050);
--color-page-highlight: #ff8a50;
--color-purple: #7136ff;
@ -12,4 +82,7 @@
--space-xs: 0.5rem;
--curve: cubic-bezier(0.86, 0, 0.07, 1);
--sans-serif: 'DM Sans', sans-serif;
--mono: 'Inconsolata', monospace;
}

View file

@ -1,3 +1,143 @@
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans[opsz,wght].woff2") format("woff2-variations");
font-weight: 100 1000;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-Italic[opsz,wght].woff2") format("woff2-variations");
font-weight: 100 1000;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-Thin.woff2") format("woff2");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-ExtraLight.woff2") format("woff2");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-Light.woff2") format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-SemiBold.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-ExtraBold.woff2") format("woff2");
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-Black.woff2") format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-Thin.woff2") format("woff2");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-ExtraLight.woff2") format("woff2");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-Light.woff2") format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-SemiBold.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-ExtraBold.woff2") format("woff2");
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-Black.woff2") format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
}
body,
html {
padding: 0;
@ -26,31 +166,49 @@ button {
}
:root {
--color-panel-bg: #e8e6e5;
--color-browngray-050: #f5f3f0;
--color-browngray-200: #d0c4ba;
--color-browngray-300: #b5a9a1;
--color-interface-050: #f5f5f5;
--color-interface-100: #e2e6ed;
--color-interface-200: #d7dce8;
--color-interface-300: #c0c4d1;
--color-interface-400: #bec4d4;
--color-interface-900: #3e414c;
--color-interface-050: #fcf7f4;
--color-interface-100: #f5eae4;
--color-interface-200: #e9d4c8;
--color-interface-300: #d8b7a6;
--color-interface-400: #c39986;
--color-interface-500: #ad826f;
--color-interface-600: #916b5b;
--color-interface-700: #755548;
--color-interface-800: #5c443a;
--color-interface-900: #46342b;
--color-interface-050: #f5f0ed;
--color-interface-050: #f8f5f4;
--color-interface-100: #efe9e6;
--color-interface-200: #e0d5d0;
--color-interface-300: #cabbb5;
--color-interface-400: #b2a29c;
--color-interface-500: #998985;
--color-interface-600: #7f716e;
--color-interface-700: #675b58;
--color-interface-800: #5b4f4c;
--color-interface-900: #483c39;
--color-txt: var(--color-interface-800);
--color-panel-bg: var(--color-interface-050);
--color-page-highlight: #ff8a50;
--color-purple: #7136ff;
--border-radius: 0.2rem;
--space-xs: 0.5rem;
--curve: cubic-bezier(0.86, 0, 0.07, 1);
--sans-serif: "DM Sans", sans-serif;
--mono: "Inconsolata", monospace;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
input,
select,
figcaption,
label {
font-family: sans-serif;
body {
font-family: var(--sans-serif);
color: var(--color-txt);
}
/* PagedJS print styles */
@ -75,7 +233,11 @@ h2 {
select,
input[type=text],
input[type=number] {
background-color: var(--color-browngray-300);
background-color: white;
min-height: 20px;
border: 1px solid var(--color-interface-200);
background-color: var(--color-interface-100);
font-family: var(--sans-serif);
}
.field--view-only {
@ -183,18 +345,19 @@ input[type=number] {
button {
cursor: pointer;
border: 1px solid var(--color-browngray-300);
color: var(--color-browngray-300);
border: 1px solid var(--color-interface-300);
color: var(--color-interface-300);
background-color: var(--color-panel-bg);
border-radius: var(--border-radius);
padding: 0.1rem 0.3rem;
}
button.active {
border: 1px solid #000;
color: #000;
border: 1px solid var(--color-interface-700);
color: var(--color-interface-700);
background-color: var(--color-interface-100);
}
button.tab.active {
background-color: #000;
background-color: var(--color-txt);
color: #fff;
border: none;
}

File diff suppressed because one or more lines are too long

View file

@ -1,3 +1,4 @@
@import "src/_fonts.scss";
@import "src/_reset.scss";
@import "src/_variables.scss";
@import "src/_text.scss";

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -0,0 +1,137 @@
/* DMSans Font Faces */
@font-face {
font-family: "DMSans";
src: url("DMSans-Black.woff2") format("woff2");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "DMSans";
src: url("DMSans-BlackItalic.woff2") format("woff2");
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: "DMSans";
src: url("DMSans-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "DMSans";
src: url("DMSans-BoldItalic.woff2") format("woff2");
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: "DMSans";
src: url("DMSans-ExtraBlack.woff2") format("woff2");
font-weight: 950;
font-style: normal;
}
@font-face {
font-family: "DMSans";
src: url("DMSans-ExtraBlackItalic.woff2") format("woff2");
font-weight: 950;
font-style: italic;
}
@font-face {
font-family: "DMSans";
src: url("DMSans-ExtraBold.woff2") format("woff2");
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: "DMSans";
src: url("DMSans-ExtraBoldItalic.woff2") format("woff2");
font-weight: 800;
font-style: italic;
}
@font-face {
font-family: "DMSans";
src: url("DMSans-ExtraLight.woff2") format("woff2");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "DMSans";
src: url("DMSans-ExtraLightItalic.woff2") format("woff2");
font-weight: 200;
font-style: italic;
}
@font-face {
font-family: "DMSans";
src: url("DMSans-Italic.woff2") format("woff2");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "DMSans";
src: url("DMSans-Italic[opsz,wght].woff2") format("woff2");
font-weight: 100 900;
font-style: italic;
}
@font-face {
font-family: "DMSans";
src: url("DMSans-Light.woff2") format("woff2");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "DMSans";
src: url("DMSans-LightItalic.woff2") format("woff2");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "DMSans";
src: url("DMSans-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "DMSans";
src: url("DMSans-MediumItalic.woff2") format("woff2");
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: "DMSans";
src: url("DMSans-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "DMSans";
src: url("DMSans-SemiBold.woff2") format("woff2");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: "DMSans";
src: url("DMSans-SemiBoldItalic.woff2") format("woff2");
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: "DMSans";
src: url("DMSans-Thin.woff2") format("woff2");
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: "DMSans";
src: url("DMSans-ThinItalic.woff2") format("woff2");
font-weight: 100;
font-style: italic;
}
@font-face {
font-family: "DMSans";
src: url("DMSans[opsz,wght].woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
}
/* Example usage */
body {
font-family: "DMSans", sans-serif;
}/*# sourceMappingURL=stylesheet.css.map */

View file

@ -0,0 +1 @@
{"version":3,"sources":["stylesheet.scss","stylesheet.css"],"names":[],"mappings":"AAAA,sBAAA;AACA;EACE,qBAAA;EACA,8CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,oDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,6CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,mDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,mDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,yDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,kDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,wDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,mDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,yDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,+CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,0DAAA;EACA,oBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,8CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,oDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,+CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,qDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,gDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,iDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,uDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,6CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,mDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,mDAAA;EACA,oBAAA;EACA,kBAAA;ACCF;ADEA,kBAAA;AACA;EACE,iCAAA;ACAF","file":"stylesheet.css"}

View file

@ -0,0 +1,138 @@
/* DMSans Font Faces */
@font-face {
font-family: 'DMSans';
src: url('DMSans-Black.woff2') format('woff2');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'DMSans';
src: url('DMSans-BlackItalic.woff2') format('woff2');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'DMSans';
src: url('DMSans-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'DMSans';
src: url('DMSans-BoldItalic.woff2') format('woff2');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: 'DMSans';
src: url('DMSans-ExtraBlack.woff2') format('woff2');
font-weight: 950;
font-style: normal;
}
@font-face {
font-family: 'DMSans';
src: url('DMSans-ExtraBlackItalic.woff2') format('woff2');
font-weight: 950;
font-style: italic;
}
@font-face {
font-family: 'DMSans';
src: url('DMSans-ExtraBold.woff2') format('woff2');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'DMSans';
src: url('DMSans-ExtraBoldItalic.woff2') format('woff2');
font-weight: 800;
font-style: italic;
}
@font-face {
font-family: 'DMSans';
src: url('DMSans-ExtraLight.woff2') format('woff2');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'DMSans';
src: url('DMSans-ExtraLightItalic.woff2') format('woff2');
font-weight: 200;
font-style: italic;
}
@font-face {
font-family: 'DMSans';
src: url('DMSans-Italic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'DMSans';
src: url('DMSans-Italic[opsz,wght].woff2') format('woff2');
font-weight: 100 900;
font-style: italic;
}
@font-face {
font-family: 'DMSans';
src: url('DMSans-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'DMSans';
src: url('DMSans-LightItalic.woff2') format('woff2');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'DMSans';
src: url('DMSans-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'DMSans';
src: url('DMSans-MediumItalic.woff2') format('woff2');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'DMSans';
src: url('DMSans-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'DMSans';
src: url('DMSans-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'DMSans';
src: url('DMSans-SemiBoldItalic.woff2') format('woff2');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'DMSans';
src: url('DMSans-Thin.woff2') format('woff2');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'DMSans';
src: url('DMSans-ThinItalic.woff2') format('woff2');
font-weight: 100;
font-style: italic;
}
@font-face {
font-family: 'DMSans';
src: url('DMSans[opsz,wght].woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
}
/* Example usage */
body {
font-family: 'DMSans', sans-serif;
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -0,0 +1,61 @@
/* Inconsolata Font Faces (ordered from lightest to boldest) */
@font-face {
font-family: 'Inconsolata';
src: url('Inconsolata-Thin.woff2') format('woff2');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Inconsolata';
src: url('Inconsolata-ExtraLight.woff2') format('woff2');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'Inconsolata';
src: url('Inconsolata-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Inconsolata';
src: url('Inconsolata-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Inconsolata';
src: url('Inconsolata-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Inconsolata';
src: url('Inconsolata-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Inconsolata';
src: url('Inconsolata-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Inconsolata';
src: url('Inconsolata-ExtraBold.woff2') format('woff2');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'Inconsolata';
src: url('Inconsolata-Black.woff2') format('woff2');
font-weight: 900;
font-style: normal;
}
/* Example usage */
/* code, pre, .mono {
font-family: 'Inconsolata', monospace;
} */

View file

@ -100,7 +100,7 @@ nav {
border: none;
cursor: pointer;
color: var(--color-browngray-300);
color: var(--color-interface-300);
transition: color 0.2s ease;
&:hover {