Improved typography

1 files changed, 18 insertions, 12 deletions

diff --git a/assets/style.scss b/assets/style.scss
index a08d4f5..40b18f5 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -1,6 +1,7 @@
-$font-size: 17px;
+$font-size: 18px;
 $heading-font-size: $font-size + 1;
-$line-height: 1.4;
+$code-block-font-size: $font-size - 1;
+$line-height: 1.5;
 
 $page-item-prefix-max-chars: 3ch;
 $page-item-prefix-pad: 2ch;
@@ -8,6 +9,8 @@ $page-item-prefix-width: $page-item-prefix-max-chars + $page-item-prefix-pad;
 
 $subcontent-indent: 4ch;
 
+$breakpoint-sm: 700px;
+
 @function px-to-em($s, $b: $font-size) {
   @return 1 / ($b / 1px) * ($s / 1px) * 1em;
 }
@@ -57,8 +60,8 @@ $subcontent-indent: 4ch;
 
   --page-item-prefix-fg: var(--fg-minus);
 
-  --link-idle-fg: var(--gray6);
-  --link-visited-fg: var(--gray5);
+  --link-idle-fg: var(--gray6); //#90acf2; //var(--gray6);
+  --link-visited-fg: var(--gray5); //#bc9df2; //var(--gray5);
   --link-hover-bg: var(--gray6);
   --link-hover-fg: var(--gray1);
 
@@ -89,13 +92,13 @@ body {
   margin: 2em;
   padding: 0;
 
-  @media (max-width: 700px) {
+  @media (max-width: $breakpoint-sm) {
     margin: 1em;
   }
 }
 
 main {
-  max-width: 80ch;
+  max-width: 70ch;
   margin: 0 auto;
 }
 
@@ -106,6 +109,8 @@ code {
 pre {
   margin: 0;
   color: var(--code-block-fg);
+  font-size: $code-block-font-size;
+  line-height: 1.4;
 
   strong {
     font-weight: normal;
@@ -218,7 +223,7 @@ hr {
   background-color: var(--bg-plus);
   border: 0;
 
-  @media (max-width: 700px) {
+  @media (max-width: $breakpoint-sm) {
     margin-left: 0;
   }
 }
@@ -250,7 +255,7 @@ blockquote {
     display: none;
   }
 
-  @media (max-width: 700px) {
+  @media (max-width: $breakpoint-sm) {
     display: none;
 
     &--sm,
@@ -276,16 +281,16 @@ blockquote {
       position: absolute;
       box-sizing: border-box;
       display: inline-block;
-      font-size: 1rem;
       margin-left: -1 * $page-item-prefix-width;
       padding-right: $page-item-prefix-pad;
       width: $page-item-prefix-width;
       color: var(--page-item-prefix-fg);
+      font-size: 1rem;
       font-weight: normal;
       text-align: right;
     }
 
-    @media (max-width: 700px) {
+    @media (max-width: $breakpoint-sm) {
       margin-left: 0;
       padding-left: 0;
 
@@ -316,6 +321,7 @@ blockquote {
     height: 100%;
     color: var(--page-item-prefix-fg);
     overflow: hidden;
+    line-height: 1.4 * ($code-block-font-size / $font-size)
   }
 
   hr {
@@ -330,7 +336,7 @@ blockquote {
       margin-left: -1 * $page-item-prefix-width;
     }
 
-    @media (max-width: 700px) {
+    @media (max-width: $breakpoint-sm) {
       margin-left: 0;
       padding-left: 0;
 
@@ -340,7 +346,7 @@ blockquote {
     }
   }
 
-  @media (max-width: 700px) {
+  @media (max-width: $breakpoint-sm) {
     padding-left: 0;
   }
 }