diff --git a/themes/nluug/assets/scss/styles.scss b/themes/nluug/assets/scss/styles.scss index e202977..e264055 100644 --- a/themes/nluug/assets/scss/styles.scss +++ b/themes/nluug/assets/scss/styles.scss @@ -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; diff --git a/themes/nluug/assets/scss/styles_navigation_menu.scss b/themes/nluug/assets/scss/styles_navigation_menu.scss new file mode 100644 index 0000000..6068cc4 --- /dev/null +++ b/themes/nluug/assets/scss/styles_navigation_menu.scss @@ -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; + } +} diff --git a/themes/nluug/layouts/_default/baseof.html b/themes/nluug/layouts/_default/baseof.html index 750975d..ee3024a 100644 --- a/themes/nluug/layouts/_default/baseof.html +++ b/themes/nluug/layouts/_default/baseof.html @@ -6,7 +6,6 @@
- NLUUG-logo {{ partialCached "header.html" . }} {{ partial "breadcrumb.html" . }}
diff --git a/themes/nluug/layouts/partials/head.html b/themes/nluug/layouts/partials/head.html index d1c37bb..bbde381 100644 --- a/themes/nluug/layouts/partials/head.html +++ b/themes/nluug/layouts/partials/head.html @@ -13,72 +13,13 @@ {{ partialCached "style.html" . }} - {{ if .IsHome -}} - - {{ else if .IsPage }} - {{ $author := or (.Params.author) (.Site.Author.name) }} - {{ $org_name := .Site.Title }} - - {{ end }} ---> - + {{ partial "schemas/schema_WebSite.html" . }} + {{- else if .IsPage -}} + {{ if or (in .Params.content_types "Person") }} + {{ partial "schemas/schema_Person.html" . }} + {{ end }} + {{ end }} + diff --git a/themes/nluug/layouts/partials/header.html b/themes/nluug/layouts/partials/header.html index 19db675..db9612d 100644 --- a/themes/nluug/layouts/partials/header.html +++ b/themes/nluug/layouts/partials/header.html @@ -1,23 +1,30 @@ -
- - - +
+
+ + + + + + + +
diff --git a/themes/nluug/layouts/partials/schemas/schema_Person.html b/themes/nluug/layouts/partials/schemas/schema_Person.html new file mode 100644 index 0000000..e8d394c --- /dev/null +++ b/themes/nluug/layouts/partials/schemas/schema_Person.html @@ -0,0 +1,64 @@ +{{ if isset .Params "author" }} +{{ $author := index .Site.Data.team .Params.author }} +{{ $location := index .Site.Data.location .Site.Params.primarylocation }} + +{{ end }} diff --git a/themes/nluug/layouts/partials/schemas/schema_Social.html b/themes/nluug/layouts/partials/schemas/schema_Social.html new file mode 100644 index 0000000..aac2726 --- /dev/null +++ b/themes/nluug/layouts/partials/schemas/schema_Social.html @@ -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 }} diff --git a/themes/nluug/layouts/partials/schemas/schema_WebSite.html b/themes/nluug/layouts/partials/schemas/schema_WebSite.html new file mode 100644 index 0000000..7ec3b2d --- /dev/null +++ b/themes/nluug/layouts/partials/schemas/schema_WebSite.html @@ -0,0 +1,118 @@ +{{ $baseUrl := .Site.BaseURL }} +{{ $location := index .Site.Data.location .Site.Params.primarylocation }} + diff --git a/themes/nluug/layouts/partials/style.html b/themes/nluug/layouts/partials/style.html index 81b109d..82bd183 100644 --- a/themes/nluug/layouts/partials/style.html +++ b/themes/nluug/layouts/partials/style.html @@ -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 }} - +