Update Inter font

README.md

@@ -11,7 +11,7 @@ This theme is pretty basic and covers all of the essentials. All you have to do
 ## Features
 
 - **dark/light mode**, depending on your preferences (dark is default, but you can change it)
-- great reading experience thanks to [**Inter UI font**](https://rsms.me/inter/), made by [Rasmus Andersson](https://rsms.me/about/)
+- great reading experience thanks to [**Inter font**](https://rsms.me/inter/), made by [Rasmus Andersson](https://rsms.me/about/)
 - nice code highlighting thanks to [**PrismJS**](https://prismjs.com)
 - fully responsive
 

layouts/partials/greater-icon.html

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="greater-icon" width="44" height="44" viewBox="0 0 44 44">
+  <polyline fill="none" stroke="#000" stroke-width="2" points="15 8 29.729 22.382 15 35.367"/>
+</svg>

layouts/partials/logo.html

@@ -2,7 +2,7 @@
   {{ if $.Site.Params.Logo.path }}
     <img src="{{ $.Site.Params.Logo.path }}" alt="{{ $.Site.Params.Logo.alt }}" />
   {{ else }}
-    <span class="logo__mark">></span>
+    <span class="logo__mark">{{ partial "greater-icon.html" . }}</span>
     <span class="logo__text">{{ with $.Site.Params.Logo.logoText }}{{ . }}{{ else }}hello friend{{ end }}</span>
     <span class="logo__cursor"></span>
   {{ end }}

layouts/partials/menu.html

@@ -8,7 +8,10 @@
       {{ end }}
       {{ if gt (len $.Site.Menus.main) $.Site.Params.showMenuItems }}
         <ul class="menu__sub-inner">
-          <li class="menu__sub-inner-more-trigger">{{ $.Site.Params.MenuMore | default "Show more" }} <span class="menu__sub-inner-more-trigger-icon">></span></li>
+          <li class="menu__sub-inner-more-trigger">
+            {{ $.Site.Params.MenuMore | default "Show more" }}
+            <span class="menu__sub-inner-more-trigger-icon">{{ partial "greater-icon.html" . }}</span>
+          </li>
 
           <ul class="menu__sub-inner-more hidden">
             {{ range last (sub (len $.Site.Menus.main) $.Site.Params.showMenuItems) $.Site.Menus.main }}

source/css/fonts.css

@@ -0,0 +1,44 @@
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 400;
+  src: url("../fonts/Inter-Regular.woff2") format("woff2"),
+       url("../fonts/Inter-Regular.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 400;
+  src: url("../fonts/Inter-Italic.woff2") format("woff2"),
+       url("../fonts/Inter-Italic.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 600;
+  src: url("../fonts/Inter-Medium.woff2") format("woff2"),
+       url("../fonts/Inter-Medium.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 600;
+  src: url("../fonts/Inter-MediumItalic.woff2") format("woff2"),
+       url("../fonts/Inter-MediumItalic.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 800;
+  src: url("../fonts/Inter-Bold.woff2") format("woff2"),
+       url("../fonts/Inter-Bold.woff") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 800;
+  src: url("../fonts/Inter-BoldItalic.woff2") format("woff2"),
+       url("../fonts/Inter-BoldItalic.woff") format("woff");
+}

source/css/inter-ui.css

@@ -1,44 +0,0 @@
-@font-face {
-  font-family: 'Inter UI';
-  font-style:  normal;
-  font-weight: 400;
-  src: url("../fonts/Inter-UI-Regular.woff2") format("woff2"),
-       url("../fonts/Inter-UI-Regular.woff") format("woff");
-}
-@font-face {
-  font-family: 'Inter UI';
-  font-style:  italic;
-  font-weight: 400;
-  src: url("../fonts/Inter-UI-Italic.woff2") format("woff2"),
-       url("../fonts/Inter-UI-Italic.woff") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter UI';
-  font-style:  normal;
-  font-weight: 600;
-  src: url("../fonts/Inter-UI-Medium.woff2") format("woff2"),
-       url("../fonts/Inter-UI-Medium.woff") format("woff");
-}
-@font-face {
-  font-family: 'Inter UI';
-  font-style:  italic;
-  font-weight: 600;
-  src: url("../fonts/Inter-UI-MediumItalic.woff2") format("woff2"),
-       url("../fonts/Inter-UI-MediumItalic.woff") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter UI';
-  font-style:  normal;
-  font-weight: 800;
-  src: url("../fonts/Inter-UI-Bold.woff2") format("woff2"),
-       url("../fonts/Inter-UI-Bold.woff") format("woff");
-}
-@font-face {
-  font-family: 'Inter UI';
-  font-style:  italic;
-  font-weight: 800;
-  src: url("../fonts/Inter-UI-BoldItalic.woff2") format("woff2"),
-       url("../fonts/Inter-UI-BoldItalic.woff") format("woff");
-}

source/css/logo.css

@@ -10,7 +10,11 @@
   }
 
   &__mark {
+    display: inline-flex;
+    align-items: center;
     margin-right: 5px;
+
+    @mixin greater-icon 8px;
   }
 
   &__text {

source/css/main.css

@@ -11,7 +11,7 @@ html {
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI",  Helvetica, Arial, sans-serif;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI",  Helvetica, Arial, sans-serif;
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.54;
@@ -140,6 +140,7 @@ code {
   margin: 0 2px;
   border-radius: 5px;
   font-size: .9rem;
+  font-weight: normal;
 
   .dark-theme & {
     background: var(--dark-background-secondary);

source/css/menu.css

@@ -93,13 +93,19 @@
       left: 0;
 
       &-trigger {
+        display: inline-flex;
+        align-items: center;
         user-select: none;
         cursor: pointer;
 
         &-icon {
-          display: inline-block;
+          display: inline-flex;
+          align-items: center;
+          margin-left: 3px;
           transform: rotate(90deg);
           line-height: 1;
+
+          @mixin greater-icon 5px;
         }
       }
 

source/css/style.css

@@ -1,5 +1,5 @@
 @import 'variables';
-@import 'inter-ui';
+@import 'fonts';
 @import 'buttons';
 
 @import 'header';

source/css/variables.css

@@ -21,6 +21,18 @@
 @custom-media --phone (width < 684px);
 @custom-media --tablet (width < 900px);
 
+@define-mixin greater-icon $stroke-width: 3px, $width: .95rem, $height: 100% {
+  .greater-icon {
+    width: $width;
+    height: $height;
+
+    polyline {
+      stroke: currentColor;
+      stroke-width: $stroke-width;
+    }
+  }
+}
+
 /* HOW TO USE */
 
 /*@media (--phone) {*/