Theme update

This commit is contained in:
Patrick Neff 2019-01-17 11:41:31 +01:00
parent 70f265c761
commit 994d43fba6
15 changed files with 233 additions and 183 deletions

View File

@ -1,39 +1,3 @@
#content { #content {
flex: 1 1 0; flex: 1 1 0;
.container {
margin-bottom: $gutter-width;
border-radius: $border-radius;
}
.flex {
justify-content: start;
& > * {
flex: 1 1 0;
min-width: $min-column-width;
}
h1, h2, h3, h4, h5, h6 {
min-width: 100%;
}
}
@media only screen and (min-width: $media-query) {
.flex {
& > * {
min-width: $min-column-width-desktop;
}
p {
max-width: 90%;
}
&.gallery {
li {
max-width: calc(#{$min-column-width-desktop} + calc(2 * #{$gutter-width}));
}
}
}
}
} }

View File

@ -1,40 +1,35 @@
#footer { #footer {
.container.bottom { nav {
border-radius: $border-radius $border-radius 0 0; display: flex;
margin-bottom: 0; flex-direction: row;
}
.container {
margin-bottom: $gutter-width;
border-radius: $border-radius;
}
#footer-menu {
@include menu-list(row);
align-items: flex-end; align-items: flex-end;
margin: 0;
padding: 0;
flex-wrap: wrap; flex-wrap: wrap;
li { ul {
flex: 1 0 0; @include menu-list(row);
width: 100%; flex: 1 1 0;
padding: $gutter-width 0 0 0; height: 100%;
margin: 0;
min-width: $min-column-width;
.sub-menu { li {
@include menu-list(column); flex: 1 0 0;
margin: 0; width: 100%;
padding: 0; padding: 0;
margin: 0;
min-width: $min-column-width;
li { .sub-menu {
min-width: $min-column-width; @include menu-list(column);
margin: 0;
padding: 0; padding: 0;
li {
min-width: $min-column-width;
padding: 0;
}
} }
} }
} }
} }
#footer-social { #footer-social {
ul { ul {
@include menu-list(row); @include menu-list(row);

View File

@ -260,6 +260,20 @@ figure.small {
} }
} }
figure.left {
float: left;
margin-right: $gutter-width;
max-width: $min-column-width;
padding: 0.5rem 0;
}
figure.right {
float: right;
margin-left: $gutter-width;
max-width: $min-column-width;
padding: 0.5rem 0;
}
img.original { img.original {
width: auto !important; width: auto !important;
max-width: 100% max-width: 100%
@ -327,3 +341,39 @@ a.btn-primary {
border:0; border:0;
} }
} }
.container {
margin-bottom: $gutter-width;
border-radius: $border-radius;
}
.flex {
justify-content: start;
& > * {
flex: 1 1 0;
min-width: $min-column-width;
}
h1, h2, h3, h4, h5, h6 {
min-width: 100%;
}
}
@media only screen and (min-width: $media-query) {
.flex {
& > * {
min-width: $min-column-width-desktop;
}
p {
max-width: 90%;
}
&.gallery {
li {
max-width: calc(#{$min-column-width-desktop} + calc(2 * #{$gutter-width}));
}
}
}
}

View File

@ -11,10 +11,11 @@
transition: $transition-time; transition: $transition-time;
.navbar-logo { .navbar-logo {
flex: 1 1 0; flex: 0 1 0;
min-width: 100px;
img { img {
max-height: 30px; max-height: 25px;
transition: $transition-time * 1.5; transition: $transition-time * 1.5;
width: auto; width: auto;
} }
@ -34,7 +35,8 @@
transition: $transition-time; transition: $transition-time;
.navbar-logo { .navbar-logo {
flex: 1 1 0; flex: 0 1 0;
min-width: 100px;
img { img {
max-height: 50px; max-height: 50px;
@ -67,6 +69,7 @@
.container { .container {
border-radius: 0 0 $border-radius $border-radius; border-radius: 0 0 $border-radius $border-radius;
margin-bottom: 0;
} }
.navbar { .navbar {
@ -74,8 +77,9 @@
@extend .column; @extend .column;
justify-content: space-between; justify-content: space-between;
align-items: stretch; align-items: stretch;
max-width: 40px;
padding: 0 $gutter-width; padding: 0 $gutter-width;
flex: 1 0 0;
min-width: 0;
@media only screen and (min-width: $media-query) { @media only screen and (min-width: $media-query) {
max-width: none; max-width: none;
@ -86,11 +90,16 @@
& + label { & + label {
display: block; display: block;
margin-left: auto;
margin-top: $gutter-width; margin-top: $gutter-width;
margin-right: calc(2 * #{$gutter-width}); max-width: 35px;
max-height: 35px;
min-width: 35px;
min-height: 35px;
div { .toggler {
position: relative; position: relative;
display: block;
cursor: pointer; cursor: pointer;
width: 35px; width: 35px;
height: 30px; height: 30px;
@ -157,21 +166,15 @@
} }
} }
.navbar {
flex: 1 1 0;
@extend .flex;
@extend .column;
justify-content: end;
align-items: end;
}
.navbar-container { .navbar-container {
margin-top: auto; margin-top: auto;
min-width: 0;
nav { nav {
@extend .flex; @extend .flex;
@extend .column; @extend .column;
align-items: flex-end; align-items: flex-end;
height: 100%;
@media only screen and (min-width: $media-query) { @media only screen and (min-width: $media-query) {
@ -182,7 +185,6 @@
ul { ul {
@include menu-list(row); @include menu-list(row);
@include trim-list-margin-horizontal;
align-items: flex-end; align-items: flex-end;
height: 100%; height: 100%;
@ -208,6 +210,14 @@
} }
} }
} }
ul:last-child {
li {
&:last-child {
margin-right: 0;
}
}
}
} }
} }
} }

View File

@ -1,73 +1,78 @@
#index-hero { #content {
.hero-container { #index-hero {
text-align: center; .hero-container {
text-align: center;
img.hero { img.hero {
margin: 0.5rem auto 0; margin: 0.5rem auto 0;
max-width: 150px; max-width: 150px;
height: auto; height: auto;
} }
header, header,
div.content { div.content {
text-align: left; text-align: left;
} }
}
}
#index-title {
display: none;
}
#index-short-contact {
font-size: 1.1rem;
align-items: top;
background-color: rgba(255, 255, 255, 0.9);
height: 90px;
border-radius: $border-radius;
padding: $gutter-width;
margin: calc(100vh - 310px) -$gutter-width 0 -$gutter-width;
overflow: none;
min-width: 100%;
@media only screen and (min-width: $media-query) {
margin-top: calc(100vh - 285px);
margin-bottom: -$gutter-width;
margin-left: 67%;
max-width: 33%;
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
li {
margin: 0.5rem $gutter-width;
font-size: 2rem;
} }
} }
& > * { #index-title {
flex: 1 0 0; display: none;
} }
}
#index-contact { #index-short-contact {
.padding { font-size: 1.1rem;
flex: 1 0 0; align-items: top;
background-color: rgba(255, 255, 255, 0.9);
height: 90px;
border-radius: $border-radius;
padding: $gutter-width;
margin: calc(100vh - 310px) -$gutter-width 0 -$gutter-width;
overflow: none;
min-width: 100%;
@media only screen and (min-width: $media-query) {
margin-top: calc(100vh - 285px);
margin-bottom: -$gutter-width;
margin-left: calc(#{$gutter-width} + calc(2 * calc(#{$max-width} / 3)));
margin-right: -$gutter-width;
padding-right: $gutter-width;
max-width: calc(#{$max-width} / 3);
min-width: calc(#{$max-width} / 3);
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
li {
margin: 0.5rem $gutter-width;
font-size: 2rem;
}
}
& > * {
flex: 1 0 0;
}
} }
}
#index-gallery { #index-contact {
figure { .padding {
text-align: center; flex: 1 0 0;
}
}
figcaption { #index-gallery {
text-align: left; figure {
text-align: center;
figcaption {
text-align: left;
}
} }
} }
} }

