css: use Iosevka Iaso fonts

Signed-off-by: Xe Iaso <me@xeiaso.net>

4 files changed, 300 insertions, 269 deletions

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;