use cdnfonts

This commit is contained in:
Oskar Wickström
2024-08-27 18:15:47 +02:00
parent 8a004d1859
commit 656cb9800e
3 changed files with 18 additions and 16 deletions

View File

@@ -1,16 +1,21 @@
@import url('https://fonts.cdnfonts.com/css/jetbrains-mono-2');
:root { :root {
--font-family: "Fira Code", monospace; --font-family: "JetBrains Mono", monospace;
--line-height: 1.25rem; --line-height: 1.20rem;
--border-thickness: 2px; --border-thickness: 2px;
--bold-weight: 700;
--text-color: #000; --text-color: #000;
--text-color-alt: #666; --text-color-alt: #666;
--background-color: #fff; --background-color: #fff;
--background-color-alt: #eee; --background-color-alt: #eee;
--font-weight-normal: 500;
--font-weight-medium: 600;
--font-weight-bold: 800;
font-family: var(--font-family); font-family: var(--font-family);
font-optical-sizing: auto; font-optical-sizing: auto;
font-weight: 500; font-weight: var(--font-weight-normal);
font-style: normal; font-style: normal;
font-variant-numeric: tabular-nums lining-nums; font-variant-numeric: tabular-nums lining-nums;
font-size: 16px; font-size: 16px;
@@ -64,7 +69,7 @@ body {
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-weight: var(--bold-weight); font-weight: var(--font-weight-bold);
margin: calc(var(--line-height) * 2) 0 var(--line-height); margin: calc(var(--line-height) * 2) 0 var(--line-height);
line-height: var(--line-height); line-height: var(--line-height);
} }
@@ -112,7 +117,7 @@ p {
} }
strong { strong {
font-weight: var(--bold-weight); font-weight: var(--font-weight-bold);
} }
em { em {
font-style: italic; font-style: italic;
@@ -191,7 +196,7 @@ details {
} }
summary { summary {
font-weight: 600; font-weight: var(--font-weight-medium);
} }
details[open] summary { details[open] summary {
margin-bottom: var(--line-height); margin-bottom: var(--line-height);
@@ -199,7 +204,7 @@ details[open] summary {
details ::marker { details ::marker {
display: inline-block; display: inline-block;
content: ''; content: '';
margin: 0; margin: 0;
} }
details[open] ::marker { details[open] ::marker {
@@ -224,7 +229,7 @@ pre, code {
} }
code { code {
font-weight: 600; font-weight: var(--font-weight-medium);
} }
figure { figure {
@@ -262,7 +267,7 @@ ul ul {
ol li:before { ol li:before {
content: counters(item, ".") ". "; content: counters(item, ".") ". ";
counter-increment: item; counter-increment: item;
font-weight: 600; font-weight: var(--font-weight-medium);
} }
li { li {
@@ -334,7 +339,7 @@ button::-moz-focus-inner {
button { button {
text-transform: uppercase; text-transform: uppercase;
font-weight: 600; font-weight: var(--font-weight-medium);
cursor: pointer; cursor: pointer;
} }
@@ -350,7 +355,7 @@ label {
width: calc(round(down, 100%, 1ch)); width: calc(round(down, 100%, 1ch));
height: auto; height: auto;
line-height: var(--line-height); line-height: var(--line-height);
font-weight: 600; font-weight: var(--font-weight-medium);
margin: 0; margin: 0;
} }

View File

@@ -9,7 +9,7 @@
<title>The Monospace Web</title> <title>The Monospace Web</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet"> <link href="https://fonts.cdnfonts.com/css/ibm-plex-mono" rel="stylesheet">
<link rel="stylesheet" href="reset.css" /> <link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="index.css" /> <link rel="stylesheet" href="index.css" />
</head> </head>

View File

@@ -17,9 +17,6 @@ $if(description-meta)$
<meta name="description" content="$description-meta$" /> <meta name="description" content="$description-meta$" />
$endif$ $endif$
<title>$if(title-prefix)$$title-prefix$ $endif$$pagetitle$</title> <title>$if(title-prefix)$$title-prefix$ $endif$$pagetitle$</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
$for(css)$ $for(css)$
<link rel="stylesheet" href="$css$" /> <link rel="stylesheet" href="$css$" />
$endfor$ $endfor$