Reformat documents
This commit is contained in:
Patrick Neff
parent
81bcbbb92f
commit
a4f3ae2e52
|
|
@ -0,0 +1,7 @@
|
||||||
|
module.exports = {
|
||||||
|
trailingComma: "es5",
|
||||||
|
tabWidth: 2,
|
||||||
|
useTabs: false,
|
||||||
|
semi: false,
|
||||||
|
singleQuote: true
|
||||||
|
};
|
||||||
|
|
@ -1,167 +1,171 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="{{ .Site.LanguageCode }}">
|
<html lang="{{ .Site.LanguageCode }}">
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
<title>{{- block "title" . -}}{{- .Site.Title -}}{{- end -}}</title>
|
<title>{{- block "title" . -}}{{- .Site.Title -}}{{- end -}}</title>
|
||||||
{{ .Hugo.Generator }}
|
{{ .Hugo.Generator }}
|
||||||
{{- partial "schema/site.html" . -}}
|
{{- partial "schema/site.html" . -}}
|
||||||
{{- if (and (eq .Kind "page") (eq .Type "news")) -}}
|
{{- if (and (eq .Kind "page") (eq .Type "news")) -}}
|
||||||
{{- partial "schema/post.html" . -}}
|
{{- partial "schema/post.html" . -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- if (and (eq .Kind "page") (ne .Type "news")) -}}
|
{{- if (and (eq .Kind "page") (ne .Type "news")) -}}
|
||||||
{{- partial "schema/article.html" . -}}
|
{{- partial "schema/article.html" . -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- if (eq .Kind "section") -}}
|
{{- if (eq .Kind "section") -}}
|
||||||
{{- partial "schema/collectionpage.html" . -}}
|
{{- partial "schema/collectionPage.html" . -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{ partial "part/style.html" (dict "ctx" . "path" "css/style.css" )}}
|
{{ partial "part/style.html" (dict "ctx" . "path" "css/style.css" )}}
|
||||||
<link rel="shortcut icon" href="/img/favicon.ico">
|
<link rel="shortcut icon" href="/img/favicon.ico">
|
||||||
<link rel="icon" type="image/svg+xml" href="/img/favicon.svg">
|
<link rel="icon" type="image/svg+xml" href="/img/favicon.svg">
|
||||||
<link rel="icon" type="image/png" href="/img/favicon.png" sizes="32x32">
|
<link rel="icon" type="image/png" href="/img/favicon.png" sizes="32x32">
|
||||||
<link rel="icon" type="image/png" href="/img/favicon-large.png" sizes="96x96">
|
<link rel="icon" type="image/png" href="/img/favicon-large.png" sizes="96x96">
|
||||||
<link rel="apple-touch-icon" type="image/png" href="/img/apple-touch-icon.png" sizes="180x180">
|
<link rel="apple-touch-icon" type="image/png" href="/img/apple-touch-icon.png" sizes="180x180">
|
||||||
<meta name="msapplication-TileBackground" content="#000000">
|
<meta name="msapplication-TileBackground" content="#000000">
|
||||||
<meta name="msapplication-TileImage" content="/img/ms-tile.png">
|
<meta name="msapplication-TileImage" content="/img/ms-tile.png">
|
||||||
{{- block "head" . -}}{{- end -}}
|
{{- block "head" . -}}{{- end -}}
|
||||||
<body>
|
|
||||||
<div class="fixed-background background-{{ with .Params.background }}{{- . -}}{{- else -}}default{{- end -}}"></div>
|
<body>
|
||||||
<div id="header" class="large">
|
<div class="fixed-background background-{{ with .Params.background }}{{- . -}}{{- else -}}default{{- end -}}"></div>
|
||||||
<div class="container">
|
<div id="header" class="large">
|
||||||
<div class="flex row">
|
<div class="container">
|
||||||
<div class="col-xs-12">
|
<div class="flex row">
|
||||||
<div class="navbar-logo padding">
|
<div class="col-xs-12">
|
||||||
<a href="{{.Site.BaseURL }}">
|
<div class="navbar-logo padding">
|
||||||
<picture>
|
<a href="{{.Site.BaseURL }}">
|
||||||
<source srcset="/img/logo.svg"
|
<picture>
|
||||||
media="(min-width: 48rem)">
|
<source srcset="/img/logo.svg" media="(min-width: 48rem)">
|
||||||
<img src="/img/logo-klein.svg" alt="Logo der Firma Neff Stein-Design" />
|
<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"><span class="toggler"><span class="line"></span><span class="line"></span><span class="line"></span></span></label>
|
<input type="checkbox" class="hamburger" id="top-navigation-checkbox"
|
||||||
<div class="navbar-container">
|
name="top-navigation-checkbox"><label class="hamburger" for="top-navigation-checkbox"><span
|
||||||
<nav>
|
class="toggler"><span class="line"></span><span class="line"></span><span
|
||||||
<ul>
|
class="line"></span></span></label>
|
||||||
{{- $currentPage := . -}}
|
<div class="navbar-container">
|
||||||
{{- range .Site.Menus.main -}}
|
<nav>
|
||||||
{{- if .HasChildren -}}
|
<ul>
|
||||||
<li class="{{ if $currentPage.HasMenuCurrent .Menu . }}active{{ end }}">
|
{{- $currentPage := . -}}
|
||||||
<a href="{{ .URL }}">
|
{{- range .Site.Menus.main -}}
|
||||||
{{ .Pre }}
|
{{- if .HasChildren -}}
|
||||||
<span>{{ .Name }}</span>
|
<li class="{{ if $currentPage.HasMenuCurrent .Menu . }}active{{ end }}">
|
||||||
</a>
|
<a href="{{ .URL }}">
|
||||||
<ul class="sub-menu">
|
{{ .Pre }}
|
||||||
{{- range .Children -}}
|
<span>{{ .Name }}</span>
|
||||||
{{ partial "menu-item.html" (dict "item" . "ctx" $currentPage)}}
|
</a>
|
||||||
{{- end -}}
|
<ul class="sub-menu">
|
||||||
</ul>
|
{{- range .Children -}}
|
||||||
</li>
|
{{ partial "menu-item.html" (dict "item" . "ctx" $currentPage)}}
|
||||||
{{- else -}}
|
{{- end -}}
|
||||||
{{ partial "menu-item.html" (dict "item" . "ctx" $currentPage)}}
|
</ul>
|
||||||
{{- end -}}
|
</li>
|
||||||
{{- end -}}
|
{{- else -}}
|
||||||
</ul>
|
{{ partial "menu-item.html" (dict "item" . "ctx" $currentPage)}}
|
||||||
</nav>
|
{{- end -}}
|
||||||
</div>
|
{{- end -}}
|
||||||
</div>
|
</ul>
|
||||||
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{- if eq .Kind "home" -}}
|
</div>
|
||||||
{{- $section := $.Site.GetPage "section" "aktionen" -}}
|
</div>
|
||||||
{{ $page := "" }}
|
{{- if eq .Kind "home" -}}
|
||||||
{{- with $section.Pages }}
|
{{- $section := $.Site.GetPage "section" "aktionen" -}}
|
||||||
{{- $page = index . 0 -}}
|
{{ $page := "" }}
|
||||||
{{ end }}
|
{{- with $section.Pages }}
|
||||||
{{- with $page -}}
|
{{- $page = index . 0 -}}
|
||||||
<section id="banner">
|
{{ end }}
|
||||||
<div class="container">
|
{{- with $page -}}
|
||||||
<div id="banner-container" class="col-xs-12">
|
<section id="banner">
|
||||||
<h1>{{ .Title }}</h1>
|
<div class="container">
|
||||||
<p>{{ .Params.description }}</p>
|
<div id="banner-container" class="col-xs-12">
|
||||||
<p><a href="{{ .Permalink }}" class="btn btn-primary">{{ i18n "more-info" }}</a></p>
|
<h1>{{ .Title }}</h1>
|
||||||
</div>
|
<p>{{ .Params.description }}</p>
|
||||||
</div>
|
<p><a href="{{ .Permalink }}" class="btn btn-primary">{{ i18n "more-info" }}</a></p>
|
||||||
</section>
|
</div>
|
||||||
{{- end }}
|
</div>
|
||||||
|
</section>
|
||||||
|
{{- end }}
|
||||||
|
{{- end -}}
|
||||||
|
<div id="page-wrapper">
|
||||||
|
{{- if .Params.show_breadcrumbs -}}
|
||||||
|
<div class="container">
|
||||||
|
{{- partial "breadcrumbs.html" . }}
|
||||||
|
</div>
|
||||||
|
{{- end -}}
|
||||||
|
<div id="content">
|
||||||
|
{{- block "content" . -}}
|
||||||
|
<div class="container">
|
||||||
|
{{- block "main" . -}}{{- end -}}
|
||||||
|
</div>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
<div id="page-wrapper">
|
</div>
|
||||||
{{- if .Params.show_breadcrumbs -}}
|
<div id="footer">
|
||||||
<div class="container">
|
{{- if (ne .Kind "home") -}}
|
||||||
{{- partial "breadcrumbs.html" . }}
|
<div class="container">
|
||||||
</div>
|
<section class="row" id="index-contact">
|
||||||
{{- end -}}
|
<div class="col-xs-12">
|
||||||
<div id="content">
|
<h2 class="padding"><a class="anchor" id="{{ i18n "contact" }}">Kontakt</a></h2>
|
||||||
{{- block "content" . -}}
|
<div class="call-to-action flex row text-center">
|
||||||
<div class="container">
|
<div class="padding">
|
||||||
{{- block "main" . -}}{{- end -}}
|
<a class="btn btn-primary" href="mailto:{{ .Site.Author.email }}">{{ i18n "send-mail" }}</a>
|
||||||
</div>
|
|
||||||
{{- end -}}
|
|
||||||
</div>
|
|
||||||
<div id="footer">
|
|
||||||
{{- if (ne .Kind "home") -}}
|
|
||||||
<div class="container">
|
|
||||||
<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="row">
|
|
||||||
{{- $site := . }}
|
|
||||||
{{- range .Site.Data.kontakt.kontakt -}}
|
|
||||||
{{- partial "address.html" (dict "address" . "ctx" $site) -}}
|
|
||||||
{{- end -}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
{{- end }}
|
</div>
|
||||||
<div class="container bottom">
|
<div class="row">
|
||||||
<div clss="row" id="footer-social" class="padding">
|
{{- $site := . }}
|
||||||
<div class="col-xs-12">
|
{{- range .Site.Data.kontakt.kontakt -}}
|
||||||
{{- partial "social.html" . -}}
|
{{- partial "address.html" (dict "address" . "ctx" $site) -}}
|
||||||
</div>
|
{{- end -}}
|
||||||
</div>
|
</div>
|
||||||
<nav class="row">
|
|
||||||
{{- $currentPage := . -}}
|
|
||||||
{{- range .Site.Menus.footer -}}
|
|
||||||
<ul class="list-unstyled col-xs-12 col-sm-4">
|
|
||||||
{{- if .HasChildren -}}
|
|
||||||
<li class="{{ if $currentPage.HasMenuCurrent .Menu . }}active{{ end }}">
|
|
||||||
<a href="{{ .URL }}">
|
|
||||||
{{ .Pre }}
|
|
||||||
<span>{{ .Name }}</span>
|
|
||||||
</a>
|
|
||||||
<ul class="list-unstyled 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>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
{{- end }}
|
||||||
|
<div class="container bottom">
|
||||||
|
<div clss="row" id="footer-social" class="padding">
|
||||||
|
<div class="col-xs-12">
|
||||||
|
{{- partial "social.html" . -}}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav class="row">
|
||||||
|
{{- $currentPage := . -}}
|
||||||
|
{{- range .Site.Menus.footer -}}
|
||||||
|
<ul class="list-unstyled col-xs-12 col-sm-4">
|
||||||
|
{{- if .HasChildren -}}
|
||||||
|
<li class="{{ if $currentPage.HasMenuCurrent .Menu . }}active{{ end }}">
|
||||||
|
<a href="{{ .URL }}">
|
||||||
|
{{ .Pre }}
|
||||||
|
<span>{{ .Name }}</span>
|
||||||
|
</a>
|
||||||
|
<ul class="list-unstyled 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>
|
||||||
<div id="lightbox-section">
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{- partial "templates/lightbox.html" . -}}
|
<div id="lightbox-section">
|
||||||
<script>
|
</div>
|
||||||
var $googleAnalytics = '{{ .Site.GoogleAnalytics }}';
|
{{- partial "templates/lightbox.html" . -}}
|
||||||
</script>
|
<script>
|
||||||
|
var $googleAnalytics = '{{ .Site.GoogleAnalytics }}';
|
||||||
|
</script>
|
||||||
|
|
||||||
{{ partial "part/script.html" (dict "ctx" . "path" "js/common.bundle.js")}}
|
{{ partial "part/script.html" (dict "ctx" . "path" "js/common.bundle.js")}}
|
||||||
{{ partial "part/script.html" (dict "ctx" . "path" "js/app.bundle.js")}}
|
{{ partial "part/script.html" (dict "ctx" . "path" "js/app.bundle.js")}}
|
||||||
{{- block "scripts" . -}}{{- end -}}
|
{{- block "scripts" . -}}{{- end -}}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
|
||||||
|
</html>
|
||||||
|
|
@ -1,21 +1,24 @@
|
||||||
{{- $currentPage := . -}}
|
{{- $currentPage := . -}}
|
||||||
<li class="col-sm-12">
|
<li class="col-sm-12">
|
||||||
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<div>
|
{{- range $.Resources.ByType "image" -}}
|
||||||
{{- range $.Resources.ByType "image" -}}
|
{{- if .Params.featured -}}
|
||||||
{{- if .Params.featured -}}
|
{{- $orig := . -}}
|
||||||
{{- $orig := . -}}
|
{{ partial "figure.html" (dict "ctx" $currentPage "image" . "lightbox" false "class" "left round small")}}
|
||||||
{{ partial "figure.html" (dict "ctx" $currentPage "image" . "lightbox" false "class" "left round small")}}
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end -}}
|
<a href="{{ .RelPermalink }}">
|
||||||
<a href="{{ .RelPermalink }}"><h4>{{ .Title }}</h4></a>
|
<h4>{{ .Title }}</h4>
|
||||||
{{ .Summary }}
|
</a>
|
||||||
{{- if .Truncated -}}
|
{{ .Summary }}
|
||||||
<a href="{{ .RelPermalink }}">{{ i18n "read-more" }}…</a>
|
{{- if .Truncated -}}
|
||||||
{{- end -}}
|
<a href="{{ .RelPermalink }}">{{ i18n "read-more" }}…</a>
|
||||||
<footer>
|
{{- end -}}
|
||||||
<time class="list-item-lastmod" datetime='{{ .Lastmod.Format "2006-01-02T15:04-07:00" }}'>{{ .Lastmod.Format "02.01.2006 15:04" }}</time>
|
<footer>
|
||||||
</footer>
|
<time class="list-item-lastmod"
|
||||||
</div>
|
datetime='{{ .Lastmod.Format "2006-01-02T15:04-07:00" }}'>{{ .Lastmod.Format "02.01.2006 15:04" }}</time>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
|
</li>
|
||||||
|
|
@ -1,20 +1,20 @@
|
||||||
{{- define "title" -}}
|
{{- define "title" -}}
|
||||||
{{ .Title }} • {{ .Site.Title }}
|
{{ .Title }} • {{ .Site.Title }}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<main id="list">
|
<main id="list">
|
||||||
{{- with .Content -}}
|
{{- with .Content -}}
|
||||||
<div class="content row">
|
<div class="content row">
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
{{ . }}
|
{{ . }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{{- end -}}
|
||||||
|
<ul class="list-unstyled row">
|
||||||
|
{{- range .Pages -}}
|
||||||
|
{{- .Render "li" -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
<ul class="list-unstyled row">
|
</ul>
|
||||||
{{- range .Pages -}}
|
|
||||||
{{- .Render "li" -}}
|
|
||||||
{{- end -}}
|
|
||||||
</ul>
|
|
||||||
</main>
|
</main>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
@ -1,32 +1,33 @@
|
||||||
{{- define "title" -}}
|
{{- define "title" -}}
|
||||||
{{ .Title }} • {{ .Site.Title }}
|
{{ .Title }} • {{ .Site.Title }}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
{{- define "main" -}}
|
{{- define "main" -}}
|
||||||
<main class="row" id="single">
|
<main class="row" id="single">
|
||||||
<article class="col-sm-12">
|
<article class="col-sm-12">
|
||||||
<header class="flex padding">
|
<header class="flex padding">
|
||||||
<h1>{{ .Title }}</h1>
|
<h1>{{ .Title }}</h1>
|
||||||
</header>
|
</header>
|
||||||
{{- $resources := .Resources -}}
|
{{- $resources := .Resources -}}
|
||||||
{{- with .Content -}}
|
{{- with .Content -}}
|
||||||
<div class="content row">
|
<div class="content row">
|
||||||
<div class="col-sm-12">
|
<div class="col-sm-12">
|
||||||
{{- range $.Resources.ByType "image" -}}
|
{{- range $.Resources.ByType "image" -}}
|
||||||
{{- if .Params.featured -}}
|
{{- if .Params.featured -}}
|
||||||
{{- $orig := . -}}
|
{{- $orig := . -}}
|
||||||
{{ partial "figure.html" (dict "ctx" . "image" . "lightbox" true "class" "featured rounded left" "showTitle" true "showDescription" true)}}
|
{{ partial "figure.html" (dict "ctx" . "image" . "lightbox" true "class" "featured rounded left" "showTitle" true "showDescription" true)}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{ . }}
|
{{ . }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
<footer class="single-footer padding">
|
<footer class="single-footer padding">
|
||||||
<p>
|
<p>
|
||||||
<i class="fa fa-calendar"></i> <time datetime='{{ .Lastmod.Format "2006-01-02T15:04-07:00" }}'>{{ .Lastmod.Format "02.01.2006 15:04" }}</time>
|
<i class="fa fa-calendar"></i> <time
|
||||||
</p>
|
datetime='{{ .Lastmod.Format "2006-01-02T15:04-07:00" }}'>{{ .Lastmod.Format "02.01.2006 15:04" }}</time>
|
||||||
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
</main>
|
</main>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
@ -8,15 +8,16 @@
|
||||||
{{- $images = .Resources.ByType "image" -}}
|
{{- $images = .Resources.ByType "image" -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- range $images -}}
|
{{- range $images -}}
|
||||||
{{ if .Params.featured }}
|
{{ if .Params.featured }}
|
||||||
{{ $image = . }}
|
{{ $image = . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ if $image }}
|
{{ if $image }}
|
||||||
{{ else }}
|
{{ else }}
|
||||||
{{ $image = index $images 0 }}
|
{{ $image = index $images 0 }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ with $image }}
|
{{ with $image }}
|
||||||
<li class="col-xs-6 col-sm-4"> {{- partial "figure.html" (dict "ctx" $ctx "image" . "class" "catalog" "showTitle" true "showDescription" true "showDetails" true "isOverlay" true) -}}
|
<li class="col-xs-6 col-sm-4">
|
||||||
|
{{- partial "figure.html" (dict "ctx" $ctx "image" . "class" "catalog" "showTitle" true "showDescription" true "showDetails" true "isOverlay" true) -}}
|
||||||
</li>
|
</li>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{{- define "title" -}}
|
{{- define "title" -}}
|
||||||
{{ .Title }} • {{ .Site.Title }}
|
{{ .Title }} • {{ .Site.Title }}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
{{- define "main" -}}
|
{{- define "main" -}}
|
||||||
|
|
@ -11,14 +11,18 @@
|
||||||
<div class="content flex">
|
<div class="content flex">
|
||||||
<div class="padding">
|
<div class="padding">
|
||||||
{{- with .Resources.GetMatch "bilder/*" -}}
|
{{- with .Resources.GetMatch "bilder/*" -}}
|
||||||
{{- $orig := . -}}
|
{{- $orig := . -}}
|
||||||
{{ partial "figure.html" (dict "ctx" . "image" . "lightbox" true "class" "featured left wide" "showTitle" false "showDescription" false)}}
|
{{ partial "figure.html" (dict "ctx" . "image" . "lightbox" true "class" "featured left wide" "showTitle" false "showDescription" false)}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{ with .Params.offer }}<p class="offer"><a class="btn btn-secondary" href="{{ . }}">Angebot</a></p>{{ end }}
|
{{ with .Params.offer }}
|
||||||
|
<p class="offer"><a class="btn btn-secondary" href="{{ . }}">Angebot</a></p>{{ end }}
|
||||||
<p class="type">Typ: {{ range $index, $value := .Params.used_for }}{{ if $index }}, {{end}}{{ . }}{{end}}</p>
|
<p class="type">Typ: {{ range $index, $value := .Params.used_for }}{{ if $index }}, {{end}}{{ . }}{{end}}</p>
|
||||||
{{ with .Params.material }}<p class="material">Material: {{ . }}</p>{{ end }}
|
{{ with .Params.material }}
|
||||||
{{ with .Params.ornament }}<p class="ornament">Ornament: {{ . }}</p>{{ end }}
|
<p class="material">Material: {{ . }}</p>{{ end }}
|
||||||
{{ with .Params.description }}<p class="description">{{ . }}</p>{{ end }}
|
{{ with .Params.ornament }}
|
||||||
|
<p class="ornament">Ornament: {{ . }}</p>{{ end }}
|
||||||
|
{{ with .Params.description }}
|
||||||
|
<p class="description">{{ . }}</p>{{ end }}
|
||||||
<p class="article-id">Art. Nr.: {{ .Params.article_id }}</p>
|
<p class="article-id">Art. Nr.: {{ .Params.article_id }}</p>
|
||||||
{{ with .Content }}
|
{{ with .Content }}
|
||||||
{{ . }}
|
{{ . }}
|
||||||
|
|
@ -30,11 +34,11 @@
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
{{- define "head" -}}
|
{{- define "head" -}}
|
||||||
{{ partial "part/style.html" (dict "ctx" . "path" "css/catalog.css")}}
|
{{ partial "part/style.html" (dict "ctx" . "path" "css/catalog.css")}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
{{- define "scripts" -}}
|
{{- define "scripts" -}}
|
||||||
{{ partial "part/script.html" (dict "ctx" . "path" "js/three.bundle.js")}}
|
{{ partial "part/script.html" (dict "ctx" . "path" "js/three.bundle.js")}}
|
||||||
{{ partial "part/script.html" (dict "ctx" . "path" "js/vue.bundle.js")}}
|
{{ partial "part/script.html" (dict "ctx" . "path" "js/vue.bundle.js")}}
|
||||||
{{ partial "part/script.html" (dict "ctx" . "path" "js/catalog.bundle.js")}}
|
{{ partial "part/script.html" (dict "ctx" . "path" "js/catalog.bundle.js")}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
@ -8,15 +8,16 @@
|
||||||
{{- $images = .Resources.ByType "image" -}}
|
{{- $images = .Resources.ByType "image" -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- range $images -}}
|
{{- range $images -}}
|
||||||
{{ if .Params.featured }}
|
{{ if .Params.featured }}
|
||||||
{{ $image = . }}
|
{{ $image = . }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ if $image }}
|
{{ if $image }}
|
||||||
{{ else }}
|
{{ else }}
|
||||||
{{ $image = index $images 0 }}
|
{{ $image = index $images 0 }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ with $image }}
|
{{ with $image }}
|
||||||
<li class="col-xs-6 col-sm-4"> {{- partial "figure.html" (dict "ctx" $ctx "image" . "class" "catalog" "showTitle" true "showDescription" true) -}}
|
<li class="col-xs-6 col-sm-4">
|
||||||
|
{{- partial "figure.html" (dict "ctx" $ctx "image" . "class" "catalog" "showTitle" true "showDescription" true) -}}
|
||||||
</li>
|
</li>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
@ -1,26 +1,26 @@
|
||||||
{{- define "title" -}}
|
{{- define "title" -}}
|
||||||
{{ .Title }} • {{ .Site.Title }}
|
{{ .Title }} • {{ .Site.Title }}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<main id="list">
|
<main id="list">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<h1 class="col-xs-12">{{ .Title }}</h1>
|
<h1 class="col-xs-12">{{ .Title }}</h1>
|
||||||
</div>
|
</div>
|
||||||
<ul class="list-unstyled row">
|
<ul class="list-unstyled row">
|
||||||
{{- range .Sections -}}
|
{{- range .Sections -}}
|
||||||
{{- .Render "li" -}}
|
{{- .Render "li" -}}
|
||||||
{{- end -}}
|
|
||||||
{{- range .Pages -}}
|
|
||||||
{{- .Render "li" -}}
|
|
||||||
{{- end -}}
|
|
||||||
</ul>
|
|
||||||
{{- with .Content -}}
|
|
||||||
<div class="content row">
|
|
||||||
<div class="col-sm-12">
|
|
||||||
{{ . }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
{{- range .Pages -}}
|
||||||
|
{{- .Render "li" -}}
|
||||||
|
{{- end -}}
|
||||||
|
</ul>
|
||||||
|
{{- with .Content -}}
|
||||||
|
<div class="content row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
{{ . }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{- end -}}
|
||||||
</main>
|
</main>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
@ -1,131 +1,136 @@
|
||||||
{{ define "content" }}
|
{{ define "content" }}
|
||||||
<div id="index">
|
<div id="index">
|
||||||
<div class="container transparent">
|
<div class="container transparent">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-12 col-offset-sm-8 col-sm-4" id="index-short-contact">
|
<div class="col-xs-12 col-offset-sm-8 col-sm-4" 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 }}
|
||||||
</div>
|
|
||||||
<div class="mail">
|
|
||||||
{{- $email := (index .Site.Data.kontakt.kontakt 0).email }}
|
|
||||||
<i class="fa fa-envelope"></i>: <a href="mailto:{{ $email }}">{{ $email }}</a>
|
|
||||||
</div>
|
|
||||||
<div class="social">
|
|
||||||
{{ partial "social.html" . }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="mail">
|
||||||
{{- with .Content -}}
|
{{- $email := (index .Site.Data.kontakt.kontakt 0).email }}
|
||||||
<div class="container">
|
<i class="fa fa-envelope"></i>: <a href="mailto:{{ $email }}">{{ $email }}</a>
|
||||||
<main>
|
|
||||||
<article>
|
|
||||||
<div class="lead" id="index-content">
|
|
||||||
<a id="{{ i18n "home" }}"></a>
|
|
||||||
<h1 id="index-title">{{ .Title }}</h1>
|
|
||||||
{{ . }}
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</main>
|
|
||||||
</div>
|
</div>
|
||||||
{{- end -}}
|
<div class="social">
|
||||||
|
{{ partial "social.html" . }}
|
||||||
<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>
|
|
||||||
<ul class="list-unstyled row">
|
|
||||||
{{- range .Params.about_us }}
|
|
||||||
<li class="col-xs-12 col-sm-4">
|
|
||||||
{{- $section := $.Site.GetPage "section" "ueber-uns" -}}
|
|
||||||
{{- $page := $section.GetPage . -}}
|
|
||||||
{{- $image := $page.Resources.GetMatch "bilder/*" -}}
|
|
||||||
{{ partial "figure.html" (dict "image" $image "ctx" $page "class" "fill" "showContent" true "showTitle" true "keepOriginal" true "imgClass" "img-center" )}}
|
|
||||||
</li>
|
|
||||||
{{- end -}}
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="container">
|
|
||||||
<section class="row" id="index-contact">
|
|
||||||
<div class="col-xs-12">
|
|
||||||
<a class="anchor" id="{{ i18n "contact" }}"><h1 class="padding">Kontakt</h1></a>
|
|
||||||
<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="row">
|
|
||||||
{{- $site := . }}
|
|
||||||
{{- range .Site.Data.kontakt.kontakt -}}
|
|
||||||
{{- partial "address.html" (dict "address" . "ctx" $site) -}}
|
|
||||||
{{- end -}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<section class="row" id="index-gallery">
|
|
||||||
<h1 class="col-xs-12 padding">
|
|
||||||
<a class="anchor" href="/galerie" id="{{ i18n "gallery" }}">{{ i18n "gallery" | title}}</a>
|
|
||||||
<span class="small"></span>
|
|
||||||
</h1>
|
|
||||||
<div class="col-xs-12">
|
|
||||||
<ul class="row list-unstyled">
|
|
||||||
{{- range .Params.galleries }}
|
|
||||||
<li class="col-xs-12 col-sm-4">
|
|
||||||
{{- $section := $.Site.GetPage "section" "galerie" -}}
|
|
||||||
{{- $page := $section.GetPage . -}}
|
|
||||||
{{- $image := ((index $page.Pages 0).Resources.GetMatch "**.jpg") -}}
|
|
||||||
{{ partial "figure.html" (dict "image" $image "ctx" $page "class" "fill" "showDescription" true "showTitle" true)}}
|
|
||||||
</li>
|
|
||||||
{{- end -}}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-xs-12 end-sm">
|
|
||||||
<p>
|
|
||||||
<a href="/galerie"><strong>Alle Galerien</strong></a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<section class="row" id="index-news">
|
|
||||||
<h1 class="col-xs-12 padding"><a class="anchor" href="/neuigkeiten" id="{{ i18n "news" }}">{{ i18n "news" | title}}</a></h1>
|
|
||||||
<div class="col-xs-12">
|
|
||||||
<ul class="list-unstyled row">
|
|
||||||
{{- range (first 3 (where .Site.Pages.ByWeight ".Params.type" "news")) -}}
|
|
||||||
<li class="col-xs-12 col-sm-4">
|
|
||||||
{{- $site := . -}}
|
|
||||||
{{- range .Resources.ByType "image" -}}
|
|
||||||
{{- if .Params.featured -}}
|
|
||||||
{{- $orig := .}}
|
|
||||||
{{ partial "figure.html" (dict "image" $orig "ctx" $site "class" "gallery" "showTitle" true "showSummary" true)}}
|
|
||||||
{{- end -}}
|
|
||||||
{{- end -}}
|
|
||||||
</li>
|
|
||||||
{{- end -}}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="col-xs-12 end-sm">
|
|
||||||
<p>
|
|
||||||
<a href="/neuigkeiten"><strong>Alle Neuigkeiten</strong></a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{- if .IsTranslated -}}
|
|
||||||
<div class="container">
|
|
||||||
<section id="translations" class="flex row">
|
|
||||||
{{- partial "translations.html" . -}}
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
{{- end -}}
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{{ end }}
|
{{- with .Content -}}
|
||||||
|
<div class="container">
|
||||||
|
<main>
|
||||||
|
<article>
|
||||||
|
<div class="lead" id="index-content">
|
||||||
|
<a id="{{ i18n "home" }}"></a>
|
||||||
|
<h1 id="index-title">{{ .Title }}</h1>
|
||||||
|
{{ . }}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
{{- end -}}
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<ul class="list-unstyled row">
|
||||||
|
{{- range .Params.about_us }}
|
||||||
|
<li class="col-xs-12 col-sm-4">
|
||||||
|
{{- $section := $.Site.GetPage "section" "ueber-uns" -}}
|
||||||
|
{{- $page := $section.GetPage . -}}
|
||||||
|
{{- $image := $page.Resources.GetMatch "bilder/*" -}}
|
||||||
|
{{ partial "figure.html" (dict "image" $image "ctx" $page "class" "fill" "showContent" true "showTitle" true "keepOriginal" true "imgClass" "img-center" )}}
|
||||||
|
</li>
|
||||||
|
{{- end -}}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<section class="row" id="index-contact">
|
||||||
|
<div class="col-xs-12">
|
||||||
|
<a class="anchor" id="{{ i18n "contact" }}">
|
||||||
|
<h1 class="padding">Kontakt</h1>
|
||||||
|
</a>
|
||||||
|
<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="row">
|
||||||
|
{{- $site := . }}
|
||||||
|
{{- range .Site.Data.kontakt.kontakt -}}
|
||||||
|
{{- partial "address.html" (dict "address" . "ctx" $site) -}}
|
||||||
|
{{- end -}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<section class="row" id="index-gallery">
|
||||||
|
<h1 class="col-xs-12 padding">
|
||||||
|
<a class="anchor" href="/galerie" id="{{ i18n "gallery" }}">{{ i18n "gallery" | title}}</a>
|
||||||
|
<span class="small"></span>
|
||||||
|
</h1>
|
||||||
|
<div class="col-xs-12">
|
||||||
|
<ul class="row list-unstyled">
|
||||||
|
{{- range .Params.galleries }}
|
||||||
|
<li class="col-xs-12 col-sm-4">
|
||||||
|
{{- $section := $.Site.GetPage "section" "galerie" -}}
|
||||||
|
{{- $page := $section.GetPage . -}}
|
||||||
|
{{- $image := ((index $page.Pages 0).Resources.GetMatch "**.jpg") -}}
|
||||||
|
{{ partial "figure.html" (dict "image" $image "ctx" $page "class" "fill" "showDescription" true "showTitle" true)}}
|
||||||
|
</li>
|
||||||
|
{{- end -}}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-xs-12 end-sm">
|
||||||
|
<p>
|
||||||
|
<a href="/galerie"><strong>Alle Galerien</strong></a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<section class="row" id="index-news">
|
||||||
|
<h1 class="col-xs-12 padding"><a class="anchor" href="/neuigkeiten"
|
||||||
|
id="{{ i18n "news" }}">{{ i18n "news" | title}}</a></h1>
|
||||||
|
<div class="col-xs-12">
|
||||||
|
<ul class="list-unstyled row">
|
||||||
|
{{- range (first 3 (where .Site.Pages.ByWeight ".Params.type" "news")) -}}
|
||||||
|
<li class="col-xs-12 col-sm-4">
|
||||||
|
{{- $site := . -}}
|
||||||
|
{{- range .Resources.ByType "image" -}}
|
||||||
|
{{- if .Params.featured -}}
|
||||||
|
{{- $orig := .}}
|
||||||
|
{{ partial "figure.html" (dict "image" $orig "ctx" $site "class" "gallery" "showTitle" true "showSummary" true)}}
|
||||||
|
{{- end -}}
|
||||||
|
{{- end -}}
|
||||||
|
</li>
|
||||||
|
{{- end -}}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 end-sm">
|
||||||
|
<p>
|
||||||
|
<a href="/neuigkeiten"><strong>Alle Neuigkeiten</strong></a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{- if .IsTranslated -}}
|
||||||
|
<div class="container">
|
||||||
|
<section id="translations" class="flex row">
|
||||||
|
{{- partial "translations.html" . -}}
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
{{- end -}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{ end }}
|
||||||
|
|
@ -1,48 +1,50 @@
|
||||||
<section class="address col-xs-12 col-sm-4">
|
<section class="address col-xs-12 col-sm-4">
|
||||||
<header>
|
<header>
|
||||||
<h3>{{ .address.address.addressLocality }}</h3>
|
<h3>{{ .address.address.addressLocality }}</h3>
|
||||||
</header>
|
</header>
|
||||||
<address class="address">
|
<address class="address">
|
||||||
{{ 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 }}
|
||||||
{{ with .address.address.postalCode }}<span>{{ . }}</span>{{ end }}
|
{{ with .address.address.postalCode }}<span>{{ . }}</span>{{ end }}
|
||||||
{{ with .address.address.addressLocality }}<span>{{ . }}</span><br>{{ end }}
|
{{ with .address.address.addressLocality }}<span>{{ . }}</span><br>{{ end }}
|
||||||
{{ with .address.address.addressRegion }}<span>{{ . }}</span><br>{{ end }}
|
{{ with .address.address.addressRegion }}<span>{{ . }}</span><br>{{ end }}
|
||||||
{{ with .address.address.addressCountry }}<span>{{ i18n . }}</span><br>{{ end }}
|
{{ with .address.address.addressCountry }}<span>{{ i18n . }}</span><br>{{ end }}
|
||||||
</div>
|
</div>
|
||||||
<p>
|
<p>
|
||||||
{{ with .address.telephone }}<em>{{ i18n "telephone" }}:</em> <span>{{ . }}</span><br>{{ end }}
|
{{ with .address.telephone }}<em>{{ i18n "telephone" }}:</em> <span>{{ . }}</span><br>{{ end }}
|
||||||
{{ with .address.faxNumber }}<em>{{ i18n "fax" }}:</em> <span>{{ . }}</span>{{ end }}<br>
|
{{ with .address.faxNumber }}<em>{{ i18n "fax" }}:</em> <span>{{ . }}</span>{{ end }}<br>
|
||||||
</p>
|
</p>
|
||||||
{{ with .address.openingHours }}
|
{{ with .address.openingHours }}
|
||||||
<p>
|
<p>
|
||||||
<em>{{ i18n "openingHours" }}:</em><br>
|
<em>{{ i18n "openingHours" }}:</em><br>
|
||||||
{{- range . -}}
|
{{- range . -}}
|
||||||
{{- $split := split . " " }}
|
{{- $split := split . " " }}
|
||||||
{{- $daysStr := index (split (index $split 0) " ") 0 }}
|
{{- $daysStr := index (split (index $split 0) " ") 0 }}
|
||||||
{{- $hoursStr := index (split (index $split 1) " ") 0 }}
|
{{- $hoursStr := index (split (index $split 1) " ") 0 }}
|
||||||
{{- $days := split $daysStr "," }}
|
{{- $days := split $daysStr "," }}
|
||||||
{{- $localizedDays := slice }}
|
{{- $localizedDays := slice }}
|
||||||
{{- range $idx, $day := $days -}}
|
{{- range $idx, $day := $days -}}
|
||||||
{{- if in . "-" -}}
|
{{- if in . "-" -}}
|
||||||
{{- $innerDays := split . "-" -}}
|
{{- $innerDays := split . "-" -}}
|
||||||
{{- $innerLocalizedDays := slice -}}
|
{{- $innerLocalizedDays := slice -}}
|
||||||
{{- range $innerDays -}}
|
{{- range $innerDays -}}
|
||||||
{{- $innerLocalizedDays = $innerLocalizedDays | append (i18n .) -}}
|
{{- $innerLocalizedDays = $innerLocalizedDays | append (i18n .) -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- $dayRange := delimit $innerLocalizedDays "-" -}}
|
{{- $dayRange := delimit $innerLocalizedDays "-" -}}
|
||||||
{{- $dayRange -}}
|
{{- $dayRange -}}
|
||||||
{{- $localizedDays = $localizedDays | append (i18n $dayRange) -}}
|
{{- $localizedDays = $localizedDays | append (i18n $dayRange) -}}
|
||||||
{{- else -}}
|
{{- else -}}
|
||||||
{{- $localizedDays = $localizedDays | append (i18n $day) -}}
|
{{- $localizedDays = $localizedDays | append (i18n $day) -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{ delimit $localizedDays ", " }} {{ $hoursStr }}<br>
|
{{ delimit $localizedDays ", " }} {{ $hoursStr }}<br>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
</p>
|
</p>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{ 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>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<nav class="breadcrumbs row">
|
<nav class="breadcrumbs row">
|
||||||
<ol class="nav navbar-nav col-xs-12">
|
<ol class="nav navbar-nav col-xs-12">
|
||||||
{{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
|
{{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
|
||||||
</ol>
|
</ol>
|
||||||
{{ define "breadcrumbnav" }}
|
{{ define "breadcrumbnav" }}
|
||||||
|
|
@ -9,7 +9,8 @@
|
||||||
{{ template "breadcrumbnav" (dict "p1" .p1.Site.Home "p2" .p2 ) }}
|
{{ template "breadcrumbnav" (dict "p1" .p1.Site.Home "p2" .p2 ) }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<li class="{{ if eq .p1 .p2 }} active{{ end }}">
|
<li class="{{ if eq .p1 .p2 }} active{{ end }}">
|
||||||
<a href="{{ .p1.Permalink }}">{{ if .p1.IsHome }}Startseite{{ else }}{{ .p1.Title }}{{ end }}</a>{{ if ne .p1 .p2 }} <i class="fa fa-chevron-right"></i>{{ end }}
|
<a href="{{ .p1.Permalink }}">{{ if .p1.IsHome }}Startseite{{ else }}{{ .p1.Title }}{{ end }}</a>{{ if ne .p1 .p2 }}
|
||||||
|
<i class="fa fa-chevron-right"></i>{{ end }}
|
||||||
</li>
|
</li>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</nav>
|
</nav>
|
||||||
|
|
@ -8,67 +8,70 @@
|
||||||
{{- $imgClass := .imgClass -}}
|
{{- $imgClass := .imgClass -}}
|
||||||
{{- $href := .ctx.Params.href }}
|
{{- $href := .ctx.Params.href }}
|
||||||
|
|
||||||
<figure {{- with .class }} class="{{ . }}"{{- end -}}>
|
<figure {{- with .class }} class="{{ . }}" {{- end -}}>
|
||||||
<a href="{{- with $href -}}{{ . }}{{ else }}{{ .ctx.RelPermalink }}{{ end }}"{{- with .lightbox }} data-lightbox{{- end -}}>
|
<a href="{{- with $href -}}{{ . }}{{ else }}{{ .ctx.RelPermalink }}{{ end }}" {{- with .lightbox }}
|
||||||
{{- partial "img.html" (dict "image" .image "ctx" .ctx "keepOriginal" $keep "class" $imgClass) -}}
|
data-lightbox{{- end -}}>
|
||||||
|
{{- partial "img.html" (dict "image" .image "ctx" .ctx "keepOriginal" $keep "class" $imgClass) -}}
|
||||||
|
</a>
|
||||||
|
{{ with .ctx.Params.offer }}
|
||||||
|
<div class="ribbon">
|
||||||
|
<span>
|
||||||
|
Angebot
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
<figcaption class="description{{ if .isOverlay }} overlay hidden{{ end }}">
|
||||||
|
{{- if .showTitle -}}
|
||||||
|
{{- if $href -}}
|
||||||
|
<a href="{{$href}}">
|
||||||
|
<h3>{{ $title }}</h3>
|
||||||
</a>
|
</a>
|
||||||
{{ with .ctx.Params.offer }}
|
{{- else -}}
|
||||||
<div class="ribbon">
|
<h3>{{ $title }}</h3>
|
||||||
<span>
|
{{- end -}}
|
||||||
Angebot
|
{{- end -}}
|
||||||
</span>
|
{{- if .showDescription -}}
|
||||||
</div>
|
<p>
|
||||||
|
{{- with $description -}}
|
||||||
|
{{- . -}}
|
||||||
|
{{- else -}}
|
||||||
|
{{- $alt -}}
|
||||||
|
{{- end -}}
|
||||||
|
</p>
|
||||||
|
{{- end -}}
|
||||||
|
{{- if .showContent -}}
|
||||||
|
<p>
|
||||||
|
{{- with $content -}}
|
||||||
|
{{- . -}}
|
||||||
|
{{- end -}}
|
||||||
|
</p>
|
||||||
|
{{- end -}}
|
||||||
|
{{- if .showSummary -}}
|
||||||
|
{{ with $ctx.Summary }}
|
||||||
|
<p>
|
||||||
|
{{- . -}}
|
||||||
|
{{- if $ctx.Truncated -}}
|
||||||
|
<a href="{{ $ctx.RelPermalink }}">{{ i18n "read-more" }}…</a>
|
||||||
|
{{- end -}}
|
||||||
|
</p>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<figcaption class="description{{ if .isOverlay }} overlay hidden{{ end }}">
|
{{- end -}}
|
||||||
{{- if .showTitle -}}
|
{{- if .showDetails -}}
|
||||||
{{- if $href -}}
|
{{ with .ctx.Params.material }}
|
||||||
<a href="{{$href}}"><h3>{{ $title }}</h3></a>
|
<p class="material">Material: {{ . }}</p>
|
||||||
{{- else -}}
|
{{- end -}}
|
||||||
<h3>{{ $title }}</h3>
|
{{ with .ctx.Params.ornament }}
|
||||||
{{- end -}}
|
<p class="ornament">Ornament: {{ . }}</p>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- if .showDescription -}}
|
{{- with .ctx.Params.used_for -}}
|
||||||
<p>
|
<p class="type">Typ: {{ range $index, $value := . }}{{ if $index }}, {{end}}{{ . }}{{end}}</p>
|
||||||
{{- with $description -}}
|
{{- end -}}
|
||||||
{{- . -}}
|
<p class="details">
|
||||||
{{- else -}}
|
{{ with .ctx.Params.offer }}
|
||||||
{{- $alt -}}
|
<a class="btn btn-small btn-secondary" href="{{ . }}">Angebot</a>
|
||||||
{{- end -}}
|
{{ end }}
|
||||||
</p>
|
<a class="btn btn-small btn-primary" href="{{$ctx.RelPermalink }}">Details</a>
|
||||||
{{- end -}}
|
</p>
|
||||||
{{- if .showContent -}}
|
{{- end -}}
|
||||||
<p>
|
</figcaption>
|
||||||
{{- with $content -}}
|
</figure>
|
||||||
{{- . -}}
|
|
||||||
{{- end -}}
|
|
||||||
</p>
|
|
||||||
{{- end -}}
|
|
||||||
{{- if .showSummary -}}
|
|
||||||
{{ with $ctx.Summary }}
|
|
||||||
<p>
|
|
||||||
{{- . -}}
|
|
||||||
{{- if $ctx.Truncated -}}
|
|
||||||
<a href="{{ $ctx.RelPermalink }}">{{ i18n "read-more" }}…</a>
|
|
||||||
{{- end -}}
|
|
||||||
</p>
|
|
||||||
{{ end }}
|
|
||||||
{{- end -}}
|
|
||||||
{{- if .showDetails -}}
|
|
||||||
{{ with .ctx.Params.material }}
|
|
||||||
<p class="material">Material: {{ . }}</p>
|
|
||||||
{{- end -}}
|
|
||||||
{{ with .ctx.Params.ornament }}
|
|
||||||
<p class="ornament">Ornament: {{ . }}</p>
|
|
||||||
{{- end -}}
|
|
||||||
{{- with .ctx.Params.used_for -}}
|
|
||||||
<p class="type">Typ: {{ range $index, $value := . }}{{ if $index }}, {{end}}{{ . }}{{end}}</p>
|
|
||||||
{{- end -}}
|
|
||||||
<p class="details">
|
|
||||||
{{ with .ctx.Params.offer }}
|
|
||||||
<a class="btn btn-small btn-secondary" href="{{ . }}">Angebot</a>
|
|
||||||
{{ end }}
|
|
||||||
<a class="btn btn-small btn-primary" href="{{$ctx.RelPermalink }}">Details</a>
|
|
||||||
</p>
|
|
||||||
{{- end -}}
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<div class="clearfix"></div>
|
<div class="clearfix"></div>
|
||||||
<ul class="list-unstyled flex row gallery">
|
<ul class="list-unstyled flex row gallery">
|
||||||
{{- range .Resources.ByType "image" -}}
|
{{- range .Resources.ByType "image" -}}
|
||||||
<li class="col-xs-12 col-sm-4 padding">
|
<li class="col-xs-12 col-sm-4 padding">
|
||||||
{{- partial "figure.html" (dict "image" . "ctx" . "lightbox" true "class" "gallery" "showTitle" true "showDescription" true) }}
|
{{- partial "figure.html" (dict "image" . "ctx" . "lightbox" true "class" "gallery" "showTitle" true "showDescription" true) }}
|
||||||
</li>
|
</li>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -1,32 +1,26 @@
|
||||||
{{ $keep := .keepOriginal}}
|
{{ $keep := .keepOriginal}}
|
||||||
{{- $title := .ctx.Name -}}
|
{{- $title := .ctx.Name -}}
|
||||||
{{- with .ctx.Title -}}
|
{{- with .ctx.Title -}}
|
||||||
{{- $title = . -}}
|
{{- $title = . -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- $alt := $title -}}
|
{{- $alt := $title -}}
|
||||||
{{- with .ctx.Params.alt -}}
|
{{- with .ctx.Params.alt -}}
|
||||||
{{- $alt = . -}}
|
{{- $alt = . -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{ $class := "" }}
|
{{ $class := "" }}
|
||||||
{{- with .class -}}
|
{{- with .class -}}
|
||||||
{{- $class = . -}}
|
{{- $class = . -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- $ctx := .ctx -}}
|
{{- $ctx := .ctx -}}
|
||||||
{{ with .image }}
|
{{ with .image }}
|
||||||
{{ if eq $keep true }}
|
{{ if eq $keep true }}
|
||||||
<img alt="{{ $alt }}"
|
<img alt="{{ $alt }}" title="{{ $title }}" class="original {{ $class }}" src="{{ .RelPermalink }}" />
|
||||||
title="{{ $title }}"
|
|
||||||
class="original {{ $class }}"
|
|
||||||
src="{{ .RelPermalink }}" />
|
|
||||||
{{ else }}
|
{{ else }}
|
||||||
{{- $imageSm := .Fill "300x300 Top" -}}
|
{{- $imageSm := .Fill "300x300 Top" -}}
|
||||||
{{- $imageMd := .Fill "500x500 Top" -}}
|
{{- $imageMd := .Fill "500x500 Top" -}}
|
||||||
<img alt="{{ $alt }}"
|
<img alt="{{ $alt }}" title="{{ $title }}" class="{{ $class }}"
|
||||||
title="{{ $title }}"
|
srcset="{{ $imageSm.RelPermalink }} 300w, {{ $imageMd.RelPermalink }} 500w" sizes="(min-width: 48rem) 300px, 500px"
|
||||||
class="{{ $class }}"
|
src="{{ $imageMd.RelPermalink }}" />
|
||||||
srcset="{{ $imageSm.RelPermalink }} 300w, {{ $imageMd.RelPermalink }} 500w"
|
|
||||||
sizes="(min-width: 48rem) 300px, 500px"
|
|
||||||
src="{{ $imageMd.RelPermalink }}" />
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{- partial "schema/img.html" (dict "image" . "ctx" $ctx) -}}
|
{{- partial "schema/img.html" (dict "image" . "ctx" $ctx) -}}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
@ -1,18 +1,18 @@
|
||||||
{{- $currentPage := .ctx -}}
|
{{- $currentPage := .ctx -}}
|
||||||
{{- $link := .item -}}
|
{{- $link := .item -}}
|
||||||
{{- if (eq .item.Identifier "copyright") -}}
|
{{- if (eq .item.Identifier "copyright") -}}
|
||||||
<li>
|
<li>
|
||||||
<a href="{{ .item.URL }}">
|
<a href="{{ .item.URL }}">
|
||||||
<span>© {{ $currentPage.Site.Copyright }}</span>
|
<span>© {{ $currentPage.Site.Copyright }}</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{{- else -}}
|
{{- else -}}
|
||||||
<li class="{{ if $currentPage.HasMenuCurrent .item.Menu .item }}active{{ end }}">
|
<li class="{{ if $currentPage.HasMenuCurrent .item.Menu .item }}active{{ end }}">
|
||||||
{{- if ne .item.Title "" -}}
|
{{- if ne .item.Title "" -}}
|
||||||
<a href="{{ .item.URL }}">
|
<a href="{{ .item.URL }}">
|
||||||
{{ $link.Pre }}
|
{{ $link.Pre }}
|
||||||
<span>{{ $link.Name }}</span>
|
<span>{{ $link.Name }}</span>
|
||||||
</a>
|
</a>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
</li>
|
</li>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
{{- $js := resources.Get .path -}}
|
{{- $js := resources.Get .path -}}
|
||||||
{{ if .ctx.Site.IsServer }}
|
{{ if .ctx.Site.IsServer }}
|
||||||
<script src="{{ $js.RelPermalink }}"></script>
|
<script src="{{ $js.RelPermalink }}"></script>
|
||||||
{{ else }}
|
{{ else }}
|
||||||
{{- $js = $js | resources.Fingerprint -}}
|
{{- $js = $js | resources.Fingerprint -}}
|
||||||
<script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}"></script>
|
<script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}"></script>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
@ -3,5 +3,5 @@
|
||||||
<link rel="stylesheet" href="{{ $css.RelPermalink }}">
|
<link rel="stylesheet" href="{{ $css.RelPermalink }}">
|
||||||
{{ else }}
|
{{ else }}
|
||||||
{{- $css = $css | resources.Fingerprint -}}
|
{{- $css = $css | resources.Fingerprint -}}
|
||||||
<link rel="stylesheet" href="{{ $css.Permalink }}" integrity="{{ $css.Data.Integrity }}">
|
<link rel="stylesheet" href="{{ $css.Permalink }}" integrity="{{ $css.Data.Integrity }}">
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
<script type="application/ld+json">
|
<script type="application/ld+json">
|
||||||
{{- partial "schema/collectionpage.jsonld" (dict "list" . "ctx" .) -}}
|
{{- partial "schema/collectionpage.jsonld" (dict "list" . "ctx" .) -}}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
<script type="application/ld+json">
|
<script type="application/ld+json">
|
||||||
{{- partial "schema/localbusiness.jsonld" (dict "contact" .contact "ctx" .ctx "short" .short) -}}
|
{{- partial "schema/localbusiness.jsonld" (dict "contact" .contact "ctx" .ctx "short" .short) -}}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
<script type="application/ld+json">
|
<script type="application/ld+json">
|
||||||
{{- partial "schema/organization.jsonld" (dict "org" . "ctx" .) -}}
|
{{- partial "schema/organization.jsonld" (dict "org" . "ctx" .) -}}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<ul class="social-icons">
|
<ul class="social-icons">
|
||||||
{{- range $key, $value := (index .Site.Data.kontakt.kontakt 0).social -}}
|
{{- range $key, $value := (index .Site.Data.kontakt.kontakt 0).social -}}
|
||||||
{{- with $value }}
|
{{- with $value }}
|
||||||
<li><a href="{{ . }}" title="{{ $key | title }}"><i class="fab fa-{{ $key }}"></i></a></li>
|
<li><a href="{{ . }}" title="{{ $key | title }}"><i class="fab fa-{{ $key }}"></i></a></li>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -1,29 +1,29 @@
|
||||||
<template id="lightbox-template">
|
<template id="lightbox-template">
|
||||||
<div id="lightbox" class="lightbox">
|
<div id="lightbox" class="lightbox">
|
||||||
<div id="lightbox-container" class="lightbox-container">
|
<div id="lightbox-container" class="lightbox-container">
|
||||||
<div class="lightbox-header">
|
<div class="lightbox-header">
|
||||||
<h1 class="lightbox-title">Title</h1>
|
<h1 class="lightbox-title">Title</h1>
|
||||||
<div class="lightbox-controls">
|
<div class="lightbox-controls">
|
||||||
<a class="lightbox-close"><i class="fa fa-times"></i></a>
|
<a class="lightbox-close"><i class="fa fa-times"></i></a>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="lightbox-image">
|
|
||||||
<div class="image-container">
|
|
||||||
<a class="lightbox-prev">
|
|
||||||
<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">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="lightbox-footer">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lightbox-image">
|
||||||
|
<div class="image-container">
|
||||||
|
<a class="lightbox-prev">
|
||||||
|
<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">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lightbox-footer">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<h4>{{ i18n "translations" | title }}</h4>
|
<h4>{{ i18n "translations" | title }}</h4>
|
||||||
<ul class="col-xs-12">
|
<ul class="col-xs-12">
|
||||||
{{- range .Translations -}}
|
{{- range .Translations -}}
|
||||||
<li>
|
<li>
|
||||||
<a href="{{ .Permalink }}" hreflang="{{ .Language.Lang }}">{{ .Language.LanguageName }}: {{ .Title }}</a>
|
<a href="{{ .Permalink }}" hreflang="{{ .Language.Lang }}">{{ .Language.LanguageName }}: {{ .Title }}</a>
|
||||||
</li>
|
</li>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -4,52 +4,52 @@
|
||||||
{{- $description := true -}}
|
{{- $description := true -}}
|
||||||
{{- $lightbox := true -}}
|
{{- $lightbox := true -}}
|
||||||
{{- if .IsNamedParams -}}
|
{{- if .IsNamedParams -}}
|
||||||
{{- with .Get "search" -}}
|
{{- with .Get "search" -}}
|
||||||
{{ $search = . }}
|
{{ $search = . }}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- with .Get "original" -}}
|
{{- with .Get "original" -}}
|
||||||
{{- $keep = true }}
|
{{- $keep = true }}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- with .Get "title" -}}
|
{{- with .Get "title" -}}
|
||||||
{{ $title = . }}
|
{{ $title = . }}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- $description := true -}}
|
{{- $description := true -}}
|
||||||
{{ with .Get "description" -}}
|
{{ with .Get "description" -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- with .Get "lightbox" -}}
|
{{- with .Get "lightbox" -}}
|
||||||
{{ $lightbox = true }}
|
{{ $lightbox = true }}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- else -}}
|
{{- else -}}
|
||||||
{{- with .Get 0 -}}
|
{{- with .Get 0 -}}
|
||||||
{{ $search = . }}
|
{{ $search = . }}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- with .Get 1 -}}
|
{{- with .Get 1 -}}
|
||||||
{{ $title = . }}
|
{{ $title = . }}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- with .Get 2 -}}
|
{{- with .Get 2 -}}
|
||||||
{{ $description = . }}
|
{{ $description = . }}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- with .Get 3 -}}
|
{{- with .Get 3 -}}
|
||||||
{{ $keep = true }}
|
{{ $keep = true }}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- with .Get 4 -}}
|
{{- with .Get 4 -}}
|
||||||
{{ $lightbox = true }}
|
{{ $lightbox = true }}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
||||||
<div class="clearfix"></div>
|
<div class="clearfix"></div>
|
||||||
{{ with .Inner }}
|
{{ with .Inner }}
|
||||||
<ul class="list-unstyled row gallery">
|
<ul class="list-unstyled row gallery">
|
||||||
{{ . }}
|
{{ . }}
|
||||||
</ul>
|
</ul>
|
||||||
{{ else }}
|
{{ else }}
|
||||||
<ul class="list-unstyled row gallery">
|
<ul class="list-unstyled row gallery">
|
||||||
{{ range $.Page.Resources.Match $search }}
|
{{ range $.Page.Resources.Match $search }}
|
||||||
{{- if (ne .Params.featured true) -}}
|
{{- if (ne .Params.featured true) -}}
|
||||||
<li class="col-xs-6 col-sm-4">
|
<li class="col-xs-6 col-sm-4">
|
||||||
{{- partial "figure.html" (dict "image" . "ctx" . "lightbox" $lightbox "class" "gallery" "showTitle" $title "showDescription" $description "keepOriginal" $keep) -}}
|
{{- partial "figure.html" (dict "image" . "ctx" . "lightbox" $lightbox "class" "gallery" "showTitle" $title "showDescription" $description "keepOriginal" $keep) -}}
|
||||||
</li>
|
</li>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
</ul>
|
</ul>
|
||||||
{{- end -}}
|
{{- end -}}
|
||||||
|
|
@ -8,48 +8,48 @@
|
||||||
{{ $showDescription := true }}
|
{{ $showDescription := true }}
|
||||||
{{ $list := false }}
|
{{ $list := false }}
|
||||||
{{ if .IsNamedParams }}
|
{{ if .IsNamedParams }}
|
||||||
{{ with .Get "search" }}
|
{{ with .Get "search" }}
|
||||||
{{ $search = .}}
|
{{ $search = .}}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ with .Get "class" }}
|
{{ with .Get "class" }}
|
||||||
{{ $class = .}}
|
{{ $class = .}}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ with .Get "title" }}
|
{{ with .Get "title" }}
|
||||||
{{ $title = .}}
|
{{ $title = .}}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ with .Get "description" }}
|
{{ with .Get "description" }}
|
||||||
{{ $description = .}}
|
{{ $description = .}}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ with .Get "alt" }}
|
{{ with .Get "alt" }}
|
||||||
{{ $alt = .}}
|
{{ $alt = .}}
|
||||||
{{ else }}
|
|
||||||
{{ $alt = $description}}
|
|
||||||
{{ end }}
|
|
||||||
{{ with .Get "lightbox" }}
|
|
||||||
{{ $lightbox = .}}
|
|
||||||
{{ end }}
|
|
||||||
{{ with .Get "showTitle" }}
|
|
||||||
{{ $showTitle = .}}
|
|
||||||
{{ end }}
|
|
||||||
{{ with .Get "showDescription" }}
|
|
||||||
{{ $showTitle = .}}
|
|
||||||
{{ end }}
|
|
||||||
{{ with .Get "list" }}
|
|
||||||
{{ $list = .}}
|
|
||||||
{{ end }}
|
|
||||||
{{ else }}
|
{{ else }}
|
||||||
{{ with .Get 0 }}
|
{{ $alt = $description}}
|
||||||
{{ $search = . }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ with .Get "lightbox" }}
|
||||||
{{ with .Get 1 }}
|
{{ $lightbox = .}}
|
||||||
{{ $class = . }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ with .Get "showTitle" }}
|
||||||
|
{{ $showTitle = .}}
|
||||||
|
{{ end }}
|
||||||
|
{{ with .Get "showDescription" }}
|
||||||
|
{{ $showTitle = .}}
|
||||||
|
{{ end }}
|
||||||
|
{{ with .Get "list" }}
|
||||||
|
{{ $list = .}}
|
||||||
|
{{ end }}
|
||||||
|
{{ else }}
|
||||||
|
{{ with .Get 0 }}
|
||||||
|
{{ $search = . }}
|
||||||
|
{{ end }}
|
||||||
|
{{ with .Get 1 }}
|
||||||
|
{{ $class = . }}
|
||||||
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ $image := $.Page.Resources.GetMatch $search }}
|
{{ $image := $.Page.Resources.GetMatch $search }}
|
||||||
{{ if $list }}
|
{{ if $list }}
|
||||||
<li class="col-xs-6 col-sm-4 padding">
|
<li class="col-xs-6 col-sm-4 padding">
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ partial "figure.html" (dict "image" $image "ctx" $image "class" $class "lightbox" $lightbox "showTitle" $showTitle "showDescription" $showDescription) }}
|
{{ partial "figure.html" (dict "image" $image "ctx" $image "class" $class "lightbox" $lightbox "showTitle" $showTitle "showDescription" $showDescription) }}
|
||||||
{{ if $list }}
|
{{ if $list }}
|
||||||
</li>
|
</li>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{{- $type := .Get "type" -}}
|
{{- $type := .Get "type" -}}
|
||||||
<div class="clearfix"></div>
|
<div class="clearfix"></div>
|
||||||
<ul class="flex row list-unstyled {{ $type }}">
|
<ul class="flex row list-unstyled {{ $type }}">
|
||||||
{{ .Inner }}
|
{{ .Inner }}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
import Vue from "vue"
|
import Vue from 'vue'
|
||||||
|
|
||||||
import CatalogArticle from "../vue/CatalogArticle.vue"
|
import CatalogArticle from '../vue/CatalogArticle.vue'
|
||||||
import ModelViewer from "../vue/ModelViewer.vue"
|
import ModelViewer from '../vue/ModelViewer.vue'
|
||||||
|
|
||||||
import store from "../vue/catalogArticle.store.js"
|
import store from '../vue/catalogArticle.store.js'
|
||||||
|
|
||||||
let modelViewerRoot = document.getElementById('model-viewer-root')
|
let modelViewerRoot = document.getElementById('model-viewer-root')
|
||||||
if (modelViewerRoot) {
|
if (modelViewerRoot) {
|
||||||
new Vue({
|
new Vue({
|
||||||
store,
|
store,
|
||||||
render: function(h) {
|
render: function(h) {
|
||||||
|
|
@ -14,11 +14,10 @@ let modelViewerRoot = document.getElementById('model-viewer-root')
|
||||||
},
|
},
|
||||||
beforeMount() {
|
beforeMount() {
|
||||||
this.modelUrl = this.$el.dataset.url
|
this.modelUrl = this.$el.dataset.url
|
||||||
}
|
},
|
||||||
}).$mount(modelViewerRoot)
|
}).$mount(modelViewerRoot)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
let catalogArticle = document.getElementById('catalog-article')
|
let catalogArticle = document.getElementById('catalog-article')
|
||||||
if (catalogArticle) {
|
if (catalogArticle) {
|
||||||
new Vue({
|
new Vue({
|
||||||
|
|
@ -28,6 +27,6 @@ if (catalogArticle) {
|
||||||
},
|
},
|
||||||
beforeMount() {
|
beforeMount() {
|
||||||
this.modelUrl = this.$el.dataset.url
|
this.modelUrl = this.$el.dataset.url
|
||||||
}
|
},
|
||||||
}).$mount(catalogArticle)
|
}).$mount(catalogArticle)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
import Vue from "vue"
|
|
||||||
|
|
||||||
import CatalogSimilar from "../vue/CatalogSimilar.vue"
|
|
||||||
|
|
||||||
import wrap from '@vue/web-component-wrapper'
|
|
||||||
|
|
||||||
const myCatalogSimilar = wrap(Vue, CatalogSimilar)
|
|
||||||
|
|
||||||
window.customElements.define('my-catalog-similar', myCatalogSimilar)
|
|
||||||
|
|
@ -1,86 +1,102 @@
|
||||||
import 'cookieconsent'
|
import 'cookieconsent'
|
||||||
|
|
||||||
|
var gaDisableStr = 'ga-disable-' + $googleAnalytics
|
||||||
var gaDisableStr = 'ga-disable-' + $googleAnalytics;
|
|
||||||
|
|
||||||
function disableGoogleAnalytics() {
|
function disableGoogleAnalytics() {
|
||||||
if (document.cookie.indexOf(gaDisableStr + '=true') > -1) {
|
if (document.cookie.indexOf(gaDisableStr + '=true') > -1) {
|
||||||
window[gaDisableStr] = true;
|
window[gaDisableStr] = true
|
||||||
}
|
}
|
||||||
|
|
||||||
document.cookie = gaDisableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
|
document.cookie =
|
||||||
window[gaDisableStr] = true;
|
gaDisableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/'
|
||||||
|
window[gaDisableStr] = true
|
||||||
}
|
}
|
||||||
|
|
||||||
function enableGoogleAnalytics() {
|
function enableGoogleAnalytics() {
|
||||||
var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack);
|
var dnt = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack
|
||||||
var doNotTrack = (dnt == "1" || dnt == "yes");
|
var doNotTrack = dnt == '1' || dnt == 'yes'
|
||||||
if (!doNotTrack) {
|
if (!doNotTrack) {
|
||||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
;(function(i, s, o, g, r, a, m) {
|
||||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
i['GoogleAnalyticsObject'] = r
|
||||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
;(i[r] =
|
||||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
i[r] ||
|
||||||
ga('create', $googleAnalytics, 'auto');
|
function() {
|
||||||
ga('set', 'anonymizeIp', true);
|
;(i[r].q = i[r].q || []).push(arguments)
|
||||||
ga('send', 'pageview');
|
}),
|
||||||
}
|
(i[r].l = 1 * new Date())
|
||||||
|
;(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0])
|
||||||
|
a.async = 1
|
||||||
|
a.src = g
|
||||||
|
m.parentNode.insertBefore(a, m)
|
||||||
|
})(
|
||||||
|
window,
|
||||||
|
document,
|
||||||
|
'script',
|
||||||
|
'https://www.google-analytics.com/analytics.js',
|
||||||
|
'ga'
|
||||||
|
)
|
||||||
|
ga('create', $googleAnalytics, 'auto')
|
||||||
|
ga('set', 'anonymizeIp', true)
|
||||||
|
ga('send', 'pageview')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupGoogleAnalytics(status) {
|
function setupGoogleAnalytics(status) {
|
||||||
if (status === 'allow' || status === 'dismiss') {
|
if (status === 'allow' || status === 'dismiss') {
|
||||||
enableGoogleAnalytics();
|
enableGoogleAnalytics()
|
||||||
}
|
}
|
||||||
if (status === 'deny') {
|
if (status === 'deny') {
|
||||||
disableGoogleAnalytics();
|
disableGoogleAnalytics()
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
window.addEventListener('load', function() {
|
||||||
window.addEventListener("load", function () {
|
window.cookieconsent.initialise({
|
||||||
window.cookieconsent.initialise({
|
palette: {
|
||||||
palette: {
|
popup: {
|
||||||
popup: {
|
background: '#efefef',
|
||||||
background: "#efefef",
|
text: '#000',
|
||||||
text: "#000"
|
},
|
||||||
},
|
button: {
|
||||||
button: {
|
background: '#2d763a',
|
||||||
background: "#2d763a",
|
text: '#ffffff',
|
||||||
text: "#ffffff"
|
},
|
||||||
}
|
},
|
||||||
},
|
theme: 'classic',
|
||||||
theme: "classic",
|
type: 'opt-out',
|
||||||
type: "opt-out",
|
content: {
|
||||||
content: {
|
message:
|
||||||
message: "Diese Webseite nutzt Cookies zur Verbesserung des Erlebnisses unserer Besucher.<br>Indem Sie weiterhin auf dieser Webseite navigieren, erklären Sie sich mit der Verwendung von Cookies einverstanden. Die Nutzung von externen Cookies kann unterbunden werden.",
|
'Diese Webseite nutzt Cookies zur Verbesserung des Erlebnisses unserer Besucher.<br>Indem Sie weiterhin auf dieser Webseite navigieren, erklären Sie sich mit der Verwendung von Cookies einverstanden. Die Nutzung von externen Cookies kann unterbunden werden.',
|
||||||
dismiss: "OK",
|
dismiss: 'OK',
|
||||||
allow: "Erlauben",
|
allow: 'Erlauben',
|
||||||
deny: "Verbieten",
|
deny: 'Verbieten',
|
||||||
href: "/datenschutz",
|
href: '/datenschutz',
|
||||||
link: "Datenschutzbestimmung",
|
link: 'Datenschutzbestimmung',
|
||||||
policy: "Cookie Vereinbarung"
|
policy: 'Cookie Vereinbarung',
|
||||||
},
|
},
|
||||||
dismissOnScroll: 600,
|
dismissOnScroll: 600,
|
||||||
onInitialise: function (status) {
|
onInitialise: function(status) {
|
||||||
setupGoogleAnalytics(status)
|
setupGoogleAnalytics(status)
|
||||||
},
|
},
|
||||||
onStatusChange: function (status) {
|
onStatusChange: function(status) {
|
||||||
if (status === 'allow' || status === 'dismiss') {
|
if (status === 'allow' || status === 'dismiss') {
|
||||||
if (document.cookie.indexOf(gaDisableStr + '=true') > -1) {
|
if (document.cookie.indexOf(gaDisableStr + '=true') > -1) {
|
||||||
window[gaDisableStr] = false;
|
window[gaDisableStr] = false
|
||||||
document.cookie = gaDisableStr + '=true; expires=Thu, 31 Dec 1970 23:59:59 UTC; path=/';
|
document.cookie =
|
||||||
}
|
gaDisableStr +
|
||||||
}
|
'=true; expires=Thu, 31 Dec 1970 23:59:59 UTC; path=/'
|
||||||
setupGoogleAnalytics(status)
|
}
|
||||||
},
|
}
|
||||||
})
|
setupGoogleAnalytics(status)
|
||||||
});
|
},
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
var gaOptOut = document.querySelector('a.ga-optout')
|
var gaOptOut = document.querySelector('a.ga-optout')
|
||||||
|
|
||||||
if (gaOptOut !== null) {
|
if (gaOptOut !== null) {
|
||||||
gaOptOut.addEventListener('click', (e) => {
|
gaOptOut.addEventListener('click', e => {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
disableGoogleAnalytics();
|
disableGoogleAnalytics()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,20 @@
|
||||||
function showOverlay(el) {
|
function showOverlay(el) {
|
||||||
if (el) {
|
if (el) {
|
||||||
let classes = el.className;
|
let classes = el.className
|
||||||
if (classes.indexOf('hidden') !== -1) {
|
if (classes.indexOf('hidden') !== -1) {
|
||||||
el.className = classes.replace(/ ?hidden ?/, '')
|
el.className = classes.replace(/ ?hidden ?/, '')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function hideOverlay(el) {
|
function hideOverlay(el) {
|
||||||
if (el) {
|
if (el) {
|
||||||
let classes = el.className;
|
let classes = el.className
|
||||||
if (classes.indexOf('hidden') === -1) {
|
if (classes.indexOf('hidden') === -1) {
|
||||||
el.className = classes + ' hidden'
|
el.className = classes + ' hidden'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleOverlay(el) {
|
function toggleOverlay(el) {
|
||||||
if (el) {
|
if (el) {
|
||||||
|
|
@ -27,7 +27,7 @@ function toggleOverlay(el) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function addListeners(el, overlay) {
|
function addListeners(el, overlay) {
|
||||||
var isTouchSupported = "ontouchend" in document;
|
var isTouchSupported = 'ontouchend' in document
|
||||||
if (isTouchSupported) {
|
if (isTouchSupported) {
|
||||||
el.addEventListener('touchstart', ev => {
|
el.addEventListener('touchstart', ev => {
|
||||||
ev.preventDefault()
|
ev.preventDefault()
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1,4 @@
|
||||||
function requireAll(r) { r.keys().forEach(r); }
|
function requireAll(r) {
|
||||||
requireAll(require.context('../img/', true, /\.(png|gif|jpg|jpeg|svg)$/));
|
r.keys().forEach(r)
|
||||||
|
}
|
||||||
|
requireAll(require.context('../img/', true, /\.(png|gif|jpg|jpeg|svg)$/))
|
||||||
|
|
|
||||||
|
|
@ -1,114 +1,115 @@
|
||||||
const container = document.querySelector('#lightbox-section');
|
const container = document.querySelector('#lightbox-section')
|
||||||
const template = document.querySelector('#lightbox-template')
|
const template = document.querySelector('#lightbox-template')
|
||||||
|
|
||||||
const images = document.querySelectorAll('a[data-lightbox]')
|
const images = document.querySelectorAll('a[data-lightbox]')
|
||||||
|
|
||||||
const lightboxes = [];
|
const lightboxes = []
|
||||||
|
|
||||||
class Lightbox {
|
class Lightbox {
|
||||||
constructor(idx) {
|
constructor(idx) {
|
||||||
this.idx = idx
|
this.idx = idx
|
||||||
this.element = images[idx];
|
this.element = images[idx]
|
||||||
this.figure = this.element.parentElement;
|
this.figure = this.element.parentElement
|
||||||
this.image = this.figure.querySelector('img');
|
this.image = this.figure.querySelector('img')
|
||||||
if(this.image === null) {
|
if (this.image === null) {
|
||||||
this.figure = this.element.parentElement.parentElement;
|
this.figure = this.element.parentElement.parentElement
|
||||||
this.image = this.figure.querySelector('img');
|
this.image = this.figure.querySelector('img')
|
||||||
}
|
}
|
||||||
this.title = this.figure.querySelector('h3')
|
this.title = this.figure.querySelector('h3')
|
||||||
this.title = this.image.getAttribute('title')
|
this.title = this.image.getAttribute('title')
|
||||||
this.description = this.figure.querySelector('.description p')
|
this.description = this.figure.querySelector('.description p')
|
||||||
if (this.description !== null) {
|
if (this.description !== null) {
|
||||||
this.description = this.description.innerHTML
|
this.description = this.description.innerHTML
|
||||||
}
|
|
||||||
|
|
||||||
this.href = this.element.getAttribute('href')
|
|
||||||
this.alt = this.image.getAttribute('alt')
|
|
||||||
this.template = template.cloneNode(true);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
update() {
|
this.href = this.element.getAttribute('href')
|
||||||
this.calcSurrounding()
|
this.alt = this.image.getAttribute('alt')
|
||||||
this.updateTemplate()
|
this.template = template.cloneNode(true)
|
||||||
this.addEventListeners()
|
}
|
||||||
}
|
|
||||||
|
|
||||||
calcSurrounding() {
|
update() {
|
||||||
if (images.length > 1) {
|
this.calcSurrounding()
|
||||||
this.prev = this.idx - 1;
|
this.updateTemplate()
|
||||||
this.next = this.idx + 1;
|
this.addEventListeners()
|
||||||
if (this.prev === -1) {
|
}
|
||||||
this.prev = images.length - 1;
|
|
||||||
}
|
|
||||||
if (this.next === images.length) {
|
|
||||||
this.next = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
updateTemplate() {
|
calcSurrounding() {
|
||||||
// Update template
|
if (images.length > 1) {
|
||||||
container.innerHTML = this.template.innerHTML;
|
this.prev = this.idx - 1
|
||||||
let lightbox = container.querySelector('#lightbox');
|
this.next = this.idx + 1
|
||||||
let img = lightbox.querySelector('img');
|
if (this.prev === -1) {
|
||||||
img.setAttribute('src', this.href);
|
this.prev = images.length - 1
|
||||||
img.setAttribute('alt', this.alt);
|
}
|
||||||
let title = lightbox.querySelector('.lightbox-title');
|
if (this.next === images.length) {
|
||||||
let description = lightbox.querySelector('.lightbox-footer');
|
this.next = 0
|
||||||
if (this.title !== null) {
|
}
|
||||||
title.innerHTML = this.title;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
title.innerHtml = this.alt;
|
|
||||||
}
|
|
||||||
if (this.description !== null) {
|
|
||||||
description.innerHTML = this.description;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
description.innerHTML = this.alt;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
addEventListeners() {
|
updateTemplate() {
|
||||||
// Close with click outside of .lightbox-container
|
// Update template
|
||||||
let lightboxContainer = lightbox.querySelector('div.lightbox-container');
|
container.innerHTML = this.template.innerHTML
|
||||||
lightbox.addEventListener('click', (e) => {
|
let lightbox = container.querySelector('#lightbox')
|
||||||
if (!lightboxContainer.contains(e.target)) {
|
let img = lightbox.querySelector('img')
|
||||||
container.innerHTML = '';
|
img.setAttribute('src', this.href)
|
||||||
}
|
img.setAttribute('alt', this.alt)
|
||||||
})
|
let title = lightbox.querySelector('.lightbox-title')
|
||||||
// Close with click on .lightbox-close link
|
let description = lightbox.querySelector('.lightbox-footer')
|
||||||
let lightboxClose = lightbox.querySelector('a.lightbox-close');
|
if (this.title !== null) {
|
||||||
lightboxClose.addEventListener('click', () => {
|
title.innerHTML = this.title
|
||||||
container.innerHTML = '';
|
} else {
|
||||||
|
title.innerHtml = this.alt
|
||||||
|
}
|
||||||
|
if (this.description !== null) {
|
||||||
|
description.innerHTML = this.description
|
||||||
|
} else {
|
||||||
|
description.innerHTML = this.alt
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
addEventListeners() {
|
||||||
|
// Close with click outside of .lightbox-container
|
||||||
|
let lightboxContainer = lightbox.querySelector('div.lightbox-container')
|
||||||
|
lightbox.addEventListener('click', e => {
|
||||||
|
if (!lightboxContainer.contains(e.target)) {
|
||||||
|
container.innerHTML = ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// Close with click on .lightbox-close link
|
||||||
|
let lightboxClose = lightbox.querySelector('a.lightbox-close')
|
||||||
|
lightboxClose.addEventListener('click', () => {
|
||||||
|
container.innerHTML = ''
|
||||||
|
})
|
||||||
|
|
||||||
|
// Previous image with click on .lightbox-prev link
|
||||||
|
let lightboxPrev = lightbox
|
||||||
|
.querySelectorAll('a.lightbox-prev')
|
||||||
|
.forEach(el => {
|
||||||
|
el.addEventListener('click', () => {
|
||||||
|
lightboxes[this.prev].update()
|
||||||
})
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// Next image with click on .lightbox-next link
|
||||||
// Previous image with click on .lightbox-prev link
|
let lightboxNext = lightbox
|
||||||
let lightboxPrev = lightbox.querySelectorAll('a.lightbox-prev').forEach((el) => {
|
.querySelectorAll('a.lightbox-next')
|
||||||
el.addEventListener('click', () => {
|
.forEach(el => {
|
||||||
lightboxes[this.prev].update();
|
el.addEventListener('click', () => {
|
||||||
})
|
lightboxes[this.next].update()
|
||||||
})
|
})
|
||||||
|
})
|
||||||
// Next image with click on .lightbox-next link
|
}
|
||||||
let lightboxNext = lightbox.querySelectorAll('a.lightbox-next').forEach((el) => {
|
|
||||||
el.addEventListener('click', () => {
|
|
||||||
lightboxes[this.next].update();
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function main() {
|
function main() {
|
||||||
for (let i = 0; i < images.length; i++) {
|
for (let i = 0; i < images.length; i++) {
|
||||||
lightboxes.push(new Lightbox(i))
|
lightboxes.push(new Lightbox(i))
|
||||||
|
|
||||||
images[i].addEventListener('click', (e) => {
|
images[i].addEventListener('click', e => {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
lightboxes[i].update();
|
lightboxes[i].update()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
main();
|
main()
|
||||||
|
|
|
||||||
|
|
@ -1,45 +1,44 @@
|
||||||
const header = document.querySelector('#header');
|
const header = document.querySelector('#header')
|
||||||
const scrollPosition = 50;
|
const scrollPosition = 50
|
||||||
|
|
||||||
const menuLinks = document.querySelectorAll('.menu-list li a');
|
const menuLinks = document.querySelectorAll('.menu-list li a')
|
||||||
const checkbox = document.querySelector('#top-navigation-checkbox');
|
const checkbox = document.querySelector('#top-navigation-checkbox')
|
||||||
const banner = document.querySelector('#banner');
|
const banner = document.querySelector('#banner')
|
||||||
|
|
||||||
let lastScrollPosition = 0;
|
let lastScrollPosition = 0
|
||||||
|
|
||||||
window.addEventListener('scroll', (e) => {
|
window.addEventListener('scroll', e => {
|
||||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
let st = window.pageYOffset || document.documentElement.scrollTop
|
||||||
|
if (st > lastScrollPosition && st > scrollPosition) {
|
||||||
|
header.classList.add('small')
|
||||||
|
header.classList.remove('large')
|
||||||
|
header.classList.add('hidden')
|
||||||
|
if (banner !== null) {
|
||||||
|
banner.classList.add('hidden')
|
||||||
|
}
|
||||||
|
checkbox.checked = false
|
||||||
|
} else {
|
||||||
|
if (st < scrollPosition) {
|
||||||
|
header.classList.add('large')
|
||||||
|
header.classList.remove('small')
|
||||||
|
if (banner !== null) {
|
||||||
|
banner.classList.remove('hidden')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (st < lastScrollPosition) {
|
||||||
|
setTimeout(() => {
|
||||||
|
header.classList.remove('hidden')
|
||||||
|
}, 500)
|
||||||
|
}
|
||||||
if (st > lastScrollPosition && st > scrollPosition) {
|
if (st > lastScrollPosition && st > scrollPosition) {
|
||||||
header.classList.add('small')
|
header.classList.add('hidden')
|
||||||
header.classList.remove('large')
|
|
||||||
header.classList.add('hidden')
|
|
||||||
if(banner !== null) {
|
|
||||||
banner.classList.add('hidden')
|
|
||||||
}
|
|
||||||
checkbox.checked = false;
|
|
||||||
}
|
}
|
||||||
else {
|
}
|
||||||
if (st < scrollPosition) {
|
lastScrollPosition = window.pageYOffset || document.documentElement.scrollTop
|
||||||
header.classList.add('large')
|
})
|
||||||
header.classList.remove('small')
|
|
||||||
if(banner !== null) {
|
|
||||||
banner.classList.remove('hidden')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (st < lastScrollPosition) {
|
|
||||||
setTimeout(() => {
|
|
||||||
header.classList.remove('hidden')
|
|
||||||
}, 500);
|
|
||||||
}
|
|
||||||
if (st > lastScrollPosition && st > scrollPosition) {
|
|
||||||
header.classList.add('hidden')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
lastScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
|
|
||||||
});
|
|
||||||
|
|
||||||
menuLinks.forEach((el) => {
|
menuLinks.forEach(el => {
|
||||||
el.addEventListener('click', () => {
|
el.addEventListener('click', () => {
|
||||||
checkbox.checked = false;
|
checkbox.checked = false
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -10,7 +10,9 @@ $xl-min: 75rem !default;
|
||||||
|
|
||||||
/* CALCULATED VARIABLES */
|
/* 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%;
|
$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;
|
$half-gutter-width: $gutter-width * 0.5;
|
||||||
$gutter-compensation: $half-gutter-width * -1;
|
$gutter-compensation: $half-gutter-width * -1;
|
||||||
|
|
@ -18,44 +20,44 @@ $gutter-compensation: $half-gutter-width * -1;
|
||||||
/* GRID */
|
/* GRID */
|
||||||
|
|
||||||
@mixin flex() {
|
@mixin flex() {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 0 1 auto;
|
flex: 0 1 auto;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin col($size) {
|
@mixin col($size) {
|
||||||
flex-basis: $size;
|
flex-basis: $size;
|
||||||
max-width: $size;
|
max-width: $size;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin offset($size) {
|
@mixin offset($size) {
|
||||||
margin-left: $size;
|
margin-left: $size;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container,
|
.container,
|
||||||
.container-fluid {
|
.container-fluid {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 $outer-margin;
|
padding: 0 $outer-margin;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
@include flex();
|
@include flex();
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
margin: 0 $gutter-compensation;
|
margin: 0 $gutter-compensation;
|
||||||
|
|
||||||
&.reverse {
|
&.reverse {
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.column {
|
.column {
|
||||||
@include flex();
|
@include flex();
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
&.reverse {
|
&.reverse {
|
||||||
flex-direction: row-column;
|
flex-direction: row-column;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* XS */
|
/* XS */
|
||||||
|
|
@ -85,333 +87,333 @@ $gutter-compensation: $half-gutter-width * -1;
|
||||||
.col-offset-xs-10,
|
.col-offset-xs-10,
|
||||||
.col-offset-xs-11,
|
.col-offset-xs-11,
|
||||||
.col-offset-xs-12 {
|
.col-offset-xs-12 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
padding: 0 $half-gutter-width;
|
padding: 0 $half-gutter-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-xs {
|
.col-xs {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-basis: 0;
|
flex-basis: 0;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $i, $x in $breakpoints {
|
@each $i, $x in $breakpoints {
|
||||||
.col-xs-#{$i} {
|
.col-xs-#{$i} {
|
||||||
@include col($x);
|
@include col($x);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $i, $x in $breakpoints {
|
@each $i, $x in $breakpoints {
|
||||||
.col-offset-xs-#{$i} {
|
.col-offset-xs-#{$i} {
|
||||||
@include offset($x);
|
@include offset($x);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.start-xs {
|
.start-xs {
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
text-align: start;
|
text-align: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.center-xs {
|
.center-xs {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.end-xs {
|
.end-xs {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
text-align: end;
|
text-align: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-xs {
|
.top-xs {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.middle-xs {
|
.middle-xs {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-xs {
|
.bottom-xs {
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.around-xs {
|
.around-xs {
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
|
|
||||||
.between-xs {
|
.between-xs {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* SM */
|
/* SM */
|
||||||
|
|
||||||
@media only screen and (min-width: $sm-min) {
|
@media only screen and (min-width: $sm-min) {
|
||||||
.container {
|
.container {
|
||||||
width: $sm-min;
|
width: $sm-min;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-sm,
|
.col-sm,
|
||||||
.col-sm-1,
|
.col-sm-1,
|
||||||
.col-sm-2,
|
.col-sm-2,
|
||||||
.col-sm-3,
|
.col-sm-3,
|
||||||
.col-sm-4,
|
.col-sm-4,
|
||||||
.col-sm-5,
|
.col-sm-5,
|
||||||
.col-sm-6,
|
.col-sm-6,
|
||||||
.col-sm-7,
|
.col-sm-7,
|
||||||
.col-sm-8,
|
.col-sm-8,
|
||||||
.col-sm-9,
|
.col-sm-9,
|
||||||
.col-sm-10,
|
.col-sm-10,
|
||||||
.col-sm-11,
|
.col-sm-11,
|
||||||
.col-sm-12,
|
.col-sm-12,
|
||||||
.col-offset-sm-1,
|
.col-offset-sm-1,
|
||||||
.col-offset-sm-2,
|
.col-offset-sm-2,
|
||||||
.col-offset-sm-3,
|
.col-offset-sm-3,
|
||||||
.col-offset-sm-4,
|
.col-offset-sm-4,
|
||||||
.col-offset-sm-5,
|
.col-offset-sm-5,
|
||||||
.col-offset-sm-6,
|
.col-offset-sm-6,
|
||||||
.col-offset-sm-7,
|
.col-offset-sm-7,
|
||||||
.col-offset-sm-8,
|
.col-offset-sm-8,
|
||||||
.col-offset-sm-9,
|
.col-offset-sm-9,
|
||||||
.col-offset-sm-10,
|
.col-offset-sm-10,
|
||||||
.col-offset-sm-11,
|
.col-offset-sm-11,
|
||||||
.col-offset-sm-12 {
|
.col-offset-sm-12 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
padding: 0 $half-gutter-width;
|
padding: 0 $half-gutter-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-sm {
|
.col-sm {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-basis: 0;
|
flex-basis: 0;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $i, $x in $breakpoints {
|
@each $i, $x in $breakpoints {
|
||||||
.col-sm-#{$i} {
|
.col-sm-#{$i} {
|
||||||
@include col($x);
|
@include col($x);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@each $i, $x in $breakpoints {
|
@each $i, $x in $breakpoints {
|
||||||
.col-offset-sm-#{$i} {
|
.col-offset-sm-#{$i} {
|
||||||
@include offset($x);
|
@include offset($x);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.start-sm {
|
.start-sm {
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
text-align: start;
|
text-align: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.center-sm {
|
.center-sm {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.end-sm {
|
.end-sm {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
text-align: end;
|
text-align: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-sm {
|
.top-sm {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.middle-sm {
|
.middle-sm {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-sm {
|
.bottom-sm {
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.around-sm {
|
.around-sm {
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
|
|
||||||
.between-sm {
|
.between-sm {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* LG */
|
/* LG */
|
||||||
|
|
||||||
@media only screen and (min-width: $lg-min) {
|
@media only screen and (min-width: $lg-min) {
|
||||||
.container {
|
.container {
|
||||||
width: $lg-min;
|
width: $lg-min;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-lg,
|
.col-lg,
|
||||||
.col-lg-1,
|
.col-lg-1,
|
||||||
.col-lg-2,
|
.col-lg-2,
|
||||||
.col-lg-3,
|
.col-lg-3,
|
||||||
.col-lg-4,
|
.col-lg-4,
|
||||||
.col-lg-5,
|
.col-lg-5,
|
||||||
.col-lg-6,
|
.col-lg-6,
|
||||||
.col-lg-7,
|
.col-lg-7,
|
||||||
.col-lg-8,
|
.col-lg-8,
|
||||||
.col-lg-9,
|
.col-lg-9,
|
||||||
.col-lg-10,
|
.col-lg-10,
|
||||||
.col-lg-11,
|
.col-lg-11,
|
||||||
.col-lg-12,
|
.col-lg-12,
|
||||||
.col-offset-lg-1,
|
.col-offset-lg-1,
|
||||||
.col-offset-lg-2,
|
.col-offset-lg-2,
|
||||||
.col-offset-lg-3,
|
.col-offset-lg-3,
|
||||||
.col-offset-lg-4,
|
.col-offset-lg-4,
|
||||||
.col-offset-lg-5,
|
.col-offset-lg-5,
|
||||||
.col-offset-lg-6,
|
.col-offset-lg-6,
|
||||||
.col-offset-lg-7,
|
.col-offset-lg-7,
|
||||||
.col-offset-lg-8,
|
.col-offset-lg-8,
|
||||||
.col-offset-lg-9,
|
.col-offset-lg-9,
|
||||||
.col-offset-lg-10,
|
.col-offset-lg-10,
|
||||||
.col-offset-lg-11,
|
.col-offset-lg-11,
|
||||||
.col-offset-lg-12 {
|
.col-offset-lg-12 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
padding: 0 $half-gutter-width;
|
padding: 0 $half-gutter-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-lg {
|
.col-lg {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-basis: 0;
|
flex-basis: 0;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $i, $x in $breakpoints {
|
@each $i, $x in $breakpoints {
|
||||||
.col-lg-#{$i} {
|
.col-lg-#{$i} {
|
||||||
@include col($x);
|
@include col($x);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@each $i, $x in $breakpoints {
|
@each $i, $x in $breakpoints {
|
||||||
.col-offset-lg-#{$i} {
|
.col-offset-lg-#{$i} {
|
||||||
@include offset($x);
|
@include offset($x);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.start-lg {
|
.start-lg {
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
text-align: start;
|
text-align: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.center-lg {
|
.center-lg {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.end-lg {
|
.end-lg {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
text-align: end;
|
text-align: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-lg {
|
.top-lg {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.middle-lg {
|
.middle-lg {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-lg {
|
.bottom-lg {
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.around-lg {
|
.around-lg {
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
|
|
||||||
.between-lg {
|
.between-lg {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* XL */
|
/* XL */
|
||||||
|
|
||||||
@media only screen and (min-width: $xl-min) {
|
@media only screen and (min-width: $xl-min) {
|
||||||
.container {
|
.container {
|
||||||
width: $xl-min;
|
width: $xl-min;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-xl,
|
.col-xl,
|
||||||
.col-xl-1,
|
.col-xl-1,
|
||||||
.col-xl-2,
|
.col-xl-2,
|
||||||
.col-xl-3,
|
.col-xl-3,
|
||||||
.col-xl-4,
|
.col-xl-4,
|
||||||
.col-xl-5,
|
.col-xl-5,
|
||||||
.col-xl-6,
|
.col-xl-6,
|
||||||
.col-xl-7,
|
.col-xl-7,
|
||||||
.col-xl-8,
|
.col-xl-8,
|
||||||
.col-xl-9,
|
.col-xl-9,
|
||||||
.col-xl-10,
|
.col-xl-10,
|
||||||
.col-xl-11,
|
.col-xl-11,
|
||||||
.col-xl-12,
|
.col-xl-12,
|
||||||
.col-offset-xl-1,
|
.col-offset-xl-1,
|
||||||
.col-offset-xl-2,
|
.col-offset-xl-2,
|
||||||
.col-offset-xl-3,
|
.col-offset-xl-3,
|
||||||
.col-offset-xl-4,
|
.col-offset-xl-4,
|
||||||
.col-offset-xl-5,
|
.col-offset-xl-5,
|
||||||
.col-offset-xl-6,
|
.col-offset-xl-6,
|
||||||
.col-offset-xl-7,
|
.col-offset-xl-7,
|
||||||
.col-offset-xl-8,
|
.col-offset-xl-8,
|
||||||
.col-offset-xl-9,
|
.col-offset-xl-9,
|
||||||
.col-offset-xl-10,
|
.col-offset-xl-10,
|
||||||
.col-offset-xl-11,
|
.col-offset-xl-11,
|
||||||
.col-offset-xl-12 {
|
.col-offset-xl-12 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
padding: 0 $half-gutter-width;
|
padding: 0 $half-gutter-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
.col-xl {
|
.col-xl {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
flex-basis: 0;
|
flex-basis: 0;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $i, $x in $breakpoints {
|
@each $i, $x in $breakpoints {
|
||||||
.col-xl-#{$i} {
|
.col-xl-#{$i} {
|
||||||
@include col($x);
|
@include col($x);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@each $i, $x in $breakpoints {
|
@each $i, $x in $breakpoints {
|
||||||
.col-offset-xl-#{$i} {
|
.col-offset-xl-#{$i} {
|
||||||
@include offset($x);
|
@include offset($x);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.start-xl {
|
.start-xl {
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
text-align: start;
|
text-align: start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.center-xl {
|
.center-xl {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.end-xl {
|
.end-xl {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
text-align: end;
|
text-align: end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-xl {
|
.top-xl {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.middle-xl {
|
.middle-xl {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-xl {
|
.bottom-xl {
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.around-xl {
|
.around-xl {
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
|
|
||||||
.between-xl {
|
.between-xl {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,119 +1,91 @@
|
||||||
/* roboto-regular - latin */
|
/* roboto-regular - latin */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Roboto';
|
font-family: 'Roboto';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
src: url('../fonts/roboto-v18-latin-regular.eot');
|
src: url('../fonts/roboto-v18-latin-regular.eot');
|
||||||
/* IE9 Compat Modes */
|
src: local('Roboto'), local('Roboto-Regular'),
|
||||||
src: local('Roboto'), local('Roboto-Regular'),
|
url('../fonts/roboto-v18-latin-regular.eot?#iefix')
|
||||||
url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'),
|
format('embedded-opentype'),
|
||||||
/* IE6-IE8 */
|
url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'),
|
||||||
url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'),
|
url('../fonts/roboto-v18-latin-regular.woff') format('woff'),
|
||||||
/* Super Modern Browsers */
|
url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'),
|
||||||
url('../fonts/roboto-v18-latin-regular.woff') format('woff'),
|
url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg');
|
||||||
/* Modern Browsers */
|
|
||||||
url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'),
|
|
||||||
/* Safari, Android, iOS */
|
|
||||||
url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg');
|
|
||||||
/* Legacy iOS */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* roboto-italic - latin */
|
/* roboto-italic - latin */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Roboto';
|
font-family: 'Roboto';
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
src: url('../fonts/roboto-v18-latin-italic.eot');
|
src: url('../fonts/roboto-v18-latin-italic.eot');
|
||||||
/* IE9 Compat Modes */
|
|
||||||
src: local('Roboto Italic'), local('Roboto-Italic'),
|
src: local('Roboto Italic'), local('Roboto-Italic'),
|
||||||
url('../fonts/roboto-v18-latin-italic.eot?#iefix') format('embedded-opentype'),
|
url('../fonts/roboto-v18-latin-italic.eot?#iefix')
|
||||||
/* IE6-IE8 */
|
format('embedded-opentype'),
|
||||||
url('../fonts/roboto-v18-latin-italic.woff2') format('woff2'),
|
url('../fonts/roboto-v18-latin-italic.woff2') format('woff2'),
|
||||||
/* Super Modern Browsers */
|
url('../fonts/roboto-v18-latin-italic.woff') format('woff'),
|
||||||
url('../fonts/roboto-v18-latin-italic.woff') format('woff'),
|
url('../fonts/roboto-v18-latin-italic.ttf') format('truetype'),
|
||||||
/* Modern Browsers */
|
url('../fonts/roboto-v18-latin-italic.svg#Roboto') format('svg');
|
||||||
url('../fonts/roboto-v18-latin-italic.ttf') format('truetype'),
|
|
||||||
/* Safari, Android, iOS */
|
|
||||||
url('../fonts/roboto-v18-latin-italic.svg#Roboto') format('svg');
|
|
||||||
/* Legacy iOS */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* roboto-700 - latin */
|
/* roboto-700 - latin */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Roboto';
|
font-family: 'Roboto';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
src: url('../fonts/roboto-v18-latin-700.eot');
|
src: url('../fonts/roboto-v18-latin-700.eot');
|
||||||
/* IE9 Compat Modes */
|
src: local('Roboto Bold'), local('Roboto-Bold'),
|
||||||
src: local('Roboto Bold'), local('Roboto-Bold'),
|
url('../fonts/roboto-v18-latin-700.eot?#iefix') format('embedded-opentype'),
|
||||||
url('../fonts/roboto-v18-latin-700.eot?#iefix') format('embedded-opentype'),
|
url('../fonts/roboto-v18-latin-700.woff2') format('woff2'),
|
||||||
/* IE6-IE8 */
|
url('../fonts/roboto-v18-latin-700.woff') format('woff'),
|
||||||
url('../fonts/roboto-v18-latin-700.woff2') format('woff2'),
|
url('../fonts/roboto-v18-latin-700.ttf') format('truetype'),
|
||||||
/* Super Modern Browsers */
|
url('../fonts/roboto-v18-latin-700.svg#Roboto') format('svg');
|
||||||
url('../fonts/roboto-v18-latin-700.woff') format('woff'),
|
|
||||||
/* Modern Browsers */
|
|
||||||
url('../fonts/roboto-v18-latin-700.ttf') format('truetype'),
|
|
||||||
/* Safari, Android, iOS */
|
|
||||||
url('../fonts/roboto-v18-latin-700.svg#Roboto') format('svg');
|
|
||||||
/* Legacy iOS */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* roboto-700italic - latin */
|
/* roboto-700italic - latin */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Roboto';
|
font-family: 'Roboto';
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
src: url('../fonts/roboto-v18-latin-700italic.eot');
|
src: url('../fonts/roboto-v18-latin-700italic.eot');
|
||||||
/* IE9 Compat Modes */
|
|
||||||
src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
|
src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
|
||||||
url('../fonts/roboto-v18-latin-700italic.eot?#iefix') format('embedded-opentype'),
|
url('../fonts/roboto-v18-latin-700italic.eot?#iefix')
|
||||||
/* IE6-IE8 */
|
format('embedded-opentype'),
|
||||||
url('../fonts/roboto-v18-latin-700italic.woff2') format('woff2'),
|
url('../fonts/roboto-v18-latin-700italic.woff2') format('woff2'),
|
||||||
/* Super Modern Browsers */
|
url('../fonts/roboto-v18-latin-700italic.woff') format('woff'),
|
||||||
url('../fonts/roboto-v18-latin-700italic.woff') format('woff'),
|
url('../fonts/roboto-v18-latin-700italic.ttf') format('truetype'),
|
||||||
/* Modern Browsers */
|
url('../fonts/roboto-v18-latin-700italic.svg#Roboto') format('svg');
|
||||||
url('../fonts/roboto-v18-latin-700italic.ttf') format('truetype'),
|
|
||||||
/* Safari, Android, iOS */
|
|
||||||
url('../fonts/roboto-v18-latin-700italic.svg#Roboto') format('svg');
|
|
||||||
/* Legacy iOS */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* roboto-slab-regular - latin */
|
/* roboto-slab-regular - latin */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Roboto Slab';
|
font-family: 'Roboto Slab';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
src: url('../fonts/roboto-slab-v7-latin-regular.eot');
|
src: url('../fonts/roboto-slab-v7-latin-regular.eot');
|
||||||
/* IE9 Compat Modes */
|
src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'),
|
||||||
src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'),
|
url('../fonts/roboto-slab-v7-latin-regular.eot?#iefix')
|
||||||
url('../fonts/roboto-slab-v7-latin-regular.eot?#iefix') format('embedded-opentype'),
|
format('embedded-opentype'),
|
||||||
/* IE6-IE8 */
|
url('../fonts/roboto-slab-v7-latin-regular.woff2') format('woff2'),
|
||||||
url('../fonts/roboto-slab-v7-latin-regular.woff2') format('woff2'),
|
url('../fonts/roboto-slab-v7-latin-regular.woff') format('woff'),
|
||||||
/* Super Modern Browsers */
|
url('../fonts/roboto-slab-v7-latin-regular.ttf') format('truetype'),
|
||||||
url('../fonts/roboto-slab-v7-latin-regular.woff') format('woff'),
|
url('../fonts/roboto-slab-v7-latin-regular.svg#RobotoSlab') format('svg');
|
||||||
/* Modern Browsers */
|
|
||||||
url('../fonts/roboto-slab-v7-latin-regular.ttf') format('truetype'),
|
|
||||||
/* Safari, Android, iOS */
|
|
||||||
url('../fonts/roboto-slab-v7-latin-regular.svg#RobotoSlab') format('svg');
|
|
||||||
/* Legacy iOS */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* roboto-slab-700 - latin */
|
/* roboto-slab-700 - latin */
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Roboto Slab';
|
font-family: 'Roboto Slab';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
src: url('../fonts/roboto-slab-v7-latin-700.eot');
|
src: url('../fonts/roboto-slab-v7-latin-700.eot');
|
||||||
/* IE9 Compat Modes */
|
|
||||||
src: local('Roboto Slab Bold'), local('RobotoSlab-Bold'),
|
src: local('Roboto Slab Bold'), local('RobotoSlab-Bold'),
|
||||||
url('../fonts/roboto-slab-v7-latin-700.eot?#iefix') format('embedded-opentype'),
|
url('../fonts/roboto-slab-v7-latin-700.eot?#iefix')
|
||||||
/* IE6-IE8 */
|
format('embedded-opentype'),
|
||||||
url('../fonts/roboto-slab-v7-latin-700.woff2') format('woff2'),
|
url('../fonts/roboto-slab-v7-latin-700.woff2') format('woff2'),
|
||||||
/* Super Modern Browsers */
|
url('../fonts/roboto-slab-v7-latin-700.woff') format('woff'),
|
||||||
url('../fonts/roboto-slab-v7-latin-700.woff') format('woff'),
|
url('../fonts/roboto-slab-v7-latin-700.ttf') format('truetype'),
|
||||||
/* Modern Browsers */
|
url('../fonts/roboto-slab-v7-latin-700.svg#RobotoSlab') format('svg');
|
||||||
url('../fonts/roboto-slab-v7-latin-700.ttf') format('truetype'),
|
|
||||||
/* Safari, Android, iOS */
|
|
||||||
url('../fonts/roboto-slab-v7-latin-700.svg#RobotoSlab') format('svg');
|
|
||||||
/* Legacy iOS */
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,107 +1,107 @@
|
||||||
.lightbox {
|
.lightbox {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
background-color: rgba(#000, 0.5);
|
background-color: rgba(#000, 0.5);
|
||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
.lightbox-container {
|
.lightbox-container {
|
||||||
flex: 0 0 0;
|
flex: 0 0 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: $gutter-width;
|
padding: $gutter-width;
|
||||||
margin: $gutter-width;
|
margin: $gutter-width;
|
||||||
background-color: $background-color;
|
background-color: $background-color;
|
||||||
border-radius: $border-radius;
|
border-radius: $border-radius;
|
||||||
|
|
||||||
.lightbox-header {
|
.lightbox-header {
|
||||||
flex: 0 0 0;
|
flex: 0 0 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
flex: 1 0 0;
|
flex: 1 0 0;
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.lightbox-image {
|
|
||||||
flex: 1 0 0;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
.image-container {
|
|
||||||
position: relative;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
max-height: calc(90vh - calc(8 * #{$gutter-width}));
|
|
||||||
max-width: calc(90vw - calc(4 * #{$gutter-width}));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.lightbox-footer {
|
|
||||||
flex: 0 0 0;
|
|
||||||
z-index: 100000;
|
|
||||||
max-width: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lightbox-controls {
|
|
||||||
font-size: 1.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lightbox-close {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
margin: $gutter-width;
|
|
||||||
z-index: 100000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lightbox-nav-prev,
|
|
||||||
.lightbox-nav-next {
|
|
||||||
cursor: pointer;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
width: 40%;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
div {
|
|
||||||
background-color: #fff;
|
|
||||||
vertical-align: middle;
|
|
||||||
padding: $gutter-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.lightbox-nav-prev {
|
|
||||||
left: 0;
|
|
||||||
|
|
||||||
div {
|
|
||||||
border-radius: 0 $border-radius $border-radius 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.lightbox-nav-next {
|
|
||||||
right: 0;
|
|
||||||
div {
|
|
||||||
margin-left: auto;
|
|
||||||
border-radius: $border-radius 0 0 $border-radius;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lightbox-image {
|
||||||
|
flex: 1 0 0;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.image-container {
|
||||||
|
position: relative;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
max-height: calc(90vh - calc(8 * #{$gutter-width}));
|
||||||
|
max-width: calc(90vw - calc(4 * #{$gutter-width}));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox-footer {
|
||||||
|
flex: 0 0 0;
|
||||||
|
z-index: 100000;
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox-controls {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox-close {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
margin: $gutter-width;
|
||||||
|
z-index: 100000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox-nav-prev,
|
||||||
|
.lightbox-nav-next {
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 40%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
div {
|
||||||
|
background-color: #fff;
|
||||||
|
vertical-align: middle;
|
||||||
|
padding: $gutter-width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.lightbox-nav-prev {
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
div {
|
||||||
|
border-radius: 0 $border-radius $border-radius 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lightbox-nav-next {
|
||||||
|
right: 0;
|
||||||
|
div {
|
||||||
|
margin-left: auto;
|
||||||
|
border-radius: $border-radius 0 0 $border-radius;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,47 +1,46 @@
|
||||||
@mixin trim-list-margin-horizontal {
|
@mixin trim-list-margin-horizontal {
|
||||||
& {
|
& {
|
||||||
li {
|
li {
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin menu-list($direction) {
|
@mixin menu-list($direction) {
|
||||||
& {
|
& {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: #{$direction};
|
flex-direction: #{$direction};
|
||||||
|
|
||||||
li {
|
li {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin background($class) {
|
@mixin background($class) {
|
||||||
$background-image: "/img/background/" + $class + ".jpg";
|
$background-image: '/img/background/' + $class + '.jpg';
|
||||||
|
|
||||||
& {
|
& {
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
&.background-#{$class} {
|
&.background-#{$class} {
|
||||||
background-image: url(#{$background-image});
|
background-image: url(#{$background-image});
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: $sm-min) {
|
|
||||||
&.background-default {
|
|
||||||
background-position-x: 37%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
@media only screen and (max-width: $sm-min) {
|
||||||
|
&.background-default {
|
||||||
|
background-position-x: 37%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -84,12 +84,12 @@ time,
|
||||||
mark,
|
mark,
|
||||||
audio,
|
audio,
|
||||||
video {
|
video {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
font: inherit;
|
font: inherit;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* HTML5 display-role reset for older browsers */
|
/* HTML5 display-role reset for older browsers */
|
||||||
|
|
@ -105,32 +105,32 @@ hgroup,
|
||||||
menu,
|
menu,
|
||||||
nav,
|
nav,
|
||||||
section {
|
section {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
ol,
|
ol,
|
||||||
ul {
|
ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote,
|
blockquote,
|
||||||
q {
|
q {
|
||||||
quotes: none;
|
quotes: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
blockquote:before,
|
blockquote:before,
|
||||||
blockquote:after,
|
blockquote:after,
|
||||||
q:before,
|
q:before,
|
||||||
q:after {
|
q:after {
|
||||||
content: '';
|
content: '';
|
||||||
content: none;
|
content: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ $gutter-width: 1rem;
|
||||||
$base-font-size: 16px;
|
$base-font-size: 16px;
|
||||||
$base-line-height: 1.4em;
|
$base-line-height: 1.4em;
|
||||||
$base-font-family: Roboto, sans-serif;
|
$base-font-family: Roboto, sans-serif;
|
||||||
$heading-font-family: "Roboto Slab", sans-serif;
|
$heading-font-family: 'Roboto Slab', sans-serif;
|
||||||
|
|
||||||
$font-color: black;
|
$font-color: black;
|
||||||
$background-color: white;
|
$background-color: white;
|
||||||
|
|
@ -12,8 +12,7 @@ $secondary-color: #720026;
|
||||||
|
|
||||||
$border-radius: 5px;
|
$border-radius: 5px;
|
||||||
|
|
||||||
|
$background-default: 'grabmal';
|
||||||
|
$background-bau: 'bau';
|
||||||
|
|
||||||
$background-default: "grabmal";
|
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts/';
|
||||||
$background-bau: "bau";
|
|
||||||
|
|
||||||
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts/";
|
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
@import "_reset.scss";
|
@import '_reset.scss';
|
||||||
@import "_variables.scss";
|
@import '_variables.scss';
|
||||||
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
|
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
|
||||||
@import "~@fortawesome/fontawesome-free/scss/regular.scss";
|
@import '~@fortawesome/fontawesome-free/scss/regular.scss';
|
||||||
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
|
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
|
||||||
@import "~@fortawesome/fontawesome-free/scss/brands.scss";
|
@import '~@fortawesome/fontawesome-free/scss/brands.scss';
|
||||||
@import "~cookieconsent/src/styles/animation.css";
|
@import '~cookieconsent/src/styles/animation.css';
|
||||||
@import "~cookieconsent/src/styles/base.css";
|
@import '~cookieconsent/src/styles/base.css';
|
||||||
@import "~cookieconsent/src/styles/layout.css";
|
@import '~cookieconsent/src/styles/layout.css';
|
||||||
@import "~cookieconsent/src/styles/media.css";
|
@import '~cookieconsent/src/styles/media.css';
|
||||||
@import "~cookieconsent/src/styles/themes/classic.css";
|
@import '~cookieconsent/src/styles/themes/classic.css';
|
||||||
@import "_fonts.scss";
|
@import '_fonts.scss';
|
||||||
@import "_mixins.scss";
|
@import '_mixins.scss';
|
||||||
@import "_flexgrid.scss";
|
@import '_flexgrid.scss';
|
||||||
@import "_app.scss";
|
@import '_app.scss';
|
||||||
@import "_lightbox.scss";
|
@import '_lightbox.scss';
|
||||||
|
|
|
||||||
|
|
@ -1,28 +1,46 @@
|
||||||
<template>
|
<template>
|
||||||
<article class="row"v-if="articleData">
|
<article class="row" v-if="articleData">
|
||||||
<header class="col-xs-12">
|
<header class="col-xs-12">
|
||||||
<h1>{{ articleData.title }}</h1>
|
<h1>{{ articleData.title }}</h1>
|
||||||
</header>
|
</header>
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div v-if="hasWebGl && articleData.model" class="featured col-xs-12 col-sm-8">
|
<div
|
||||||
<model-viewer :modelData="articleData.model"/>
|
v-if="hasWebGl && articleData.model"
|
||||||
|
class="featured col-xs-12 col-sm-8"
|
||||||
|
>
|
||||||
|
<model-viewer :modelData="articleData.model" />
|
||||||
</div>
|
</div>
|
||||||
<figure v-else class="featured col-xs-12 col-sm-8">
|
<figure v-else class="featured col-xs-12 col-sm-8">
|
||||||
<img alt="" title="" class="" srcset="" sizes="" src="">
|
<img alt="" title="" class="" srcset="" sizes="" src="" />
|
||||||
</figure>
|
</figure>
|
||||||
<div class="col-sm-4 col-xs-12">
|
<div class="col-sm-4 col-xs-12">
|
||||||
<p v-if="hasWebGl && articleData.model && articleData.model.textures.length > 1">
|
<p
|
||||||
|
v-if="
|
||||||
|
hasWebGl &&
|
||||||
|
articleData.model &&
|
||||||
|
articleData.model.textures.length > 1
|
||||||
|
"
|
||||||
|
>
|
||||||
<strong>Material ändern</strong>
|
<strong>Material ändern</strong>
|
||||||
<material-switcher :modelData="articleData.model"/>
|
<material-switcher :modelData="articleData.model" />
|
||||||
</p>
|
</p>
|
||||||
<p class="offer">
|
<p class="offer">
|
||||||
<a class="btn btn-secondary" v-if="articleData.offer" :href="articleData.offer">Angebot</a>
|
<a
|
||||||
|
class="btn btn-secondary"
|
||||||
|
v-if="articleData.offer"
|
||||||
|
:href="articleData.offer"
|
||||||
|
>Angebot</a
|
||||||
|
>
|
||||||
</p>
|
</p>
|
||||||
<p class="type">Typ: {{ types }}</p>
|
<p class="type">Typ: {{ types }}</p>
|
||||||
<p class="material">Material: {{ material }}</p>
|
<p class="material">Material: {{ material }}</p>
|
||||||
<p class="ornament" v-if="articleData.ornament">Ornament: {{ articleData.ornament }}</p>
|
<p class="ornament" v-if="articleData.ornament">
|
||||||
<p class="description" v-if="articleData.description">{{ articleData.description }}</p>
|
Ornament: {{ articleData.ornament }}
|
||||||
|
</p>
|
||||||
|
<p class="description" v-if="articleData.description">
|
||||||
|
{{ articleData.description }}
|
||||||
|
</p>
|
||||||
<p class="article-id">Art. Nr.: {{ articleData.article_id }}</p>
|
<p class="article-id">Art. Nr.: {{ articleData.article_id }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -34,18 +52,21 @@
|
||||||
import ModelViewer from './components/ModelViewer.vue'
|
import ModelViewer from './components/ModelViewer.vue'
|
||||||
import MaterialSwitcher from './components/MaterialSwitcher.vue'
|
import MaterialSwitcher from './components/MaterialSwitcher.vue'
|
||||||
import * as WebGL from 'three/examples/js/WebGL.js'
|
import * as WebGL from 'three/examples/js/WebGL.js'
|
||||||
import { mapState } from 'vuex';
|
import { mapState } from 'vuex'
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
hasWebGl: false
|
hasWebGl: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$store.dispatch('fetchArticleData')
|
this.$store.dispatch('fetchArticleData')
|
||||||
console.log(WebGL)
|
console.log(WebGL)
|
||||||
var canvas = document.createElement( 'canvas' );
|
var canvas = document.createElement('canvas')
|
||||||
if ( window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ) ) {
|
if (
|
||||||
|
window.WebGLRenderingContext &&
|
||||||
|
(canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
|
||||||
|
) {
|
||||||
this.hasWebGl = true
|
this.hasWebGl = true
|
||||||
} else {
|
} else {
|
||||||
this.hasWebGl = false
|
this.hasWebGl = false
|
||||||
|
|
@ -54,22 +75,22 @@ export default {
|
||||||
computed: {
|
computed: {
|
||||||
...mapState(['articleData', 'activeTexture']),
|
...mapState(['articleData', 'activeTexture']),
|
||||||
types() {
|
types() {
|
||||||
if(this.articleData.article_type) {
|
if (this.articleData.article_type) {
|
||||||
return this.articleData.article_type.join(', ')
|
return this.articleData.article_type.join(', ')
|
||||||
}
|
}
|
||||||
return ""
|
return ''
|
||||||
},
|
},
|
||||||
material() {
|
material() {
|
||||||
if(this.activeTexture) {
|
if (this.activeTexture) {
|
||||||
return this.activeTexture.name
|
return this.activeTexture.name
|
||||||
}
|
}
|
||||||
return this.articleData.material
|
return this.articleData.material
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
ModelViewer,
|
ModelViewer,
|
||||||
MaterialSwitcher
|
MaterialSwitcher,
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,17 +6,23 @@
|
||||||
<div class="content flex">
|
<div class="content flex">
|
||||||
<div class="padding">
|
<div class="padding">
|
||||||
<div v-if="articleData.model" class="featured left wide">
|
<div v-if="articleData.model" class="featured left wide">
|
||||||
<model-viewer class="model-viewer" :modelData="articleData.model"/>
|
<model-viewer class="model-viewer" :modelData="articleData.model" />
|
||||||
</div>
|
</div>
|
||||||
<p>
|
<p>
|
||||||
<strong>Material ändern</strong>
|
<strong>Material ändern</strong>
|
||||||
<material-switcher :modelData="articleData.model"/>
|
<material-switcher :modelData="articleData.model" />
|
||||||
</p>
|
</p>
|
||||||
<p class="type">Typ: {{ types }}</p>
|
<p class="type">Typ: {{ types }}</p>
|
||||||
<p class="material">Material: {{ material }}</p>
|
<p class="material">Material: {{ material }}</p>
|
||||||
<p class="offer" v-if="articleData.offer"><a :href="articleData.offer">Angebot</a></p>
|
<p class="offer" v-if="articleData.offer">
|
||||||
<p class="ornament" v-if="articleData.ornament">Ornament: {{ articleData.ornament }}</p>
|
<a :href="articleData.offer">Angebot</a>
|
||||||
<p class="description" v-if="articleData.description">{{ articleData.description }}</p>
|
</p>
|
||||||
|
<p class="ornament" v-if="articleData.ornament">
|
||||||
|
Ornament: {{ articleData.ornament }}
|
||||||
|
</p>
|
||||||
|
<p class="description" v-if="articleData.description">
|
||||||
|
{{ articleData.description }}
|
||||||
|
</p>
|
||||||
<p class="article-id">Art. Nr.: {{ articleData.article_id }}</p>
|
<p class="article-id">Art. Nr.: {{ articleData.article_id }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -26,7 +32,7 @@
|
||||||
<script>
|
<script>
|
||||||
import ModelViewer from './components/ModelViewer.vue'
|
import ModelViewer from './components/ModelViewer.vue'
|
||||||
import MaterialSwitcher from './components/MaterialSwitcher.vue'
|
import MaterialSwitcher from './components/MaterialSwitcher.vue'
|
||||||
import { mapState } from 'vuex';
|
import { mapState } from 'vuex'
|
||||||
export default {
|
export default {
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$store.dispatch('fetchArticleData')
|
this.$store.dispatch('fetchArticleData')
|
||||||
|
|
@ -34,21 +40,21 @@ export default {
|
||||||
computed: {
|
computed: {
|
||||||
...mapState(['articleData', 'activeTexture']),
|
...mapState(['articleData', 'activeTexture']),
|
||||||
types() {
|
types() {
|
||||||
if(this.articleData.article_type) {
|
if (this.articleData.article_type) {
|
||||||
return this.articleData.article_type.join(', ')
|
return this.articleData.article_type.join(', ')
|
||||||
}
|
}
|
||||||
return ""
|
return ''
|
||||||
},
|
},
|
||||||
material() {
|
material() {
|
||||||
if(this.activeTexture) {
|
if (this.activeTexture) {
|
||||||
return this.activeTexture.name
|
return this.activeTexture.name
|
||||||
}
|
}
|
||||||
return this.articleData.material
|
return this.articleData.material
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
ModelViewer,
|
ModelViewer,
|
||||||
MaterialSwitcher
|
MaterialSwitcher,
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import Vuex from 'vuex'
|
import Vuex from 'vuex'
|
||||||
import axios from "axios";
|
import axios from 'axios'
|
||||||
|
|
||||||
Vue.use(Vuex)
|
Vue.use(Vuex)
|
||||||
|
|
||||||
export default new Vuex.Store({
|
export default new Vuex.Store({
|
||||||
state: {
|
state: {
|
||||||
articleData: {},
|
articleData: {},
|
||||||
activeTexture: undefined
|
activeTexture: undefined,
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
setArticleData(store, data) {
|
setArticleData(store, data) {
|
||||||
|
|
@ -15,17 +15,20 @@ export default new Vuex.Store({
|
||||||
},
|
},
|
||||||
setActiveTexture(store, data) {
|
setActiveTexture(store, data) {
|
||||||
store.activeTexture = data
|
store.activeTexture = data
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
fetchArticleData({ commit }) {
|
fetchArticleData({ commit }) {
|
||||||
let path = window.location.pathname
|
let path = window.location.pathname
|
||||||
axios.get(path.replace(/modell\//, '') + 'index.json').then(response => {
|
axios
|
||||||
commit('setArticleData', response.data)
|
.get(path.replace(/modell\//, '') + 'index.json')
|
||||||
}).catch(error => console.log(error))
|
.then(response => {
|
||||||
|
commit('setArticleData', response.data)
|
||||||
|
})
|
||||||
|
.catch(error => console.log(error))
|
||||||
},
|
},
|
||||||
updateActiveTexture({commit}, data) {
|
updateActiveTexture({ commit }, data) {
|
||||||
commit('setActiveTexture', data)
|
commit('setActiveTexture', data)
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
Hello World
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'app'
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,6 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<ul class="list-unstyled material-switcher" v-if="modelData">
|
<ul class="list-unstyled material-switcher" v-if="modelData">
|
||||||
<material-switcher-item v-for="texture of modelData.textures" :key="texture.url" :texture="texture"/>
|
<material-switcher-item
|
||||||
|
v-for="texture of modelData.textures"
|
||||||
|
:key="texture.url"
|
||||||
|
:texture="texture"
|
||||||
|
/>
|
||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -8,12 +12,12 @@
|
||||||
import MaterialSwitcherItem from './MaterialSwitcherItem.vue'
|
import MaterialSwitcherItem from './MaterialSwitcherItem.vue'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
materialSwitcherItem: MaterialSwitcherItem
|
materialSwitcherItem: MaterialSwitcherItem,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
modelData: {
|
modelData: {
|
||||||
type: Object,
|
type: Object,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<li><img class="texture-preview" :src="texture.url" :alt="texture.name" @click="applyTexture"></li>
|
<li>
|
||||||
|
<img
|
||||||
|
class="texture-preview"
|
||||||
|
:src="texture.url"
|
||||||
|
:alt="texture.name"
|
||||||
|
@click="applyTexture"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -7,14 +14,14 @@ export default {
|
||||||
props: {
|
props: {
|
||||||
texture: {
|
texture: {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true
|
required: true,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
applyTexture() {
|
applyTexture() {
|
||||||
this.$store.dispatch('updateActiveTexture', this.texture)
|
this.$store.dispatch('updateActiveTexture', this.texture)
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -29,7 +36,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
li:last-child {
|
li:last-child {
|
||||||
padding: 0 0 0 2px
|
padding: 0 0 0 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
|
|
|
||||||
|
|
@ -6,168 +6,189 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { WebGLRenderer, PerspectiveCamera, Scene, AmbientLight, DirectionalLight, PCFShadowMap, LinearToneMapping, TextureLoader } from 'three'
|
import {
|
||||||
|
WebGLRenderer,
|
||||||
|
PerspectiveCamera,
|
||||||
|
Scene,
|
||||||
|
AmbientLight,
|
||||||
|
DirectionalLight,
|
||||||
|
PCFShadowMap,
|
||||||
|
LinearToneMapping,
|
||||||
|
TextureLoader,
|
||||||
|
} from 'three'
|
||||||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
|
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
|
||||||
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
|
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
|
||||||
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
|
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
|
||||||
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
|
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
|
||||||
import { mapState } from 'vuex'
|
import { mapState } from 'vuex'
|
||||||
export default {
|
export default {
|
||||||
name: 'model-viewer',
|
name: 'model-viewer',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
renderer: null,
|
renderer: null,
|
||||||
scene: null,
|
scene: null,
|
||||||
camera: null,
|
camera: null,
|
||||||
model: null,
|
model: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
modelData: Object,
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.setup()
|
||||||
|
this.loadGltf(this.modelData.url)
|
||||||
|
this.render()
|
||||||
|
this.update()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setup() {
|
||||||
|
this.setupCamera()
|
||||||
|
this.setupScene()
|
||||||
|
this.setupRenderer()
|
||||||
|
this.setupLight()
|
||||||
|
this.setupControls()
|
||||||
|
},
|
||||||
|
setupControls() {
|
||||||
|
this.controls = new OrbitControls(this.camera, this.renderer.domElement)
|
||||||
|
this.controls.addEventListener('change', this.render)
|
||||||
|
this.controls.addEventListener('touchstart', this.render)
|
||||||
|
this.controls.enableDamping = false
|
||||||
|
this.controls.dampingFactor = 1.5
|
||||||
|
this.controls.screenSpacePanning = false
|
||||||
|
this.controls.enableZoom = false
|
||||||
|
this.controls.enablePan = false
|
||||||
|
this.controls.minPolarAngle = Math.PI / 8
|
||||||
|
this.controls.maxPolarAngle = Math.PI - Math.PI / 4
|
||||||
|
this.controls.minAzimuthAngle = -(Math.PI / 4)
|
||||||
|
this.controls.maxAzimuthAngle = Math.PI / 4
|
||||||
|
this.controls.update()
|
||||||
|
},
|
||||||
|
setupScene() {
|
||||||
|
this.scene = new Scene()
|
||||||
|
},
|
||||||
|
getWidth() {
|
||||||
|
let el = this.$el.parentElement || 0
|
||||||
|
if (el) {
|
||||||
|
console.log(el.offsetWidth)
|
||||||
|
return el.offsetWidth
|
||||||
}
|
}
|
||||||
|
return 0
|
||||||
},
|
},
|
||||||
props: {
|
getHeight() {
|
||||||
modelData: Object
|
let el = this.$el.parentElement || 0
|
||||||
|
if (el) {
|
||||||
|
return el.offsetWidth / 1.333333
|
||||||
|
}
|
||||||
|
return 0
|
||||||
},
|
},
|
||||||
mounted() {
|
getAspectRatio() {
|
||||||
this.setup()
|
return this.getWidth() / this.getHeight()
|
||||||
this.loadGltf(this.modelData.url)
|
|
||||||
this.render()
|
|
||||||
this.update()
|
|
||||||
},
|
},
|
||||||
methods: {
|
setupCamera() {
|
||||||
setup() {
|
this.camera = new PerspectiveCamera(60, this.getAspectRatio(), 0.1, 300)
|
||||||
this.setupCamera()
|
this.camera.position.z = 0.9
|
||||||
this.setupScene()
|
this.camera.position.y = 0.3
|
||||||
this.setupRenderer()
|
},
|
||||||
this.setupLight()
|
setupLight() {
|
||||||
this.setupControls()
|
var directionalLight = new DirectionalLight(0xffffff, 0.5)
|
||||||
},
|
directionalLight.position.set(-30, -30, -30)
|
||||||
setupControls() {
|
this.scene.add(directionalLight)
|
||||||
this.controls = new OrbitControls( this.camera, this.renderer.domElement );
|
var directionalLight2 = new DirectionalLight(0xffffff, 1.6)
|
||||||
this.controls.addEventListener( 'change', this.render );
|
directionalLight2.position.set(3, 10, 10)
|
||||||
this.controls.addEventListener( 'touchstart', this.render );
|
this.scene.add(directionalLight2)
|
||||||
this.controls.enableDamping = false;
|
},
|
||||||
this.controls.dampingFactor = 1.5;
|
setupRenderer() {
|
||||||
this.controls.screenSpacePanning = false;
|
this.renderer = new WebGLRenderer({
|
||||||
this.controls.enableZoom = false;
|
canvas: this.$refs.renderer,
|
||||||
this.controls.enablePan = false;
|
antialias: true,
|
||||||
this.controls.minPolarAngle = Math.PI / 8;
|
alpha: true,
|
||||||
this.controls.maxPolarAngle = Math.PI - Math.PI / 4;
|
})
|
||||||
this.controls.minAzimuthAngle = -(Math.PI / 4);
|
this.renderer.setClearColor(0xffffff)
|
||||||
this.controls.maxAzimuthAngle = Math.PI / 4;
|
this.renderer.setClearAlpha(0)
|
||||||
this.controls.update()
|
this.renderer.setSize(this.getWidth(), this.getHeight())
|
||||||
},
|
this.renderer.gammaOutput = true
|
||||||
setupScene() {
|
this.renderer.gammaFactor = 2.2
|
||||||
this.scene = new Scene()
|
this.renderer.toneMapping = LinearToneMapping
|
||||||
},
|
this.renderer.toneMappingExposure = Math.pow(0.94, 5.0)
|
||||||
getWidth() {
|
this.renderer.shadowMap.enabled = true
|
||||||
let el = this.$el.parentElement || 0
|
this.renderer.shadowMap.type = PCFShadowMap
|
||||||
if (el) {
|
window.addEventListener('resize', this.setCanvasSize)
|
||||||
console.log(el.offsetWidth)
|
},
|
||||||
return el.offsetWidth
|
loadObjMtl(objPath, mtlPath) {
|
||||||
}
|
var objLoader = new OBJLoader()
|
||||||
return 0
|
objLoader.setPath('/')
|
||||||
},
|
var mtlLoader = new MTLLoader()
|
||||||
getHeight() {
|
mtlLoader.setPath('/')
|
||||||
let el = this.$el.parentElement || 0
|
|
||||||
if (el) {
|
|
||||||
return el.offsetWidth / 1.333333;
|
|
||||||
}
|
|
||||||
return 0
|
|
||||||
},
|
|
||||||
getAspectRatio() {
|
|
||||||
return this.getWidth() / this.getHeight()
|
|
||||||
},
|
|
||||||
setupCamera() {
|
|
||||||
this.camera = new PerspectiveCamera(60, this.getAspectRatio(), 0.1, 300)
|
|
||||||
this.camera.position.z = 0.9;
|
|
||||||
this.camera.position.y = 0.3
|
|
||||||
},
|
|
||||||
setupLight() {
|
|
||||||
var directionalLight = new DirectionalLight(0xffffff, 0.5)
|
|
||||||
directionalLight.position.set(-30, -30 ,-30)
|
|
||||||
this.scene.add(directionalLight)
|
|
||||||
var directionalLight2 = new DirectionalLight(0xffffff, 1.6)
|
|
||||||
directionalLight2.position.set(3, 10 ,10)
|
|
||||||
this.scene.add(directionalLight2)
|
|
||||||
},
|
|
||||||
setupRenderer() {
|
|
||||||
this.renderer = new WebGLRenderer({canvas: this.$refs.renderer, antialias: true, alpha: true})
|
|
||||||
this.renderer.setClearColor(0xffffff)
|
|
||||||
this.renderer.setClearAlpha(0)
|
|
||||||
this.renderer.setSize(this.getWidth(), this.getHeight())
|
|
||||||
this.renderer.gammaOutput = true;
|
|
||||||
this.renderer.gammaFactor = 2.2
|
|
||||||
this.renderer.toneMapping = LinearToneMapping;
|
|
||||||
this.renderer.toneMappingExposure = Math.pow( 0.94, 5.0 );
|
|
||||||
this.renderer.shadowMap.enabled = true;
|
|
||||||
this.renderer.shadowMap.type = PCFShadowMap;
|
|
||||||
window.addEventListener('resize', this.setCanvasSize)
|
|
||||||
},
|
|
||||||
loadObjMtl(objPath, mtlPath) {
|
|
||||||
var objLoader = new OBJLoader()
|
|
||||||
objLoader.setPath('/')
|
|
||||||
var mtlLoader = new MTLLoader()
|
|
||||||
mtlLoader.setPath('/')
|
|
||||||
|
|
||||||
|
new Promise((resolve, reject) => {
|
||||||
new Promise((resolve, reject) => {
|
mtlLoader.load(
|
||||||
mtlLoader.load(mtlPath, materials => resolve(materials), undefined, error => reject(error))
|
mtlPath,
|
||||||
}).then((materials) => {
|
materials => resolve(materials),
|
||||||
|
undefined,
|
||||||
|
error => reject(error)
|
||||||
|
)
|
||||||
|
})
|
||||||
|
.then(materials => {
|
||||||
materials.preload()
|
materials.preload()
|
||||||
objLoader.setMaterials(materials)
|
objLoader.setMaterials(materials)
|
||||||
objLoader.load(objPath, this.addObject)
|
objLoader.load(objPath, this.addObject)
|
||||||
this.render()
|
this.render()
|
||||||
}).catch(error => console.log(error))
|
|
||||||
},
|
|
||||||
loadGltf(gltfPath) {
|
|
||||||
var gltfLoader = new GLTFLoader()
|
|
||||||
new Promise((resolve, reject) => {
|
|
||||||
gltfLoader.load(gltfPath, gltf => resolve(gltf), undefined, error => reject(error))
|
|
||||||
})
|
})
|
||||||
.then(gltf => {
|
.catch(error => console.log(error))
|
||||||
this.readGLTF(gltf)
|
},
|
||||||
})
|
loadGltf(gltfPath) {
|
||||||
.catch(error => console.log(error))
|
var gltfLoader = new GLTFLoader()
|
||||||
},
|
new Promise((resolve, reject) => {
|
||||||
changeTexture(texture) {
|
gltfLoader.load(gltfPath, gltf => resolve(gltf), undefined, error =>
|
||||||
new Promise(resolve => {
|
reject(error)
|
||||||
new TextureLoader().load(texture.url, (data) => resolve(data));
|
)
|
||||||
}).then(data => {
|
})
|
||||||
this.$store.dispatch('updateActiveTexture', texture)
|
.then(gltf => {
|
||||||
this.model.material.map = data
|
this.readGLTF(gltf)
|
||||||
this.update()
|
|
||||||
})
|
})
|
||||||
},
|
.catch(error => console.log(error))
|
||||||
readGLTF(gltf) {
|
|
||||||
gltf.scene.position.x = -0.5
|
|
||||||
gltf.scene.position.y = -0.3
|
|
||||||
gltf.scene.rotation.set(0, 0, 0)
|
|
||||||
this.scene.add(gltf.scene)
|
|
||||||
this.model = gltf.scene.children[0]
|
|
||||||
//this.changeTexture('/katalog/urnengrabanlage/abdeckung/model/granit.jpg')
|
|
||||||
this.render()
|
|
||||||
},
|
|
||||||
setCanvasSize() {
|
|
||||||
this.renderer.setSize(this.getWidth(), this.getHeight())
|
|
||||||
this.camera.aspepct = this.getAspectRatio()
|
|
||||||
this.camera.updateProjectionMatrix()
|
|
||||||
this.render()
|
|
||||||
},
|
|
||||||
render() {
|
|
||||||
this.renderer.render(this.scene, this.camera)
|
|
||||||
},
|
|
||||||
update() {
|
|
||||||
this.controls.update()
|
|
||||||
this.render()
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
computed: {
|
changeTexture(texture) {
|
||||||
...mapState(['activeTexture'])
|
new Promise(resolve => {
|
||||||
|
new TextureLoader().load(texture.url, data => resolve(data))
|
||||||
|
}).then(data => {
|
||||||
|
this.$store.dispatch('updateActiveTexture', texture)
|
||||||
|
this.model.material.map = data
|
||||||
|
this.update()
|
||||||
|
})
|
||||||
},
|
},
|
||||||
watch: {
|
readGLTF(gltf) {
|
||||||
activeTexture(value) {
|
gltf.scene.position.x = -0.5
|
||||||
console.log('hello', value)
|
gltf.scene.position.y = -0.3
|
||||||
this.changeTexture(value)
|
gltf.scene.rotation.set(0, 0, 0)
|
||||||
}
|
this.scene.add(gltf.scene)
|
||||||
}
|
this.model = gltf.scene.children[0]
|
||||||
|
//this.changeTexture('/katalog/urnengrabanlage/abdeckung/model/granit.jpg')
|
||||||
|
this.render()
|
||||||
|
},
|
||||||
|
setCanvasSize() {
|
||||||
|
this.renderer.setSize(this.getWidth(), this.getHeight())
|
||||||
|
this.camera.aspepct = this.getAspectRatio()
|
||||||
|
this.camera.updateProjectionMatrix()
|
||||||
|
this.render()
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
this.renderer.render(this.scene, this.camera)
|
||||||
|
},
|
||||||
|
update() {
|
||||||
|
this.controls.update()
|
||||||
|
this.render()
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(['activeTexture']),
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
activeTexture(value) {
|
||||||
|
console.log('hello', value)
|
||||||
|
this.changeTexture(value)
|
||||||
|
},
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -176,19 +197,18 @@ export default {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
canvas {
|
canvas {
|
||||||
background: rgba(0,0,0,0)
|
background: rgba(0, 0, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mouseover {
|
.mouseover {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top:0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
i {
|
i {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
import Hello from './Hello.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
hello: Hello
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue