mirror of
https://github.com/frainfreeze/the-monospace-web-pandoc
synced 2025-12-29 18:49:50 -08:00
use cdnfonts
This commit is contained in:
29
index.css
29
index.css
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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$
|
||||||
|
|||||||
Reference in New Issue
Block a user