View File

@ -1,8 +1,4 @@
#single { #single {
ul.gallery{
margin: -#{$gutter-width};
}
.single-footer { .single-footer {
p { p {
margin: 0; margin: 0;
@ -35,20 +31,6 @@
} }
} }
figure.left {
float: left;
margin-right: $gutter-width;
max-width: $min-column-width;
padding: 0.5rem 0;
}
figure.right {
float: right;
margin-left: $gutter-width;
max-width: $min-column-width;
padding: 0.5rem 0;
}
@media screen and (min-width: $media-query) { @media screen and (min-width: $media-query) {
figure.left { figure.left {
max-width: $min-column-width-desktop; max-width: $min-column-width-desktop;

View File

@ -9,28 +9,28 @@
{{- block "head" . -}}{{- end -}} {{- block "head" . -}}{{- end -}}
<body> <body>
<div class="fixed-background background-{{ with .Params.background }}{{- . -}}{{- else -}}default{{- end -}}"></div> <div class="fixed-background background-{{ with .Params.background }}{{- . -}}{{- else -}}default{{- end -}}"></div>
<section id="header" class="large"> <div id="header" class="large">
<div class="container"> <div class="container">
{{- partial "header.html" . -}} {{- partial "header.html" . -}}
</div> </div>
</section> </div>
{{- if eq .Kind "home" -}} {{- if eq .Kind "home" -}}
{{- partial "banner.html" . -}} {{- partial "banner.html" . -}}
{{- end -}} {{- end -}}
<div id="page-wrapper"> <div id="page-wrapper">
<section id="content"> <div id="content">
{{- block "content" . -}} {{- block "content" . -}}
<div class="container"> <div class="container">
{{- block "main" . -}}{{- end -}} {{- block "main" . -}}{{- end -}}
</div> </div>
{{- end -}} {{- end -}}
</section> </div>
<section id="footer"> <div id="footer">
{{- partial "footer.html" . -}} {{- partial "footer.html" . -}}
</section> </div>
</div>
<div id="lightbox-section">
</div> </div>
<section id="lightbox-section">
</section>
{{- partial "lightbox.html" . -}} {{- partial "lightbox.html" . -}}
{{- partial "scripts.html" . -}} {{- partial "scripts.html" . -}}
{{- block "scripts" . -}}{{- end -}} {{- block "scripts" . -}}{{- end -}}

View File

@ -1,7 +1,7 @@
{{ define "content" }} {{ define "content" }}
<div id="index"> <div id="index">
<div class="container transparent"> <div class="container transparent">
<section class="flex row"> <div class="flex row">
<div id="index-short-contact"> <div id="index-short-contact">
<div class="phone"> <div class="phone">
<i class="fa fa-phone"></i>: {{ (index .Site.Data.kontakt.kontakt 0).telephone }} <i class="fa fa-phone"></i>: {{ (index .Site.Data.kontakt.kontakt 0).telephone }}
@ -14,7 +14,7 @@
{{ partial "social.html" . }} {{ partial "social.html" . }}
</div> </div>
</div> </div>
</section> </div>
</div> </div>
{{- with .Content -}} {{- with .Content -}}
@ -86,7 +86,7 @@
<div class="container"> <div class="container">
<section id="index-news"> <section id="index-news">
<h1 class="padding"><a class="anchor" id="{{ i18n "news" }}"></a>{{ i18n "news" | title}}</a></h1> <h1 class="padding"><a class="anchor" id="{{ i18n "news" }}">{{ i18n "news" | title}}</a></h1>
<ul class="list-unstyled flex row"> <ul class="list-unstyled flex row">
{{- range (first 3 (where .Site.Pages.ByWeight ".Params.type" "news")) -}} {{- range (first 3 (where .Site.Pages.ByWeight ".Params.type" "news")) -}}
{{- partial "news.html" . -}} {{- partial "news.html" . -}}

View File

@ -1,8 +1,8 @@
<div class="padding"> <section class="address padding">
<header>
<h3>{{ .address.address.addressLocality }}</h3>
</header>
<address class="address"> <address class="address">
<header>
<h3>{{ .address.address.addressLocality }}</h3>
</header>
{{ with .address.name }}<span>{{ . }}</span>{{ end }} {{ with .address.name }}<span>{{ . }}</span>{{ end }}
<div> <div>
{{ with .address.address.streetAddress }}<span>{{ . }}</span><br>{{ end }} {{ with .address.address.streetAddress }}<span>{{ . }}</span><br>{{ end }}
@ -45,4 +45,4 @@
{{ partial "schema/localbusiness.html" (dict "contact" .address "ctx" .ctx "short" false) }} {{ partial "schema/localbusiness.html" (dict "contact" .address "ctx" .ctx "short" false) }}
</address> </address>
<a href="https://maps.openrouteservice.org/directions?n1={{ .address.geo.lat }}&n2={{ .address.geo.lon }}&n3=13&a=null,null,{{ .address.geo.lat }},{{ .address.geo.lon }}&b=0&k1=de-DE&k2=km"><i class="fa fa-map"></i> Zum Routenplaner</a> <a href="https://maps.openrouteservice.org/directions?n1={{ .address.geo.lat }}&n2={{ .address.geo.lon }}&n3=13&a=null,null,{{ .address.geo.lat }},{{ .address.geo.lon }}&b=0&k1=de-DE&k2=km"><i class="fa fa-map"></i> Zum Routenplaner</a>
</div> </section>

View File

@ -19,12 +19,29 @@
</div> </div>
{{- end }} {{- end }}
<div class="container bottom"> <div class="container bottom">
<div class="flex column">
<div id="footer-social" class="padding"> <div id="footer-social" class="padding">
{{- partial "social.html" . -}} {{- partial "social.html" . -}}
</div> </div>
<ul id="footer-menu"> <nav class="padding">
{{ partial "menu.html" (dict "menu" .Site.Menus.footer "ctx" .) }} {{- $currentPage := . -}}
</ul> {{- range .Site.Menus.footer -}}
</div> <ul>
{{- if .HasChildren -}}
<li class="{{ if $currentPage.HasMenuCurrent .Menu . }}active{{ end }}">
<a href="{{ .URL }}">
{{ .Pre }}
<span>{{ .Name }}</span>
</a>
<ul class="sub-menu">
{{- range .Children -}}
{{ partial "menu-item.html" (dict "item" . "ctx" $currentPage)}}
{{- end -}}
</ul>
</li>
{{- else -}}
{{ partial "menu-item.html" (dict "item" . "ctx" $currentPage)}}
{{- end -}}
</ul>
{{- end -}}
</nav>
</div> </div>

View File

@ -4,16 +4,33 @@
<picture> <picture>
<source srcset="/img/logo.svg" <source srcset="/img/logo.svg"
media="(min-width: 960px)"> media="(min-width: 960px)">
<img src="/img/logo-klein.svg" /> <img src="/img/logo-klein.svg" alt="Logo der Firma Neff Stein-Design" />
</picture> </picture>
</a> </a>
</div> </div>
<div class="navbar small"> <div class="navbar small">
<input type="checkbox" class="hamburger" id="top-navigation-checkbox" name="top-navigation-checkbox"><label class="hamburger" for="top-navigation-checkbox"><div><span class="line"></span><span class="line"></span><span class="line"></span></div></label> <input type="checkbox" class="hamburger" id="top-navigation-checkbox" name="top-navigation-checkbox"><label class="hamburger" for="top-navigation-checkbox"><span class="toggler"><span class="line"></span><span class="line"></span><span class="line"></span></span></label>
<div class="navbar-container"> <div class="navbar-container">
<nav> <nav>
<ul class="menu-list"> <ul>
{{ partial "menu.html" (dict "menu" .Site.Menus.main "ctx" .) }} {{- $currentPage := . -}}
{{- range .Site.Menus.main -}}
{{- if .HasChildren -}}
<li class="{{ if $currentPage.HasMenuCurrent .Menu . }}active{{ end }}">
<a href="{{ .URL }}">
{{ .Pre }}
<span>{{ .Name }}</span>
</a>
<ul class="sub-menu">
{{- range .Children -}}
{{ partial "menu-item.html" (dict "item" . "ctx" $currentPage)}}
{{- end -}}
</ul>
</li>
{{- else -}}
{{ partial "menu-item.html" (dict "item" . "ctx" $currentPage)}}
{{- end -}}
{{- end -}}
</ul> </ul>
</nav> </nav>
</div> </div>

View File

@ -20,7 +20,7 @@
<img alt="{{ $alt }}" <img alt="{{ $alt }}"
title="{{ $title }}" title="{{ $title }}"
srcset="{{ $imageSm.RelPermalink }} 300w, {{ $imageMd.RelPermalink }} 500w" srcset="{{ $imageSm.RelPermalink }} 300w, {{ $imageMd.RelPermalink }} 500w"
sizes="(max-width: 500px) 300w, 500w" sizes="(max-width: 500px) 300px, 500px"
src="{{ $imageMd.RelPermalink }}" /> src="{{ $imageMd.RelPermalink }}" />
{{ end }} {{ end }}
{{- partial "schema/img.html" (dict "image" . "ctx" $ctx) -}} {{- partial "schema/img.html" (dict "image" . "ctx" $ctx) -}}

View File

@ -9,8 +9,16 @@
</div> </div>
<div class="lightbox-image"> <div class="lightbox-image">
<div class="image-container"> <div class="image-container">
<a class="lightbox-prev"><div class="lightbox-nav-prev"><div><i class="fa fa-chevron-left"></div></i></div></a> <a class="lightbox-prev">
<a class="lightbox-next"><div class="lightbox-nav-next"><div><i class="fa fa-chevron-right"></div></div></i></a> <div class="lightbox-nav-prev">
<div><i class="fa fa-chevron-left"></i></div>
</div>
</a>
<a class="lightbox-next">
<div class="lightbox-nav-next">
<div><i class="fa fa-chevron-right"></i></div>
</div>
</a>
<img src="#" alt="image"> <img src="#" alt="image">
</div> </div>
</div> </div>

View File

@ -1,5 +1,6 @@
{{- $currentPage := .ctx -}} {{- $currentPage := .ctx -}}
{{- range .menu -}} {{- range .menu -}}
<ul>
{{- if .HasChildren -}} {{- if .HasChildren -}}
<li class="{{ if $currentPage.HasMenuCurrent .Menu . }}active{{ end }}"> <li class="{{ if $currentPage.HasMenuCurrent .Menu . }}active{{ end }}">
<a href="{{ .URL }}"> <a href="{{ .URL }}">
@ -15,4 +16,5 @@
{{- else -}} {{- else -}}
{{ partial "menu-item.html" (dict "item" . "ctx" $currentPage)}} {{ partial "menu-item.html" (dict "item" . "ctx" $currentPage)}}
{{- end -}} {{- end -}}
</ul>
{{- end -}} {{- end -}}

View File

@ -3,4 +3,4 @@
</script> </script>
{{- $js := resources.Get "js/bundle.js" -}} {{- $js := resources.Get "js/bundle.js" -}}
{{- $js = $js | resources.Fingerprint -}} {{- $js = $js | resources.Fingerprint -}}
<script type="text/javascript" src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}"></script> <script src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}"></script>