7
0
Fork 0

Fix voor menu en eerste versie Schema.org

This commit is contained in:
Michael Boelen 2023-05-17 09:30:00 +02:00
parent 61b8a510b7
commit 75e0ce9ddf
9 changed files with 444 additions and 267 deletions

View file

@ -71,151 +71,6 @@ h1, h2, h3, h4, h5, strong, b {
//text-transform: uppercase;
}
.header{
background-color: $color-header;
box-shadow: 1px 1px 5px 0px grey;
position: sticky;
//top: 100px;
width: 100%;
line-height: 2;
}
/* Nav menu */
.nav{
width: 100%;
height: 100%;
position: fixed;
background-color: $color-header;
overflow: hidden;
max-height: 0;
transition: max-height .5s ease-out;
}
.menu a {
display: block;
padding: 10px;
color: $color-text-inverse;
}
.menu a:visited {
color: $color-text-inverse;
}
.menu a:hover{
background-color: $color-header;
color: gray;
text-decoration: none;
}
/* Menu Icon */
.hamb{
cursor: pointer;
float: right;
padding: 40px 20px;
}
.hamb-line {
background: white;
display: block;
height: 2px;
position: relative;
width: 24px;
}
.hamb-line::before,
.hamb-line::after{
background: white;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.hamb-line::before{
top: 5px;
}
.hamb-line::after{
top: -5px;
}
.side-menu {
display: none;
} /* Hide checkbox */
/* Toggle menu icon */
.side-menu:checked ~ nav{
max-height: 100%;
}
.side-menu:checked ~ .hamb .hamb-line {
background: transparent;
}
.side-menu:checked ~ .hamb .hamb-line::before {
transform: rotate(-45deg);
top:0;
}
.side-menu:checked ~ .hamb .hamb-line::after {
transform: rotate(45deg);
top:0;
}
/* Sub nav */
.subnav-content {
background-color: $color-header;
color: black;
width: 100%;
z-index: 1;
padding: 10px 0 ;
//display: none;
}
.subnav-content a {
color: $color-text-inverse;
text-decoration: none;
padding: 0;
margin: 10px 0;
text-align: center;
}
.subnav-content a:visited {
color: $color-text-inverse;
}
.subnav:hover .subnav-content {
display: block;
}
/* Responsiveness */
@media (min-width: 768px) {
/* Sub nav */
.subnav-content {
padding: 8px 0;
display: none;
background-color: $color-header;
color: $color-text-inverse;
}
.header ul {
float: right;
}
.nav{
max-height: none;
top: 0;
position: relative;
float: right;
//width: fit-content;
background-color: transparent;
}
.menu li{
float: left;
}
.menu a {
color: $color-text-inverse;
}
.menu a:hover {
background-color: transparent;
color: gray;
}
.hamb{
display: none;
}
}
// Highlight-box om bijvoorbeeld onze evenementen opvallend op homepage te laten zien
.highlight-box {
background-color: $color-highlight-box-background;
@ -334,40 +189,10 @@ ul, ol {
// text-align: justify;
}
header {
line-height: 2;
//flex-basis: 10rem;
//flex-grow: 1;
//position: relative;
display: flex;
justify-content: space-between;
padding-bottom: 1rem;
}
header a {
text-decoration: none;
}
header ul {
list-style-type: none;
padding: 0;
}
header li, header a {
//margin-bottom: .2rem;
//text-align: right;
//margin-right: 2rem;
display: inline;
}
h2.post {
padding-top: .5rem;
}
header ul a:first-child {
padding-left: 1rem;
}
.list li {
display: flex;
align-items: baseline;

View file

@ -0,0 +1,200 @@
header {
position: relative;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.header-content {
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 10px 20px;
color: #212529;
}
.logo {
text-decoration: none;
font-size: 25px;
color: inherit;
margin-right: 20px;
}
label {
padding: 23px 20px;
position: absolute;
cursor: pointer;
right: 0;
top: 0;
}
input[type="checkbox"] {
opacity: 0;
position: absolute;
right: 0;
}
label span {
width: 20px;
height: 3px;
display: block;
background: #4f3e3e;
position: relative;
}
label span::after, label span::before {
content: "";
position: absolute;
display: block;
background: inherit;
width: inherit;
height: inherit;
}
label span::before{
top: 8px;
}
label span::after {
bottom: 8px;
}
label::before {
position: absolute;
content: "";
width: 58px;
height: 49px;
top: 0;
right: 0;
}
input[type="checkbox"]:focus + label::before {
box-shadow: 0 0 20px black;
}
//ul.menu {
// background: #f2f2f2;
//}
ul.menu li {
list-style: none;
font-size: 18px;
}
ul.menu li button {
font-size: inherit;
border: none;
background-color: transparent;
cursor: pointer;
width: 100%;
}
ul.menu li a {
display: block;
color: inherit;
text-decoration: none;
}
ul.menu li a, ul li button {
padding: 0.7rem 1rem;
text-align: left;
}
.menus {
position: absolute;
top: 3.2rem;
left: 0;
right: 0;
/* hide dropdown on small screens */
visibility: hidden;
/* smooth transitioning */
transform: translateY(-1em);
transition: transform ease 0.2s;
}
/* toggle main dropdown */
input[type="checkbox"]:checked ~ nav > ul {
visibility: visible;
transform: translateY(0);
}
.dropdown {
padding: 2px 1.5rem;
height: 0;
overflow: hidden;
transition: height ease 0.2s;
}
li:focus-within .dropdown {
height: 135px;
}
.arrow {
width: 0.5em;
height: 0.5em;
display: inline-block;
vertical-align: middle;
border-left: 0.15em solid currentColor;
border-bottom: 0.15em solid currentColor;
transform: rotate(-45deg);
margin-left: 0.38em;
margin-top: -0.25em;
transition: transform 100ms ease-in-out;
}
li:focus-within > button > .arrow {
transform: rotate(-225deg);
margin-top: 4px;
}
/* MEDIA QUERIES */
@media (min-width: 640px) {
.header-content {
display: flex;
}
.menus {
position: static;
visibility: visible;
background: #fff;
display: flex;
transform: initial;
}
label, input[type="checkbox"] {
display: none;
}
ul.menu li {
position: relative;
font-size: 14px;
}
ul.menu li a:hover,
ul.menu li button:hover {
background-color: #f2f2f2;
}
.dropdown {
position: absolute;
right: 0;
left: auto;
box-shadow: 0 10px 15px -3px rgba(46, 41, 51, 0.08),
0 4px 6px -2px rgba(71, 63, 79, 0.16);
z-index: 99;
min-width: 10rem;
padding: 0;
background-color: #fff;
border-radius: 0 0 0.5rem 0.5rem;
}
ul.menu li:hover .dropdown {
height: 135px;
}
ul.menu li:hover > button > .arrow {
transform: rotate(-225deg);
margin-top: 4px;
}
}

View file

@ -6,7 +6,6 @@
<a class="skip-link" href="#main">Ga naar hoofd</a>
<main id="main">
<div class="content">
<a href="/"><img src="/afbeeldingen/logo/nluug-logo.png" alt="NLUUG-logo" title="{{ .Site.Title }}"></a>
{{ partialCached "header.html" . }}
{{ partial "breadcrumb.html" . }}
<section>

View file

@ -13,72 +13,13 @@
<link rel="alternate" type="application/json" title="{{ .Site.Title }}" href="{{ absURL "feed.json" }}" />
<link rel="shortcut icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=">
{{ partialCached "style.html" . }}
<!--
<!-- Schema.org opmaak -->
{{ if .IsHome -}}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": "{{ .Site.Title }}",
"url": "{{ .Site.BaseURL }}",
"description": "{{ .Site.Params.description }}",
"thumbnailUrl": "{{ .Site.Params.Logo | absURL }}",
"license": "{{ .Site.Params.Copyright }}"
}
</script>
{{ else if .IsPage }}
{{ $author := or (.Params.author) (.Site.Author.name) }}
{{ $org_name := .Site.Title }}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BlogPosting",
"articleSection": "{{ .Section }}",
"name": "{{ .Title | safeJS }}",
"headline": "{{ .Title | safeJS }}",
"alternativeHeadline": "{{ .Params.lead }}",
"description": "{{ if .Description }}{{ .Description | safeJS }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ end }}{{ end }}",
"inLanguage": {{ .Site.LanguageCode | default "en-us" }},
"isFamilyFriendly": "true",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "{{ .Permalink }}"
},
"author" : {
"@type": "Person",
"name": "{{ $author }}"
},
"creator" : {
"@type": "Person",
"name": "{{ $author }}"
},
"accountablePerson" : {
"@type": "Person",
"name": "{{ $author }}"
},
"copyrightHolder" : "{{ $org_name }}",
"copyrightYear" : "{{ .Date.Format "2006" }}",
"dateCreated": "{{ .Date.Format "2006-01-02T15:04:05.00Z" | safeHTML }}",
"datePublished": "{{ .PublishDate.Format "2006-01-02T15:04:05.00Z" | safeHTML }}",
"dateModified": "{{ .Lastmod.Format "2006-01-02T15:04:05.00Z" | safeHTML }}",
"publisher":{
"@type":"Organization",
"name": {{ $org_name }},
"url": {{ .Site.BaseURL }},
"logo": {
"@type": "ImageObject",
"url": "{{ .Site.Params.logo | absURL }}",
"width":"32",
"height":"32"
}
},
"image": {{ if .Params.images }}[{{ range $i, $e := .Params.images }}{{ if $i }}, {{ end }}{{ $e | absURL }}{{ end }}]{{ else}}{{.Site.Params.logo | absURL }}{{ end }},
"url" : "{{ .Permalink }}",
"wordCount" : "{{ .WordCount }}",
"genre" : [ {{ range $index, $tag := .Params.tags }}{{ if $index }}, {{ end }}"{{ $tag }}" {{ end }}],
"keywords" : [ {{ range $index, $tag := .Params.tags }}{{ if $index }}, {{ end }}"{{ $tag }}" {{ end }}]
}
</script>
{{ end }}
-->
</head>
{{ partial "schemas/schema_WebSite.html" . }}
{{- else if .IsPage -}}
{{ if or (in .Params.content_types "Person") }}
{{ partial "schemas/schema_Person.html" . }}
{{ end }}
{{ end }}
</head>

View file

@ -1,23 +1,30 @@
<header class="header">
<input class="side-menu" type="checkbox" id="side-menu">
<label class="hamb" for="side-menu"><span class="hamb-line"></span></label>
<nav class="nav">
<ul class="menu">
{{ $currentPage := . }}
{{ range .Site.Menus.main }}
{{ if .Children }}
<li class="subnav">
<a href="{{ .URL }}">{{ .Name }}</a>
<ul class="subnav-content">
{{ range .Children }}
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }}
</ul>
</li>
{{ else }}
<li class="{{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}"><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }}
{{ end }}
</ul>
</nav>
<header>
<div class="header-content">
<a href="/" class="logo"><img src="/afbeeldingen/logo/nluug-logo.png" alt="NLUUG-logo" title="{{ .Site.Title }}"></a>
<input type="checkbox" id="hamburger" aria-label="menu button">
<label for="hamburger"><span></span></label>
<nav aria-label="main navigation">
<ul class="menus menu">
{{ $currentPage := . }}
{{ range .Site.Menus.main }}
{{ if .Children }}
<li>
<button type="button" aria-haspopup="true" aria-expanded="true" aria-controls="dropdown1">{{ .Name }}<span class="arrow"></span></button>
<ul class="dropdown" id="dropdown1">
{{ range .Children }}
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }}
</ul>
</li>
{{ else }}
<li class="{{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}"><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }}
{{ end }}
</ul>
</nav>
</div>
</header>

