Pre-launch: Animation

hugo.toml

@@ -2,9 +2,9 @@
 # customize your color and font from here.
 [params.variables]
 color_primary = "#4c9e81"
-text_color = "#383838"
+text_color = "#484848"
-text_dark = "#444"
+text_dark = "#222"
-text_light = "#999"
+text_light = "#767676"
 body_color = "#fff"
 border_color = "#E2E2E2"
 black = "#000"
@@ -14,10 +14,7 @@ light = "#FBFBFB"
 # go to https://fonts.google.com/ to find the font you want to use. select your font and copy only the bold part from the URL. and paste it here.
 # example: "Work+Sans:wght@400;500;600"
 font_icon = "Font Awesome 6 Free" # https://fontawesome.com/v6/icons
-font_primary = "Nunito:wght@400;500;600;700;800"
+
-font_primary_type = "sans-serif" # [serif/sans-serif]
-font_secondary = "Momo Trust Display:wght@400;500;600;700;800"
-font_secondary_type = "sans-serif"
 
 # font variable
 # base font size for full website, 

hugo_stats.json

@@ -2,6 +2,7 @@
   "htmlElements": {
     "tags": [
       "a",
+      "base",
       "blockquote",
       "body",
       "br",
@@ -245,7 +246,6 @@
       "stretched-link",
       "text-center",
       "text-dark",
-      "text-end",
       "text-lg-end",
       "text-lg-start",
       "text-light",

layouts/index.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 
-<section class="section pb-0">
+<section class="section pb-0" role="banner">
   <div class="container">
     <div class="row justify-content-between align-items-center">
       <div class="col-lg-7 text-center text-lg-start pe-lg-5">
@@ -29,7 +29,7 @@
 </section>
 
 <!-- topics -->
-<section class="section pb-0">
+<section class="section pb-0" role="main">
   <div class="container">
     <h2 class="section-title">{{ i18n "topics" }}</h2>
     <div class="row">
@@ -38,9 +38,9 @@
         <div class="card h-100">
           <div class="card-body py-5">
               
-            <h4 class="card-title h4"><i class="{{ .Params.Icon }}"></i> {{ .Title }}</h4>
+            <h3 class="card-title h4"><i class="{{ .Params.Icon }}"></i> {{ .Title }}</h3>
             <p class="card-text">{{ .Params.Description | markdownify }}</p>
-            <a href="{{ .Permalink }}" class="stretched-link"></a>
+            <a href="{{ .Permalink }}" class="stretched-link" aria-label="{{ .Title }}"></a>
           </div>
         </div>
       </div>

layouts/partials/basic-seo-tools.html

@@ -0,0 +1,168 @@
+<!-- base url -->
+{{ if or (eq site.BaseURL "/") (eq site.BaseURL "http://localhost:1313/") }}
+{{ else }}
+  <base href="{{ .Permalink }}" />
+{{ end }}
+
+
+<!-- checking title -->
+{{ $title := site.Title }}
+<!-- checking page meta title -->
+{{ if .Params.meta_title }}
+  {{ $title = .Params.meta_title }}
+  <!-- checking page title -->
+{{ else if .Params.title }}
+  {{ $title = .Params.title }}
+{{ end }}
+
+
+<!-- checking description -->
+{{ $description := .Summary }}
+{{ if .Params.meta_description }}
+  {{ $description = .Params.meta_description }}
+  <!-- checking page description -->
+{{ else if .Params.description }}
+  {{ $description = .Params.description }}
+  <!-- checking page description -->
+{{ else if site.Params.metadata.description }}
+  {{ $description = site.Params.metadata.description }}
+{{ end }}
+
+
+<!-- checking og image -->
+{{ $imagePath := site.Params.metadata.image }}
+{{ if .Params.meta_image }}
+  {{ $imagePath = .Params.meta_image }}
+  <!-- checking multiple images -->
+{{ else if .Params.images }}
+  {{ range first 1 .Params.images }}
+    {{ $imagePath = . }}
+  {{ end }}
+  <!-- checking single images -->
+{{ else if .Params.image }}
+  {{ $imagePath = .Params.image }}
+{{ end }}
+
+<!-- title -->
+<title>{{ $title }}</title>
+
+<!-- meta noindex -->
+{{ if .Param "noindex" }}
+  <meta name="robots" content="noindex,nofollow" />
+{{ end }}
+
+
+<!-- meta canonical -->
+{{ with .Params.canonical }}
+  <link rel="canonical" href="{{ . }}" itemprop="url" />
+{{ end }}
+
+
+<!-- multilingual SEO optimizations -->
+{{ if .IsTranslated }}
+  {{ range .AllTranslations }}
+    <link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}" />
+  {{ end }}
+  <link rel="alternate" hreflang="x-default" href="{{ .Permalink }}" />
+{{ end }}
+
+
+<!-- meta keywords -->
+{{ if .Params.keywords }}
+  <meta name="keywords" content="{{ delimit .Params.keywords `, ` }}" />
+{{ else if site.Params.metadata.keywords }}
+  <meta
+    name="keywords"
+    content="{{ delimit site.Params.metadata.keywords `, ` }}" />
+{{ end }}
+
+
+<!-- meta description -->
+<meta name="description" content="{{ $description }}" />
+
+<!-- meta author -->
+{{ with site.Params.metadata.author }}
+  <meta name="author" content="{{ . }}" />
+{{ end }}
+
+
+<!-- ######### OpenGraph and Twitter image meta ############## -->
+
+<!-- check cdn/static image -->
+{{ if or (hasPrefix $imagePath "http") (fileExists (add `static/` (string $imagePath))) }}
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:image" content="{{ $imagePath | absURL }}" />
+  <meta property="og:image" content="{{ $imagePath | absURL }}" />
+{{ else }}
+  <!-- check cdn/static image -->
+
+  <!-- content and assets image path variable -->
+  {{ $contentImage:= .Resources.GetMatch (printf "*%s*" $imagePath) }}
+  {{ $assetImage:= fileExists (add `assets/` (string $imagePath)) }}
+
+
+  <!-- check image existence -->
+  {{ if or $contentImage $assetImage }}
+    <!-- content or assets folder detection -->
+    {{ if $contentImage }}
+      {{ .Scratch.Set "image-exists" $contentImage }}
+    {{ else if $assetImage }}
+      {{ .Scratch.Set "image-exists" (resources.Get $imagePath) }}
+    {{ end }}
+
+    {{ $image:= .Scratch.Get "image-exists" }}
+
+
+    <!-- image extension -->
+    {{ $imageExt:= path.Ext $image }}
+
+
+    <!-- If not SVG  -->
+    {{ if ne $imageExt `.svg` }}
+      {{ $imageWidth := $image.Width }}
+      {{ $imageHeight := $image.Height }}
+      {{ if (and (gt $imageWidth 144) (gt $imageHeight 144)) }}
+        <meta property="og:image" content="{{ $image.Permalink }}" />
+        <meta name="twitter:image" content="{{ $image.Permalink }}" />
+        <meta
+          name="twitter:card"
+          content="{{- if (and (gt $imageWidth 300) (gt $imageHeight 157) (not (eq $imageWidth $imageHeight))) -}}summary_large_image{{- else -}}summary{{- end -}}" />
+      {{ end }}
+      <!-- /if image gt 144px -->
+      <meta property="og:image:width" content="{{ $imageWidth }}" />
+      <meta property="og:image:height" content="{{ $imageHeight }}" />
+    {{ end }}
+
+
+    <!-- /if not svg -->
+    <meta
+      property="og:image:type"
+      content="image/{{- if eq $imageExt `.svg` -}}
+        svg+xml
+      {{- else -}}
+        {{- replaceRE `^jpg$` `jpeg` $imageExt -}}
+      {{- end -}}" />
+  {{ end }}
+
+
+  <!-- /if image exist -->
+{{ end }}
+<!-- /check cdn/static image -->
+<!-- ######### /OpenGraph and Twitter image meta ############## -->
+
+<!-- ######### OpenGraph others meta ############## -->
+<meta property="og:title" content="{{ $title }}" />
+<meta property="og:description" content="{{ $description }}" />
+<meta property="og:type" content="website" />
+<meta property="og:url" content="{{ .Permalink }}" />
+
+<!-- ########## twitter others meta ############### -->
+<meta name="twitter:title" content="{{ $title }}" />
+<meta name="twitter:description" content="{{ $description }}" />
+
+{{ with site.Params.metadata.twitter }}
+  <meta name="twitter:site" content="@{{ . }}" />
+{{ end }}
+{{ with site.Params.metadata.author }}
+  <meta name="twitter:creator" content="@{{ . }}" />
+{{ end }}

static/robots.txt

@@ -0,0 +1,5 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://mantelzorgwoning.info/nl/sitemap.xml
+Sitemap: https://mantelzorgwoning.info/en/sitemap.xml

themes/godocs-1/assets/scss/_buttons.scss

@@ -23,17 +23,17 @@
 }
 
 .btn-primary {
-  background: $color-primary;
+  background: darken($color: $color-primary, $amount: 10);
   color: $white;
-  border-color: $color-primary;
+  border-color: darken($color: $color-primary, $amount: 10) !important;
 
   &:active,
   &:hover,
   &:focus,
   &.focus,
   &.active {
-    background: darken($color: $color-primary, $amount: 10) !important;
+    background: darken($color: $color-primary, $amount: 14) !important;
-    border-color: darken($color: $color-primary, $amount: 10) !important;
+    border-color: darken($color: $color-primary, $amount: 14) !important;
   }
 }
 
