Pre-launch: Animation

This commit is contained in:
2025-12-12 09:40:30 +01:00
parent 82cee857eb
commit ccd024c12c
17 changed files with 237 additions and 77 deletions

View File

@@ -2,9 +2,9 @@
# customize your color and font from here.
[params.variables]
color_primary = "#4c9e81"
text_color = "#383838"
text_dark = "#444"
text_light = "#999"
text_color = "#484848"
text_dark = "#222"
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,

View File

@@ -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",

View File

@@ -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>

View File

@@ -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 }}

BIN
static/fonts/momo.woff2 Normal file

Binary file not shown.

BIN
static/fonts/nunito.woff2 Normal file

Binary file not shown.

5
static/robots.txt Normal file
View File

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

View File

@@ -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;
border-color: darken($color: $color-primary, $amount: 10) !important;
background: darken($color: $color-primary, $amount: 14) !important;
border-color: darken($color: $color-primary, $amount: 14) !important;
}
}
@@ -56,8 +56,8 @@
.btn-outline-primary {
background: transparent;
color: $color-primary;
border-color: $color-primary;
color: darken($color: $color-primary, $amount: 14);
border-color: darken($color: $color-primary, $amount: 14) !important;
&:active,
&:hover,

View File

@@ -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,

View File

@@ -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-secondary: '{{ replaceRE ":wght@[0-9;]+" "" .font_secondary }}', {{.font_secondary_type}};
$font-primary: "nunito-woff2", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;;
$font-secondary: "momo-woff2", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;;
$icon-font: '{{.font_icon}}';
{{ end }}

View File

@@ -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 }}

View File

@@ -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>

View File

@@ -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">

View File

@@ -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>

View File

@@ -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 }}

View File

@@ -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" . }}

View File

@@ -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="https://fonts.gstatic.com" crossorigin="anonymous" />
<!-- <link rel="preconnect" href="//ajax.googleapis.com" /> -->
<!-- <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.google-analytics.com" />
<link rel="dns-prefetch" href="https://fonts.gstatic.com" />
<!-- <link rel="preconnect" href="//www.googletagmanager.com" /> -->
<!-- <link rel="preconnect" href="//www.google-analytics.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.google-analytics.com" />
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link rel="dns-prefetch" href="//connect.facebook.net" />
<link rel="dns-prefetch" href="//platform.linkedin.com" />
<link rel="dns-prefetch" href="//platform.twitter.com" />
<!-- <link rel="dns-prefetch" href="//www.googletagmanager.com" /> -->
<!-- <link rel="dns-prefetch" href="//www.google-analytics.com" /> -->
<!-- <link rel="dns-prefetch" href="//fonts.googleapis.com" /> -->
<!-- <link rel="dns-prefetch" href="//connect.facebook.net" /> -->
<!-- <link rel="dns-prefetch" href="//platform.linkedin.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 }}