diff --git a/article.html b/article.html
index eeb3200..f89c975 100644
--- a/article.html
+++ b/article.html
@@ -12,9 +12,7 @@
-
-
-
+
The website is being created
diff --git a/css/article.css b/css/article.css
new file mode 100644
index 0000000..c1349a5
--- /dev/null
+++ b/css/article.css
@@ -0,0 +1,174 @@
+@import url("style.css");
+@import url("code.css");
+@import url("illustration.css");
+
+article {
+ flex: 1;
+
+ position: relative;
+
+ nav#lang-selector {
+ position: absolute;
+
+ top: 0;
+ right: 0;
+
+ label {
+ font-size: 0;
+
+ line-height: 44px;
+ text-align: center;
+
+ display: block;
+ width: 44px;
+ height: 44px;
+ box-sizing: border-box;
+
+ cursor: pointer;
+
+ border: solid 1px var(--foreground-color);
+
+ &::before {
+ content: "T";
+
+ font-size: 24px;
+ }
+ }
+
+ ul {
+ position: absolute;
+ right: 0;
+ top: 43px;
+
+ display: none;
+
+ margin: 0;
+ padding: 0;
+
+ border: solid 1px var(--foreground-color);
+ background: var(--background-color);
+
+ li {
+ list-style: none;
+
+ a {
+ display: block;
+ text-align: center;
+
+ padding: 8px 16px;
+ }
+ }
+ }
+
+ &:focus-within ul {
+ display: block;
+ }
+ }
+}
+
+main {
+ & > nav#toc {
+ menu {
+ position: sticky;
+
+ top: 72px;
+
+ margin: 0;
+ padding: 0;
+
+ li {
+ list-style: none;
+ border-left: solid 1px var(--foreground-color);
+ padding-left: 8px;
+ position: relative;
+
+ &.visible,
+ &:hover {
+ &::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+
+ display: block;
+ background-color: var(--foreground-color);
+
+ margin-left: -2px;
+ width: 3px;
+ }
+ }
+
+ a:hover {
+ text-decoration: none;
+ }
+ }
+ }
+
+ width: 240px;
+ }
+
+ & > article {
+ ul#metadata {
+ margin: 0;
+ padding: 0;
+
+ li {
+ list-style: none;
+
+ &#tags {
+ .label {
+ display: none;
+ }
+
+ ul {
+ padding: 0;
+
+ display: flex;
+
+ margin: 1ch 0;
+ gap: 1ch;
+
+ li {
+ padding: 0.5ch;
+ background-color: var(--foreground-color);
+ color: var(--background-color);
+ border-radius: 4px;
+ }
+ }
+ }
+ }
+ }
+
+ main {
+ display: block;
+ margin: 0;
+ }
+
+ footer {
+ text-align: right;
+ position: relative;
+ /*padding-top: 16px;*/
+
+ &::before {
+ content: "";
+ position: absolute;
+
+ display: block;
+
+ border-top: solid 1px var(--foreground-color);
+
+ width: 340px;
+ top: -8px;
+ right: 0;
+ }
+ }
+
+ /* Offsetting an anchor, stack overflow #10732690 */
+ [id].article-heading::before {
+ content: "";
+ display: block;
+ height: 80px;
+ margin-top: -80px;
+ visibility: hidden;
+ }
+ }
+}
diff --git a/css/code.css b/css/code.css
index 180713e..b7c02c3 100644
--- a/css/code.css
+++ b/css/code.css
@@ -1,12 +1,13 @@
-code span.comment {
- font-style: italic;
-}
-
code {
display: table;
counter-set: code-line 1;
border-collapse: collapse;
width: 100%;
+ font-family: var(--font-code);
+
+ span.comment {
+ font-style: italic;
+ }
& > div {
display: table-row;
@@ -26,20 +27,28 @@ code {
line-height: 2;
font-style: italic;
user-select: none;
+ font-family: var(--font-content);
&::before {
content: "\0022EE";
font-style: normal;
+ font-family: var(--font-code);
}
}
+ &.highlighted {
+ background-color: var(--highlighted-background-color);
+ }
+
&::before {
padding: 0 1ch;
text-align: right;
display: table-cell;
width: 0;
+
+ border-right: solid 1px var(--foreground-color);
}
span:first-child {
diff --git a/css/style.css b/css/style.css
index a7f15e5..624ab4b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,4 +1,4 @@
-@import url("/css/fonts.css");
+@import url("fonts.css");
:root {
--background-color: #fafafa;
@@ -256,111 +256,6 @@ main {
margin: 32px 8px 16px -248px;
gap: 16px;
-
- & > nav#toc {
- menu {
- position: sticky;
-
- top: 72px;
-
- margin: 0;
- padding: 0;
-
- li {
- list-style: none;
- border-left: solid 1px var(--foreground-color);
- padding-left: 8px;
- position: relative;
-
- &.visible,
- &:hover {
- &::before {
- content: "";
- position: absolute;
- inset: 0;
-
- display: block;
- background-color: var(--foreground-color);
-
- margin-left: -2px;
- width: 3px;
- }
- }
-
- a:hover {
- text-decoration: none;
- }
- }
- }
-
- width: 240px;
- }
-
- & > article {
- ul#metadata {
- margin: 0;
- padding: 0;
-
- li {
- list-style: none;
-
- &#tags {
- .label {
- display: none;
- }
-
- ul {
- padding: 0;
-
- display: flex;
-
- margin: 1ch 0;
- gap: 1ch;
-
- li {
- padding: 0.5ch;
- background-color: var(--foreground-color);
- color: var(--background-color);
- border-radius: 4px;
- }
- }
- }
- }
- }
-
- main {
- display: block;
- margin: 0;
- }
-
- footer {
- text-align: right;
- position: relative;
- /*padding-top: 16px;*/
-
- &::before {
- content: "";
- position: absolute;
-
- display: block;
-
- border-top: solid 1px var(--foreground-color);
-
- width: 340px;
- top: -8px;
- right: 0;
- }
- }
-
- /* Offsetting an anchor, stack overflow #10732690 */
- [id].article-heading::before {
- content: "";
- display: block;
- height: 80px;
- margin-top: -80px;
- visibility: hidden;
- }
- }
}
svg {
@@ -380,92 +275,6 @@ svg {
}
}
-code {
- font-family: var(--font-code);
-
- & > div {
- &.jump {
- font-family: var(--font-content);
-
- &::before {
- font-family: var(--font-code);
- }
- }
-
- &.highlighted {
- background-color: var(--highlighted-background-color);
- }
-
- &::before {
- border-right: solid 1px var(--foreground-color);
- }
- }
-}
-
-article {
- flex: 1;
-
- position: relative;
-
- nav#lang-selector {
- position: absolute;
-
- top: 0;
- right: 0;
-
- label {
- font-size: 0;
-
- line-height: 44px;
- text-align: center;
-
- display: block;
- width: 44px;
- height: 44px;
- box-sizing: border-box;
-
- cursor: pointer;
-
- border: solid 1px var(--foreground-color);
-
- &::before {
- content: "T";
-
- font-size: 24px;
- }
- }
-
- ul {
- position: absolute;
- right: 0;
- top: 43px;
-
- display: none;
-
- margin: 0;
- padding: 0;
-
- border: solid 1px var(--foreground-color);
- background: var(--background-color);
-
- li {
- list-style: none;
-
- a {
- display: block;
- text-align: center;
-
- padding: 8px 16px;
- }
- }
- }
-
- &:focus-within ul {
- display: block;
- }
- }
-}
-
footer {
text-align: center;
}