@@ -56,8 +56,8 @@
 
 .btn-outline-primary {
   background: transparent;
-  color: $color-primary;
+  color: darken($color: $color-primary, $amount: 14);
-  border-color: $color-primary;
+  border-color: darken($color: $color-primary, $amount: 14) !important;
 
   &:active,
   &:hover,

themes/godocs-1/assets/scss/_typography.scss

@@ -1,6 +1,9 @@
+
+
 /*  typography */
 body {
-  font-family: $font-primary;
+  // font-family: $font-primary;
+  font-family: "nunito-woff2", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   -webkit-font-smoothing: antialiased;
   font-size: $font-size;
   line-height: 1.6;
@@ -22,7 +25,8 @@ h4,
 h5,
 h6 {
   color: $text-dark;
-  font-family: $font-secondary;
+  //font-family: $font-secondary;
+  font-family: "momo-woff2", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   line-height: 1.2;
 }
 
@@ -32,7 +36,7 @@ h6 {
 .content h4,
 .content h5,
 .content h6 {
-  font-weight: 600;
+  font-weight: 800;
 }
 
 h1,

themes/godocs-1/assets/scss/style.scss

@@ -1,3 +1,19 @@
+@font-face {
+  font-family: "momo-woff2";
+  src: url("/fonts/momo.woff2") format("woff2");
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "nunito-woff2";
+  src: url("/fonts/nunito.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
 {{ with site.Params.variables }}
 // Color variables
 $color-primary: {{.color_primary}};
@@ -12,8 +28,8 @@ $light: {{.light}};
 
 // Font Variables
 $font-size: {{.font_size}};
-$font-primary: '{{ replaceRE ":wght@[0-9;]+" "" .font_primary }}', {{.font_primary_type}};
+$font-primary: "nunito-woff2", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;;
-$font-secondary: '{{ replaceRE ":wght@[0-9;]+" "" .font_secondary }}', {{.font_secondary_type}};
+$font-secondary: "momo-woff2", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;;
 $icon-font: '{{.font_icon}}';
 {{ end }}
 

themes/godocs-1/layouts/_default/baseof.html

@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html lang="{{ with site.LanguageCode }}{{ . }}{{ else }}en-US{{ end }}">
 <head>
-	{{ partial "page-transition.html" . }}
 	{{- partial "head.html" . -}}
 	{{- partialCached "style.html" . -}}
 </head>
 
 <body>
+	{{ partial "page-transition.html" . }}
 	{{- partialCached "preloader.html" . -}}
 	{{- partial "header.html" . -}}
 	{{- block "main" . }}{{- end }}

themes/godocs-1/layouts/index.html

@@ -40,7 +40,7 @@
               
             <h4 class="card-title h4"><i class="{{ .Params.Icon }}"></i> {{ .Title }}</h4>
             <p class="card-text">{{ .Params.Description | markdownify }}</p>
-            <a href="{{ .Permalink }}" class="stretched-link"></a>
+            <a href="{{ .Permalink }}" class="stretched-link" aria-label="Link"></a>
           </div>
         </div>
       </div>

themes/godocs-1/layouts/partials/footer.html

@@ -1,4 +1,4 @@
-<footer>
+<footer role="contentinfo">
   <div class="container">
     <div class="row align-items-justify border-bottom py-5">
       <div class="col-lg-4">

themes/godocs-1/layouts/partials/head.html

@@ -1,11 +1,11 @@
 <meta charset="utf-8" />
-<title>{{ .Title | default site.Title }}</title>
+<!-- <title>{{ .Title | default site.Title }}</title> -->
 
 <!-- responsive meta -->
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
 
 <!-- theme meta -->
-<meta name="theme-name" content="godocs-hugo" />
+<meta name="theme-name" content="StartIT - Docs" />
 
 <!-- favicon -->
 {{ partialCached "favicon" . }}
@@ -27,22 +27,6 @@
 {{ partialCached "custom-script.html" . }}
 
 
-<!-- google analytics -->
-<!-- {{ template "_internal/google_analytics.html" . }} -->
-
-
-<!-- google tag manager -->
-<!-- {{ partialCached "gtm.html" . }} -->
-
-
-<!-- matomo analytics -->
-{{ partialCached "matomo-analytics.html" . }}
-
-
-<!--  Baidu analytics -->
-{{ partialCached "baidu-analytics.html" . }}
-
-
 <!-- Plausible Analytics -->
 <!-- {{ partialCached "plausible-analytics.html" . }} -->
 <script defer data-domain="mantelzorgwoning.info" src="https://stats.start-it.nl/js/script.file-downloads.outbound-links.js"></script>

themes/godocs-1/layouts/partials/header.html

@@ -2,7 +2,7 @@
 <header class="sticky-top navigation {{if .IsHome}}top-0{{end}}">
   <div class="container">
     <!-- navbar -->
-    <nav class="navbar px-0 navbar-expand-lg navbar-light bg-transparent">
+    <nav class="navbar px-0 navbar-expand-lg navbar-light bg-transparent" role="navigation">
       <a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}">
         {{ partial "logo" }}
       </a>
@@ -14,7 +14,7 @@
       </form>
       {{ end }}
       
-      <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navigation">
+      <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-label="Menu">
         <i class="fa-solid fa-bars"></i>
         <i class="fa-solid fa-xmark"></i>
       </button>
@@ -42,7 +42,7 @@
           <li class="nav-link">
             <!-- Language List -->
             {{ if .IsTranslated }}
-            <select class="nav-item" id="select-language" onchange="location = this.value;" label="Taalkeuze">
+            <select class="nav-item" id="select-language" onchange="location = this.value;" aria-label="Taalkeuze">
               {{ $siteLanguages := site.Languages}}
               {{ $pageLang := .Page.Lang}}
               {{ range .Page.AllTranslations }}

themes/godocs-1/layouts/partials/script.html

@@ -30,27 +30,9 @@
 {{ end }}
 <script crossorigin="anonymous" defer {{ if hugo.IsProduction }}integrity="{{ $scripts.Data.Integrity }}"{{end}} type="application/javascript">{{$scripts.Content | safeJS}}</script>
 
-<!-- font family -->
-{{ $pf:= site.Params.variables.font_primary }}
-{{ $sf:= site.Params.variables.font_secondary }}
-<script type="application/javascript">
-  WebFont.load({
-    google: {
-      api: 'https://fonts.googleapis.com/css2',
-      families: ['{{$pf | default `Lato:wght@400`}}{{if not $sf}}&display=swap{{end}}'{{with $sf}},'{{. | default `Lato:wght@400`}}&display=swap'{{end}}],
-      version: 2
-    },
-    active: () => {sessionStorage.fontsLoaded = true}
-  });
-</script>
-
 <!-- progressive web app -->
 {{ partialCached "pwa.html" . }}
 
 
 <!-- cookie consent -->
 {{ partialCached "cookie-consent.html" . }}
-
-
-<!-- google adsense -->
-{{ partialCached "adsense-script.html" . }}

themes/godocs-1/layouts/partials/style.html

@@ -1,21 +1,25 @@
 <!-- DNS preconnect -->
 <meta http-equiv="x-dns-prefetch-control" content="on" />
-<link rel="preconnect" href="//ajax.googleapis.com" />
+<!-- <link rel="preconnect" href="//ajax.googleapis.com" /> -->
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
+<!-- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" /> -->
 <link rel="preconnect" href="https://use.fontawesome.com" crossorigin />
 <link rel="preconnect" href="//cdnjs.cloudflare.com" />
-<link rel="preconnect" href="//www.googletagmanager.com" />
+<!-- <link rel="preconnect" href="//www.googletagmanager.com" /> -->
-<link rel="preconnect" href="//www.google-analytics.com" />
+<!-- <link rel="preconnect" href="//www.google-analytics.com" /> -->
-<link rel="dns-prefetch" href="https://fonts.gstatic.com" />
+<!-- <link rel="dns-prefetch" href="https://fonts.gstatic.com" /> -->
 <link rel="dns-prefetch" href="https://use.fontawesome.com" />
-<link rel="dns-prefetch" href="//ajax.googleapis.com" />
+<!-- <link rel="dns-prefetch" href="//ajax.googleapis.com" /> -->
 <link rel="dns-prefetch" href="//cdnjs.cloudflare.com" />
-<link rel="dns-prefetch" href="//www.googletagmanager.com" />
+<!-- <link rel="dns-prefetch" href="//www.googletagmanager.com" /> -->
-<link rel="dns-prefetch" href="//www.google-analytics.com" />
+<!-- <link rel="dns-prefetch" href="//www.google-analytics.com" /> -->
-<link rel="dns-prefetch" href="//fonts.googleapis.com" />
+<!-- <link rel="dns-prefetch" href="//fonts.googleapis.com" /> -->
-<link rel="dns-prefetch" href="//connect.facebook.net" />
+<!-- <link rel="dns-prefetch" href="//connect.facebook.net" /> -->
-<link rel="dns-prefetch" href="//platform.linkedin.com" />
+<!-- <link rel="dns-prefetch" href="//platform.linkedin.com" /> -->
-<link rel="dns-prefetch" href="//platform.twitter.com" />
+<!-- <link rel="dns-prefetch" href="//platform.twitter.com" /> -->
+
+<link rel="preload" href="/fonts/nunito.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="/fonts/momo.woff2" as="font" type="font/woff2" crossorigin>
+
 
 <!-- plugins + stylesheet -->
 {{ $styles := slice }}