Update fonts and fix max-width

whatyouhide · Sep 6, 2024 · d8b9ab8 · d8b9ab8
1 parent 15db100
commit d8b9ab8
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 20 deletions.
diff --git a/sass/_variables.scss b/sass/_variables.scss
@@ -4,9 +4,9 @@
 }
 
 // Font stacks
-$helvetica: Helvetica, Arial, sans-serif;
+$sansSerifFontStack: "Lato", Helvetica, Arial, sans-serif;
 $helveticaNeue: "Helvetica Neue", Helvetica, Arial, sans-serif;
-$handwrittenFont: "Andrea", "Mali", sans-serif; // From Google Fonts
+$handwrittenFontStack: "Andrea", sans-serif;
 
 // Colors
 
@@ -49,4 +49,4 @@ $handwrittenFont: "Andrea", "Mali", sans-serif; // From Google Fonts
 // Sizes
 
 // The maximum size of website content, such as posts, on any screen.
-$maxContentWidth: 1100px;
+$maxContentWidth: 800px;
diff --git a/sass/components/_header.scss b/sass/components/_header.scss
@@ -21,7 +21,7 @@ header {
   h1.site-name {
     margin: 0;
     cursor: pointer;
-    font-family: $handwrittenFont;
+    font-family: $handwrittenFontStack;
     font-weight: 300;
     font-size: 28px;
     letter-spacing: 1px;

diff --git a/sass/components/_landing_page.scss b/sass/components/_landing_page.scss
@@ -70,7 +70,7 @@
     }
 
     h1 {
-      font-family: $handwrittenFont;
+      font-family: $handwrittenFontStack;
       font-size: 50pt;
       line-height: 1;
       text-align: center;
@@ -110,7 +110,7 @@
       a {
         display: block;
         color: inherit;
-        font-family: $handwrittenFont;
+        font-family: $handwrittenFontStack;
         text-align: right;
         text-decoration: underline;
         text-transform: lowercase;
@@ -178,7 +178,7 @@
 
   span[role="link"] {
     display: block;
-    font-family: $handwrittenFont;
+    font-family: $handwrittenFontStack;
     text-transform: uppercase;
     color: var(--color-text);
   }

diff --git a/sass/style.scss b/sass/style.scss
@@ -9,7 +9,7 @@ html {
 
 body {
   background: var(--color-site-background);
-  font: 18px/1.4 $helvetica;
+  font: 18px/1.4 $sansSerifFontStack;
   color: var(--color-text);
   height: 100%;
 }
@@ -31,6 +31,7 @@ h6 {
 h1 {
   font-size: 200%;
   text-align: center;
+
   a {
     color: inherit;
   }
@@ -51,12 +52,14 @@ h4 {
 
 p {
   margin: 15px 0;
+  font-size: 18px;
 }
 
 a {
   color: var(--color-links);
   text-decoration: none;
   cursor: pointer;
+
   &:hover,
   &:active {
     color: var(--color-links);
@@ -111,12 +114,12 @@ b {
   flex-direction: column;
 }
 
-.posts > .post {
+.posts>.post {
   padding-bottom: 2em;
   border-bottom: 1px solid var(--color-box-borders);
 }
 
-.posts > .post:last-child {
+.posts>.post:last-child {
   padding-bottom: 1em;
   border-bottom: none;
 }
@@ -131,7 +134,7 @@ b {
   }
 }
 
-:not(pre) > code {
+:not(pre)>code {
   background-color: var(--color-code-background);
   padding-left: 4px;
   padding-right: 4px;
@@ -162,7 +165,7 @@ main.about {
 
   h1,
   h2 {
-    font-family: $handwrittenFont;
+    font-family: $handwrittenFontStack;
     font-weight: bold;
   }
 
@@ -188,7 +191,8 @@ main.about {
     overflow: scroll;
   }
 
-  .unsplash-credit, .image-caption {
+  .unsplash-credit,
+  .image-caption {
     font-size: 80%;
     font-style: italic;
     text-align: center;
@@ -222,7 +226,8 @@ article.post table {
   tr {
     border-bottom: 1px solid var(--color-text-dimmer);
 
-    th:first-child, td:first-child {
+    th:first-child,
+    td:first-child {
       white-space: nowrap;
     }
   }
@@ -231,7 +236,8 @@ article.post table {
     border-bottom: none;
   }
 
-  th, td {
+  th,
+  td {
     padding: 0.5em 0.5em;
     border-right: 1px solid var(--color-text-dimmer);
 
@@ -253,7 +259,7 @@ article.post details {
   border-radius: 7px;
   padding: 0.5em 1em;
 
-  :not(pre) > code {
+  :not(pre)>code {
     background-color: transparent;
   }
 }
@@ -266,6 +272,7 @@ article.post .embedded-youtube-player {
 }
 
 article.post {
+
   h2,
   h3,
   h4 {

diff --git a/templates/base.html b/templates/base.html
@@ -6,15 +6,20 @@
     {% block meta %}{% include "snippets/meta.html" %}{% endblock meta %}
 
     <!--[if lt IE 9]>
-      <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
 
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
     <link rel="stylesheet" type="text/css" href="/style.css" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Mali">
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap">
     <link rel="alternate" type="application/rss+xml" title="{{ config.title }}" href="/feed.xml" />
 
     {% block rss %}
-    <link rel="alternate" type="application/rss+xml" title="{{ config.title }}" href="{{ get_url(path="feed.xml", trailing_slash=false) }}" />
+    <link rel="alternate" type="application/rss+xml" title="{{ config.title }}" href="{{ get_url(path=" feed.xml",
+        trailing_slash=false) }}" />
     {% endblock %}
 
     {% block json_ld %}{% endblock json_ld %}

diff --git a/templates/snippets/footer.html b/templates/snippets/footer.html
@@ -20,7 +20,7 @@
             </picture>
         </a>
 
-        <a href="https://www.twitter.com/{{ config.extra.twitter_username }}" target="_blank">
+        <a href="https://twitter.com/{{ config.extra.twitter_username }}" target="_blank">
             <picture>
               <img id="icon-twitter"
                    class="footer-icon"