View file

@ -0,0 +1,64 @@
{{ if isset .Params "author" }}
{{ $author := index .Site.Data.team .Params.author }}
{{ $location := index .Site.Data.location .Site.Params.primarylocation }}
<script type="application/ld+json">
{
"@context": "http://www.schema.org",
"@type": "Person",
"@id": "{{ .Permalink }}",
"name": "{{ $author.name }}",
"alternateName": "{{ $author.name }}",
{{ if $author.nationality }}"nationality": "{{ $author.nationality }}",{{ end }}
{{ if $author.address }}
"birthPlace" : {
"@type": "Place",
"address": {
"@type": "PostalAddress",
"addressLocality": "{{ $author.address.city }}",
"addressRegion": "{{ $author.address.region }}",
"addressCountry": "{{ $author.address.country }}"
}
},{{ end }}
"affiliation": [
{
"@type": "Organization",
"name": "{{ .Site.Params.name }}",
"sameAs": [ {{ partial "schemas/schema_Social.html" .Site.Params }}
]
}
],
{{ if $author.education }}
"alumniOf": [
{
"@type": "CollegeOrUniversity",
"name": "{{ $author.education.university }}",
"sameAs": "{{ $author.education.url }}"
}
],
{{ end }}
{{ if $author.gender }}"gender": "{{ $author.gender }}",{{ end }}
{{ if $author.jobfunction }}"Description": "{{ $author.jobfunction }}",{{ end }}
{{ if $author.description }}"disambiguatingDescription": "{{ $author.description }},{{ end }}
{{ if $author.jobtitle }}"jobTitle": "{{ $author.jobtitle }}",{{ end }}
"worksFor": [
{
"@type": "Organization",
"name": "{{ .Site.Params.name }}",
"sameAs": [ {{ partial "schemas/schema_Social.html" .Site.Params }}
]
}
],
"url": "{{ .Site.BaseURL }}",
"image": "{{ $author.thumbnail | absURL }}",
{{ if $author.address }}
"address": {
"@type": "PostalAddress",
"addressLocality": "{{ $author.address.city }}",
"addressRegion": "{{ $author.address.region }}",
"addressCountry": "{{ $author.address.country }}"
},{{ end }}
"sameAs": [ {{ partial "schemas/schema_Social.html" $author }}
]
}
</script>
{{ end }}

