refactor head partials

thegeeklab · Jul 22, 2020 · edc1307 · edc1307
1 parent e182cbb
commit edc1307
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,4 @@
 - ENHANCEMENT
-  - allow setting some common meta elements e.g. description and authors
-  - prevent duplicate title on the start page
-  - add basic robots.txt
-- BUGFIX
-  - dont display duplicate title on home page
+  - split head partials into smaller parts to allow simple overwrites for e.g. custom favicons
+  - scale down page title on mobile media-query
+  - add missing title to branding image
diff --git a/gulpfile.js b/gulpfile.js
@@ -36,7 +36,7 @@ gulp.task('favicon-generate', function (done) {
         design: {
             ios: {
                 pictureAspect: 'backgroundAndMargin',
-                backgroundColor: '#ffffff',
+                backgroundColor: '#2f333e',
                 margin: '14%',
                 assets: {
                     ios6AndPriorIcons: false,
@@ -48,7 +48,7 @@ gulp.task('favicon-generate', function (done) {
             desktopBrowser: {},
             windows: {
                 pictureAspect: 'whiteSilhouette',
-                backgroundColor: '#2b5797',
+                backgroundColor: '#2f333e',
                 onConflict: 'override',
                 assets: {
                     windows80Ie10Tile: false,
@@ -61,8 +61,10 @@ gulp.task('favicon-generate', function (done) {
                 }
             },
             androidChrome: {
-                pictureAspect: 'shadow',
-                themeColor: '#ffffff',
+                pictureAspect: 'backgroundAndMargin',
+                margine: '14px',
+                backgroundColor: '#2f333e',
+                themeColor: '#2f333e',
                 manifest: {
                     display: 'standalone',
                     orientation: 'notSet',
@@ -75,9 +77,8 @@ gulp.task('favicon-generate', function (done) {
                 }
             },
             safariPinnedTab: {
-                pictureAspect: 'blackAndWhite',
-                threshold: 74.21875,
-                themeColor: '#5bbad5'
+                pictureAspect: 'silhouette',
+                themeColor: '#2f333e'
             }
         },
         settings: {

diff --git a/layouts/404.html b/layouts/404.html
@@ -2,7 +2,11 @@
 <html lang="{{ .Site.Language.Lang }}">
 
 <head>
-    {{ partial "head" . }}
+    {{ partial "head/meta" . }}
+    <title>{{ if not (eq .Kind "home") }}{{ partial "title" . }} | {{ end }}{{ .Site.Title }}</title>
+
+    {{ partial "head/favicons" . }}
+    {{ partial "head/others" . }}
 </head>
 
 <body>

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -2,7 +2,11 @@
 <html lang="{{ .Site.Language.Lang }}">
 
 <head>
-    {{ partial "head" . }}
+    {{ partial "head/meta" . }}
+    <title>{{ if not (eq .Kind "home") }}{{ partial "title" . }} | {{ end }}{{ .Site.Title }}</title>
+
+    {{ partial "head/favicons" . }}
+    {{ partial "head/others" . }}
 </head>
 
 <body>

diff --git a/layouts/partials/head/favicons.html b/layouts/partials/head/favicons.html
@@ -0,0 +1 @@
+<link rel="icon" href="{{ "favicon/favicon-32x32.png" | relURL }}" type="image/x-icon">
diff --git a/layouts/partials/head.html → layouts/partials/head/meta.html b/layouts/partials/head.html → layouts/partials/head/meta.html
@@ -20,16 +20,3 @@
     <meta name="author" content="{{ delimit . "," }}">
     {{ end }}
 {{ end }}
-<title>{{ if not (eq .Kind "home") }}{{ partial "title" . }} | {{ end }}{{ .Site.Title }}</title>
-
-<link rel="icon" href="{{ "favicon/favicon-32x32.png" | relURL }}" type="image/x-icon">
-<link rel="stylesheet" href="{{ "main.min.css" | relURL }}" media="screen">
-<link rel="stylesheet" href="{{ "custom.css" | relURL }}" media="screen">
-
-{{ with .OutputFormats.Get "atom" }}
-    {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
-{{ end }}
-
-{{ "<!--" | safeHTML }}
-    Made with Geekblog theme https://github.com/xoxys/hugo-geekblog
-{{- "-->" | safeHTML }}
diff --git a/layouts/partials/head/others.html b/layouts/partials/head/others.html
@@ -0,0 +1,10 @@
+<link rel="stylesheet" href="{{ "main.min.css" | relURL }}" media="screen">
+<link rel="stylesheet" href="{{ "custom.css" | relURL }}" media="screen">
+
+{{ with .OutputFormats.Get "atom" }}
+    {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
+{{ end }}
+
+{{ "<!--" | safeHTML }}
+    Made with Geekblog theme https://github.com/xoxys/hugo-geekblog
+{{- "-->" | safeHTML }}
diff --git a/layouts/partials/site-header.html b/layouts/partials/site-header.html
@@ -2,7 +2,7 @@
     <div class="container flex align-center justify-center">
         <a class="gblog-header__link" href="{{ .Site.BaseURL }}">
             <span class="gblog-brand flex align-center justify-center">
-                <img class="gblog-brand__img" src="{{ (default "brand.svg" .Site.Params.GeekblogLogo) | relURL }}" alt="{{ .Site.Title }}" width=60 height=60>
+                <img class="gblog-brand__img" title="Branding of {{ .Site.Title }}" src="{{ (default "brand.svg" .Site.Params.GeekblogLogo) | relURL }}" alt="{{ .Site.Title }}" width=60 height=60>
                 {{ .Site.Title }}
             </span>
             {{ with .Site.Params.GeekblogSubtitle }}

diff --git a/src/favicon/faviconData.json b/src/favicon/faviconData.json
@@ -1 +1 @@
-{"result":{"status":"success"},"favicon":{"package_url":"https://realfavicongenerator.net/files/932583a8226fc43ee3fda9a9340275d34ce6f5b5/favicon_package_v0.16.zip","files_urls":["https://realfavicongenerator.net/files/932583a8226fc43ee3fda9a9340275d34ce6f5b5/package_files/android-chrome-192x192.png","https://realfavicongenerator.net/files/932583a8226fc43ee3fda9a9340275d34ce6f5b5/package_files/android-chrome-512x512.png","https://realfavicongenerator.net/files/932583a8226fc43ee3fda9a9340275d34ce6f5b5/package_files/apple-touch-icon.png","https://realfavicongenerator.net/files/932583a8226fc43ee3fda9a9340275d34ce6f5b5/package_files/browserconfig.xml","https://realfavicongenerator.net/files/932583a8226fc43ee3fda9a9340275d34ce6f5b5/package_files/favicon-16x16.png","https://realfavicongenerator.net/files/932583a8226fc43ee3fda9a9340275d34ce6f5b5/package_files/favicon-32x32.png","https://realfavicongenerator.net/files/932583a8226fc43ee3fda9a9340275d34ce6f5b5/package_files/favicon.ico","https://realfavicongenerator.net/files/932583a8226fc43ee3fda9a9340275d34ce6f5b5/package_files/mstile-144x144.png","https://realfavicongenerator.net/files/932583a8226fc43ee3fda9a9340275d34ce6f5b5/package_files/mstile-150x150.png","https://realfavicongenerator.net/files/932583a8226fc43ee3fda9a9340275d34ce6f5b5/package_files/mstile-310x150.png","https://realfavicongenerator.net/files/932583a8226fc43ee3fda9a9340275d34ce6f5b5/package_files/mstile-310x310.png","https://realfavicongenerator.net/files/932583a8226fc43ee3fda9a9340275d34ce6f5b5/package_files/mstile-70x70.png","https://realfavicongenerator.net/files/932583a8226fc43ee3fda9a9340275d34ce6f5b5/package_files/safari-pinned-tab.svg","https://realfavicongenerator.net/files/932583a8226fc43ee3fda9a9340275d34ce6f5b5/package_files/site.webmanifest"],"html_code":"<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/apple-touch-icon.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/favicon-32x32.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/favicon-16x16.png\">\n<link rel=\"manifest\" href=\"/site.webmanifest\">\n<link rel=\"mask-icon\" href=\"/safari-pinned-tab.svg\" color=\"#5bbad5\">\n<meta name=\"msapplication-TileColor\" content=\"#2b5797\">\n<meta name=\"msapplication-TileImage\" content=\"/mstile-144x144.png\">\n<meta name=\"theme-color\" content=\"#ffffff\">","compression":"false","overlapping_markups":["link[rel=\"apple-touch-icon\"]","link[rel=\"shortcut\"]","link[rel=\"shortcut icon\"]","link[rel=\"icon\",sizes=\"16x16\"]","link[rel=\"icon\",sizes=\"32x32\"]","meta[name=\"msapplication-TileColor\"]","meta[name=\"msapplication-TileImage\"]","link[rel=\"manifest\"]","meta[name=\"theme-color\"]","link[rel=\"mask-icon\"]"]},"files_location":{"type":"path","path":"/"},"preview_picture_url":"https://realfavicongenerator.net/files/932583a8226fc43ee3fda9a9340275d34ce6f5b5/favicon_preview.png","version":"0.16"}
+{"result":{"status":"success"},"favicon":{"package_url":"https://realfavicongenerator.net/files/a4f0eaa3aee2ec1ff38aa6a49585781a75bbd7f9/favicon_package_v0.16.zip","files_urls":["https://realfavicongenerator.net/files/a4f0eaa3aee2ec1ff38aa6a49585781a75bbd7f9/package_files/android-chrome-192x192.png","https://realfavicongenerator.net/files/a4f0eaa3aee2ec1ff38aa6a49585781a75bbd7f9/package_files/android-chrome-512x512.png","https://realfavicongenerator.net/files/a4f0eaa3aee2ec1ff38aa6a49585781a75bbd7f9/package_files/apple-touch-icon.png","https://realfavicongenerator.net/files/a4f0eaa3aee2ec1ff38aa6a49585781a75bbd7f9/package_files/browserconfig.xml","https://realfavicongenerator.net/files/a4f0eaa3aee2ec1ff38aa6a49585781a75bbd7f9/package_files/favicon-16x16.png","https://realfavicongenerator.net/files/a4f0eaa3aee2ec1ff38aa6a49585781a75bbd7f9/package_files/favicon-32x32.png","https://realfavicongenerator.net/files/a4f0eaa3aee2ec1ff38aa6a49585781a75bbd7f9/package_files/favicon.ico","https://realfavicongenerator.net/files/a4f0eaa3aee2ec1ff38aa6a49585781a75bbd7f9/package_files/mstile-144x144.png","https://realfavicongenerator.net/files/a4f0eaa3aee2ec1ff38aa6a49585781a75bbd7f9/package_files/mstile-150x150.png","https://realfavicongenerator.net/files/a4f0eaa3aee2ec1ff38aa6a49585781a75bbd7f9/package_files/mstile-310x150.png","https://realfavicongenerator.net/files/a4f0eaa3aee2ec1ff38aa6a49585781a75bbd7f9/package_files/mstile-310x310.png","https://realfavicongenerator.net/files/a4f0eaa3aee2ec1ff38aa6a49585781a75bbd7f9/package_files/mstile-70x70.png","https://realfavicongenerator.net/files/a4f0eaa3aee2ec1ff38aa6a49585781a75bbd7f9/package_files/safari-pinned-tab.svg","https://realfavicongenerator.net/files/a4f0eaa3aee2ec1ff38aa6a49585781a75bbd7f9/package_files/site.webmanifest"],"html_code":"<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/apple-touch-icon.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/favicon-32x32.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/favicon-16x16.png\">\n<link rel=\"manifest\" href=\"/site.webmanifest\">\n<link rel=\"mask-icon\" href=\"/safari-pinned-tab.svg\" color=\"#2f333e\">\n<meta name=\"msapplication-TileColor\" content=\"#2f333e\">\n<meta name=\"msapplication-TileImage\" content=\"/mstile-144x144.png\">\n<meta name=\"theme-color\" content=\"#2f333e\">","compression":"false","overlapping_markups":["link[rel=\"apple-touch-icon\"]","link[rel=\"shortcut\"]","link[rel=\"shortcut icon\"]","link[rel=\"icon\",sizes=\"16x16\"]","link[rel=\"icon\",sizes=\"32x32\"]","meta[name=\"msapplication-TileColor\"]","meta[name=\"msapplication-TileImage\"]","link[rel=\"manifest\"]","meta[name=\"theme-color\"]","link[rel=\"mask-icon\"]"]},"files_location":{"type":"path","path":"/"},"preview_picture_url":"https://realfavicongenerator.net/files/a4f0eaa3aee2ec1ff38aa6a49585781a75bbd7f9/favicon_preview.png","version":"0.16"}
diff --git a/src/sass/_base.scss b/src/sass/_base.scss
@@ -373,6 +373,10 @@ img {
 }
 
 @media screen and (max-width: $sm-breakpoint) {
+  .gblog-brand {
+    font-size: $font-size-32 * 1.1;
+  }
+
   .gblog-nav {
     .container {
       padding: 0;