Improve about page and various optimizations

_config.yml

@@ -10,6 +10,7 @@ description: "This is a description"
 url: "https://jotonedev.github.io/tallneck-test"
 
 social: true
+email: "[email protected]"
 github_url: https://example.com/
 gitlab_url: https://example.com/
 discord_url: https://example.com/

_includes/head.html

@@ -22,11 +22,16 @@
     {% endif %}
 
     <!-- Preload -->
+    <link rel="preload" as="font" href="{{ "/assets/font/opensans/opensans.woff2" | relative_url }}" type="font/woff2">
+    <link rel="preload" as="font" href="{{ "/assets/font/opensans/opensans-bold.woff2" | relative_url }}" type="font/woff2">
+    <link rel="preload" as="font" href="{{ "/assets/font/opensans/opensans-italic.woff2" | relative_url }}" type="font/woff2">
     <link rel="preload" as="style" href="{{ "/assets/css/style.css" | relative_url }}">
+    <!--<link rel="preload" as="style" href="{{ "/assets/css/code.css" | relative_url }}">-->
 
     <!-- CSS stylesheets -->
-    <link rel="stylesheet" href="{{ "/assets/css/style.css" | relative_url }}">
-    <link rel="stylesheet" href="{{ "/assets/css/print.css" | relative_url }}" media="print">
+    <link rel="stylesheet" href="{{ "/assets/css/style.css" | relative_url }}" blocking="render" fetchpriority="high">
+    <link rel="stylesheet" href="{{ "/assets/css/code.css" | relative_url }}" fetchpriority="low">
+    <link rel="stylesheet" href="{{ "/assets/css/print.css" | relative_url }}" media="print" fetchpriority="low">
 
     <!-- Favicon -->
     <link rel="icon" href="{{ site.favicon_ico | relative_url }}" sizes="any">

_includes/header.html

@@ -2,7 +2,7 @@
     <div class="page-header--container">
         <div class="header-logo">
             <a aria-label="Home" href="{{ '/' | relative_url }}">
-                <img alt="Website logo" src="{{ '/assets/image/logo.svg' | relative_url }}">
+                <img alt="Website logo" src="{{ '/assets/image/logo.svg' | relative_url }}" loading="eager">
             </a>
         </div>
 

_layouts/about.html

@@ -9,7 +9,7 @@ <h1>About me</h1>
     {% endif %}
 
     {% if site.social %}
-    <nav class="about-social">
+    <nav class="about-social no_print">
         {% if site.github_url %}
         <a href="{{ site.github_url }}" title="GitHub" target="_blank" rel="noopener">
             <svg class="about-social--icon">
@@ -86,12 +86,21 @@ <h1>About me</h1>
             </svg>
         </a>
         {% endif %}
+
+        {% if site.email %}
+        <a href="mailto:{{ site.email }}" title="Email" target="_blank" rel="noopener">
+            <svg class="about-social--icon">
+                <use href="{{ "/assets/icon/mail.svg#mail" | relative_url }}" alt="Email">
+                </use>
+            </svg>
+        </a>
+        {% endif %}
     </nav>
     {% endif %}
 
     <div class="about">
         <div class="about--img">
-            <img src="{{ site.about_image | relative_url }}" alt="About me">
+            <img src="{{ site.about_image | relative_url }}" alt="About me" width="500px" height="500px">
         </div>
         <div class="about--content">
             {{ content }}

_posts/2024-02-22-test-02.md

@@ -141,16 +141,16 @@ Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
 
 ## Images
 
