Start template update to new flexbox grid system
This commit is contained in:
Patrick Neff
parent
4f500d431a
commit
99b9dcad5c
|
|
@ -1,6 +1,6 @@
|
|||
{{- $currentPage := . -}}
|
||||
<li class="padding">
|
||||
<div class="flex column">
|
||||
<li class="col-sm-12">
|
||||
<div>
|
||||
<div>
|
||||
{{- range $.Resources.ByType "image" -}}
|
||||
{{- if .Params.featured -}}
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
{{ define "main" }}
|
||||
<main id="list">
|
||||
{{- with .Content -}}
|
||||
<div class="content flex column">
|
||||
<div class="padding">
|
||||
<div class="content row">
|
||||
<div class="col-xs-12">
|
||||
{{ . }}
|
||||
</div>
|
||||
</div>
|
||||
{{- end -}}
|
||||
<ul class="list-unstyled flex column">
|
||||
<ul class="list-unstyled row">
|
||||
{{- range .Pages -}}
|
||||
{{- .Render "li" -}}
|
||||
{{- end -}}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
{{ define "content" }}
|
||||
<div id="index">
|
||||
<div class="container transparent">
|
||||
<div class="flex row">
|
||||
<div id="index-short-contact">
|
||||
<div class="row">
|
||||
<div class="col-offset-xs-8 col-xs-4" id="index-short-contact">
|
||||
<div class="phone">
|
||||
<i class="fa fa-phone"></i>: {{ (index .Site.Data.kontakt.kontakt 0).telephone }}
|
||||
</div>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<div class="container">
|
||||
<main>
|
||||
<article>
|
||||
<div class="lead padding" id="index-content">
|
||||
<div class="lead" id="index-content">
|
||||
<a id="{{ i18n "home" }}"></a>
|
||||
<h1 id="index-title">{{ .Title }}</h1>
|
||||
{{ . }}
|
||||
|
|
@ -34,9 +34,9 @@
|
|||
<div class="container">
|
||||
<section id="index-hero">
|
||||
<a class="anchor" id="{{ i18n "about-us" }}"><h1 class="padding">{{ (replace (replace (i18n "about-us") "-" " ") "ue" "ü") | title}}</h1></a>
|
||||
<div class="flex row">
|
||||
<div class="row">
|
||||
{{- range (first 3 (where .Site.Pages.ByWeight ".Params.type" "ueber-uns")) -}}
|
||||
<div>
|
||||
<div class="col-xs-4">
|
||||
{{- partial "hero.html" . -}}
|
||||
</div>
|
||||
{{- end -}}
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
<a class="btn btn-primary" href="mailto:{{ .Site.Author.email }}">{{ i18n "send-mail" }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex row">
|
||||
<div class="row">
|
||||
{{- $site := . }}
|
||||
{{- range .Site.Data.kontakt.kontakt -}}
|
||||
{{- partial "address.html" (dict "address" . "ctx" $site) -}}
|
||||
|
|
@ -69,9 +69,9 @@
|
|||
<a class="anchor" href="/galerie" id="{{ i18n "gallery" }}">{{ i18n "gallery" | title}}</a>
|
||||
<span class="small"></span>
|
||||
</h1>
|
||||
<ul class="flex row list-unstyled">
|
||||
<ul class="row list-unstyled">
|
||||
{{- range .Params.galleries }}
|
||||
<li class="padding">
|
||||
<li class="col-xs-4">
|
||||
{{- $section := $.Site.GetPage "section" "galerie" -}}
|
||||
{{- $page := $section.GetPage . -}}
|
||||
{{- $image := ((index $page.Pages 0).Resources.GetMatch "**.jpg") -}}
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
<div class="container">
|
||||
<section id="index-news">
|
||||
<h1 class="padding"><a class="anchor" href="/neuigkeiten" id="{{ i18n "news" }}">{{ i18n "news" | title}}</a></h1>
|
||||
<ul class="list-unstyled flex row">
|
||||
<ul class="list-unstyled row">
|
||||
{{- range (first 3 (where .Site.Pages.ByWeight ".Params.type" "news")) -}}
|
||||
{{- partial "news.html" . -}}
|
||||
{{- end -}}
|
||||
|
|
@ -111,4 +111,5 @@
|
|||
</div>
|
||||
{{- end -}}
|
||||
</div>
|
||||
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<section class="address padding">
|
||||
<section class="address col-xs-4">
|
||||
<header>
|
||||
<h3>{{ .address.address.addressLocality }}</h3>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
{{- if (ne .Kind "home") -}}
|
||||
<div class="container">
|
||||
<section id="index-contact">
|
||||
<div>
|
||||
<section class="row" id="index-contact">
|
||||
<div class="col-xs-12">
|
||||
<h2 class="padding"><a class="anchor" id="{{ i18n "contact" }}">Kontakt</a></h2>
|
||||
<div class="call-to-action flex row text-center">
|
||||
<div class="padding">
|
||||
<a class="btn btn-primary" href="mailto:{{ .Site.Author.email }}">{{ i18n "send-mail" }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex row">
|
||||
<div class="row">
|
||||
{{- $site := . }}
|
||||
{{- range .Site.Data.kontakt.kontakt -}}
|
||||
{{- partial "address.html" (dict "address" . "ctx" $site) -}}
|
||||
|
|
@ -19,15 +19,17 @@
|
|||
</div>
|
||||
{{- end }}
|
||||
<div class="container bottom">
|
||||
<div id="footer-social" class="padding">
|
||||
<div clss="row" id="footer-social" class="padding">
|
||||
<div class="col-xs-12">
|
||||
{{- partial "social.html" . -}}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="padding">
|
||||
{{- $currentPage := . -}}
|
||||
{{- range .Site.Menus.footer -}}
|
||||
<ul>
|
||||
{{- if .HasChildren -}}
|
||||
<li class="{{ if $currentPage.HasMenuCurrent .Menu . }}active{{ end }}">
|
||||
<li class="col-xs-4 {{ if $currentPage.HasMenuCurrent .Menu . }}active{{ end }}">
|
||||
<a href="{{ .URL }}">
|
||||
{{ .Pre }}
|
||||
<span>{{ .Name }}</span>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<li class="padding">
|
||||
<li class="col-xs-4">
|
||||
<div>
|
||||
{{- $site := . -}}
|
||||
{{- range .Resources.ByType "image" -}}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
</header>
|
||||
{{- $resources := .Resources -}}
|
||||
{{- with .Content -}}
|
||||
<div class="content flex column">
|
||||
<div class="padding">
|
||||
<div class="content row">
|
||||
<div class="col-sm-12">
|
||||
{{- range $.Resources.ByType "image" -}}
|
||||
{{- if .Params.featured -}}
|
||||
{{- $orig := . -}}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
margin: 1rem 0 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: $media-query) {
|
||||
@media only screen and (min-width: $sm-min) {
|
||||
#banner {
|
||||
top: 155px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,420 @@
|
|||
/* VARIABLES */
|
||||
|
||||
$gutter-width: 0.5rem !default;
|
||||
$outer-margin: 2rem !default;
|
||||
|
||||
$xs-min: 30rem !default;
|
||||
$sm-min: 48rem !default;
|
||||
$lg-min: 64rem !default;
|
||||
$xl-min: 75rem !default;
|
||||
|
||||
/* CALCULATED VARIABLES */
|
||||
|
||||
$breakpoints: 1 8.33333333%, 2 16.66666667%, 3 25%, 4 33.33333333%, 5 41.66666667%, 6 50%, 7 58.33333333%, 8 66.66666667%, 9 75%, 10 83.33333333%, 11 91.66666667%, 12 100%;
|
||||
|
||||
$half-gutter-width: $gutter-width * 0.5;
|
||||
$gutter-compensation: $half-gutter-width * -1;
|
||||
|
||||
/* GRID */
|
||||
|
||||
@mixin flex() {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@mixin col($size) {
|
||||
flex-basis: $size;
|
||||
max-width: $size;
|
||||
}
|
||||
|
||||
@mixin offset($size) {
|
||||
margin-left: $size;
|
||||
}
|
||||
|
||||
.container,
|
||||
.container-fluid {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
padding: 0 $outer-margin;
|
||||
}
|
||||
|
||||
.row {
|
||||
@include flex();
|
||||
flex-direction: row;
|
||||
margin: $gutter-compensation 0;
|
||||
|
||||
&.reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
@include flex();
|
||||
flex-direction: column;
|
||||
|
||||
&.reverse {
|
||||
flex-direction: row-column;
|
||||
}
|
||||
}
|
||||
|
||||
/* XS */
|
||||
|
||||
.col-xs,
|
||||
.col-xs-1,
|
||||
.col-xs-2,
|
||||
.col-xs-3,
|
||||
.col-xs-4,
|
||||
.col-xs-5,
|
||||
.col-xs-6,
|
||||
.col-xs-7,
|
||||
.col-xs-8,
|
||||
.col-xs-9,
|
||||
.col-xs-10,
|
||||
.col-xs-11,
|
||||
.col-xs-12,
|
||||
.col-offset-xs-1,
|
||||
.col-offset-xs-2,
|
||||
.col-offset-xs-3,
|
||||
.col-offset-xs-4,
|
||||
.col-offset-xs-5,
|
||||
.col-offset-xs-6,
|
||||
.col-offset-xs-7,
|
||||
.col-offset-xs-8,
|
||||
.col-offset-xs-9,
|
||||
.col-offset-xs-10,
|
||||
.col-offset-xs-11,
|
||||
.col-offset-xs-12 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding: 0 $half-gutter-width;
|
||||
}
|
||||
|
||||
.col-xs {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@each $i, $x in $breakpoints {
|
||||
.col-xs-#{$i} {
|
||||
@include col($x);
|
||||
}
|
||||
}
|
||||
|
||||
@each $i, $x in $breakpoints {
|
||||
.col-offset-xs-#{$i} {
|
||||
@include offset($x);
|
||||
}
|
||||
}
|
||||
|
||||
.start-xs {
|
||||
justify-content: flex-start;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.center-xs {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.end-xs {
|
||||
justify-content: flex-end;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.top-xs {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.middle-xs {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottom-xs {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.around-xs {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.between-xs {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* SM */
|
||||
|
||||
@media only screen and (min-width: $sm-min) {
|
||||
.container {
|
||||
width: $sm-min;
|
||||
}
|
||||
|
||||
.col-sm,
|
||||
.col-sm-1,
|
||||
.col-sm-2,
|
||||
.col-sm-3,
|
||||
.col-sm-4,
|
||||
.col-sm-5,
|
||||
.col-sm-6,
|
||||
.col-sm-7,
|
||||
.col-sm-8,
|
||||
.col-sm-9,
|
||||
.col-sm-10,
|
||||
.col-sm-11,
|
||||
.col-sm-12,
|
||||
.col-offset-sm-1,
|
||||
.col-offset-sm-2,
|
||||
.col-offset-sm-3,
|
||||
.col-offset-sm-4,
|
||||
.col-offset-sm-5,
|
||||
.col-offset-sm-6,
|
||||
.col-offset-sm-7,
|
||||
.col-offset-sm-8,
|
||||
.col-offset-sm-9,
|
||||
.col-offset-sm-10,
|
||||
.col-offset-sm-11,
|
||||
.col-offset-sm-12 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding: $half-gutter-width 0;
|
||||
}
|
||||
|
||||
.col-sm {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@each $i, $x in $breakpoints {
|
||||
.col-sm-#{$i} {
|
||||
@include col($x);
|
||||
}
|
||||
}
|
||||
|
||||
@each $i, $x in $breakpoints {
|
||||
.col-offset-sm-#{$i} {
|
||||
@include offset($x);
|
||||
}
|
||||
}
|
||||
|
||||
.start-sm {
|
||||
justify-content: flex-start;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.center-sm {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.end-sm {
|
||||
justify-content: flex-end;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.top-sm {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.middle-sm {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottom-sm {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.around-sm {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.between-sm {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
/* LG */
|
||||
|
||||
@media only screen and (min-width: $lg-min) {
|
||||
.container {
|
||||
width: $lg-min;
|
||||
}
|
||||
|
||||
.col-lg,
|
||||
.col-lg-1,
|
||||
.col-lg-2,
|
||||
.col-lg-3,
|
||||
.col-lg-4,
|
||||
.col-lg-5,
|
||||
.col-lg-6,
|
||||
.col-lg-7,
|
||||
.col-lg-8,
|
||||
.col-lg-9,
|
||||
.col-lg-10,
|
||||
.col-lg-11,
|
||||
.col-lg-12,
|
||||
.col-offset-lg-1,
|
||||
.col-offset-lg-2,
|
||||
.col-offset-lg-3,
|
||||
.col-offset-lg-4,
|
||||
.col-offset-lg-5,
|
||||
.col-offset-lg-6,
|
||||
.col-offset-lg-7,
|
||||
.col-offset-lg-8,
|
||||
.col-offset-lg-9,
|
||||
.col-offset-lg-10,
|
||||
.col-offset-lg-11,
|
||||
.col-offset-lg-12 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding: $half-gutter-width 0;
|
||||
}
|
||||
|
||||
.col-lg {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@each $i, $x in $breakpoints {
|
||||
.col-lg-#{$i} {
|
||||
@include col($x);
|
||||
}
|
||||
}
|
||||
|
||||
@each $i, $x in $breakpoints {
|
||||
.col-offset-lg-#{$i} {
|
||||
@include offset($x);
|
||||
}
|
||||
}
|
||||
|
||||
.start-lg {
|
||||
justify-content: flex-start;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.center-lg {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.end-lg {
|
||||
justify-content: flex-end;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.top-lg {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.middle-lg {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottom-lg {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.around-lg {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.between-lg {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
/* XL */
|
||||
|
||||
@media only screen and (min-width: $xl-min) {
|
||||
.container {
|
||||
width: $xl-min;
|
||||
}
|
||||
|
||||
.col-xl,
|
||||
.col-xl-1,
|
||||
.col-xl-2,
|
||||
.col-xl-3,
|
||||
.col-xl-4,
|
||||
.col-xl-5,
|
||||
.col-xl-6,
|
||||
.col-xl-7,
|
||||
.col-xl-8,
|
||||
.col-xl-9,
|
||||
.col-xl-10,
|
||||
.col-xl-11,
|
||||
.col-xl-12,
|
||||
.col-offset-xl-1,
|
||||
.col-offset-xl-2,
|
||||
.col-offset-xl-3,
|
||||
.col-offset-xl-4,
|
||||
.col-offset-xl-5,
|
||||
.col-offset-xl-6,
|
||||
.col-offset-xl-7,
|
||||
.col-offset-xl-8,
|
||||
.col-offset-xl-9,
|
||||
.col-offset-xl-10,
|
||||
.col-offset-xl-11,
|
||||
.col-offset-xl-12 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding: $half-gutter-width 0;
|
||||
}
|
||||
|
||||
.col-xl {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@each $i, $x in $breakpoints {
|
||||
.col-xl-#{$i} {
|
||||
@include col($x);
|
||||
}
|
||||
}
|
||||
|
||||
@each $i, $x in $breakpoints {
|
||||
.col-offset-xl-#{$i} {
|
||||
@include offset($x);
|
||||
}
|
||||
}
|
||||
|
||||
.start-xl {
|
||||
justify-content: flex-start;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.center-xl {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.end-xl {
|
||||
justify-content: flex-end;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.top-xl {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.middle-xl {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottom-xl {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.around-xl {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.between-xl {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
|
@ -16,7 +16,6 @@
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
min-width: $min-column-width;
|
||||
|
||||
.sub-menu {
|
||||
@include menu-list(column);
|
||||
|
|
@ -24,7 +23,6 @@
|
|||
padding: 0;
|
||||
|
||||
li {
|
||||
min-width: $min-column-width;
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ em {
|
|||
|
||||
|
||||
|
||||
@media only screen and (min-width: $media-query) {
|
||||
@media only screen and (min-width: $sm-min) {
|
||||
body {
|
||||
padding: 155px 0 0 0;
|
||||
}
|
||||
|
|
@ -181,40 +181,23 @@ table {
|
|||
}
|
||||
|
||||
.container {
|
||||
width: calc(100% - calc(6 * #{$gutter-width}));
|
||||
margin: 0 auto;
|
||||
padding: $gutter-width;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border-radius: $border-radius;
|
||||
margin-bottom: $gutter-width;
|
||||
|
||||
&.transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (min-width: $media-query) {
|
||||
/*
|
||||
.container {
|
||||
width: calc(#{$max-width} + calc(2 * #{$gutter-width}));
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.padding {
|
||||
padding: $gutter-width / 2;
|
||||
margin: $gutter-width / 2;
|
||||
width: calc(100% - calc(6 * #{$gutter-width}));
|
||||
margin: 0 auto;
|
||||
padding: $gutter-width;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
*/
|
||||
|
||||
.news-featured-image {
|
||||
img {
|
||||
|
|
@ -273,19 +256,12 @@ figure.small {
|
|||
.left {
|
||||
float: left;
|
||||
margin-right: $gutter-width;
|
||||
}
|
||||
|
||||
figure.left {
|
||||
margin-right: $gutter-width;
|
||||
max-width: $min-column-width;
|
||||
padding: 0.5rem 0;
|
||||
float: left
|
||||
}
|
||||
|
||||
figure.right {
|
||||
.right {
|
||||
float: right;
|
||||
margin-left: $gutter-width;
|
||||
max-width: $min-column-width;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
|
|
@ -361,10 +337,6 @@ figure {
|
|||
}
|
||||
}
|
||||
|
||||
.neg-margin {
|
||||
margin: 0 calc(0 - #{$gutter-width}) 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: .5rem 2rem;
|
||||
border: 1px solid black;
|
||||
|
|
@ -443,54 +415,6 @@ a.btn-primary {
|
|||
}
|
||||
}
|
||||
|
||||
.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(3 * #{$gutter-width}));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.model-viewer {
|
||||
width: $min-column-width * 2 ;
|
||||
height: $min-column-width * 2 / 1.333;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.model-viewer {
|
||||
width: $min-column-width-desktop * 2;
|
||||
height: $min-column-width-desktop * 2 / 1.333;
|
||||
}
|
||||
}
|
||||
|
||||
nav.breadcrumbs {
|
||||
ol {
|
||||
list-style: none;
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: $media-query) {
|
||||
@media only screen and (min-width: $sm-min) {
|
||||
.navbar-logo {
|
||||
img {
|
||||
transition: $transition-time * 1.5;
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: $media-query) {
|
||||
@media only screen and (min-width: $sm-min) {
|
||||
.navbar-logo {
|
||||
img {
|
||||
max-height: 100px;
|
||||
|
|
@ -73,15 +73,13 @@
|
|||
}
|
||||
|
||||
.navbar {
|
||||
@extend .flex;
|
||||
@extend .column;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
padding: 0 $gutter-width;
|
||||
flex: 1 0 0;
|
||||
min-width: 0;
|
||||
|
||||
@media only screen and (min-width: $media-query) {
|
||||
@media screen and (min-width: $sm-min) {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
|
|
@ -171,25 +169,18 @@
|
|||
.navbar-container {
|
||||
margin-top: auto;
|
||||
min-width: 0;
|
||||
|
||||
nav {
|
||||
@extend .flex;
|
||||
@extend .column;
|
||||
align-items: flex-end;
|
||||
height: 100%;
|
||||
|
||||
|
||||
@media only screen and (min-width: $media-query) {
|
||||
& {
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
nav {
|
||||
height: 100%;
|
||||
@media only screen and (min-width: $sm-min) {
|
||||
ul {
|
||||
@include menu-list(row);
|
||||
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
li {
|
||||
font-size: 1.1rem;
|
||||
|
|
@ -200,7 +191,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: $media-query) {
|
||||
@media only screen and (min-width: $sm-min) {
|
||||
input[type=checkbox] {
|
||||
display: none;
|
||||
|
||||
|
|
|
|||
|
|
@ -31,14 +31,11 @@
|
|||
overflow: hidden;
|
||||
min-width: 100%;
|
||||
|
||||
@media only screen and (min-width: $media-query) {
|
||||
@media only screen and (min-width: $sm-min) {
|
||||
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 {
|
||||
|
|
@ -54,10 +51,6 @@
|
|||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
& > * {
|
||||
flex: 1 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
#index-contact {
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
background-image: url(#{$background-image});
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
@media only screen and (max-width: $sm-min) {
|
||||
&.background-default {
|
||||
background-position-x: 37%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
}
|
||||
|
||||
.featured {
|
||||
max-width: $min-column-width;
|
||||
height: auto;
|
||||
display: inline-block;
|
||||
margin-bottom: 1rem;
|
||||
|
|
@ -37,28 +36,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
#single {
|
||||
.featured {
|
||||
max-width: $min-column-width-desktop;
|
||||
|
||||
&.wide {
|
||||
max-width: $min-column-width-desktop * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $media-query) {
|
||||
figure.left {
|
||||
max-width: $min-column-width-desktop;
|
||||
}
|
||||
|
||||
figure.right {
|
||||
max-width: $min-column-width-desktop;
|
||||
}
|
||||
}
|
||||
|
||||
.catalog {
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
$max-width: 900px;
|
||||
$gutter-width: 10px;
|
||||
$min-column-width: 200px;
|
||||
$min-column-width-desktop: $min-column-width + (6 * $gutter-width);
|
||||
$gutter-width: 1rem;
|
||||
|
||||
$base-font-size: 16px;
|
||||
$base-line-height: 1.4em;
|
||||
|
|
@ -19,6 +16,4 @@ $border-radius: 5px;
|
|||
$background-default: "grabmal";
|
||||
$background-bau: "bau";
|
||||
|
||||
$media-query: #{$max-width + 6 * $gutter-width};
|
||||
|
||||
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts/";
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
@import "~cookieconsent/src/styles/themes/classic.css";
|
||||
@import "_fonts.scss";
|
||||
@import "_mixins.scss";
|
||||
@import "_flexgrid.scss";
|
||||
@import "_grid.scss";
|
||||
@import "_header.scss";
|
||||
@import "_footer.scss";
|
||||
|
|
|
|||
Loading…
Reference in New Issue