From 13475efda64dd9a89923df9bcd2acb9a53ba5d1c Mon Sep 17 00:00:00 2001
From: Xe Iaso <me@xeiaso.net>
Date: Sat, 18 Mar 2023 15:19:19 -0400
Subject: css: use Iosevka Iaso fonts

Signed-off-by: Xe Iaso <me@xeiaso.net>
---
 static/css/gruvbox-dark.css   | 511 +++++++++++++++++++++---------------------
 static/css/hack.css           |  40 ++--
 static/css/iosevka/.gitignore |   2 +
 static/css/shim.css           |  16 ++
 4 files changed, 300 insertions(+), 269 deletions(-)
 create mode 100644 static/css/iosevka/.gitignore

(limited to 'static/css')

diff --git a/static/css/gruvbox-dark.css b/static/css/gruvbox-dark.css
index a16bf37..a902e5d 100644
--- a/static/css/gruvbox-dark.css
+++ b/static/css/gruvbox-dark.css
@@ -1,256 +1,255 @@
-.gruvbox-dark {
-  background-color: #1d2021;
-	color: #f9f5d7
-}
-
-.gruvbox-dark h1,
-.gruvbox-dark h2,
-.gruvbox-dark h3,
-.gruvbox-dark h4,
-.gruvbox-dark h5,
-.gruvbox-dark h6 {
-	  color: #CDCD23
-}
-
-.gruvbox-dark h1 a,
-.gruvbox-dark h2 a,
-.gruvbox-dark h3 a,
-.gruvbox-dark h4 a,
-.gruvbox-dark h5 a,
-.gruvbox-dark h6 a {
-	color: #d79921;
-	border-bottom-color: #d79921
-}
-
-.gruvbox-dark h1 a:hover,
-.gruvbox-dark h2 a:hover,
-.gruvbox-dark h3 a:hover,
-.gruvbox-dark h4 a:hover,
-.gruvbox-dark h5 a:hover,
-.gruvbox-dark h6 a:hover {
-	background-color: #d79921;
-	color: #fbf1c7
-}
-
-.gruvbox-dark pre {
-	background-color: #1d2021;
-	border: none
-}
-
-.gruvbox-dark pre code {
-	color: #689d6a
-}
-
-.gruvbox-dark .progress-bar-filled:after,
-.gruvbox-dark .progress-bar-filled:before,
-.gruvbox-dark code,
-.gruvbox-dark strong {
-	color: #98971a
-}
-
-.gruvbox-dark .progress-bar-filled {
-	background-color: #98971a
-}
-
-.gruvbox-dark table {
-	color: #fdf4c1
-}
-
-.gruvbox-dark table td,
-.gruvbox-dark table th {
-	border-color: #b0bec5
-}
-
-.gruvbox-dark table tbody td:first-child {
-	font-weight: bold;
-}
-
-.gruvbox-dark .form-control,
-.gruvbox-dark .form-group label {
-	color: #fdf4c1;
-	border-color: #98971a
-}
-
-.gruvbox-dark .form-group.form-textarea label:after {
-	background-color: #282828
-}
-
-.gruvbox-dark .form-control:focus {
-	border-color: #bdae93;
-	color: #bdae93
-}
-
-.gruvbox-dark textarea.form-control {
-	color: #fdf4c1
-}
-
-.gruvbox-dark .card {
-	border-color: #98971a
-}
-
-.gruvbox-dark .card .card-header {
-	background-color: transparent;
-	color: #fdf4c1;
-	border-bottom: 1px solid #98971a
-}
-
-.gruvbox-dark .btn.btn-ghost.btn-default {
-	border-color: #607d8b;
-	color: #607d8b
-}
-
-.gruvbox-dark .btn.btn-ghost.btn-default:focus,
-.gruvbox-dark .btn.btn-ghost.btn-default:hover {
-	z-index: 1;
-	border-color: #ebdbb2;
-	color: #ebdbb2
-}
-
-.gruvbox-dark .btn.btn-ghost.btn-primary:focus,
-.gruvbox-dark .btn.btn-ghost.btn-primary:hover {
-	border-color: #689d6a;
-	color: #689d6a
-}
-
-.gruvbox-dark .btn.btn-ghost.btn-success:focus,
-.gruvbox-dark .btn.btn-ghost.btn-success:hover {
-	border-color: #98971a;
-	color: #98971a
-}
-
-.gruvbox-dark .btn.btn-ghost.btn-info:focus,
-.gruvbox-dark .btn.btn-ghost.btn-info:hover {
-	border-color: #458588;
-	color: #458588
-}
-
-.gruvbox-dark .btn.btn-ghost.btn-error:focus,
-.gruvbox-dark .btn.btn-ghost.btn-error:hover {
-	border-color: #cc241d;
-	color: #cc241d
-}
-
-.gruvbox-dark .btn.btn-ghost.btn-warning:focus,
-.gruvbox-dark .btn.btn-ghost.btn-warning:hover {
-	border-color: #d79931;
-	color: #d79931
-}
-
-.gruvbox-dark .avatarholder,
-.gruvbox-dark .placeholder {
-	background-color: transparent;
-	border-color: #3c3836
-}
-
-.gruvbox-dark .menu .menu-item {
-	color: #fdf4c1;
-	border-color: #98971a
-}
-
-.gruvbox-dark .menu .menu-item.active,
-.gruvbox-dark .menu .menu-item:hover {
-	color: #fdf4c1;
-	border-color: #fdf4c1
-}
-
-.gruvbox-dark a:visited {
-	  color: #C1B7A9;
-	  border-color: #a89984;
-}
-
-.gruvbox-dark a:visited:hover {
-	color: #fdf4c1;
-	background-color: #282828;
-}
-
-@media (prefers-color-scheme: light) {
-	.gruvbox-dark {
-		background-color: #f9f5d7;
-		color: #1d2021;
-	}
-  .gruvbox-dark h1,
-  .gruvbox-dark h2,
-  .gruvbox-dark h3,
-  .gruvbox-dark h4,
-  .gruvbox-dark h5,
-  .gruvbox-dark h6 {
-	    color: #4F4F0D
-  }
-	.gruvbox-dark h1 a:hover,
-	.gruvbox-dark h2 a:hover,
-	.gruvbox-dark h3 a:hover,
-	.gruvbox-dark h4 a:hover,
-	.gruvbox-dark h5 a:hover,
-	.gruvbox-dark h6 a:hover {
-		background-color: #d79921;
-		color: #282828;
-	}
-	.gruvbox-dark pre {
-		background-color: #f9f5d7;
-		padding: 0;
-		border: none;
-	}
-  .gruvbox-dark a {
-      color: #B80050;
-      border-color: #B80050;
-  }
-  .gruvbox-dark a:hover {
-      color: #f9f5d7;
-      background-color: #9E0045;
-      border-color: #9E0045;
-  }
-  .gruvbox-dark a:visited {
-	    color: #53493C;
-	    border-color: #53493C;
-  }
-  .gruvbox-dark a:visited:hover {
-	    color: #fdf4c1;
-	    background-color: #282828;
-  }
-	.gruvbox-dark table {
-		color: #1d2021;
-	}
-	.gruvbox-dark .form-control,
-	.gruvbox-dark .form-group label {
-		color: #1d2021;
-		border-color: #98971a
-	}
-	.gruvbox-dark .form-group.form-textarea label:after {
-		background-color: #3c3836;
-	}
-	.gruvbox-dark .form-control:focus {
-		border-color: #665c54;
-		color: #665c54;
-	}
-	.gruvbox-dark textarea.form-control {
-		color: #282828;
-	}
-	.gruvbox-dark .card .card-header {
-		background-color: transparent;
-		color: #282828;
-		border-bottom: 1px solid #98971a
-	}
-	.gruvbox-dark .btn.btn-ghost.btn-default:focus,
-	.gruvbox-dark .btn.btn-ghost.btn-default:hover {
-		z-index: 1;
-		border-color: #3c3836;
-		color: #3c3836;
-	}
-	.gruvbox-dark .menu .menu-item {
-		color: #282828;
-		border-color: #98971a
-	}
-	.gruvbox-dark .menu .menu-item.active,
-	.gruvbox-dark .menu .menu-item:hover {
-		color: #282828;
-		border-color: #282828;
-	}
-	.gruvbox-dark a:visited {
-		  color: #4D4442;
-		  border-color: #4D4442;
-	}
-	.gruvbox-dark a:visited:hover {
-		color: #3c3836;
-		background-color: #bdae93;
-	}
-}
+.gruvbox-dark {
+  background-color: #1d2021;
+	color: #f9f5d7
+}
+
+.gruvbox-dark h1,
+.gruvbox-dark h2,
+.gruvbox-dark h3,
+.gruvbox-dark h4,
+.gruvbox-dark h5,
+.gruvbox-dark h6 {
+	  color: #CDCD23
+}
+
+.gruvbox-dark h1 a,
+.gruvbox-dark h2 a,
+.gruvbox-dark h3 a,
+.gruvbox-dark h4 a,
+.gruvbox-dark h5 a,
+.gruvbox-dark h6 a {
+	color: #d79921;
+	border-bottom-color: #d79921
+}
+
+.gruvbox-dark h1 a:hover,
+.gruvbox-dark h2 a:hover,
+.gruvbox-dark h3 a:hover,
+.gruvbox-dark h4 a:hover,
+.gruvbox-dark h5 a:hover,
+.gruvbox-dark h6 a:hover {
+	background-color: #d79921;
+	color: #fbf1c7
+}
+
+.gruvbox-dark pre {
+	background-color: #1d2021;
+	border: none
+}
+
+.gruvbox-dark pre code {
+	color: #689d6a
+}
+
+.gruvbox-dark .progress-bar-filled:after,
+.gruvbox-dark .progress-bar-filled:before,
+.gruvbox-dark strong {
+	color: #98971a
+}
+
+.gruvbox-dark .progress-bar-filled {
+	background-color: #98971a
+}
+
+.gruvbox-dark table {
+	color: #fdf4c1
+}
+
+.gruvbox-dark table td,
+.gruvbox-dark table th {
+	border-color: #b0bec5
+}
+
+.gruvbox-dark table tbody td:first-child {
+	font-weight: bold;
+}
+
+.gruvbox-dark .form-control,
+.gruvbox-dark .form-group label {
+	color: #fdf4c1;
+	border-color: #98971a
+}
+
+.gruvbox-dark .form-group.form-textarea label:after {
+	background-color: #282828
+}
+
+.gruvbox-dark .form-control:focus {
+	border-color: #bdae93;
+	color: #bdae93
+}
+
+.gruvbox-dark textarea.form-control {
+	color: #fdf4c1
+}
+
+.gruvbox-dark .card {
+	border-color: #98971a
+}
+
+.gruvbox-dark .card .card-header {
+	background-color: transparent;
+	color: #fdf4c1;
+	border-bottom: 1px solid #98971a
+}
+
+.gruvbox-dark .btn.btn-ghost.btn-default {
+	border-color: #607d8b;
+	color: #607d8b
+}
+
+.gruvbox-dark .btn.btn-ghost.btn-default:focus,
+.gruvbox-dark .btn.btn-ghost.btn-default:hover {
+	z-index: 1;
+	border-color: #ebdbb2;
+	color: #ebdbb2
+}
+
+.gruvbox-dark .btn.btn-ghost.btn-primary:focus,
+.gruvbox-dark .btn.btn-ghost.btn-primary:hover {
+	border-color: #689d6a;
+	color: #689d6a
+}
+
+.gruvbox-dark .btn.btn-ghost.btn-success:focus,
+.gruvbox-dark .btn.btn-ghost.btn-success:hover {
+	border-color: #98971a;
+	color: #98971a
+}
+
+.gruvbox-dark .btn.btn-ghost.btn-info:focus,
+.gruvbox-dark .btn.btn-ghost.btn-info:hover {
+	border-color: #458588;
+	color: #458588
+}
+
+.gruvbox-dark .btn.btn-ghost.btn-error:focus,
+.gruvbox-dark .btn.btn-ghost.btn-error:hover {
+	border-color: #cc241d;
+	color: #cc241d
+}
+
+.gruvbox-dark .btn.btn-ghost.btn-warning:focus,
+.gruvbox-dark .btn.btn-ghost.btn-warning:hover {
+	border-color: #d79931;
+	color: #d79931
+}
+
+.gruvbox-dark .avatarholder,
+.gruvbox-dark .placeholder {
+	background-color: transparent;
+	border-color: #3c3836
+}
+
+.gruvbox-dark .menu .menu-item {
+	color: #fdf4c1;
+	border-color: #98971a
+}
+
+.gruvbox-dark .menu .menu-item.active,
+.gruvbox-dark .menu .menu-item:hover {
+	color: #fdf4c1;
+	border-color: #fdf4c1
+}
+
+.gruvbox-dark a:visited {
+	  color: #C1B7A9;
+	  border-color: #a89984;
+}
+
+.gruvbox-dark a:visited:hover {
+	color: #fdf4c1;
+	background-color: #282828;
+}
+
+@media (prefers-color-scheme: light) {
+	.gruvbox-dark {
+		background-color: #f9f5d7;
+		color: #1d2021;
+	}
+  .gruvbox-dark h1,
+  .gruvbox-dark h2,
+  .gruvbox-dark h3,
+  .gruvbox-dark h4,
+  .gruvbox-dark h5,
+  .gruvbox-dark h6 {
+	    color: #4F4F0D
+  }
+	.gruvbox-dark h1 a:hover,
+	.gruvbox-dark h2 a:hover,
+	.gruvbox-dark h3 a:hover,
+	.gruvbox-dark h4 a:hover,
+	.gruvbox-dark h5 a:hover,
+	.gruvbox-dark h6 a:hover {
+		background-color: #d79921;
+		color: #282828;
+	}
+	.gruvbox-dark pre {
+		background-color: #f9f5d7;
+		padding: 0;
+		border: none;
+	}
+  .gruvbox-dark a {
+      color: #B80050;
+      border-color: #B80050;
+  }
+  .gruvbox-dark a:hover {
+      color: #f9f5d7;
+      background-color: #9E0045;
+      border-color: #9E0045;
+  }
+  .gruvbox-dark a:visited {
+	    color: #53493C;
+	    border-color: #53493C;
+  }
+  .gruvbox-dark a:visited:hover {
+	    color: #fdf4c1;
+	    background-color: #282828;
+  }
+	.gruvbox-dark table {
+		color: #1d2021;
+	}
+	.gruvbox-dark .form-control,
+	.gruvbox-dark .form-group label {
+		color: #1d2021;
+		border-color: #98971a
+	}
+	.gruvbox-dark .form-group.form-textarea label:after {
+		background-color: #3c3836;
+	}
+	.gruvbox-dark .form-control:focus {
+		border-color: #665c54;
+		color: #665c54;
+	}
+	.gruvbox-dark textarea.form-control {
+		color: #282828;
+	}
+	.gruvbox-dark .card .card-header {
+		background-color: transparent;
+		color: #282828;
+		border-bottom: 1px solid #98971a
+	}
+	.gruvbox-dark .btn.btn-ghost.btn-default:focus,
+	.gruvbox-dark .btn.btn-ghost.btn-default:hover {
+		z-index: 1;
+		border-color: #3c3836;
+		color: #3c3836;
+	}
+	.gruvbox-dark .menu .menu-item {
+		color: #282828;
+		border-color: #98971a
+	}
+	.gruvbox-dark .menu .menu-item.active,
+	.gruvbox-dark .menu .menu-item:hover {
+		color: #282828;
+		border-color: #282828;
+	}
+	.gruvbox-dark a:visited {
+		  color: #4D4442;
+		  border-color: #4D4442;
+	}
+	.gruvbox-dark a:visited:hover {
+		color: #3c3836;
+		background-color: #bdae93;
+	}
+}
diff --git a/static/css/hack.css b/static/css/hack.css
index c531557..c8be19c 100644
--- a/static/css/hack.css
+++ b/static/css/hack.css
@@ -1,17 +1,32 @@
+@font-face {
+    font-family: "Iosevka Etoile Iaso";
+    font-weight: 100 900;
+    src: local("Iosevka Etoile Iaso"), url("iosevka/iosevka-etoile-regular.woff2") format("woff2"), url("iosevka/iosevka-etoile-italic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Iosevka Aile Iaso";
+    font-weight: 100 900;
+    src: local("Iosevka Aile Iaso"), url("iosevka/iosevka-aile-regular.woff2") format("woff2"), url("iosevka/iosevka-aile-italic.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Iosevka Term Iaso";
+    font-weight: 100 900;
+    src: local("Iosevka Term Iaso"), url("iosevka/iosevka-curly-regular.woff2") format("woff2");
+}
+
 html {
   font-size: 14px;
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
 }
-* {
-  box-sizing: border-box;
-  text-rendering: geometricPrecision;
-}
 body {
   font-size: 1rem;
   line-height: 1.75rem;
   margin: 0;
-  font-family: Menlo, monospace;
+  font-family: "Iosevka Aile Iaso", Menlo, monospace;
+  font-weight: 500;
   word-wrap: break-word;
 }
 ::selection {
@@ -33,6 +48,11 @@ pre code {
   font-weight: 100;
   text-shadow: none;
   margin: 1.75rem 0;
+  font-size: 1.5rem;
+  font-family: "Iosevka Term Iaso", Menlo, monospace;
+}
+code {
+  font-family: "Iosevka Term Iaso", Menlo, monospace;
 }
 iframe {
   max-width: 100%;
@@ -158,11 +178,10 @@ a:hover {
 .hack p,
 .hack .conversation-chat,
 .hack blockquote,
-.hack em,
 .hack strong {
   font-size: 1rem;
   font-style: normal;
-  font-family: Menlo, monospace;
+  font-family: "Iosevka Aile Iaso", Menlo, monospace;
 }
 .hack blockquote,
 .hack code,
@@ -246,11 +265,6 @@ a:hover {
   left: 0;
   line-height: 20px;
 }
-.hack em:after,
-.hack em:before {
-  content: "*";
-  display: inline;
-}
 .hack pre code:after,
 .hack pre code:before {
   display: none;
@@ -286,7 +300,7 @@ p {
   margin: 0 0 1.75rem;
 }
 .container {
-  max-width: 70rem;
+  max-width: 60rem;
 }
 .container,
 .container-fluid {
diff --git a/static/css/iosevka/.gitignore b/static/css/iosevka/.gitignore
new file mode 100644
index 0000000..3b38e03
--- /dev/null
+++ b/static/css/iosevka/.gitignore
@@ -0,0 +1,2 @@
+*.ttf
+*.woff2
diff --git a/static/css/shim.css b/static/css/shim.css
index 716490a..c9599b5 100644
--- a/static/css/shim.css
+++ b/static/css/shim.css
@@ -22,6 +22,14 @@ article blockquote {
   max-width: 70ch;
 }
 
+article h1 {
+    font-weight: 900;
+}
+
+article small {
+    font-weight: 600;
+}
+
 .conversation {
   margin-top: 0.25rem;
   display: flex;
@@ -123,6 +131,14 @@ figcaption {
     min-height: 16px;
 }
 
+img.picture {
+    max-height: 36rem;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Iosevka Etoile Iaso", Menlo, monospace;
+}
+
 @media (prefers-color-scheme: light) {
     .warning {
         background-color: #fbf1c7;
-- 
cgit v1.2.3