View file

@ -0,0 +1,22 @@
{{ if .social }}
{{ if .social.twitter }}"https://twitter.com/{{ .social.twitter }}",{{ end }}
{{ if .social.pinterest }}"https://pinterest.com/{{ .social.pinterest }}",{{ end }}
{{ if .social.instagram }}"https://instagram.com/{{ .social.instagram }}",{{ end }}
{{ if .social.facebook }}"https://www.facebook.com/{{ .social.facebook }}",{{ end }}
{{ if .social.linkedin }}"https://ca.linkedin.com/in/{{ .social.linkedin }}/en",{{ end }}
{{ if .social.googleplus }}"https://plus.google.com/+{{ .social.googleplus }}",{{ end }}
{{ if .social.youtube }}"https://www.youtube.com/user/{{ .social.youtube }}",{{ end }}
{{ if .social.github }}"https://github.com/{{ .social.github }}",{{ end }}
{{ if .social.wordpress }}"https://profiles.wordpress.org/{{ .social.wordpress }}",{{ end }}
{{ if .social.angel }}"https://angel.co/{{ .social.angel }}",{{ end }}
{{ if .social.foursquare }}"https://www.foursquare.com/user/{{ .social.foursquare }}",{{ end }}
{{ if .social.yelp }}"https://{{ .social.yelp }}.yelp.ca",{{ end }}
{{ if .social.codepen }}"https://codepen.io/{{ .social.codepen }}/",{{ end }}
{{ if .social.stackoverflow }}"https://stackoverflow.com/users/{{ .social.stackoverflow }}",{{ end }}
{{ if .social.dribbble }}"https://dribbble.com/{{ .social.dribbble }}",{{ end }}
{{ if .social.deviantart }}"http://{{ .social.deviantart }}.deviantart.com/",{{ end }}
{{ if .social.behance }}"https://www.behance.net/{{ .social.behance }}",{{ end }}
{{ if .social.flickr }}"https://www.flickr.com/people/{{ .social.flickr }}/",{{ end }}
{{ if .social.medium }}"https://medium.com/@{{ .social.medium }}",{{ end }}
{{ if .social.website }}"{{ .social.website }}"{{ else }}"{{ .Site.Params.social.website }}"{{ end }}
{{ end }}

