enhanced print view

.eslintrc

@@ -1,4 +1,7 @@
 {
+  "env": {
+    "browser": true
+  },
 
   "extends": [
     "plugin:import/typescript",

README.md

@@ -4,16 +4,11 @@ This is the repository for my personal blog/website [rickvanlieshout.com](https:
 
 ## Todo
 
-- print view
-
-  - hide mode toggler
-  - hide "all articles" link in posts
-  - hide menu
-  - hide social buttons
-  - change "header title"
-
 - "time to read" (https://www.gatsbyjs.com/plugins/gatsby-remark-reading-time/)
+- quote needs a visual indicator (like a line or quote mark) in front to show it's a quote
+
 <!-- migrations -->
+
 - migrate resume
 - migrate projects
 - migrate blogs
@@ -22,3 +17,4 @@ This is the repository for my personal blog/website [rickvanlieshout.com](https:
 
 - release to sftp or gh-pages
 - lighthouse doesn't like the blue... :)
+- url, id, title disqus

content/config.json

@@ -4,8 +4,8 @@
   "subtitle": "The thoughts, discoveries and murmurings of a Software enthusiast",
   "copyright": "© All rights reserved.",
   "googleAnalyticsId": "",
-  "disqusShortname": "",
+  "disqusShortname": "rickvanlieshoutcom",
-  "postsLimit": 7,
+  "postsLimit": 5,
   "pathPrefix": "/",
   "menu": [
     {

content/posts/2017/scala-day-4-a-challenge.md

@@ -9,7 +9,6 @@ tags:
   - "Development"
   - "slsw"
 description: "The last day of my journey with Scala is said to be a challenge"
-# socialImage: "/media/42-line-bible.jpg"
 ---
 
 The book doesn't offer a day 4, my school, however, does. Or rather, it wants us to "create" a day 4. The main objective of day 4 is to "create a [smart](https://en.wikipedia.org/wiki/SMART_criteria) goal which fits the language and challenges you". For this purpose I came up with the following goal:

src/assets/scss/_base.scss

@@ -1,3 +1,17 @@
 @charset "UTF-8";
 
 @import "base/generic";
+
+.showInPrintView {
+  display: none;
+}
+
+@media print {
+  .hideInPrintView {
+    display:none;
+  }
+
+  .showInPrintView {
+    display: initial;
+  }
+}

src/components/Pagination/Pagination.tsx

@@ -1,11 +1,8 @@
-import React from "react";
+import { PAGINATION } from "@/constants";
-
 import classNames from "classnames";
 import { Link } from "gatsby";
-
+import React from "react";
 import * as styles from "./Pagination.module.scss";
-import { PAGINATION } from "@/constants";
-
 
 type Props = {
   prevPagePath: string;
@@ -14,12 +11,7 @@ type Props = {
   hasPrevPage: boolean;
 };
 
-const Pagination = ({
+const Pagination = ({ prevPagePath, nextPagePath, hasNextPage, hasPrevPage }: Props) => {
-  prevPagePath,
-  nextPagePath,
-  hasNextPage,
-  hasPrevPage,
-}: Props) => {
   const prevClassName = classNames(styles.previousLink, {
     [styles.disable]: !hasPrevPage,
   });
@@ -29,12 +21,12 @@ const Pagination = ({
   });
 
   return (
-    <div className={styles.pagination}>
+    <div className={`${styles.pagination}`}>
       <div className={styles.previous}>
         <Link
           rel="prev"
           to={hasPrevPage ? prevPagePath : "/"}
-          className={prevClassName}
+          className={`${prevClassName} hideInPrintView`}
         >
           {PAGINATION.PREV_PAGE}
         </Link>
@@ -43,7 +35,7 @@ const Pagination = ({
         <Link
           rel="next"
           to={hasNextPage ? nextPagePath : "/"}
-          className={nextClassName}
+          className={`${nextClassName} hideInPrintView`}
         >
           {PAGINATION.NEXT_PAGE}
         </Link>

src/components/Pagination/__snapshots__/Pagination.test.tsx.snap

@@ -1,10 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Pagination renders correctly 1`] = `
-<div>
+<div
+  className="undefined"
+>
   <div>
     <a
-      className=""
+      className=" hideInPrintView"
       href="/typography/page/1"
       rel="prev"
     >
@@ -13,7 +15,7 @@ exports[`Pagination renders correctly 1`] = `
   </div>
   <div>
     <a
-      className=""
+      className=" hideInPrintView"
       href="/typography/page/3"
       rel="next"
     >

src/components/Post/Author/Author.tsx

@@ -1,8 +1,6 @@
-import React from "react";
-
-import * as styles from "./Author.module.scss";
 import { useSiteMetadata } from "@/hooks";
-
+import React from "react";
+import * as styles from "./Author.module.scss";
 
 const Author = () => {
   const { author } = useSiteMetadata();
@@ -10,9 +8,11 @@ const Author = () => {
   return (
     <div className={styles.author}>
       <p className={styles.bio}>
-        Written by: <a href="/pages/about">
+        Written by:{" "}
+        <a href="/pages/about">
           <strong>{author.name}</strong>
         </a>
+        <span className="showInPrintView"> {`@ ${window.location}`}</span>
       </p>
     </div>
   );

src/components/Post/Author/__snapshots__/Author.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`Author renders correctly 1`] = `
 <div>
   <p>
     Written by:
+     
     <a
       href="/pages/about"
     >
@@ -11,6 +12,12 @@ exports[`Author renders correctly 1`] = `
         Rick van Lieshout
       </strong>
     </a>
+    <span
+      className="showInPrintView"
+    >
+       
+      @ http://localhost/
+    </span>
   </p>
 </div>
 `;

src/components/Post/Content/__snapshots__/Content.test.tsx.snap

@@ -4,7 +4,9 @@ exports[`Content renders correctly 1`] = `
 Array [
   <div>
     <span>
-      <span>
+      <span
+        className="undefined hideInPrintView"
+      >
         <a
           href="/"
         >
@@ -14,8 +16,19 @@ Array [
           </span>
         </a>
       </span>
+      <span
+        className="undefined showInPrintView"
+      >
+        <a
+          href="/"
+        >
+          rickvanLieshout.com
+        </a>
+      </span>
     </span>
-    <span>
+    <span
+      className="hideInPrintView"
+    >
       <a
         href="/"
         style={
@@ -27,94 +40,98 @@ Array [
       >
         ↩ All articles
       </a>
-      <div
+      <span
-        className="react-toggle"
+        className="hideInPrintView"
-        onClick={[Function]}
-        onTouchEnd={[Function]}
-        onTouchMove={[Function]}
-        onTouchStart={[Function]}
       >
         <div
-          className="react-toggle-track"
+          className="react-toggle"
+          onClick={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
         >
           <div
-            className="react-toggle-track-check"
+            className="react-toggle-track"
           >
             <div
-              style={
+              className="react-toggle-track-check"
-                Object {
-                  "color": "#f1c40f",
-                  "fontSize": "1.1em",
-                  "position": "absolute",
-                  "top": "-4px",
-                }
-              }
             >
-              <svg
+              <div
-                aria-hidden="true"
+                style={
-                className="svg-inline--fa fa-moon "
+                  Object {
-                data-icon="moon"
+                    "color": "#f1c40f",
-                data-prefix="fas"
+                    "fontSize": "1.1em",
-                focusable="false"
+                    "position": "absolute",
-                role="img"
+                    "top": "-4px",
-                style={Object {}}
+                  }
-                viewBox="0 0 384 512"
+                }
-                xmlns="http://www.w3.org/2000/svg"
               >
-                <path
+                <svg
-                  d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+                  aria-hidden="true"
-                  fill="currentColor"
+                  className="svg-inline--fa fa-moon "
+                  data-icon="moon"
+                  data-prefix="fas"
+                  focusable="false"
+                  role="img"
                   style={Object {}}
-                />
+                  viewBox="0 0 384 512"
-              </svg>
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+                    fill="currentColor"
+                    style={Object {}}
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              className="react-toggle-track-x"
+            >
+              <div
+                style={
+                  Object {
+                    "color": "#f39c12",
+                    "fontSize": "1em",
+                    "left": "-3px",
+                    "position": "absolute",
+                    "top": "-3px",
+                  }
+                }
+              >
+                <svg
+                  aria-hidden="true"
+                  className="svg-inline--fa fa-sun "
+                  data-icon="sun"
+                  data-prefix="fas"
+                  focusable="false"
+                  role="img"
+                  style={Object {}}
+                  viewBox="0 0 512 512"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
+                    fill="currentColor"
+                    style={Object {}}
+                  />
+                </svg>
+              </div>
             </div>
           </div>
           <div
-            className="react-toggle-track-x"
+            className="react-toggle-thumb"
-          >
+          />
-            <div
+          <input
-              style={
+            checked={false}
-                Object {
+            className="react-toggle-screenreader-only"
-                  "color": "#f39c12",
+            onBlur={[Function]}
-                  "fontSize": "1em",
+            onChange={[Function]}
-                  "left": "-3px",
+            onFocus={[Function]}
-                  "position": "absolute",
+            type="checkbox"
-                  "top": "-3px",
+          />
-                }
-              }
-            >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-sun "
-                data-icon="sun"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
-            </div>
-          </div>
         </div>
-        <div
+      </span>
-          className="react-toggle-thumb"
-        />
-        <input
-          checked={false}
-          className="react-toggle-screenreader-only"
-          onBlur={[Function]}
-          onChange={[Function]}
-          onFocus={[Function]}
-          type="checkbox"
-        />
-      </div>
     </span>
   </div>,
   <div>

src/components/Post/Post.tsx

@@ -28,7 +28,7 @@ const Post: React.FC<Props> = ({ post }: Props) => {
         <Author />
       </div>
 
-      <div className={styles.comments}>
+      <div className={`${styles.comments} hideInPrintView`}>
         <Comments postSlug={slug} postTitle={post.frontmatter.title} />
       </div>
     </div>

src/components/Post/Tags/Tags.tsx

@@ -1,7 +1,5 @@
-import React from "react";
-
 import { Link } from "gatsby";
-
+import React from "react";
 import * as styles from "./Tags.module.scss";
 
 type Props = {
@@ -10,7 +8,7 @@ type Props = {
 };
 
 const Tags = ({ tags, tagSlugs }: Props) => (
-  <div className={styles.tags}>
+  <div className={`${styles.tags} hideInPrintView`}>
     <ul className={styles.list}>
       {tagSlugs
         ? tagSlugs.map((slug, i) => (

src/components/Post/Tags/__snapshots__/Tags.test.tsx.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Tags renders correctly 1`] = `
-<div>
+<div
+  className="undefined hideInPrintView"
+>
   <ul>
     <li>
       <a

src/components/Post/__snapshots__/Post.test.tsx.snap

@@ -5,7 +5,9 @@ exports[`Post renders correctly 1`] = `
   <div>
     <div>
       <span>
-        <span>
+        <span
+          className="undefined hideInPrintView"
+        >
           <a
             href="/"
           >
@@ -15,8 +17,19 @@ exports[`Post renders correctly 1`] = `
             </span>
           </a>
         </span>
+        <span
+          className="undefined showInPrintView"
+        >
+          <a
+            href="/"
+          >
+            rickvanLieshout.com
+          </a>
+        </span>
       </span>
-      <span>
+      <span
+        className="hideInPrintView"
+      >
         <a
           href="/"
           style={
@@ -28,94 +41,98 @@ exports[`Post renders correctly 1`] = `
         >
           ↩ All articles
         </a>
-        <div
+        <span
-          className="react-toggle"
+          className="hideInPrintView"
-          onClick={[Function]}
-          onTouchEnd={[Function]}
-          onTouchMove={[Function]}
-          onTouchStart={[Function]}
         >
           <div
-            className="react-toggle-track"
+            className="react-toggle"
+            onClick={[Function]}
+            onTouchEnd={[Function]}
+            onTouchMove={[Function]}
+            onTouchStart={[Function]}
           >
             <div
-              className="react-toggle-track-check"
+              className="react-toggle-track"
             >
               <div
-                style={
+                className="react-toggle-track-check"
-                  Object {
-                    "color": "#f1c40f",
-                    "fontSize": "1.1em",
-                    "position": "absolute",
-                    "top": "-4px",
-                  }
-                }
               >
-                <svg
+                <div
-                  aria-hidden="true"
+                  style={
-                  className="svg-inline--fa fa-moon "
+                    Object {
-                  data-icon="moon"
+                      "color": "#f1c40f",
-                  data-prefix="fas"
+                      "fontSize": "1.1em",
-                  focusable="false"
+                      "position": "absolute",
-                  role="img"
+                      "top": "-4px",
-                  style={Object {}}
+                    }
-                  viewBox="0 0 384 512"
+                  }
-                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <path
+                  <svg
-                    d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+                    aria-hidden="true"
-                    fill="currentColor"
+                    className="svg-inline--fa fa-moon "
+                    data-icon="moon"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
                     style={Object {}}
-                  />
+                    viewBox="0 0 384 512"
-                </svg>
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+                      fill="currentColor"
+                      style={Object {}}
+                    />
+                  </svg>
+                </div>
+              </div>
+              <div
+                className="react-toggle-track-x"
+              >
+                <div
+                  style={
+                    Object {
+                      "color": "#f39c12",
+                      "fontSize": "1em",
+                      "left": "-3px",
+                      "position": "absolute",
+                      "top": "-3px",
+                    }
+                  }
+                >
+                  <svg
+                    aria-hidden="true"
+                    className="svg-inline--fa fa-sun "
+                    data-icon="sun"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
+                    style={Object {}}
+                    viewBox="0 0 512 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
+                      fill="currentColor"
+                      style={Object {}}
+                    />
+                  </svg>
+                </div>
               </div>
             </div>
             <div
-              className="react-toggle-track-x"
+              className="react-toggle-thumb"
-            >
+            />
-              <div
+            <input
-                style={
+              checked={false}
-                  Object {
+              className="react-toggle-screenreader-only"
-                    "color": "#f39c12",
+              onBlur={[Function]}
-                    "fontSize": "1em",
+              onChange={[Function]}
-                    "left": "-3px",
+              onFocus={[Function]}
-                    "position": "absolute",
+              type="checkbox"
-                    "top": "-3px",
+            />
-                  }
-                }
-              >
-                <svg
-                  aria-hidden="true"
-                  className="svg-inline--fa fa-sun "
-                  data-icon="sun"
-                  data-prefix="fas"
-                  focusable="false"
-                  role="img"
-                  style={Object {}}
-                  viewBox="0 0 512 512"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
-                    fill="currentColor"
-                    style={Object {}}
-                  />
-                </svg>
-              </div>
-            </div>
           </div>
-          <div
+        </span>
-            className="react-toggle-thumb"
-          />
-          <input
-            checked={false}
-            className="react-toggle-screenreader-only"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            type="checkbox"
-          />
-        </div>
       </span>
     </div>
     <div>
@@ -142,6 +159,7 @@ exports[`Post renders correctly 1`] = `
     <div>
       <p>
         Written by:
+         
         <a
           href="/pages/about"
         >
@@ -149,9 +167,17 @@ exports[`Post renders correctly 1`] = `
             Rick van Lieshout
           </strong>
         </a>
+        <span
+          className="showInPrintView"
+        >
+           
+          @ http://localhost/
+        </span>
       </p>
     </div>
   </div>
-  <div />
+  <div
+    className="undefined hideInPrintView"
+  />
 </div>
 `;

src/components/PostHeader/PostHeader.tsx

@@ -11,14 +11,19 @@ export const PostHeader: FunctionComponent<Props> = ({ author }) => {
     <div className={styles.header}>
       <span>
         <Image alt={author.name} path={author.photo} className={styles.photo} />
-        <span className={styles.title}>
+        <span className={`${styles.title} hideInPrintView`}>
           <Link className={styles.name} to="/">
             Rick <span className={styles.surname}>van Lieshout</span>
           </Link>
         </span>
+        <span className={`${styles.title} showInPrintView`}>
+          <Link className={styles.name} to="/">
+            rickvanLieshout.com
+          </Link>
+        </span>
       </span>
 
-      <span>
+      <span className="hideInPrintView">
         <Link to="/" style={{ lineHeight: "50px", marginRight: "10px" }}>
           ↩ All articles
         </Link>

src/components/Sidebar/Menu/Menu.tsx

@@ -1,7 +1,5 @@
-import React from "react";
-
 import { Link } from "gatsby";
-
+import React from "react";
 import * as styles from "./Menu.module.scss";
 
 type Props = {
@@ -12,7 +10,7 @@ type Props = {
 };
 
 const Menu: React.FC<Props> = ({ menu }: Props) => (
-  <nav className={styles.menu}>
+  <nav className={`${styles.menu} hideInPrintView`}>
     <ul className={styles.list}>
       {menu?.map((item) => (
         <li className={styles.item} key={item.path}>

src/components/Sidebar/Menu/__snapshots__/Menu.test.tsx.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Menu renders correctly 1`] = `
-<nav>
+<nav
+  className="undefined hideInPrintView"
+>
   <ul>
     <li>
       <a

src/components/Sidebar/Sidebar.tsx

@@ -1,7 +1,6 @@
 import { useSiteMetadata } from "@/hooks";
 import React from "react";
 import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
-
 import { Author } from "./Author";
 import { Contacts } from "./Contacts";
 import { Copyright } from "./Copyright";
@@ -19,11 +18,13 @@ const Sidebar = ({ isIndex }: Props) => {
     <div className={styles.sidebar}>
       <div className={styles.inner}>
         <Author author={author} isIndex={isIndex} />
-        <Menu menu={menu} />
+        <span className="hideInPrintView">
-        <Contacts contacts={author.contacts} />
+          <Menu menu={menu} />
-        <Copyright copyright={copyright} />
+          <Contacts contacts={author.contacts} />
-        <Menu menu={legalMenu} />
+          <Copyright copyright={copyright} />
-        <ThemeSwitcher showLabel />
+          <Menu menu={legalMenu} />
+          <ThemeSwitcher showLabel />
+        </span>
       </div>
     </div>
   );

src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap

@@ -16,221 +16,233 @@ exports[`Sidebar renders correctly 1`] = `
       </h1>
       <p />
     </div>
-    <nav>
+    <span
-      <ul>
+      className="hideInPrintView"
-        <li>
-          <a
-            href="/"
-          >
-            Articles
-          </a>
-        </li>
-        <li>
-          <a
-            href="/pages/about"
-          >
-            About Me
-          </a>
-        </li>
-        <li>
-          <a
-            href="/pages/contacts"
-          >
-            Contact Me
-          </a>
-        </li>
-      </ul>
-    </nav>
-    <div>
-      <ul>
-        <li>
-          <a
-            href="#"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            <svg
-              viewBox="0 0 22 28"
-            >
-              <title>
-                rss
-              </title>
-              <path
-                d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
-              />
-            </svg>
-          </a>
-        </li>
-        <li>
-          <a
-            href="mailto:#"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            <svg
-              viewBox="0 0 28 28"
-            >
-              <title>
-                email
-              </title>
-              <path
-                d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
-              />
-            </svg>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://github.com/#"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            <svg
-              viewBox="0 0 26 28"
-            >
-              <title>
-                github
-              </title>
-              <path
-                d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
-              />
-            </svg>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.twitter.com/#"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            <svg
-              viewBox="0 0 26 28"
-            >
-              <title>
-                twitter
-              </title>
-              <path
-                d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
-              />
-            </svg>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://t.me/#"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            <svg
-              viewBox="0 0 28 28"
-            >
-              <title>
-                telegram
-              </title>
-              <path
-                d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
-              />
-            </svg>
-          </a>
-        </li>
-      </ul>
-    </div>
-    <div>
-      All rights reserved.
-    </div>
-    <nav>
-      <ul />
-    </nav>
-    Switch color mode:
-    <br />
-    <div
-      className="react-toggle"
-      onClick={[Function]}
-      onTouchEnd={[Function]}
-      onTouchMove={[Function]}
-      onTouchStart={[Function]}
     >
-      <div
+      <nav
-        className="react-toggle-track"
+        className="undefined hideInPrintView"
       >
-        <div
+        <ul>
-          className="react-toggle-track-check"
+          <li>
-        >
+            <a
-          <div
+              href="/"
-            style={
-              Object {
-                "color": "#f1c40f",
-                "fontSize": "1.1em",
-                "position": "absolute",
-                "top": "-4px",
-              }
-            }
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-moon "
-              data-icon="moon"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 384 512"
-              xmlns="http://www.w3.org/2000/svg"
             >
-              <path
+              Articles
-                d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+            </a>
-                fill="currentColor"
+          </li>
-                style={Object {}}
+          <li>
-              />
+            <a
-            </svg>
+              href="/pages/about"
-          </div>
-        </div>
-        <div
-          className="react-toggle-track-x"
-        >
-          <div
-            style={
-              Object {
-                "color": "#f39c12",
-                "fontSize": "1em",
-                "left": "-3px",
-                "position": "absolute",
-                "top": "-3px",
-              }
-            }
-          >
-            <svg
-              aria-hidden="true"
-              className="svg-inline--fa fa-sun "
-              data-icon="sun"
-              data-prefix="fas"
-              focusable="false"
-              role="img"
-              style={Object {}}
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
             >
-              <path
+              About Me
-                d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
+            </a>
-                fill="currentColor"
+          </li>
-                style={Object {}}
+          <li>
-              />
+            <a
-            </svg>
+              href="/pages/contacts"
-          </div>
+            >
-        </div>
+              Contact Me
+            </a>
+          </li>
+        </ul>
+      </nav>
+      <div>
+        <ul>
+          <li>
+            <a
+              href="#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                viewBox="0 0 22 28"
+              >
+                <title>
+                  rss
+                </title>
+                <path
+                  d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
+                />
+              </svg>
+            </a>
+          </li>
+          <li>
+            <a
+              href="mailto:#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                viewBox="0 0 28 28"
+              >
+                <title>
+                  email
+                </title>
+                <path
+                  d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
+                />
+              </svg>
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://github.com/#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                viewBox="0 0 26 28"
+              >
+                <title>
+                  github
+                </title>
+                <path
+                  d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
+                />
+              </svg>
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://www.twitter.com/#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                viewBox="0 0 26 28"
+              >
+                <title>
+                  twitter
+                </title>
+                <path
+                  d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
+                />
+              </svg>
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://t.me/#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              <svg
+                viewBox="0 0 28 28"
+              >
+                <title>
+                  telegram
+                </title>
+                <path
+                  d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
+                />
+              </svg>
+            </a>
+          </li>
+        </ul>
       </div>
-      <div
+      <div>
-        className="react-toggle-thumb"
+        All rights reserved.
-      />
+      </div>
-      <input
+      <nav
-        checked={false}
+        className="undefined hideInPrintView"
-        className="react-toggle-screenreader-only"
+      >
-        onBlur={[Function]}
+        <ul />
-        onChange={[Function]}
+      </nav>
-        onFocus={[Function]}
+      <span
-        type="checkbox"
+        className="hideInPrintView"
-      />
+      >
-    </div>
+        Switch color mode:
+        <br />
+        <div
+          className="react-toggle"
+          onClick={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+        >
+          <div
+            className="react-toggle-track"
+          >
+            <div
+              className="react-toggle-track-check"
+            >
+              <div
+                style={
+                  Object {
+                    "color": "#f1c40f",
+                    "fontSize": "1.1em",
+                    "position": "absolute",
+                    "top": "-4px",
+                  }
+                }
+              >
+                <svg
+                  aria-hidden="true"
+                  className="svg-inline--fa fa-moon "
+                  data-icon="moon"
+                  data-prefix="fas"
+                  focusable="false"
+                  role="img"
+                  style={Object {}}
+                  viewBox="0 0 384 512"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+                    fill="currentColor"
+                    style={Object {}}
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              className="react-toggle-track-x"
+            >
+              <div
+                style={
+                  Object {
+                    "color": "#f39c12",
+                    "fontSize": "1em",
+                    "left": "-3px",
+                    "position": "absolute",
+                    "top": "-3px",
+                  }
+                }
+              >
+                <svg
+                  aria-hidden="true"
+                  className="svg-inline--fa fa-sun "
+                  data-icon="sun"
+                  data-prefix="fas"
+                  focusable="false"
+                  role="img"
+                  style={Object {}}
+                  viewBox="0 0 512 512"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
+                    fill="currentColor"
+                    style={Object {}}
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div
+            className="react-toggle-thumb"
+          />
+          <input
+            checked={false}
+            className="react-toggle-screenreader-only"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            type="checkbox"
+          />
+        </div>
+      </span>
+    </span>
   </div>
 </div>
 `;

src/components/ThemeSwitcher/ThemeSwitcher.tsx

@@ -23,7 +23,7 @@ export const ThemeSwitcher: FunctionComponent<Props> = ({ showLabel }) => {
   }
 
   return (
-    <>
+    <span className="hideInPrintView">
       {showLabel && "Switch color mode:"}
       {showLabel && <br />}
       <Toggle
@@ -34,6 +34,6 @@ export const ThemeSwitcher: FunctionComponent<Props> = ({ showLabel }) => {
         }}
         onChange={toggleTheme}
       />
-    </>
+    </span>
   );
 };

src/templates/CategoriesTemplate/__snapshots__/CategoriesTemplate.test.tsx.snap

@@ -17,221 +17,233 @@ exports[`CategoriesTemplate renders correctly 1`] = `
         </h2>
         <p />
       </div>
-      <nav>
+      <span
-        <ul>
+        className="hideInPrintView"
-          <li>
-            <a
-              href="/"
-            >
-              Articles
-            </a>
-          </li>
-          <li>
-            <a
-              href="/pages/about"
-            >
-              About Me
-            </a>
-          </li>
-          <li>
-            <a
-              href="/pages/contacts"
-            >
-              Contact Me
-            </a>
-          </li>
-        </ul>
-      </nav>
-      <div>
-        <ul>
-          <li>
-            <a
-              href="#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 22 28"
-              >
-                <title>
-                  rss
-                </title>
-                <path
-                  d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="mailto:#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 28 28"
-              >
-                <title>
-                  email
-                </title>
-                <path
-                  d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://github.com/#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 26 28"
-              >
-                <title>
-                  github
-                </title>
-                <path
-                  d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://www.twitter.com/#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 26 28"
-              >
-                <title>
-                  twitter
-                </title>
-                <path
-                  d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://t.me/#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 28 28"
-              >
-                <title>
-                  telegram
-                </title>
-                <path
-                  d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
-                />
-              </svg>
-            </a>
-          </li>
-        </ul>
-      </div>
-      <div>
-        All rights reserved.
-      </div>
-      <nav>
-        <ul />
-      </nav>
-      Switch color mode:
-      <br />
-      <div
-        className="react-toggle"
-        onClick={[Function]}
-        onTouchEnd={[Function]}
-        onTouchMove={[Function]}
-        onTouchStart={[Function]}
       >
-        <div
+        <nav
-          className="react-toggle-track"
+          className="undefined hideInPrintView"
         >
-          <div
+          <ul>
-            className="react-toggle-track-check"
+            <li>
-          >
+              <a
-            <div
+                href="/"
-              style={
-                Object {
-                  "color": "#f1c40f",
-                  "fontSize": "1.1em",
-                  "position": "absolute",
-                  "top": "-4px",
-                }
-              }
-            >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-moon "
-                data-icon="moon"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 384 512"
-                xmlns="http://www.w3.org/2000/svg"
               >
-                <path
+                Articles
-                  d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+              </a>
-                  fill="currentColor"
+            </li>
-                  style={Object {}}
+            <li>
-                />
+              <a
-              </svg>
+                href="/pages/about"
-            </div>
-          </div>
-          <div
-            className="react-toggle-track-x"
-          >
-            <div
-              style={
-                Object {
-                  "color": "#f39c12",
-                  "fontSize": "1em",
-                  "left": "-3px",
-                  "position": "absolute",
-                  "top": "-3px",
-                }
-              }
-            >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-sun "
-                data-icon="sun"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
               >
-                <path
+                About Me
-                  d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
+              </a>
-                  fill="currentColor"
+            </li>
-                  style={Object {}}
+            <li>
-                />
+              <a
-              </svg>
+                href="/pages/contacts"
-            </div>
+              >
-          </div>
+                Contact Me
+              </a>
+            </li>
+          </ul>
+        </nav>
+        <div>
+          <ul>
+            <li>
+              <a
+                href="#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 22 28"
+                >
+                  <title>
+                    rss
+                  </title>
+                  <path
+                    d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="mailto:#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 28 28"
+                >
+                  <title>
+                    email
+                  </title>
+                  <path
+                    d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://github.com/#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 26 28"
+                >
+                  <title>
+                    github
+                  </title>
+                  <path
+                    d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://www.twitter.com/#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 26 28"
+                >
+                  <title>
+                    twitter
+                  </title>
+                  <path
+                    d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://t.me/#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 28 28"
+                >
+                  <title>
+                    telegram
+                  </title>
+                  <path
+                    d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
+                  />
+                </svg>
+              </a>
+            </li>
+          </ul>
         </div>
-        <div
+        <div>
-          className="react-toggle-thumb"
+          All rights reserved.
-        />
+        </div>
-        <input
+        <nav
-          checked={false}
+          className="undefined hideInPrintView"
-          className="react-toggle-screenreader-only"
+        >
-          onBlur={[Function]}
+          <ul />
-          onChange={[Function]}
+        </nav>
-          onFocus={[Function]}
+        <span
-          type="checkbox"
+          className="hideInPrintView"
-        />
+        >
-      </div>
+          Switch color mode:
+          <br />
+          <div
+            className="react-toggle"
+            onClick={[Function]}
+            onTouchEnd={[Function]}
+            onTouchMove={[Function]}
+            onTouchStart={[Function]}
+          >
+            <div
+              className="react-toggle-track"
+            >
+              <div
+                className="react-toggle-track-check"
+              >
+                <div
+                  style={
+                    Object {
+                      "color": "#f1c40f",
+                      "fontSize": "1.1em",
+                      "position": "absolute",
+                      "top": "-4px",
+                    }
+                  }
+                >
+                  <svg
+                    aria-hidden="true"
+                    className="svg-inline--fa fa-moon "
+                    data-icon="moon"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
+                    style={Object {}}
+                    viewBox="0 0 384 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+                      fill="currentColor"
+                      style={Object {}}
+                    />
+                  </svg>
+                </div>
+              </div>
+              <div
+                className="react-toggle-track-x"
+              >
+                <div
+                  style={
+                    Object {
+                      "color": "#f39c12",
+                      "fontSize": "1em",
+                      "left": "-3px",
+                      "position": "absolute",
+                      "top": "-3px",
+                    }
+                  }
+                >
+                  <svg
+                    aria-hidden="true"
+                    className="svg-inline--fa fa-sun "
+                    data-icon="sun"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
+                    style={Object {}}
+                    viewBox="0 0 512 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
+                      fill="currentColor"
+                      style={Object {}}
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+            <div
+              className="react-toggle-thumb"
+            />
+            <input
+              checked={false}
+              className="react-toggle-screenreader-only"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              type="checkbox"
+            />
+          </div>
+        </span>
+      </span>
     </div>
   </div>
   <div>

src/templates/CategoryTemplate/__snapshots__/CategoryTemplate.test.tsx.snap

@@ -17,221 +17,233 @@ exports[`CategoryTemplate renders correctly 1`] = `
         </h2>
         <p />
       </div>
-      <nav>
+      <span
-        <ul>
+        className="hideInPrintView"
-          <li>
-            <a
-              href="/"
-            >
-              Articles
-            </a>
-          </li>
-          <li>
-            <a
-              href="/pages/about"
-            >
-              About Me
-            </a>
-          </li>
-          <li>
-            <a
-              href="/pages/contacts"
-            >
-              Contact Me
-            </a>
-          </li>
-        </ul>
-      </nav>
-      <div>
-        <ul>
-          <li>
-            <a
-              href="#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 22 28"
-              >
-                <title>
-                  rss
-                </title>
-                <path
-                  d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="mailto:#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 28 28"
-              >
-                <title>
-                  email
-                </title>
-                <path
-                  d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://github.com/#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 26 28"
-              >
-                <title>
-                  github
-                </title>
-                <path
-                  d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://www.twitter.com/#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 26 28"
-              >
-                <title>
-                  twitter
-                </title>
-                <path
-                  d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://t.me/#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 28 28"
-              >
-                <title>
-                  telegram
-                </title>
-                <path
-                  d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
-                />
-              </svg>
-            </a>
-          </li>
-        </ul>
-      </div>
-      <div>
-        All rights reserved.
-      </div>
-      <nav>
-        <ul />
-      </nav>
-      Switch color mode:
-      <br />
-      <div
-        className="react-toggle"
-        onClick={[Function]}
-        onTouchEnd={[Function]}
-        onTouchMove={[Function]}
-        onTouchStart={[Function]}
       >
-        <div
+        <nav
-          className="react-toggle-track"
+          className="undefined hideInPrintView"
         >
-          <div
+          <ul>
-            className="react-toggle-track-check"
+            <li>
-          >
+              <a
-            <div
+                href="/"
-              style={
-                Object {
-                  "color": "#f1c40f",
-                  "fontSize": "1.1em",
-                  "position": "absolute",
-                  "top": "-4px",
-                }
-              }
-            >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-moon "
-                data-icon="moon"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 384 512"
-                xmlns="http://www.w3.org/2000/svg"
               >
-                <path
+                Articles
-                  d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+              </a>
-                  fill="currentColor"
+            </li>
-                  style={Object {}}
+            <li>
-                />
+              <a
-              </svg>
+                href="/pages/about"
-            </div>
-          </div>
-          <div
-            className="react-toggle-track-x"
-          >
-            <div
-              style={
-                Object {
-                  "color": "#f39c12",
-                  "fontSize": "1em",
-                  "left": "-3px",
-                  "position": "absolute",
-                  "top": "-3px",
-                }
-              }
-            >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-sun "
-                data-icon="sun"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
               >
-                <path
+                About Me
-                  d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
+              </a>
-                  fill="currentColor"
+            </li>
-                  style={Object {}}
+            <li>
-                />
+              <a
-              </svg>
+                href="/pages/contacts"
-            </div>
+              >
-          </div>
+                Contact Me
+              </a>
+            </li>
+          </ul>
+        </nav>
+        <div>
+          <ul>
+            <li>
+              <a
+                href="#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 22 28"
+                >
+                  <title>
+                    rss
+                  </title>
+                  <path
+                    d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="mailto:#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 28 28"
+                >
+                  <title>
+                    email
+                  </title>
+                  <path
+                    d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://github.com/#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 26 28"
+                >
+                  <title>
+                    github
+                  </title>
+                  <path
+                    d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://www.twitter.com/#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 26 28"
+                >
+                  <title>
+                    twitter
+                  </title>
+                  <path
+                    d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://t.me/#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 28 28"
+                >
+                  <title>
+                    telegram
+                  </title>
+                  <path
+                    d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
+                  />
+                </svg>
+              </a>
+            </li>
+          </ul>
         </div>
-        <div
+        <div>
-          className="react-toggle-thumb"
+          All rights reserved.
-        />
+        </div>
-        <input
+        <nav
-          checked={false}
+          className="undefined hideInPrintView"
-          className="react-toggle-screenreader-only"
+        >
-          onBlur={[Function]}
+          <ul />
-          onChange={[Function]}
+        </nav>
-          onFocus={[Function]}
+        <span
-          type="checkbox"
+          className="hideInPrintView"
-        />
+        >
-      </div>
+          Switch color mode:
+          <br />
+          <div
+            className="react-toggle"
+            onClick={[Function]}
+            onTouchEnd={[Function]}
+            onTouchMove={[Function]}
+            onTouchStart={[Function]}
+          >
+            <div
+              className="react-toggle-track"
+            >
+              <div
+                className="react-toggle-track-check"
+              >
+                <div
+                  style={
+                    Object {
+                      "color": "#f1c40f",
+                      "fontSize": "1.1em",
+                      "position": "absolute",
+                      "top": "-4px",
+                    }
+                  }
+                >
+                  <svg
+                    aria-hidden="true"
+                    className="svg-inline--fa fa-moon "
+                    data-icon="moon"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
+                    style={Object {}}
+                    viewBox="0 0 384 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+                      fill="currentColor"
+                      style={Object {}}
+                    />
+                  </svg>
+                </div>
+              </div>
+              <div
+                className="react-toggle-track-x"
+              >
+                <div
+                  style={
+                    Object {
+                      "color": "#f39c12",
+                      "fontSize": "1em",
+                      "left": "-3px",
+                      "position": "absolute",
+                      "top": "-3px",
+                    }
+                  }
+                >
+                  <svg
+                    aria-hidden="true"
+                    className="svg-inline--fa fa-sun "
+                    data-icon="sun"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
+                    style={Object {}}
+                    viewBox="0 0 512 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
+                      fill="currentColor"
+                      style={Object {}}
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+            <div
+              className="react-toggle-thumb"
+            />
+            <input
+              checked={false}
+              className="react-toggle-screenreader-only"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              type="checkbox"
+            />
+          </div>
+        </span>
+      </span>
     </div>
   </div>
   <div>
@@ -306,10 +318,12 @@ exports[`CategoryTemplate renders correctly 1`] = `
             </a>
           </div>
         </div>
-        <div>
+        <div
+          className="undefined"
+        >
           <div>
             <a
-              className=""
+              className=" hideInPrintView"
               href="/typography/page/1"
               rel="prev"
             >
@@ -318,7 +332,7 @@ exports[`CategoryTemplate renders correctly 1`] = `
           </div>
           <div>
             <a
-              className=""
+              className=" hideInPrintView"
               href="/typography/page/3"
               rel="next"
             >

src/templates/IndexTemplate/__snapshots__/IndexTemplate.test.tsx.snap

@@ -17,221 +17,233 @@ exports[`IndexTemplate renders correctly 1`] = `
         </h1>
         <p />
       </div>
-      <nav>
+      <span
-        <ul>
+        className="hideInPrintView"
-          <li>
-            <a
-              href="/"
-            >
-              Articles
-            </a>
-          </li>
-          <li>
-            <a
-              href="/pages/about"
-            >
-              About Me
-            </a>
-          </li>
-          <li>
-            <a
-              href="/pages/contacts"
-            >
-              Contact Me
-            </a>
-          </li>
-        </ul>
-      </nav>
-      <div>
-        <ul>
-          <li>
-            <a
-              href="#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 22 28"
-              >
-                <title>
-                  rss
-                </title>
-                <path
-                  d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="mailto:#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 28 28"
-              >
-                <title>
-                  email
-                </title>
-                <path
-                  d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://github.com/#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 26 28"
-              >
-                <title>
-                  github
-                </title>
-                <path
-                  d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://www.twitter.com/#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 26 28"
-              >
-                <title>
-                  twitter
-                </title>
-                <path
-                  d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://t.me/#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 28 28"
-              >
-                <title>
-                  telegram
-                </title>
-                <path
-                  d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
-                />
-              </svg>
-            </a>
-          </li>
-        </ul>
-      </div>
-      <div>
-        All rights reserved.
-      </div>
-      <nav>
-        <ul />
-      </nav>
-      Switch color mode:
-      <br />
-      <div
-        className="react-toggle"
-        onClick={[Function]}
-        onTouchEnd={[Function]}
-        onTouchMove={[Function]}
-        onTouchStart={[Function]}
       >
-        <div
+        <nav
-          className="react-toggle-track"
+          className="undefined hideInPrintView"
         >
-          <div
+          <ul>
-            className="react-toggle-track-check"
+            <li>
-          >
+              <a
-            <div
+                href="/"
-              style={
-                Object {
-                  "color": "#f1c40f",
-                  "fontSize": "1.1em",
-                  "position": "absolute",
-                  "top": "-4px",
-                }
-              }
-            >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-moon "
-                data-icon="moon"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 384 512"
-                xmlns="http://www.w3.org/2000/svg"
               >
-                <path
+                Articles
-                  d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+              </a>
-                  fill="currentColor"
+            </li>
-                  style={Object {}}
+            <li>
-                />
+              <a
-              </svg>
+                href="/pages/about"
-            </div>
-          </div>
-          <div
-            className="react-toggle-track-x"
-          >
-            <div
-              style={
-                Object {
-                  "color": "#f39c12",
-                  "fontSize": "1em",
-                  "left": "-3px",
-                  "position": "absolute",
-                  "top": "-3px",
-                }
-              }
-            >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-sun "
-                data-icon="sun"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
               >
-                <path
+                About Me
-                  d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
+              </a>
-                  fill="currentColor"
+            </li>
-                  style={Object {}}
+            <li>
-                />
+              <a
-              </svg>
+                href="/pages/contacts"
-            </div>
+              >
-          </div>
+                Contact Me
+              </a>
+            </li>
+          </ul>
+        </nav>
+        <div>
+          <ul>
+            <li>
+              <a
+                href="#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 22 28"
+                >
+                  <title>
+                    rss
+                  </title>
+                  <path
+                    d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="mailto:#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 28 28"
+                >
+                  <title>
+                    email
+                  </title>
+                  <path
+                    d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://github.com/#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 26 28"
+                >
+                  <title>
+                    github
+                  </title>
+                  <path
+                    d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://www.twitter.com/#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 26 28"
+                >
+                  <title>
+                    twitter
+                  </title>
+                  <path
+                    d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://t.me/#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 28 28"
+                >
+                  <title>
+                    telegram
+                  </title>
+                  <path
+                    d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
+                  />
+                </svg>
+              </a>
+            </li>
+          </ul>
         </div>
-        <div
+        <div>
-          className="react-toggle-thumb"
+          All rights reserved.
-        />
+        </div>
-        <input
+        <nav
-          checked={false}
+          className="undefined hideInPrintView"
-          className="react-toggle-screenreader-only"
+        >
-          onBlur={[Function]}
+          <ul />
-          onChange={[Function]}
+        </nav>
-          onFocus={[Function]}
+        <span
-          type="checkbox"
+          className="hideInPrintView"
-        />
+        >
-      </div>
+          Switch color mode:
+          <br />
+          <div
+            className="react-toggle"
+            onClick={[Function]}
+            onTouchEnd={[Function]}
+            onTouchMove={[Function]}
+            onTouchStart={[Function]}
+          >
+            <div
+              className="react-toggle-track"
+            >
+              <div
+                className="react-toggle-track-check"
+              >
+                <div
+                  style={
+                    Object {
+                      "color": "#f1c40f",
+                      "fontSize": "1.1em",
+                      "position": "absolute",
+                      "top": "-4px",
+                    }
+                  }
+                >
+                  <svg
+                    aria-hidden="true"
+                    className="svg-inline--fa fa-moon "
+                    data-icon="moon"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
+                    style={Object {}}
+                    viewBox="0 0 384 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+                      fill="currentColor"
+                      style={Object {}}
+                    />
+                  </svg>
+                </div>
+              </div>
+              <div
+                className="react-toggle-track-x"
+              >
+                <div
+                  style={
+                    Object {
+                      "color": "#f39c12",
+                      "fontSize": "1em",
+                      "left": "-3px",
+                      "position": "absolute",
+                      "top": "-3px",
+                    }
+                  }
+                >
+                  <svg
+                    aria-hidden="true"
+                    className="svg-inline--fa fa-sun "
+                    data-icon="sun"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
+                    style={Object {}}
+                    viewBox="0 0 512 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
+                      fill="currentColor"
+                      style={Object {}}
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+            <div
+              className="react-toggle-thumb"
+            />
+            <input
+              checked={false}
+              className="react-toggle-screenreader-only"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              type="checkbox"
+            />
+          </div>
+        </span>
+      </span>
     </div>
   </div>
   <div>
@@ -303,10 +315,12 @@ exports[`IndexTemplate renders correctly 1`] = `
             </a>
           </div>
         </div>
-        <div>
+        <div
+          className="undefined"
+        >
           <div>
             <a
-              className=""
+              className=" hideInPrintView"
               href="/typography/page/1"
               rel="prev"
             >
@@ -315,7 +329,7 @@ exports[`IndexTemplate renders correctly 1`] = `
           </div>
           <div>
             <a
-              className=""
+              className=" hideInPrintView"
               href="/typography/page/3"
               rel="next"
             >

src/templates/NotFoundTemplate/__snapshots__/NotFoundTemplate.test.tsx.snap

@@ -17,221 +17,233 @@ exports[`NotFoundTemplate renders correctly 1`] = `
         </h2>
         <p />
       </div>
-      <nav>
+      <span
-        <ul>
+        className="hideInPrintView"
-          <li>
-            <a
-              href="/"
-            >
-              Articles
-            </a>
-          </li>
-          <li>
-            <a
-              href="/pages/about"
-            >
-              About Me
-            </a>
-          </li>
-          <li>
-            <a
-              href="/pages/contacts"
-            >
-              Contact Me
-            </a>
-          </li>
-        </ul>
-      </nav>
-      <div>
-        <ul>
-          <li>
-            <a
-              href="#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 22 28"
-              >
-                <title>
-                  rss
-                </title>
-                <path
-                  d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="mailto:#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 28 28"
-              >
-                <title>
-                  email
-                </title>
-                <path
-                  d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://github.com/#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 26 28"
-              >
-                <title>
-                  github
-                </title>
-                <path
-                  d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://www.twitter.com/#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 26 28"
-              >
-                <title>
-                  twitter
-                </title>
-                <path
-                  d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://t.me/#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 28 28"
-              >
-                <title>
-                  telegram
-                </title>
-                <path
-                  d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
-                />
-              </svg>
-            </a>
-          </li>
-        </ul>
-      </div>
-      <div>
-        All rights reserved.
-      </div>
-      <nav>
-        <ul />
-      </nav>
-      Switch color mode:
-      <br />
-      <div
-        className="react-toggle"
-        onClick={[Function]}
-        onTouchEnd={[Function]}
-        onTouchMove={[Function]}
-        onTouchStart={[Function]}
       >
-        <div
+        <nav
-          className="react-toggle-track"
+          className="undefined hideInPrintView"
         >
-          <div
+          <ul>
-            className="react-toggle-track-check"
+            <li>
-          >
+              <a
-            <div
+                href="/"
-              style={
-                Object {
-                  "color": "#f1c40f",
-                  "fontSize": "1.1em",
-                  "position": "absolute",
-                  "top": "-4px",
-                }
-              }
-            >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-moon "
-                data-icon="moon"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 384 512"
-                xmlns="http://www.w3.org/2000/svg"
               >
-                <path
+                Articles
-                  d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+              </a>
-                  fill="currentColor"
+            </li>
-                  style={Object {}}
+            <li>
-                />
+              <a
-              </svg>
+                href="/pages/about"
-            </div>
-          </div>
-          <div
-            className="react-toggle-track-x"
-          >
-            <div
-              style={
-                Object {
-                  "color": "#f39c12",
-                  "fontSize": "1em",
-                  "left": "-3px",
-                  "position": "absolute",
-                  "top": "-3px",
-                }
-              }
-            >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-sun "
-                data-icon="sun"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
               >
-                <path
+                About Me
-                  d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
+              </a>
-                  fill="currentColor"
+            </li>
-                  style={Object {}}
+            <li>
-                />
+              <a
-              </svg>
+                href="/pages/contacts"
-            </div>
+              >
-          </div>
+                Contact Me
+              </a>
+            </li>
+          </ul>
+        </nav>
+        <div>
+          <ul>
+            <li>
+              <a
+                href="#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 22 28"
+                >
+                  <title>
+                    rss
+                  </title>
+                  <path
+                    d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="mailto:#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 28 28"
+                >
+                  <title>
+                    email
+                  </title>
+                  <path
+                    d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://github.com/#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 26 28"
+                >
+                  <title>
+                    github
+                  </title>
+                  <path
+                    d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://www.twitter.com/#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 26 28"
+                >
+                  <title>
+                    twitter
+                  </title>
+                  <path
+                    d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://t.me/#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 28 28"
+                >
+                  <title>
+                    telegram
+                  </title>
+                  <path
+                    d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
+                  />
+                </svg>
+              </a>
+            </li>
+          </ul>
         </div>
-        <div
+        <div>
-          className="react-toggle-thumb"
+          All rights reserved.
-        />
+        </div>
-        <input
+        <nav
-          checked={false}
+          className="undefined hideInPrintView"
-          className="react-toggle-screenreader-only"
+        >
-          onBlur={[Function]}
+          <ul />
-          onChange={[Function]}
+        </nav>
-          onFocus={[Function]}
+        <span
-          type="checkbox"
+          className="hideInPrintView"
-        />
+        >
-      </div>
+          Switch color mode:
+          <br />
+          <div
+            className="react-toggle"
+            onClick={[Function]}
+            onTouchEnd={[Function]}
+            onTouchMove={[Function]}
+            onTouchStart={[Function]}
+          >
+            <div
+              className="react-toggle-track"
+            >
+              <div
+                className="react-toggle-track-check"
+              >
+                <div
+                  style={
+                    Object {
+                      "color": "#f1c40f",
+                      "fontSize": "1.1em",
+                      "position": "absolute",
+                      "top": "-4px",
+                    }
+                  }
+                >
+                  <svg
+                    aria-hidden="true"
+                    className="svg-inline--fa fa-moon "
+                    data-icon="moon"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
+                    style={Object {}}
+                    viewBox="0 0 384 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+                      fill="currentColor"
+                      style={Object {}}
+                    />
+                  </svg>
+                </div>
+              </div>
+              <div
+                className="react-toggle-track-x"
+              >
+                <div
+                  style={
+                    Object {
+                      "color": "#f39c12",
+                      "fontSize": "1em",
+                      "left": "-3px",
+                      "position": "absolute",
+                      "top": "-3px",
+                    }
+                  }
+                >
+                  <svg
+                    aria-hidden="true"
+                    className="svg-inline--fa fa-sun "
+                    data-icon="sun"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
+                    style={Object {}}
+                    viewBox="0 0 512 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
+                      fill="currentColor"
+                      style={Object {}}
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+            <div
+              className="react-toggle-thumb"
+            />
+            <input
+              checked={false}
+              className="react-toggle-screenreader-only"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              type="checkbox"
+            />
+          </div>
+        </span>
+      </span>
     </div>
   </div>
   <div>

src/templates/PageTemplate/__snapshots__/PageTemplate.test.tsx.snap

@@ -17,221 +17,233 @@ exports[`PageTemplate renders correctly 1`] = `
         </h2>
         <p />
       </div>
-      <nav>
+      <span
-        <ul>
+        className="hideInPrintView"
-          <li>
-            <a
-              href="/"
-            >
-              Articles
-            </a>
-          </li>
-          <li>
-            <a
-              href="/pages/about"
-            >
-              About Me
-            </a>
-          </li>
-          <li>
-            <a
-              href="/pages/contacts"
-            >
-              Contact Me
-            </a>
-          </li>
-        </ul>
-      </nav>
-      <div>
-        <ul>
-          <li>
-            <a
-              href="#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 22 28"
-              >
-                <title>
-                  rss
-                </title>
-                <path
-                  d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="mailto:#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 28 28"
-              >
-                <title>
-                  email
-                </title>
-                <path
-                  d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://github.com/#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 26 28"
-              >
-                <title>
-                  github
-                </title>
-                <path
-                  d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://www.twitter.com/#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 26 28"
-              >
-                <title>
-                  twitter
-                </title>
-                <path
-                  d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://t.me/#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 28 28"
-              >
-                <title>
-                  telegram
-                </title>
-                <path
-                  d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
-                />
-              </svg>
-            </a>
-          </li>
-        </ul>
-      </div>
-      <div>
-        All rights reserved.
-      </div>
-      <nav>
-        <ul />
-      </nav>
-      Switch color mode:
-      <br />
-      <div
-        className="react-toggle"
-        onClick={[Function]}
-        onTouchEnd={[Function]}
-        onTouchMove={[Function]}
-        onTouchStart={[Function]}
       >
-        <div
+        <nav
-          className="react-toggle-track"
+          className="undefined hideInPrintView"
         >
-          <div
+          <ul>
-            className="react-toggle-track-check"
+            <li>
-          >
+              <a
-            <div
+                href="/"
-              style={
-                Object {
-                  "color": "#f1c40f",
-                  "fontSize": "1.1em",
-                  "position": "absolute",
-                  "top": "-4px",
-                }
-              }
-            >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-moon "
-                data-icon="moon"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 384 512"
-                xmlns="http://www.w3.org/2000/svg"
               >
-                <path
+                Articles
-                  d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+              </a>
-                  fill="currentColor"
+            </li>
-                  style={Object {}}
+            <li>
-                />
+              <a
-              </svg>
+                href="/pages/about"
-            </div>
-          </div>
-          <div
-            className="react-toggle-track-x"
-          >
-            <div
-              style={
-                Object {
-                  "color": "#f39c12",
-                  "fontSize": "1em",
-                  "left": "-3px",
-                  "position": "absolute",
-                  "top": "-3px",
-                }
-              }
-            >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-sun "
-                data-icon="sun"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
               >
-                <path
+                About Me
-                  d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
+              </a>
-                  fill="currentColor"
+            </li>
-                  style={Object {}}
+            <li>
-                />
+              <a
-              </svg>
+                href="/pages/contacts"
-            </div>
+              >
-          </div>
+                Contact Me
+              </a>
+            </li>
+          </ul>
+        </nav>
+        <div>
+          <ul>
+            <li>
+              <a
+                href="#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 22 28"
+                >
+                  <title>
+                    rss
+                  </title>
+                  <path
+                    d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="mailto:#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 28 28"
+                >
+                  <title>
+                    email
+                  </title>
+                  <path
+                    d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://github.com/#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 26 28"
+                >
+                  <title>
+                    github
+                  </title>
+                  <path
+                    d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://www.twitter.com/#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 26 28"
+                >
+                  <title>
+                    twitter
+                  </title>
+                  <path
+                    d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://t.me/#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 28 28"
+                >
+                  <title>
+                    telegram
+                  </title>
+                  <path
+                    d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
+                  />
+                </svg>
+              </a>
+            </li>
+          </ul>
         </div>
-        <div
+        <div>
-          className="react-toggle-thumb"
+          All rights reserved.
-        />
+        </div>
-        <input
+        <nav
-          checked={false}
+          className="undefined hideInPrintView"
-          className="react-toggle-screenreader-only"
+        >
-          onBlur={[Function]}
+          <ul />
-          onChange={[Function]}
+        </nav>
-          onFocus={[Function]}
+        <span
-          type="checkbox"
+          className="hideInPrintView"
-        />
+        >
-      </div>
+          Switch color mode:
+          <br />
+          <div
+            className="react-toggle"
+            onClick={[Function]}
+            onTouchEnd={[Function]}
+            onTouchMove={[Function]}
+            onTouchStart={[Function]}
+          >
+            <div
+              className="react-toggle-track"
+            >
+              <div
+                className="react-toggle-track-check"
+              >
+                <div
+                  style={
+                    Object {
+                      "color": "#f1c40f",
+                      "fontSize": "1.1em",
+                      "position": "absolute",
+                      "top": "-4px",
+                    }
+                  }
+                >
+                  <svg
+                    aria-hidden="true"
+                    className="svg-inline--fa fa-moon "
+                    data-icon="moon"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
+                    style={Object {}}
+                    viewBox="0 0 384 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+                      fill="currentColor"
+                      style={Object {}}
+                    />
+                  </svg>
+                </div>
+              </div>
+              <div
+                className="react-toggle-track-x"
+              >
+                <div
+                  style={
+                    Object {
+                      "color": "#f39c12",
+                      "fontSize": "1em",
+                      "left": "-3px",
+                      "position": "absolute",
+                      "top": "-3px",
+                    }
+                  }
+                >
+                  <svg
+                    aria-hidden="true"
+                    className="svg-inline--fa fa-sun "
+                    data-icon="sun"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
+                    style={Object {}}
+                    viewBox="0 0 512 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
+                      fill="currentColor"
+                      style={Object {}}
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+            <div
+              className="react-toggle-thumb"
+            />
+            <input
+              checked={false}
+              className="react-toggle-screenreader-only"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              type="checkbox"
+            />
+          </div>
+        </span>
+      </span>
     </div>
   </div>
   <div>

src/templates/PostTemplate/__snapshots__/PostTemplate.test.tsx.snap

@@ -6,7 +6,9 @@ exports[`PostTemplate renders correctly 1`] = `
     <div>
       <div>
         <span>
-          <span>
+          <span
+            className="undefined hideInPrintView"
+          >
             <a
               href="/"
             >
@@ -16,8 +18,19 @@ exports[`PostTemplate renders correctly 1`] = `
               </span>
             </a>
           </span>
+          <span
+            className="undefined showInPrintView"
+          >
+            <a
+              href="/"
+            >
+              rickvanLieshout.com
+            </a>
+          </span>
         </span>
-        <span>
+        <span
+          className="hideInPrintView"
+        >
           <a
             href="/"
             style={
@@ -29,94 +42,98 @@ exports[`PostTemplate renders correctly 1`] = `
           >
             ↩ All articles
           </a>
-          <div
+          <span
-            className="react-toggle"
+            className="hideInPrintView"
-            onClick={[Function]}
-            onTouchEnd={[Function]}
-            onTouchMove={[Function]}
-            onTouchStart={[Function]}
           >
             <div
-              className="react-toggle-track"
+              className="react-toggle"
+              onClick={[Function]}
+              onTouchEnd={[Function]}
+              onTouchMove={[Function]}
+              onTouchStart={[Function]}
             >
               <div
-                className="react-toggle-track-check"
+                className="react-toggle-track"
               >
                 <div
-                  style={
+                  className="react-toggle-track-check"
-                    Object {
-                      "color": "#f1c40f",
-                      "fontSize": "1.1em",
-                      "position": "absolute",
-                      "top": "-4px",
-                    }
-                  }
                 >
-                  <svg
+                  <div
-                    aria-hidden="true"
+                    style={
-                    className="svg-inline--fa fa-moon "
+                      Object {
-                    data-icon="moon"
+                        "color": "#f1c40f",
-                    data-prefix="fas"
+                        "fontSize": "1.1em",
-                    focusable="false"
+                        "position": "absolute",
-                    role="img"
+                        "top": "-4px",
-                    style={Object {}}
+                      }
-                    viewBox="0 0 384 512"
+                    }
-                    xmlns="http://www.w3.org/2000/svg"
                   >
-                    <path
+                    <svg
-                      d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+                      aria-hidden="true"
-                      fill="currentColor"
+                      className="svg-inline--fa fa-moon "
+                      data-icon="moon"
+                      data-prefix="fas"
+                      focusable="false"
+                      role="img"
                       style={Object {}}
-                    />
+                      viewBox="0 0 384 512"
-                  </svg>
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+                        fill="currentColor"
+                        style={Object {}}
+                      />
+                    </svg>
+                  </div>
+                </div>
+                <div
+                  className="react-toggle-track-x"
+                >
+                  <div
+                    style={
+                      Object {
+                        "color": "#f39c12",
+                        "fontSize": "1em",
+                        "left": "-3px",
+                        "position": "absolute",
+                        "top": "-3px",
+                      }
+                    }
+                  >
+                    <svg
+                      aria-hidden="true"
+                      className="svg-inline--fa fa-sun "
+                      data-icon="sun"
+                      data-prefix="fas"
+                      focusable="false"
+                      role="img"
+                      style={Object {}}
+                      viewBox="0 0 512 512"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
+                        fill="currentColor"
+                        style={Object {}}
+                      />
+                    </svg>
+                  </div>
                 </div>
               </div>
               <div
-                className="react-toggle-track-x"
+                className="react-toggle-thumb"
-              >
+              />
-                <div
+              <input
-                  style={
+                checked={false}
-                    Object {
+                className="react-toggle-screenreader-only"
-                      "color": "#f39c12",
+                onBlur={[Function]}
-                      "fontSize": "1em",
+                onChange={[Function]}
-                      "left": "-3px",
+                onFocus={[Function]}
-                      "position": "absolute",
+                type="checkbox"
-                      "top": "-3px",
+              />
-                    }
-                  }
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="svg-inline--fa fa-sun "
-                    data-icon="sun"
-                    data-prefix="fas"
-                    focusable="false"
-                    role="img"
-                    style={Object {}}
-                    viewBox="0 0 512 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
-                      fill="currentColor"
-                      style={Object {}}
-                    />
-                  </svg>
-                </div>
-              </div>
             </div>
-            <div
+          </span>
-              className="react-toggle-thumb"
-            />
-            <input
-              checked={false}
-              className="react-toggle-screenreader-only"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              type="checkbox"
-            />
-          </div>
         </span>
       </div>
       <div>
@@ -143,6 +160,7 @@ exports[`PostTemplate renders correctly 1`] = `
       <div>
         <p>
           Written by:
+           
           <a
             href="/pages/about"
           >
@@ -150,10 +168,18 @@ exports[`PostTemplate renders correctly 1`] = `
               Rick van Lieshout
             </strong>
           </a>
+          <span
+            className="showInPrintView"
+          >
+             
+            @ http://localhost/
+          </span>
         </p>
       </div>
     </div>
-    <div />
+    <div
+      className="undefined hideInPrintView"
+    />
   </div>
   <div
     className="CookieConsent"

src/templates/TagTemplate/__snapshots__/TagTemplate.test.tsx.snap

@@ -17,221 +17,233 @@ exports[`TagTemplate renders correctly 1`] = `
         </h2>
         <p />
       </div>
-      <nav>
+      <span
-        <ul>
+        className="hideInPrintView"
-          <li>
-            <a
-              href="/"
-            >
-              Articles
-            </a>
-          </li>
-          <li>
-            <a
-              href="/pages/about"
-            >
-              About Me
-            </a>
-          </li>
-          <li>
-            <a
-              href="/pages/contacts"
-            >
-              Contact Me
-            </a>
-          </li>
-        </ul>
-      </nav>
-      <div>
-        <ul>
-          <li>
-            <a
-              href="#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 22 28"
-              >
-                <title>
-                  rss
-                </title>
-                <path
-                  d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="mailto:#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 28 28"
-              >
-                <title>
-                  email
-                </title>
-                <path
-                  d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://github.com/#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 26 28"
-              >
-                <title>
-                  github
-                </title>
-                <path
-                  d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://www.twitter.com/#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 26 28"
-              >
-                <title>
-                  twitter
-                </title>
-                <path
-                  d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://t.me/#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 28 28"
-              >
-                <title>
-                  telegram
-                </title>
-                <path
-                  d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
-                />
-              </svg>
-            </a>
-          </li>
-        </ul>
-      </div>
-      <div>
-        All rights reserved.
-      </div>
-      <nav>
-        <ul />
-      </nav>
-      Switch color mode:
-      <br />
-      <div
-        className="react-toggle"
-        onClick={[Function]}
-        onTouchEnd={[Function]}
-        onTouchMove={[Function]}
-        onTouchStart={[Function]}
       >
-        <div
+        <nav
-          className="react-toggle-track"
+          className="undefined hideInPrintView"
         >
-          <div
+          <ul>
-            className="react-toggle-track-check"
+            <li>
-          >
+              <a
-            <div
+                href="/"
-              style={
-                Object {
-                  "color": "#f1c40f",
-                  "fontSize": "1.1em",
-                  "position": "absolute",
-                  "top": "-4px",
-                }
-              }
-            >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-moon "
-                data-icon="moon"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 384 512"
-                xmlns="http://www.w3.org/2000/svg"
               >
-                <path
+                Articles
-                  d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+              </a>
-                  fill="currentColor"
+            </li>
-                  style={Object {}}
+            <li>
-                />
+              <a
-              </svg>
+                href="/pages/about"
-            </div>
-          </div>
-          <div
-            className="react-toggle-track-x"
-          >
-            <div
-              style={
-                Object {
-                  "color": "#f39c12",
-                  "fontSize": "1em",
-                  "left": "-3px",
-                  "position": "absolute",
-                  "top": "-3px",
-                }
-              }
-            >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-sun "
-                data-icon="sun"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
               >
-                <path
+                About Me
-                  d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
+              </a>
-                  fill="currentColor"
+            </li>
-                  style={Object {}}
+            <li>
-                />
+              <a
-              </svg>
+                href="/pages/contacts"
-            </div>
+              >
-          </div>
+                Contact Me
+              </a>
+            </li>
+          </ul>
+        </nav>
+        <div>
+          <ul>
+            <li>
+              <a
+                href="#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 22 28"
+                >
+                  <title>
+                    rss
+                  </title>
+                  <path
+                    d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="mailto:#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 28 28"
+                >
+                  <title>
+                    email
+                  </title>
+                  <path
+                    d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://github.com/#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 26 28"
+                >
+                  <title>
+                    github
+                  </title>
+                  <path
+                    d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://www.twitter.com/#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 26 28"
+                >
+                  <title>
+                    twitter
+                  </title>
+                  <path
+                    d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://t.me/#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 28 28"
+                >
+                  <title>
+                    telegram
+                  </title>
+                  <path
+                    d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
+                  />
+                </svg>
+              </a>
+            </li>
+          </ul>
         </div>
-        <div
+        <div>
-          className="react-toggle-thumb"
+          All rights reserved.
-        />
+        </div>
-        <input
+        <nav
-          checked={false}
+          className="undefined hideInPrintView"
-          className="react-toggle-screenreader-only"
+        >
-          onBlur={[Function]}
+          <ul />
-          onChange={[Function]}
+        </nav>
-          onFocus={[Function]}
+        <span
-          type="checkbox"
+          className="hideInPrintView"
-        />
+        >
-      </div>
+          Switch color mode:
+          <br />
+          <div
+            className="react-toggle"
+            onClick={[Function]}
+            onTouchEnd={[Function]}
+            onTouchMove={[Function]}
+            onTouchStart={[Function]}
+          >
+            <div
+              className="react-toggle-track"
+            >
+              <div
+                className="react-toggle-track-check"
+              >
+                <div
+                  style={
+                    Object {
+                      "color": "#f1c40f",
+                      "fontSize": "1.1em",
+                      "position": "absolute",
+                      "top": "-4px",
+                    }
+                  }
+                >
+                  <svg
+                    aria-hidden="true"
+                    className="svg-inline--fa fa-moon "
+                    data-icon="moon"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
+                    style={Object {}}
+                    viewBox="0 0 384 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+                      fill="currentColor"
+                      style={Object {}}
+                    />
+                  </svg>
+                </div>
+              </div>
+              <div
+                className="react-toggle-track-x"
+              >
+                <div
+                  style={
+                    Object {
+                      "color": "#f39c12",
+                      "fontSize": "1em",
+                      "left": "-3px",
+                      "position": "absolute",
+                      "top": "-3px",
+                    }
+                  }
+                >
+                  <svg
+                    aria-hidden="true"
+                    className="svg-inline--fa fa-sun "
+                    data-icon="sun"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
+                    style={Object {}}
+                    viewBox="0 0 512 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
+                      fill="currentColor"
+                      style={Object {}}
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+            <div
+              className="react-toggle-thumb"
+            />
+            <input
+              checked={false}
+              className="react-toggle-screenreader-only"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              type="checkbox"
+            />
+          </div>
+        </span>
+      </span>
     </div>
   </div>
   <div>
@@ -306,10 +318,12 @@ exports[`TagTemplate renders correctly 1`] = `
             </a>
           </div>
         </div>
-        <div>
+        <div
+          className="undefined"
+        >
           <div>
             <a
-              className=""
+              className=" hideInPrintView"
               href="/typography/page/1"
               rel="prev"
             >
@@ -318,7 +332,7 @@ exports[`TagTemplate renders correctly 1`] = `
           </div>
           <div>
             <a
-              className=""
+              className=" hideInPrintView"
               href="/typography/page/3"
               rel="next"
             >

src/templates/TagsTemplate/__snapshots__/TagsTemplate.test.tsx.snap

@@ -17,221 +17,233 @@ exports[`TagsTemplate renders correctly 1`] = `
         </h2>
         <p />
       </div>
-      <nav>
+      <span
-        <ul>
+        className="hideInPrintView"
-          <li>
-            <a
-              href="/"
-            >
-              Articles
-            </a>
-          </li>
-          <li>
-            <a
-              href="/pages/about"
-            >
-              About Me
-            </a>
-          </li>
-          <li>
-            <a
-              href="/pages/contacts"
-            >
-              Contact Me
-            </a>
-          </li>
-        </ul>
-      </nav>
-      <div>
-        <ul>
-          <li>
-            <a
-              href="#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 22 28"
-              >
-                <title>
-                  rss
-                </title>
-                <path
-                  d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="mailto:#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 28 28"
-              >
-                <title>
-                  email
-                </title>
-                <path
-                  d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://github.com/#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 26 28"
-              >
-                <title>
-                  github
-                </title>
-                <path
-                  d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://www.twitter.com/#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 26 28"
-              >
-                <title>
-                  twitter
-                </title>
-                <path
-                  d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
-                />
-              </svg>
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://t.me/#"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <svg
-                viewBox="0 0 28 28"
-              >
-                <title>
-                  telegram
-                </title>
-                <path
-                  d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
-                />
-              </svg>
-            </a>
-          </li>
-        </ul>
-      </div>
-      <div>
-        All rights reserved.
-      </div>
-      <nav>
-        <ul />
-      </nav>
-      Switch color mode:
-      <br />
-      <div
-        className="react-toggle"
-        onClick={[Function]}
-        onTouchEnd={[Function]}
-        onTouchMove={[Function]}
-        onTouchStart={[Function]}
       >
-        <div
+        <nav
-          className="react-toggle-track"
+          className="undefined hideInPrintView"
         >
-          <div
+          <ul>
-            className="react-toggle-track-check"
+            <li>
-          >
+              <a
-            <div
+                href="/"
-              style={
-                Object {
-                  "color": "#f1c40f",
-                  "fontSize": "1.1em",
-                  "position": "absolute",
-                  "top": "-4px",
-                }
-              }
-            >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-moon "
-                data-icon="moon"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 384 512"
-                xmlns="http://www.w3.org/2000/svg"
               >
-                <path
+                Articles
-                  d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+              </a>
-                  fill="currentColor"
+            </li>
-                  style={Object {}}
+            <li>
-                />
+              <a
-              </svg>
+                href="/pages/about"
-            </div>
-          </div>
-          <div
-            className="react-toggle-track-x"
-          >
-            <div
-              style={
-                Object {
-                  "color": "#f39c12",
-                  "fontSize": "1em",
-                  "left": "-3px",
-                  "position": "absolute",
-                  "top": "-3px",
-                }
-              }
-            >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-sun "
-                data-icon="sun"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
               >
-                <path
+                About Me
-                  d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
+              </a>
-                  fill="currentColor"
+            </li>
-                  style={Object {}}
+            <li>
-                />
+              <a
-              </svg>
+                href="/pages/contacts"
-            </div>
+              >
-          </div>
+                Contact Me
+              </a>
+            </li>
+          </ul>
+        </nav>
+        <div>
+          <ul>
+            <li>
+              <a
+                href="#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 22 28"
+                >
+                  <title>
+                    rss
+                  </title>
+                  <path
+                    d="M6 21c0 1.656-1.344 3-3 3s-3-1.344-3-3 1.344-3 3-3 3 1.344 3 3zM14 22.922c0.016 0.281-0.078 0.547-0.266 0.75-0.187 0.219-0.453 0.328-0.734 0.328h-2.109c-0.516 0-0.938-0.391-0.984-0.906-0.453-4.766-4.234-8.547-9-9-0.516-0.047-0.906-0.469-0.906-0.984v-2.109c0-0.281 0.109-0.547 0.328-0.734 0.172-0.172 0.422-0.266 0.672-0.266h0.078c3.328 0.266 6.469 1.719 8.828 4.094 2.375 2.359 3.828 5.5 4.094 8.828zM22 22.953c0.016 0.266-0.078 0.531-0.281 0.734-0.187 0.203-0.438 0.313-0.719 0.313h-2.234c-0.531 0-0.969-0.406-1-0.938-0.516-9.078-7.75-16.312-16.828-16.844-0.531-0.031-0.938-0.469-0.938-0.984v-2.234c0-0.281 0.109-0.531 0.313-0.719 0.187-0.187 0.438-0.281 0.688-0.281h0.047c5.469 0.281 10.609 2.578 14.484 6.469 3.891 3.875 6.188 9.016 6.469 14.484z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="mailto:#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 28 28"
+                >
+                  <title>
+                    email
+                  </title>
+                  <path
+                    d="M26 23.5v-12c-0.328 0.375-0.688 0.719-1.078 1.031-2.234 1.719-4.484 3.469-6.656 5.281-1.172 0.984-2.625 2.188-4.25 2.188h-0.031c-1.625 0-3.078-1.203-4.25-2.188-2.172-1.813-4.422-3.563-6.656-5.281-0.391-0.313-0.75-0.656-1.078-1.031v12c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM26 7.078c0-0.391 0.094-1.078-0.5-1.078h-23c-0.266 0-0.5 0.234-0.5 0.5 0 1.781 0.891 3.328 2.297 4.438 2.094 1.641 4.188 3.297 6.266 4.953 0.828 0.672 2.328 2.109 3.422 2.109h0.031c1.094 0 2.594-1.437 3.422-2.109 2.078-1.656 4.172-3.313 6.266-4.953 1.016-0.797 2.297-2.531 2.297-3.859zM28 6.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://github.com/#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 26 28"
+                >
+                  <title>
+                    github
+                  </title>
+                  <path
+                    d="M10 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM20 19c0 1.141-0.594 3-2 3s-2-1.859-2-3 0.594-3 2-3 2 1.859 2 3zM22.5 19c0-2.391-1.453-4.5-4-4.5-1.031 0-2.016 0.187-3.047 0.328-0.812 0.125-1.625 0.172-2.453 0.172s-1.641-0.047-2.453-0.172c-1.016-0.141-2.016-0.328-3.047-0.328-2.547 0-4 2.109-4 4.5 0 4.781 4.375 5.516 8.188 5.516h2.625c3.813 0 8.188-0.734 8.188-5.516zM26 16.25c0 1.734-0.172 3.578-0.953 5.172-2.063 4.172-7.734 4.578-11.797 4.578-4.125 0-10.141-0.359-12.281-4.578-0.797-1.578-0.969-3.437-0.969-5.172 0-2.281 0.625-4.438 2.125-6.188-0.281-0.859-0.422-1.766-0.422-2.656 0-1.172 0.266-2.344 0.797-3.406 2.469 0 4.047 1.078 5.922 2.547 1.578-0.375 3.203-0.547 4.828-0.547 1.469 0 2.953 0.156 4.375 0.5 1.859-1.453 3.437-2.5 5.875-2.5 0.531 1.062 0.797 2.234 0.797 3.406 0 0.891-0.141 1.781-0.422 2.625 1.5 1.766 2.125 3.938 2.125 6.219z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://www.twitter.com/#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 26 28"
+                >
+                  <title>
+                    twitter
+                  </title>
+                  <path
+                    d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://t.me/#"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <svg
+                  viewBox="0 0 28 28"
+                >
+                  <title>
+                    telegram
+                  </title>
+                  <path
+                    d="M27.563 0.172c0.328 0.234 0.484 0.609 0.422 1l-4 24c-0.047 0.297-0.234 0.547-0.5 0.703-0.141 0.078-0.313 0.125-0.484 0.125-0.125 0-0.25-0.031-0.375-0.078l-7.078-2.891-3.781 4.609c-0.187 0.234-0.469 0.359-0.766 0.359-0.109 0-0.234-0.016-0.344-0.063-0.391-0.141-0.656-0.516-0.656-0.938v-5.453l13.5-16.547-16.703 14.453-6.172-2.531c-0.359-0.141-0.594-0.469-0.625-0.859-0.016-0.375 0.172-0.734 0.5-0.922l26-15c0.156-0.094 0.328-0.141 0.5-0.141 0.203 0 0.406 0.063 0.562 0.172z"
+                  />
+                </svg>
+              </a>
+            </li>
+          </ul>
         </div>
-        <div
+        <div>
-          className="react-toggle-thumb"
+          All rights reserved.
-        />
+        </div>
-        <input
+        <nav
-          checked={false}
+          className="undefined hideInPrintView"
-          className="react-toggle-screenreader-only"
+        >
-          onBlur={[Function]}
+          <ul />
-          onChange={[Function]}
+        </nav>
-          onFocus={[Function]}
+        <span
-          type="checkbox"
+          className="hideInPrintView"
-        />
+        >
-      </div>
+          Switch color mode:
+          <br />
+          <div
+            className="react-toggle"
+            onClick={[Function]}
+            onTouchEnd={[Function]}
+            onTouchMove={[Function]}
+            onTouchStart={[Function]}
+          >
+            <div
+              className="react-toggle-track"
+            >
+              <div
+                className="react-toggle-track-check"
+              >
+                <div
+                  style={
+                    Object {
+                      "color": "#f1c40f",
+                      "fontSize": "1.1em",
+                      "position": "absolute",
+                      "top": "-4px",
+                    }
+                  }
+                >
+                  <svg
+                    aria-hidden="true"
+                    className="svg-inline--fa fa-moon "
+                    data-icon="moon"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
+                    style={Object {}}
+                    viewBox="0 0 384 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+                      fill="currentColor"
+                      style={Object {}}
+                    />
+                  </svg>
+                </div>
+              </div>
+              <div
+                className="react-toggle-track-x"
+              >
+                <div
+                  style={
+                    Object {
+                      "color": "#f39c12",
+                      "fontSize": "1em",
+                      "left": "-3px",
+                      "position": "absolute",
+                      "top": "-3px",
+                    }
+                  }
+                >
+                  <svg
+                    aria-hidden="true"
+                    className="svg-inline--fa fa-sun "
+                    data-icon="sun"
+                    data-prefix="fas"
+                    focusable="false"
+                    role="img"
+                    style={Object {}}
+                    viewBox="0 0 512 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
+                      fill="currentColor"
+                      style={Object {}}
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+            <div
+              className="react-toggle-thumb"
+            />
+            <input
+              checked={false}
+              className="react-toggle-screenreader-only"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              type="checkbox"
+            />
+          </div>
+        </span>
+      </span>
     </div>
   </div>
   <div>