-![Minion](https://octodex.github.com/image/minion.png)
-![Stormtroopocat](https://octodex.github.com/image/stormtroopocat.jpg "The Stormtroopocat")
+![Minion](https://octodex.github.com/images/manufacturetocat.png)
+![Stormtroopocat](https://octodex.github.com/images/NUX_Octodex.gif "The Stormtroopocat")
 
 Like links, Images also have a footnote style syntax
 
 ![Alt text][id]
 
 With a reference later in the document defining the URL location:
 
-[id]: https://octodex.github.com/image/dojocat.jpg  "The Dojocat"
+[id]: https://octodex.github.com/images/yogitocat.png "The Dojocat"
 
 
 ## Plugins

_sass/tallneck.scss

@@ -8,7 +8,3 @@
 @import "tallneck/components";
 
 @import "custom_layout";
-
-// Source: https://jwarby.github.io/jekyll-pygments-themes/languages/ruby.html
-@import "light_code";
-@import "dark_code";

_sass/tallneck/base.scss

@@ -4,7 +4,7 @@
 html {
   min-height: 100vh;
   min-height: 100svh;
-  min-width: 280px;
+  min-width: $min-width;
 }
 
 *,

_sass/tallneck/components/about.scss

@@ -5,72 +5,65 @@
 
     margin-left: auto;
     margin-right: auto;
-
 
+    align-items: center;
+
+    gap: 20px;
+
     .about--img {
-        flex: 0 0 40%;
+        flex: 1 1 38%;
+        align-self: center;
 
-        height: fit-content;
-
-        @media screen and (max-width: 500px){
-            flex: 0 0 100%;
-        }
+        min-width: 250px;
+        max-width: 500px;
+
+        margin-left: auto;
+        margin-right: auto;
 
-        img {
-            width: 100%;
-            height: auto;
-        }
         border: 3px solid transparent;
         border-image: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary)) 1;
     }
 
     .about--content {
-        flex: 0 0 60%;
-        padding: 0 20px;
+        flex: 1 1 55%;
 
-        @media screen and (min-width: 500px){
-            p {
-                margin-block-start: 0;
-                margin-block-end: 0;
-            }
-        }
+        word-wrap: break-word;
+        word-wrap: auto-phrase;
     }
 }
 
 .about-social {
-    width: 100%;
-
     display: flex;
-    flex-flow: row nowrap;
+    flex-flow: row wrap;
     justify-content: center;
-    gap: 20px;
+    gap: 1rem 15px;
+
+    margin-top: 1rem;
+    margin-bottom: 2rem;
+
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
 
     a {
         display: flex;
-        flex-flow: row nowrap;
         align-items: center;
-        gap: 10px;
-        text-decoration: none;
-        color: var(--text-primary);
-        transition: color 0.3s ease;
-
-        &:hover {
-            color: var(--accent-primary);
-        }
 
         svg {
             aspect-ratio: 1/1;
-            max-width: 2rem;
-            max-height: 2rem;
-
-            width: 100%;
+            width: 32px;
             height: auto;
+            fill: var(--svg-fill);
 
-            display: inline-block;
+            transition: fill 0.3s ease;
 
-            fill: var(--svg-fill);
-            color: var(--svg-fill);
-            object-fit: fill;
+            &:hover {
+                fill: var(--accent-secondary);
+
+                @media (prefers-color-scheme: dark){
+                    fill: var(--accent-primary);
+                }
+            }
         }
     }
 }

_sass/tallneck/font.scss

@@ -1,17 +1,3 @@
-// Source: https://fonts.google.com/specimen/Roboto
-@font-face {
-    font-family: "Roboto";
-    font-style: normal;
-    font-weight: normal;
-    font-display: swap;
-
-    src:
-        local("Roboto"),
-        /* Super Modern Browsers */ url("/assets/font/roboto/roboto.woff2") format("woff2"),
-        /* Modern Browsers */ url("/assets/font/roboto/roboto.woff") format("woff"),
-        /* Safari, Android, iOS */ url("/assets/font/roboto/roboto.ttf") format("truetype");
-}
-
 // Source: https://fonts.google.com/specimen/Open+Sans
 @font-face {
     font-family: "Open Sans";

_sass/tallneck/variables.scss

@@ -16,6 +16,8 @@ $base-line-height: 1.5 !default;
 
 $table-text-align: left !default;
 
+$min-width : 220px !default;
+
 // Width of the content area
 $main-max-width: 1200px !default;
 $content-width-overflow: 100px !default;

about.md

@@ -3,4 +3,6 @@ layout: about
 title: About me
 ---
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus ultricies purus in placerat. Suspendisse a euismod nulla. Pellentesque suscipit non arcu in facilisis. Praesent sagittis fermentum ex, vitae finibus tellus luctus rutrum. Vivamus aliquam urna rhoncus nibh consequat dignissim vel et est. Praesent varius tortor non nibh interdum lacinia. Curabitur fermentum erat eget mi pharetra aliquam ac et lacus. Pellentesque eget ligula pulvinar, tincidunt sem id, mollis mauris. Vestibulum ullamcorper urna vel tellus consequat ultricies. Donec mattis tortor sit amet leo fermentum, ac lacinia sapien laoreet. Sed condimentum felis at tellus elementum sodales. In posuere tortor eget ex consequat pretium. Duis iaculis diam quis purus condimentum porttitor vitae sed tellus. Sed venenatis tortor vitae erat ullamcorper dignissim. Morbi vitae suscipit augue, at malesuada erat. Maecenas et vulputate magna. 
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus ultricies purus in placerat. Suspendisse a euismod nulla. Pellentesque suscipit non arcu in facilisis. Praesent sagittis fermentum ex, vitae finibus tellus luctus rutrum. Vivamus aliquam urna rhoncus nibh consequat dignissim vel et est. Praesent varius tortor non nibh interdum lacinia. Curabitur fermentum erat eget mi pharetra aliquam ac et lacus. Pellentesque eget ligula pulvinar, tincidunt sem id, mollis mauris. Vestibulum ullamcorper urna vel tellus consequat ultricies. Donec mattis tortor sit amet leo fermentum, ac lacinia sapien laoreet. Sed condimentum felis at tellus elementum sodales. In posuere tortor eget ex consequat pretium. Duis iaculis diam quis purus condimentum porttitor vitae sed tellus. Sed venenatis tortor vitae erat ullamcorper dignissim. Morbi vitae suscipit augue, at malesuada erat. Maecenas et vulputate magna.
+
+[test link](https://www.google.com)

assets/css/code.scss

@@ -0,0 +1,6 @@
+---
+---
+
+@charset "utf-8";
+
+@import "light_code", "dark_code";