View file

@ -0,0 +1,118 @@
{{ $baseUrl := .Site.BaseURL }}
{{ $location := index .Site.Data.location .Site.Params.primarylocation }}
<script type="application/ld+json">
[
{
"@context": "https://schema.org",
"@type": "Webpage",
"specialty": "{{ .Site.Params.description | default .Site.Params.textNoTitle }}",
"mainContentOfPage": {
"@context": "https://schema.org/",
"@type": "WebPageElement",
"cssSelector": ".body-contentTODO"
},
"primaryImageOfPage": "{{ .Site.Params.imageurl | absURL }}"
},
{
"@context": "https://schema.org",
"@type": "WebSite",
"@id": "{{ .Site.BaseURL }}",
"additionalType": ["CreativeWork", "Person"],
"url": "{{ .Site.BaseURL }}",
"name": "{{ .Site.Title | default .Site.Params.textNoTitle }}",
"alternateName": "{{ .Site.Title | default .Site.Params.textNoTitle }}",
"headline": "{{ .Site.Params.description | default .Site.Params.textNoTitle }}",
"image": "{{ .Site.Params.imageurl | absURL | default .Site.Params.textNoTitle }}",
"inLanguage": "{{ .Site.LanguageCode }}",
"author": "{{ .Site.Params.author | default .Site.Params.textNoTitle }}",
"description": "{{ .Site.Params.description }}",
"disambiguatingDescription": "{{ .Site.Params.description | default .Site.Params.textNoTitle }}",
"isFamilyFriendly": "True",
"sourceOrganization": "{{ .Site.Title | default .Site.Params.textNoTitle }}",
"publisher": {
"@type": "Organization",
"name": "{{ .Site.Title | default .Site.Params.textNoTitle }}",
"logo": {
"@type": "ImageObject",
"url": "{{ .Site.Params.logourl | absURL | default .Site.Params.textNoTitle }}",
"height": 60,
"width": 107
}
},
"mainEntity": {
"@context": "https://schema.org",
"@type": "localBusiness",
"name": "{{ .Site.Title }}",
"image":"{{ $location.thumbnail | absURL }}",
"priceRange":"{{ .Site.Params.pricerange }}",
"telephone":"{{ .Site.Params.phone }}",
"address": {
"@type": "PostalAddress",
"streetAddress": "{{ $location.address.street }}",
"addressLocality": "{{ $location.address.city }}",
"addressRegion": "{{ $location.address.region }}",
"addressCountry": "{{ $location.address.country }}",
"postalCode": "{{ $location.address.postalcode | default .Site.Params.textNoTitle }}"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.5",
"reviewCount": "50"
}
},
"potentialAction": {
"@type": "SearchAction",
"target": "{{ .Site.BaseURL }}?search={search_term}",
"query-input": "required name=search_term"
},
"keywords":[
{{ range $i, $e := .Site.Params.keywords }}{{ if $i }}, {{ end }}"{{ $e }}"{{ end }}
],
"hasPart": [
{
"@context": "http://schema.org/",
"@type": "WPHeader",
"@id": "#header",
"headline": "{{ .Site.Params.description }}",
"cssSelector": "#header",
"potentialAction": [{{ range $i, $e := .Site.Menus.actions }}{{ if $i }}, {{ end }}
{
"@type": "Action",
"name": "{{ $e.Title }}",
"target": "{{ $e.URL | absURL }}"
}
{{- end -}}
],
"@graph":
[{{ range $i, $e := .Site.Menus.main }}{{ if $i }}, {{ end }}
{
"@context": "https://schema.org",
"@type":"SiteNavigationElement",
"@id":"#header",
"name": "{{ $e.Title }}",
"url": "{{ $e.URL | absURL }}"
}
{{- end -}}
]
},
{
"@context": "http://schema.org/",
"@type": "WPSidebar",
"cssSelector": "#sidebar",
"citation": [
{{ range $i, $e := .Site.Menus.main }}{{ if $i }}, {{ end }}"{{ $e.URL | absURL }}"{{ end }}
]
},
{
"@context": "http://schema.org/",
"@type": "WPFooter",
"cssSelector": ".footer",
"@id": "#footer",
"copyrightHolder":"{{ .Site.Title }}",
"publisher": "{{ .Site.Title }}",
"copyrightYear":"{{ now.Format "2006"}}"
}
]
}
]
</script>

View file

@ -1,4 +1,5 @@
{{ $styles := resources.Get "scss/styles.scss" | toCSS (dict "outputStyle" "compressed") | minify }}
{{ $styles_breadcrumb := resources.Get "scss/styles_breadcrumb.scss" | toCSS (dict "outputStyle" "compressed") | minify }}
{{ $styles_navigation_menu := resources.Get "scss/styles_navigation_menu.scss" | toCSS (dict "outputStyle" "compressed") | minify }}
{{ $styles_extra := resources.Get "scss/_extra.scss" | toCSS (dict "outputStyle" "compressed") | minify }}
<style>{{ $styles.Content | safeCSS }} {{ $styles_breadcrumb.Content | safeCSS }} {{ $styles_extra.Content | safeCSS }}</style>
<style>{{ $styles.Content | safeCSS }} {{ $styles_breadcrumb.Content | safeCSS }}{{ $styles_navigation_menu.Content | safeCSS }} {{ $styles_extra.Content | safeCSS }}</style>