check todo. A few changes

TODO.md

@@ -6,11 +6,13 @@
 - [x] og + twitter card
 - [x] Index, 5 posts
 - [x] Archive + About: Change title
-- [ ] Emphasize `<code>`
+- [x] Emphasize `<code>`
-- [ ] Favicon
+- [x] Favicon (Added)*
+- [ ] *Review the favicon imgs directory. Not sure if the images are in the right directory.
 - [ ] Index call2action that leads you to "posts"
-- [ ] Change paginators (no vertical separator |)
+- [x] Change paginators (no vertical separator |)
-- [ ] Fonts, use one font for the title and another one (more readable) for the post text
+- [x] Fonts, use one font for the title and another one (more readable) for the post text
+- [x] Remove background pre on about
 - [ ] Some images contains a `<p>`, get rid of it.
     - Images with p in the post content (as it is html now)
     - ![image.png](path/to/image.png) -> <p><img src=""></p>

src/resources/_gen/assets/css/css/main.css_abdeb689137b085b8cf50bb0fe96e360.content

@@ -281,6 +281,7 @@ template {
     Fonts
     ========================================================================== */
     --font-brand: 'Overpass Mono', monospace;
+    --font-ui: -apple-system, system-ui, sans-serif;
 
     /* Fonts weights */
     --fw-regular: 400;
@@ -307,7 +308,7 @@ template {
 
     /* Font sizes  https://www.modularscale.com/?16,14&px&1.5 */
     --font-size-1: 14px;
-    --font-size-2: 16px;
+    --font-size-2: 17px;
     --font-size-3: 24px;
     --font-size-4: 36px;
     --font-size-5: 54px;
@@ -315,8 +316,8 @@ template {
     /* Font sizes names */
     --font-title: var(--fw-bold) var(--font-size-4) / 1.25 var(--font-brand);
     --font-heading: var(--fw-bold) var(--font-size-3) / 1.25 var(--font-brand);
-    --font-body: var(--font-size-2) / 1.46 var(--font-brand);
+    --font-body: var(--font-size-2) / 1.6 var(--font-ui);
-    --font-caption: var(--font-size-1) / 1.37 var(--font-brand);
+    --font-caption: var(--font-size-1) / 1.5 var(--font-brand);
 
  /* ==========================================================================
     Spacing
@@ -356,8 +357,6 @@ template {
     box-sizing: border-box;
 }
 body {
-    font-family: var(--font-brand);
-    font: var(--font-body);
     text-rendering: auto;
     background-color: var(--background-main);
     color: var(--color-main);
@@ -373,6 +372,19 @@ h1, h2, h3, h4, h5, h6,
 b, strong {
     font-weight: var(--fw-bold);
 }
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-brand);
+}
+p, ul, ol, dl, dd {
+        font: var(--font-body);
+}
+li code,
+p code {
+    font: var(--font-caption);
+    padding: 4px;
+    color: rgb(0, 180, 0);
+    font-family: var(--font-brand);
+}
 i, em {
     font-style: italic;
 }
@@ -517,6 +529,7 @@ i, em {
         margin: 0;
         display: flex;
         gap: var(--spacing-2);
+        font-family: var(--font-brand);
     }
 .main-nav a.is-active {
         color: var(--color-main);
@@ -564,12 +577,6 @@ i, em {
             flex-shrink: 0;
         }
 .post .social span, .social span {
-        /* position:absolute;
-        left:-10000px;
-        top:auto;
-        width:1px;
-        height:1px;
-        overflow: hidden; */
         display: block;
         font: var(--font-caption);
         margin-top: var(--spacing-1);
@@ -627,6 +634,7 @@ i, em {
         /* margin-top: calc(var(--spacing-1) / 2); */
     }
 .post-item .post-item-summary {
+        font-family: var(--font-ui);
         font: var(--font-body);
         color: var(--color-main-medium);
     }
@@ -644,6 +652,7 @@ i, em {
         width: auto;
     }
 .post-detail pre {
+        font: var(--font-caption);
         overflow-x: scroll;
         /* border: 1px solid var(--color-main-medium); */
         /* box-shadow: 3px 3px 15px 5px rgba(0, 0, 0, 0.3); */
@@ -679,7 +688,7 @@ i, em {
         padding-bottom: var(--spacing-1);
     }
 .post h2 span {
-            font: var(--font-body);
+            font: var(--font-caption);
             color: var(--color-main-medium);
             vertical-align: middle;
         }
@@ -698,25 +707,57 @@ i, em {
             margin-bottom: var(--spacing-6);
 
         }
+.about .highlight {
+        margin-bottom: var(--spacing-8);
+    }
+.about .highlight pre {
+            background-color: transparent !important;
+        }
 .pagination {
     border-top: 1px solid var(--color-main-medium);
     border-bottom: 1px solid var(--color-main-medium);
     padding-block: var(--spacing-3);
+    font: var(--font-caption);
     display: flex;
     align-items: center;
-    flex-wrap: wrap;
+    justify-content: space-between;
+    flex-wrap: nowrap;
     gap: 0 var(--spacing-3);
+    color: var(--color-main-medium);
 }
-.pagination a {
+.pagination .center {
-        font: var(--font-heading);
+        display: flex;
+        align-items: center;
+        gap: 0 var(--spacing-3);
     }
-.pagination span {
+.pagination .left,
-        font: var(--font-body);
+    .pagination .right {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
+.pagination .left::before,
+        .pagination .left::after,
+        .pagination .right::before,
+        .pagination .right::after {
+            vertical-align: middle;
+            font-size: var(--font-size-3);
+        }
+.pagination .left::before {
+            content: "⇠ ";
+        }
+.pagination .right {
+        direction: rtl;
+        text-align: left;
+    }
+.pagination .right::before {
+            content: "⇢ ";
+        }
 .footer {
     padding: var(--spacing-6) var(--spacing-3);
     font: var(--font-caption);
     display: flex;
+    align-items: center;
     gap: var(--spacing-1);
     flex-wrap: wrap;
 }
@@ -725,6 +766,7 @@ i, em {
             opacity: .4;
         }
 .footer-contact {
+    font: var(--font-caption);
     list-style-type: none;
     padding: 0;
     margin: 0;

src/static/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

src/static/safari-pinned-tab.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="260.000000pt" height="260.000000pt" viewBox="0 0 260.000000 260.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,260.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M0 1300 l0 -1300 1300 0 1300 0 0 1300 0 1300 -1300 0 -1300 0 0
+-1300z m735 289 c63 -30 124 -90 156 -154 35 -71 34 -198 -1 -270 -31 -64 -92
+-124 -155 -156 -41 -20 -65 -24 -135 -24 -100 1 -160 24 -226 90 -167 168 -97
+457 130 531 61 20 170 12 231 -17z m735 -89 l150 100 0 -300 0 -300 -300 0
+-300 0 0 300 0 300 150 -100 150 -100 150 100z m555 -200 l300 -300 -303 0
+-302 0 0 300 c0 165 1 300 3 300 1 0 137 -135 302 -300z"/>
+</g>
+</svg>

src/static/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

src/themes/oscar/assets/css/common.css

@@ -5,8 +5,6 @@
 }
 
 body {
-    font-family: var(--font-brand);
-    font: var(--font-body);
     text-rendering: auto;
     background-color: var(--background-main);
     color: var(--color-main);
@@ -23,6 +21,21 @@ b, strong {
     font-weight: var(--fw-bold);
 }
 
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-brand);
+}
+p, ul, ol, dl, dd {
+        font: var(--font-body);
+}
+
+li code,
+p code {
+    font: var(--font-caption);
+    padding: 4px;
+    color: rgb(0, 180, 0);
+    font-family: var(--font-brand);
+}
+
 i, em {
     font-style: italic;
 }

src/themes/oscar/assets/css/main.css

@@ -11,6 +11,7 @@
 /* Modules */
 @import 'assets/css/modules/header.css';
 @import 'assets/css/modules/posts.css';
+@import 'assets/css/modules/about.css';
 @import 'assets/css/modules/pagination.css';
 @import 'assets/css/modules/footer.css';
 

src/themes/oscar/assets/css/modules/about.css

@@ -0,0 +1,8 @@
+.about {
+    .highlight {
+        margin-bottom: var(--spacing-8);
+        pre {
+            background-color: transparent !important;
+        }
+    }
+}

src/themes/oscar/assets/css/modules/footer.css

@@ -2,6 +2,7 @@
     padding: var(--spacing-6) var(--spacing-3);
     font: var(--font-caption);
     display: flex;
+    align-items: center;
     gap: var(--spacing-1);
     flex-wrap: wrap;
     span {
@@ -12,6 +13,7 @@
     }
 }
 .footer-contact {
+    font: var(--font-caption);
     list-style-type: none;
     padding: 0;
     margin: 0;

src/themes/oscar/assets/css/modules/header.css

@@ -32,6 +32,7 @@
         margin: 0;
         display: flex;
         gap: var(--spacing-2);
+        font-family: var(--font-brand);
     }
     a.is-active {
         color: var(--color-main);
@@ -82,12 +83,6 @@
         }
     }
     span {
-        /* position:absolute;
-        left:-10000px;
-        top:auto;
-        width:1px;
-        height:1px;
-        overflow: hidden; */
         display: block;
         font: var(--font-caption);
         margin-top: var(--spacing-1);

src/themes/oscar/assets/css/modules/pagination.css

@@ -2,14 +2,39 @@
     border-top: 1px solid var(--color-main-medium);
     border-bottom: 1px solid var(--color-main-medium);
     padding-block: var(--spacing-3);
+    font: var(--font-caption);
     display: flex;
     align-items: center;
-    flex-wrap: wrap;
+    justify-content: space-between;
+    flex-wrap: nowrap;
     gap: 0 var(--spacing-3);
-    a {
+    color: var(--color-main-medium);
-        font: var(--font-heading);
+    .center {
+        display: flex;
+        align-items: center;
+        gap: 0 var(--spacing-3);
     }
-    span {
+    .left,
-        font: var(--font-body);
+    .right {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        &::before,
+        &::after {
+            vertical-align: middle;
+            font-size: var(--font-size-3);
+        }
+    }
+    .left {
+        &::before {
+            content: "⇠ ";
+        }
+    }
+    .right {
+        direction: rtl;
+        text-align: left;
+        &::before {
+            content: "⇢ ";
+        }
     }
 }

src/themes/oscar/assets/css/modules/posts.css

@@ -32,6 +32,7 @@
         /* margin-top: calc(var(--spacing-1) / 2); */
     }
     .post-item-summary {
+        font-family: var(--font-ui);
         font: var(--font-body);
         color: var(--color-main-medium);
     }
@@ -52,6 +53,7 @@
         width: auto;
     }
     pre {
+        font: var(--font-caption);
         overflow-x: scroll;
         /* border: 1px solid var(--color-main-medium); */
         /* box-shadow: 3px 3px 15px 5px rgba(0, 0, 0, 0.3); */
@@ -89,7 +91,7 @@
         border-bottom: 1px solid var(--color-main-dark);
         padding-bottom: var(--spacing-1);
         span {
-            font: var(--font-body);
+            font: var(--font-caption);
             color: var(--color-main-medium);
             vertical-align: middle;
             &:first-child {

src/themes/oscar/assets/css/variables.css

@@ -3,6 +3,7 @@
     Fonts
     ========================================================================== */
     --font-brand: 'Overpass Mono', monospace;
+    --font-ui: -apple-system, system-ui, sans-serif;
 
     /* Fonts weights */
     --fw-regular: 400;
@@ -29,7 +30,7 @@
 
     /* Font sizes  https://www.modularscale.com/?16,14&px&1.5 */
     --font-size-1: 14px;
-    --font-size-2: 16px;
+    --font-size-2: 17px;
     --font-size-3: 24px;
     --font-size-4: 36px;
     --font-size-5: 54px;
@@ -37,8 +38,8 @@
     /* Font sizes names */
     --font-title: var(--fw-bold) var(--font-size-4) / 1.25 var(--font-brand);
     --font-heading: var(--fw-bold) var(--font-size-3) / 1.25 var(--font-brand);
-    --font-body: var(--font-size-2) / 1.46 var(--font-brand);
+    --font-body: var(--font-size-2) / 1.6 var(--font-ui);
-    --font-caption: var(--font-size-1) / 1.37 var(--font-brand);
+    --font-caption: var(--font-size-1) / 1.5 var(--font-brand);
 
  /* ==========================================================================
     Spacing

src/themes/oscar/layouts/partials/metas.html

@@ -19,7 +19,13 @@
 		{{ end -}}
 
 		<!-- Favicon -->
-		<link rel="icon" href="favicon.ico" />
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+        <link rel="manifest" href="/site.webmanifest">
+        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+        <meta name="msapplication-TileColor" content="#da532c">
+        <meta name="theme-color" content="#ffffff">
 
 		<!-- RSS -->
 		<link href="{{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />

src/themes/oscar/layouts/partials/pagination.html

@@ -1,7 +1,9 @@
-{{ if .Paginator.HasPrev }}
+<div class="center">
-    <a href="{{ .Paginator.Prev.URL }}" class="left arrow" rel="prev">⇠</a>
+    {{ if .Paginator.HasPrev }}
-{{ end }}
+        <a href="{{ .Paginator.Prev.URL }}" class="left arrow" rel="prev"></a>
-<span>{{ .Paginator.PageNumber }}</span>
+    {{ end }}
-{{ if .Paginator.HasNext }}
+    <span>{{ .Paginator.PageNumber }}</span>
-    <a href="{{ .Paginator.Next.URL }}" class="right arrow" rel="next">⇢</a>
+    {{ if .Paginator.HasNext }}
-{{ end }}
+        <a href="{{ .Paginator.Next.URL }}" class="right arrow" rel="next"></a>
+    {{ end }}
+</div>

src/themes/oscar/layouts/partials/posts/pagination.html

@@ -1,7 +1,7 @@
 
 		{{- if .NextInSection }}
-        <a href="{{ .NextInSection.RelPermalink }}" class="left arrow">⇠ <span>{{ .NextInSection.Title }}</span></a>
+        <a href="{{ .NextInSection.RelPermalink }}" class="left arrow"><span>{{ .NextInSection.Title }}</span></a>
 		{{- end }}
 		{{- if .PrevInSection }}
-        | <a href="{{ .PrevInSection.RelPermalink }}" class="right arrow"><span>{{ .PrevInSection.Title }}</span> ⇢</a>
+        <a href="{{ .PrevInSection.RelPermalink }}" class="right arrow"><span>{{ .PrevInSection.Title }}</span></a>
 		{{- end }}

src/themes/oscar/layouts/sections/about.html

@@ -2,7 +2,7 @@
 
 <main class="main wrapper">
 
-	<div class="post">
+	<div class="post about">
 
         {{ .Content }}