Switch fonts

.github/workflows/test.yml

@@ -33,7 +33,7 @@ jobs:
         run: npm run prettier:check
 
       - name: Stylelint
-        run: npm run stylelint:check
+        run: npm run stylelint:check -- -f github
 
       - name: Markdownlint
         run: npm run markdownlint:check

assets/css/base.css

@@ -9,22 +9,11 @@
 @import "assets/css/author";
 @import "assets/css/post";
 @import "assets/css/pagefind";
+@import "assets/css/footer.css";
+@import "assets/css/highlight.css";
+@import "assets/css/pagination.css";
 
-@font-face {
-  font-display: swap;
-  font-family: "Fira Code";
-  font-style: normal;
-  font-weight: 400;
-  src: url("../fonts/FiraCode-Regular.woff") format("woff");
-}
-
-@font-face {
-  font-display: swap;
-  font-family: "Fira Code";
-  font-style: normal;
-  font-weight: 800;
-  src: url("../fonts/FiraCode-Bold.woff") format("woff");
-}
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
 
 ::selection {
   @apply bg-fuchsia-900 text-fuchsia-50;
@@ -103,3 +92,8 @@ body {
 .terms ul li a {
   @apply text-fuchsia-400 hover:underline hover:text-fuchsia-500;
 }
+
+body .gist .blob-num /* line numbers */,
+body .gist .blob-code-inner {
+  border: none;
+}

assets/css/footer.css

@@ -0,0 +1,144 @@
+/* TODO: Switch to PostCSS */
+
+.footer {
+  padding: 20px 0;
+  flex-grow: 0;
+  color: #a0a0a0;
+}
+
+.footer__inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+@media (width <= 900px) {
+  .footer__inner {
+    flex-direction: column;
+  }
+}
+
+.footer a {
+  color: inherit;
+}
+
+.footer__menu {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  margin-bottom: 1rem;
+}
+@media (width <= 684px) {
+  .footer__menu {
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+  }
+}
+
+.footer__menu span {
+  display: block;
+}
+
+.footer__menu span:not(:last-child)::after {
+  content: "::";
+  margin: 0 0.25rem;
+}
+@media (width <= 684px) {
+  .footer__menu span {
+    margin: 0.25rem 0;
+  }
+
+  .footer__menu span:not(:last-child)::after {
+    content: "";
+    margin: 0;
+  }
+}
+
+.footer__menu a:hover {
+  color: white;
+  text-decoration: underline;
+}
+
+.footer .git-info {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+@media (width <= 684px) {
+  .footer .git-info {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .footer .git-info .hash,
+  .footer .git-info a.edit-page {
+    justify-content: center;
+  }
+}
+
+.footer .git-info > * {
+  display: flex;
+}
+
+.footer .git-info > *:not(:last-child)::after {
+  content: "::";
+  margin: 0 0.5rem;
+}
+@media (width <= 684px) {
+  .footer .git-info > * {
+    margin: 0.25rem 0;
+  }
+
+  .footer .git-info > *:not(:last-child)::after {
+    content: "";
+    margin: 0;
+  }
+}
+
+.footer .git-info a {
+  display: flex;
+  align-items: center;
+}
+
+.footer .git-info a:hover {
+  color: white;
+  text-decoration: none;
+}
+
+.footer .git-info a svg {
+  margin-right: 0.5rem;
+}
+
+.footer .git-info a.edit-page {
+  display: flex;
+  align-items: center;
+}
+
+.footer .git-info a.edit-page svg {
+  height: 1.5rem;
+  width: 1.5rem;
+  margin-right: 0.5rem;
+}
+
+.footer .copyright {
+  display: flex;
+  flex-flow: row wrap;
+  flex: 1;
+  align-items: center;
+  font-size: 1rem;
+  justify-content: center;
+  margin: auto;
+  text-align: center;
+}
+
+.footer .copyright > *:first-child:not(:only-child) {
+  margin-right: 10px;
+}
+
+.footer .copyright span {
+  white-space: nowrap;
+}

assets/css/highlight.css

@@ -0,0 +1,46 @@
+/* TODO: Switch to PostCSS */
+
+.highlight {
+  position: relative;
+  background: #000;
+}
+
+.highlight .copy-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin-top: 0.5rem;
+  margin-right: 0.5rem;
+  opacity: 0;
+  transition: opacity 0.4s ease-in-out;
+  transition: background-color 0.2s ease-in-out;
+  padding: 0.25rem 0.5rem;
+}
+
+.highlight .copy-button:hover {
+  background-color: #dd7cec;
+}
+
+.highlight .lang-tab {
+  position: absolute;
+  top: -1.7rem;
+  right: 0;
+  color: #d946ef;
+  border: 0.1rem solid rgba(217, 70, 239, 0.2);
+  background-color: rgba(217, 70, 239, 0.1);
+  padding: 0 0.5rem;
+  user-select: none;
+  font-size: 0.85rem;
+}
+
+.highlight:hover .copy-button,
+.highlight .copy-button.active {
+  opacity: 0.8;
+}
+
+.highlight pre {
+  overflow-x: auto;
+  white-space: pre;
+  padding: 0.75rem 1rem;
+  border: 1px solid rgba(217, 70, 239, 0.4);
+}

assets/css/pagefind.css

@@ -4,7 +4,7 @@ body {
   --pagefind-ui-background: #000; /* black */
   --pagefind-ui-border: rgb(217 70 239); /* fuchsia-500 */
   --pagefind-ui-tag: rgb(74 4 78); /* fuchsia-900 */
-  --pagefind-ui-font: "Fira Code", monaco, "Ubuntu Mono", consolas, monospace;
+  --pagefind-ui-font: "Source Code Pro", monaco, "Ubuntu Mono", consolas, monospace;
   --pagefind-ui-border-radius: 0;
 }
 

assets/css/pagination.css

@@ -0,0 +1,51 @@
+/* TODO: Switch to PostCSS */
+
+.pagination {
+  margin-top: 50px;
+}
+@media print {
+  .pagination {
+    display: none;
+  }
+}
+
+.pagination__title {
+  display: flex;
+  text-align: center;
+  position: relative;
+  margin: 100px 0 20px;
+}
+
+.pagination__title-h {
+  text-align: center;
+  margin: 0 auto;
+  padding: 5px 10px;
+  background: #0a0a0a;
+  color: rgba(255, 255, 255, 0.3);
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  text-decoration: none;
+  letter-spacing: 0.1em;
+  z-index: 1;
+}
+
+.pagination__title hr {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  margin-top: 15px;
+  z-index: 0;
+}
+
+.pagination__buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-flow: row wrap;
+  gap: 10px;
+}
+
+.pagination__buttons a {
+  text-decoration: none;
+}

assets/css/post.css

@@ -1,5 +1,5 @@
 .table-of-contents {
-  @apply my-4;
+  @apply mt-10 mb-16;
 }
 
 .table-of-contents h2 {