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>
|
||||
<html lang="{{ .Site.LanguageCode }}">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>{{- block "title" . -}}{{- .Site.Title -}}{{- end -}}</title>
|
||||
{{ .Hugo.Generator }}
|
||||
{{- partial "schema/site.html" . -}}
|
||||
{{- if (and (eq .Kind "page") (eq .Type "news")) -}}
|
||||
{{- partial "schema/post.html" . -}}
|
||||
{{- end -}}
|
||||
{{- if (and (eq .Kind "page") (ne .Type "news")) -}}
|
||||
{{- partial "schema/article.html" . -}}
|
||||
{{- end -}}
|
||||
{{- if (eq .Kind "section") -}}
|
||||
{{- partial "schema/collectionpage.html" . -}}
|
||||
{{- end -}}
|
||||
{{ partial "part/style.html" (dict "ctx" . "path" "css/style.css" )}}
|
||||
<link rel="shortcut icon" href="/img/favicon.ico">
|
||||
<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-large.png" sizes="96x96">
|
||||
<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-TileImage" content="/img/ms-tile.png">
|
||||
{{- block "head" . -}}{{- end -}}
|
||||
<body>
|
||||
<div class="fixed-background background-{{ with .Params.background }}{{- . -}}{{- else -}}default{{- end -}}"></div>
|
||||
<div id="header" class="large">
|
||||
<div class="container">
|
||||
<div class="flex row">
|
||||
<div class="col-xs-12">
|
||||
<div class="navbar-logo padding">
|
||||
<a href="{{.Site.BaseURL }}">
|
||||
<picture>
|
||||
<source srcset="/img/logo.svg"
|
||||
media="(min-width: 48rem)">
|
||||
<img src="/img/logo-klein.svg" alt="Logo der Firma Neff Stein-Design" />
|
||||
</picture>
|
||||
</a>
|
||||
</div>
|
||||
<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>
|
||||
<div class="navbar-container">
|
||||
<nav>
|
||||
<ul>
|
||||
{{- $currentPage := . -}}
|
||||
{{- range .Site.Menus.main -}}
|
||||
{{- if .HasChildren -}}
|
||||
<li class="{{ if $currentPage.HasMenuCurrent .Menu . }}active{{ end }}">
|
||||
<a href="{{ .URL }}">
|
||||
{{ .Pre }}
|
||||
<span>{{ .Name }}</span>
|
||||
</a>
|
||||
<ul class="sub-menu">
|
||||
{{- range .Children -}}
|
||||
{{ partial "menu-item.html" (dict "item" . "ctx" $currentPage)}}
|
||||
{{- end -}}
|
||||
</ul>
|
||||
</li>
|
||||
{{- else -}}
|
||||
{{ partial "menu-item.html" (dict "item" . "ctx" $currentPage)}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>{{- block "title" . -}}{{- .Site.Title -}}{{- end -}}</title>
|
||||
{{ .Hugo.Generator }}
|
||||
{{- partial "schema/site.html" . -}}
|
||||
{{- if (and (eq .Kind "page") (eq .Type "news")) -}}
|
||||
{{- partial "schema/post.html" . -}}
|
||||
{{- end -}}
|
||||
{{- if (and (eq .Kind "page") (ne .Type "news")) -}}
|
||||
{{- partial "schema/article.html" . -}}
|
||||
{{- end -}}
|
||||
{{- if (eq .Kind "section") -}}
|
||||
{{- partial "schema/collectionPage.html" . -}}
|
||||
{{- end -}}
|
||||
{{ partial "part/style.html" (dict "ctx" . "path" "css/style.css" )}}
|
||||
<link rel="shortcut icon" href="/img/favicon.ico">
|
||||
<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-large.png" sizes="96x96">
|
||||
<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-TileImage" content="/img/ms-tile.png">
|
||||
{{- block "head" . -}}{{- end -}}
|
||||
|
||||
<body>
|
||||
<div class="fixed-background background-{{ with .Params.background }}{{- . -}}{{- else -}}default{{- end -}}"></div>
|
||||
<div id="header" class="large">
|
||||
<div class="container">
|
||||
<div class="flex row">
|
||||
<div class="col-xs-12">
|
||||
<div class="navbar-logo padding">
|
||||
<a href="{{.Site.BaseURL }}">
|
||||
<picture>
|
||||
<source srcset="/img/logo.svg" media="(min-width: 48rem)">
|
||||
<img src="/img/logo-klein.svg" alt="Logo der Firma Neff Stein-Design" />
|
||||
</picture>
|
||||
</a>
|
||||
</div>
|
||||
<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>
|
||||
<div class="navbar-container">
|
||||
<nav>
|
||||
<ul>
|
||||
{{- $currentPage := . -}}
|
||||
{{- range .Site.Menus.main -}}
|
||||
{{- if .HasChildren -}}
|
||||
<li class="{{ if $currentPage.HasMenuCurrent .Menu . }}active{{ end }}">
|
||||
<a href="{{ .URL }}">
|
||||
{{ .Pre }}
|
||||
<span>{{ .Name }}</span>
|
||||
</a>
|
||||
<ul class="sub-menu">
|
||||
{{- range .Children -}}
|
||||
{{ partial "menu-item.html" (dict "item" . "ctx" $currentPage)}}
|
||||
{{- end -}}
|
||||
</ul>
|
||||
</li>
|
||||
{{- else -}}
|
||||
{{ partial "menu-item.html" (dict "item" . "ctx" $currentPage)}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{- if eq .Kind "home" -}}
|
||||
{{- $section := $.Site.GetPage "section" "aktionen" -}}
|
||||
{{ $page := "" }}
|
||||
{{- with $section.Pages }}
|
||||
{{- $page = index . 0 -}}
|
||||
{{ end }}
|
||||
{{- with $page -}}
|
||||
<section id="banner">
|
||||
<div class="container">
|
||||
<div id="banner-container" class="col-xs-12">
|
||||
<h1>{{ .Title }}</h1>
|
||||
<p>{{ .Params.description }}</p>
|
||||
<p><a href="{{ .Permalink }}" class="btn btn-primary">{{ i18n "more-info" }}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{- end }}
|
||||
</div>
|
||||
</div>
|
||||
{{- if eq .Kind "home" -}}
|
||||
{{- $section := $.Site.GetPage "section" "aktionen" -}}
|
||||
{{ $page := "" }}
|
||||
{{- with $section.Pages }}
|
||||
{{- $page = index . 0 -}}
|
||||
{{ end }}
|
||||
{{- with $page -}}
|
||||
<section id="banner">
|
||||
<div class="container">
|
||||
<div id="banner-container" class="col-xs-12">
|
||||
<h1>{{ .Title }}</h1>
|
||||
<p>{{ .Params.description }}</p>
|
||||
<p><a href="{{ .Permalink }}" class="btn btn-primary">{{ i18n "more-info" }}</a></p>
|
||||
</div>
|
||||
</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 -}}
|
||||
<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 -}}
|
||||
</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 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>
|
||||
{{- end }}
|
||||
<div class="container bottom">
|
||||
<div clss="row" id="footer-social" class="padding">
|
||||
<div class="col-xs-12">
|
||||
{{- partial "social.html" . -}}
|
||||
</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 class="row">
|
||||
{{- $site := . }}
|
||||
{{- range .Site.Data.kontakt.kontakt -}}
|
||||
{{- partial "address.html" (dict "address" . "ctx" $site) -}}
|
||||
{{- end -}}
|
||||
</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>
|
||||
<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 id="lightbox-section">
|
||||
</div>
|
||||
{{- partial "templates/lightbox.html" . -}}
|
||||
<script>
|
||||
var $googleAnalytics = '{{ .Site.GoogleAnalytics }}';
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lightbox-section">
|
||||
</div>
|
||||
{{- partial "templates/lightbox.html" . -}}
|
||||
<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/app.bundle.js")}}
|
||||
{{- block "scripts" . -}}{{- end -}}
|
||||
</body>
|
||||
</html>
|
||||
{{ partial "part/script.html" (dict "ctx" . "path" "js/common.bundle.js")}}
|
||||
{{ partial "part/script.html" (dict "ctx" . "path" "js/app.bundle.js")}}
|
||||
{{- block "scripts" . -}}{{- end -}}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,21 +1,24 @@
|
|||
{{- $currentPage := . -}}
|
||||
<li class="col-sm-12">
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
{{- range $.Resources.ByType "image" -}}
|
||||
{{- if .Params.featured -}}
|
||||
{{- $orig := . -}}
|
||||
{{ partial "figure.html" (dict "ctx" $currentPage "image" . "lightbox" false "class" "left round small")}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
<a href="{{ .RelPermalink }}"><h4>{{ .Title }}</h4></a>
|
||||
{{ .Summary }}
|
||||
{{- if .Truncated -}}
|
||||
<a href="{{ .RelPermalink }}">{{ i18n "read-more" }}…</a>
|
||||
{{- end -}}
|
||||
<footer>
|
||||
<time class="list-item-lastmod" datetime='{{ .Lastmod.Format "2006-01-02T15:04-07:00" }}'>{{ .Lastmod.Format "02.01.2006 15:04" }}</time>
|
||||
</footer>
|
||||
</div>
|
||||
{{- range $.Resources.ByType "image" -}}
|
||||
{{- if .Params.featured -}}
|
||||
{{- $orig := . -}}
|
||||
{{ partial "figure.html" (dict "ctx" $currentPage "image" . "lightbox" false "class" "left round small")}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
<a href="{{ .RelPermalink }}">
|
||||
<h4>{{ .Title }}</h4>
|
||||
</a>
|
||||
{{ .Summary }}
|
||||
{{- if .Truncated -}}
|
||||
<a href="{{ .RelPermalink }}">{{ i18n "read-more" }}…</a>
|
||||
{{- end -}}
|
||||
<footer>
|
||||
<time class="list-item-lastmod"
|
||||
datetime='{{ .Lastmod.Format "2006-01-02T15:04-07:00" }}'>{{ .Lastmod.Format "02.01.2006 15:04" }}</time>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
|
@ -1,20 +1,20 @@
|
|||
{{- define "title" -}}
|
||||
{{ .Title }} • {{ .Site.Title }}
|
||||
{{ .Title }} • {{ .Site.Title }}
|
||||
{{- end -}}
|
||||
|
||||
{{ define "main" }}
|
||||
<main id="list">
|
||||
{{- with .Content -}}
|
||||
<div class="content row">
|
||||
<div class="col-xs-12">
|
||||
{{ . }}
|
||||
</div>
|
||||
</div>
|
||||
{{- with .Content -}}
|
||||
<div class="content row">
|
||||
<div class="col-xs-12">
|
||||
{{ . }}
|
||||
</div>
|
||||
</div>
|
||||
{{- end -}}
|
||||
<ul class="list-unstyled row">
|
||||
{{- range .Pages -}}
|
||||
{{- .Render "li" -}}
|
||||
{{- end -}}
|
||||
<ul class="list-unstyled row">
|
||||
{{- range .Pages -}}
|
||||
{{- .Render "li" -}}
|
||||
{{- end -}}
|
||||
</ul>
|
||||
</ul>
|
||||
</main>
|
||||
{{ end }}
|
||||
|
|
@ -1,31 +1,32 @@
|
|||
{{- define "title" -}}
|
||||
{{ .Title }} • {{ .Site.Title }}
|
||||
{{ .Title }} • {{ .Site.Title }}
|
||||
{{- end -}}
|
||||
|
||||
{{- define "main" -}}
|
||||
<main class="row" id="single">
|
||||
<article class="col-sm-12">
|
||||
<header class="flex padding">
|
||||
<h1>{{ .Title }}</h1>
|
||||
<h1>{{ .Title }}</h1>
|
||||
</header>
|
||||
{{- $resources := .Resources -}}
|
||||
{{- with .Content -}}
|
||||
<div class="content row">
|
||||
<div class="col-sm-12">
|
||||
{{- range $.Resources.ByType "image" -}}
|
||||
{{- if .Params.featured -}}
|
||||
{{- $orig := . -}}
|
||||
{{ partial "figure.html" (dict "ctx" . "image" . "lightbox" true "class" "featured rounded left" "showTitle" true "showDescription" true)}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{ . }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content row">
|
||||
<div class="col-sm-12">
|
||||
{{- range $.Resources.ByType "image" -}}
|
||||
{{- if .Params.featured -}}
|
||||
{{- $orig := . -}}
|
||||
{{ partial "figure.html" (dict "ctx" . "image" . "lightbox" true "class" "featured rounded left" "showTitle" true "showDescription" true)}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{ . }}
|
||||
</div>
|
||||
</div>
|
||||
{{- end -}}
|
||||
<footer class="single-footer padding">
|
||||
<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>
|
||||
</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>
|
||||
</p>
|
||||
</footer>
|
||||
</article>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -8,15 +8,16 @@
|
|||
{{- $images = .Resources.ByType "image" -}}
|
||||
{{- end -}}
|
||||
{{- range $images -}}
|
||||
{{ if .Params.featured }}
|
||||
{{ $image = . }}
|
||||
{{ end }}
|
||||
{{ if .Params.featured }}
|
||||
{{ $image = . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if $image }}
|
||||
{{ else }}
|
||||
{{ $image = index $images 0 }}
|
||||
{{ $image = index $images 0 }}
|
||||
{{ end }}
|
||||
{{ 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>
|
||||
{{ end }}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
{{- define "title" -}}
|
||||
{{ .Title }} • {{ .Site.Title }}
|
||||
{{ .Title }} • {{ .Site.Title }}
|
||||
{{- end -}}
|
||||
|
||||
{{- define "main" -}}
|
||||
|
|
@ -11,14 +11,18 @@
|
|||
<div class="content flex">
|
||||
<div class="padding">
|
||||
{{- with .Resources.GetMatch "bilder/*" -}}
|
||||
{{- $orig := . -}}
|
||||
{{ partial "figure.html" (dict "ctx" . "image" . "lightbox" true "class" "featured left wide" "showTitle" false "showDescription" false)}}
|
||||
{{- $orig := . -}}
|
||||
{{ partial "figure.html" (dict "ctx" . "image" . "lightbox" true "class" "featured left wide" "showTitle" false "showDescription" false)}}
|
||||
{{- 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>
|
||||
{{ with .Params.material }}<p class="material">Material: {{ . }}</p>{{ end }}
|
||||
{{ with .Params.ornament }}<p class="ornament">Ornament: {{ . }}</p>{{ end }}
|
||||
{{ with .Params.description }}<p class="description">{{ . }}</p>{{ end }}
|
||||
{{ with .Params.material }}
|
||||
<p class="material">Material: {{ . }}</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>
|
||||
{{ with .Content }}
|
||||
{{ . }}
|
||||
|
|
@ -30,11 +34,11 @@
|
|||
{{- end -}}
|
||||
|
||||
{{- define "head" -}}
|
||||
{{ partial "part/style.html" (dict "ctx" . "path" "css/catalog.css")}}
|
||||
{{ partial "part/style.html" (dict "ctx" . "path" "css/catalog.css")}}
|
||||
{{- end -}}
|
||||
|
||||
{{- define "scripts" -}}
|
||||
{{ 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/catalog.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/catalog.bundle.js")}}
|
||||
{{- end -}}
|
||||
|
|
@ -8,15 +8,16 @@
|
|||
{{- $images = .Resources.ByType "image" -}}
|
||||
{{- end -}}
|
||||
{{- range $images -}}
|
||||
{{ if .Params.featured }}
|
||||
{{ $image = . }}
|
||||
{{ end }}
|
||||
{{ if .Params.featured }}
|
||||
{{ $image = . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if $image }}
|
||||
{{ else }}
|
||||
{{ $image = index $images 0 }}
|
||||
{{ $image = index $images 0 }}
|
||||
{{ end }}
|
||||
{{ 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>
|
||||
{{ end }}
|
||||
|
|
@ -1,26 +1,26 @@
|
|||
{{- define "title" -}}
|
||||
{{ .Title }} • {{ .Site.Title }}
|
||||
{{ .Title }} • {{ .Site.Title }}
|
||||
{{- end -}}
|
||||
|
||||
{{ define "main" }}
|
||||
<main id="list">
|
||||
<div class="row">
|
||||
<h1 class="col-xs-12">{{ .Title }}</h1>
|
||||
</div>
|
||||
<ul class="list-unstyled row">
|
||||
{{- range .Sections -}}
|
||||
{{- .Render "li" -}}
|
||||
{{- end -}}
|
||||
{{- range .Pages -}}
|
||||
{{- .Render "li" -}}
|
||||
{{- end -}}
|
||||
</ul>
|
||||
{{- with .Content -}}
|
||||
<div class="content row">
|
||||
<div class="col-sm-12">
|
||||
{{ . }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h1 class="col-xs-12">{{ .Title }}</h1>
|
||||
</div>
|
||||
<ul class="list-unstyled row">
|
||||
{{- range .Sections -}}
|
||||
{{- .Render "li" -}}
|
||||
{{- end -}}
|
||||
{{- range .Pages -}}
|
||||
{{- .Render "li" -}}
|
||||
{{- end -}}
|
||||
</ul>
|
||||
{{- with .Content -}}
|
||||
<div class="content row">
|
||||
<div class="col-sm-12">
|
||||
{{ . }}
|
||||
</div>
|
||||
</div>
|
||||
{{- end -}}
|
||||
</main>
|
||||
{{ end }}
|
||||
|
|
@ -1,131 +1,136 @@
|
|||
{{ define "content" }}
|
||||
<div id="index">
|
||||
<div class="container transparent">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-offset-sm-8 col-sm-4" id="index-short-contact">
|
||||
<div class="phone">
|
||||
<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 id="index">
|
||||
<div class="container transparent">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-offset-sm-8 col-sm-4" id="index-short-contact">
|
||||
<div class="phone">
|
||||
<i class="fa fa-phone"></i>: {{ (index .Site.Data.kontakt.kontakt 0).telephone }}
|
||||
</div>
|
||||
|
||||
{{- 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 class="mail">
|
||||
{{- $email := (index .Site.Data.kontakt.kontakt 0).email }}
|
||||
<i class="fa fa-envelope"></i>: <a href="mailto:{{ $email }}">{{ $email }}</a>
|
||||
</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 class="social">
|
||||
{{ partial "social.html" . }}
|
||||
</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>
|
||||
|
||||
{{- 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">
|
||||
<header>
|
||||
<h3>{{ .address.address.addressLocality }}</h3>
|
||||
</header>
|
||||
<address class="address">
|
||||
{{ with .address.name }}<span>{{ . }}</span>{{ end }}
|
||||
<div>
|
||||
{{ with .address.address.streetAddress }}<span>{{ . }}</span><br>{{ end }}
|
||||
{{ with .address.address.postalCode }}<span>{{ . }}</span>{{ end }}
|
||||
{{ with .address.address.addressLocality }}<span>{{ . }}</span><br>{{ end }}
|
||||
{{ with .address.address.addressRegion }}<span>{{ . }}</span><br>{{ end }}
|
||||
{{ with .address.address.addressCountry }}<span>{{ i18n . }}</span><br>{{ end }}
|
||||
</div>
|
||||
<p>
|
||||
{{ with .address.telephone }}<em>{{ i18n "telephone" }}:</em> <span>{{ . }}</span><br>{{ end }}
|
||||
{{ with .address.faxNumber }}<em>{{ i18n "fax" }}:</em> <span>{{ . }}</span>{{ end }}<br>
|
||||
</p>
|
||||
{{ with .address.openingHours }}
|
||||
<p>
|
||||
<em>{{ i18n "openingHours" }}:</em><br>
|
||||
{{- range . -}}
|
||||
{{- $split := split . " " }}
|
||||
{{- $daysStr := index (split (index $split 0) " ") 0 }}
|
||||
{{- $hoursStr := index (split (index $split 1) " ") 0 }}
|
||||
{{- $days := split $daysStr "," }}
|
||||
{{- $localizedDays := slice }}
|
||||
{{- range $idx, $day := $days -}}
|
||||
{{- if in . "-" -}}
|
||||
{{- $innerDays := split . "-" -}}
|
||||
{{- $innerLocalizedDays := slice -}}
|
||||
{{- range $innerDays -}}
|
||||
{{- $innerLocalizedDays = $innerLocalizedDays | append (i18n .) -}}
|
||||
{{- end -}}
|
||||
{{- $dayRange := delimit $innerLocalizedDays "-" -}}
|
||||
{{- $dayRange -}}
|
||||
{{- $localizedDays = $localizedDays | append (i18n $dayRange) -}}
|
||||
{{- else -}}
|
||||
{{- $localizedDays = $localizedDays | append (i18n $day) -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{ delimit $localizedDays ", " }} {{ $hoursStr }}<br>
|
||||
{{- end -}}
|
||||
</p>
|
||||
{{- end -}}
|
||||
{{ partial "schema/localbusiness.html" (dict "contact" .address "ctx" .ctx "short" false) }}
|
||||
</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>
|
||||
<header>
|
||||
<h3>{{ .address.address.addressLocality }}</h3>
|
||||
</header>
|
||||
<address class="address">
|
||||
{{ with .address.name }}<span>{{ . }}</span>{{ end }}
|
||||
<div>
|
||||
{{ with .address.address.streetAddress }}<span>{{ . }}</span><br>{{ end }}
|
||||
{{ with .address.address.postalCode }}<span>{{ . }}</span>{{ end }}
|
||||
{{ with .address.address.addressLocality }}<span>{{ . }}</span><br>{{ end }}
|
||||
{{ with .address.address.addressRegion }}<span>{{ . }}</span><br>{{ end }}
|
||||
{{ with .address.address.addressCountry }}<span>{{ i18n . }}</span><br>{{ end }}
|
||||
</div>
|
||||
<p>
|
||||
{{ with .address.telephone }}<em>{{ i18n "telephone" }}:</em> <span>{{ . }}</span><br>{{ end }}
|
||||
{{ with .address.faxNumber }}<em>{{ i18n "fax" }}:</em> <span>{{ . }}</span>{{ end }}<br>
|
||||
</p>
|
||||
{{ with .address.openingHours }}
|
||||
<p>
|
||||
<em>{{ i18n "openingHours" }}:</em><br>
|
||||
{{- range . -}}
|
||||
{{- $split := split . " " }}
|
||||
{{- $daysStr := index (split (index $split 0) " ") 0 }}
|
||||
{{- $hoursStr := index (split (index $split 1) " ") 0 }}
|
||||
{{- $days := split $daysStr "," }}
|
||||
{{- $localizedDays := slice }}
|
||||
{{- range $idx, $day := $days -}}
|
||||
{{- if in . "-" -}}
|
||||
{{- $innerDays := split . "-" -}}
|
||||
{{- $innerLocalizedDays := slice -}}
|
||||
{{- range $innerDays -}}
|
||||
{{- $innerLocalizedDays = $innerLocalizedDays | append (i18n .) -}}
|
||||
{{- end -}}
|
||||
{{- $dayRange := delimit $innerLocalizedDays "-" -}}
|
||||
{{- $dayRange -}}
|
||||
{{- $localizedDays = $localizedDays | append (i18n $dayRange) -}}
|
||||
{{- else -}}
|
||||
{{- $localizedDays = $localizedDays | append (i18n $day) -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{ delimit $localizedDays ", " }} {{ $hoursStr }}<br>
|
||||
{{- end -}}
|
||||
</p>
|
||||
{{- end -}}
|
||||
{{ partial "schema/localbusiness.html" (dict "contact" .address "ctx" .ctx "short" false) }}
|
||||
</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>
|
||||
</section>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<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" .) }}
|
||||
</ol>
|
||||
{{ define "breadcrumbnav" }}
|
||||
|
|
@ -9,7 +9,8 @@
|
|||
{{ template "breadcrumbnav" (dict "p1" .p1.Site.Home "p2" .p2 ) }}
|
||||
{{ 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>
|
||||
{{ end }}
|
||||
</nav>
|
||||
|
|
@ -8,67 +8,70 @@
|
|||
{{- $imgClass := .imgClass -}}
|
||||
{{- $href := .ctx.Params.href }}
|
||||
|
||||
<figure {{- with .class }} class="{{ . }}"{{- end -}}>
|
||||
<a href="{{- with $href -}}{{ . }}{{ else }}{{ .ctx.RelPermalink }}{{ end }}"{{- with .lightbox }} data-lightbox{{- end -}}>
|
||||
{{- partial "img.html" (dict "image" .image "ctx" .ctx "keepOriginal" $keep "class" $imgClass) -}}
|
||||
<figure {{- with .class }} class="{{ . }}" {{- end -}}>
|
||||
<a href="{{- with $href -}}{{ . }}{{ else }}{{ .ctx.RelPermalink }}{{ end }}" {{- with .lightbox }}
|
||||
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>
|
||||
{{ with .ctx.Params.offer }}
|
||||
<div class="ribbon">
|
||||
<span>
|
||||
Angebot
|
||||
</span>
|
||||
</div>
|
||||
{{- else -}}
|
||||
<h3>{{ $title }}</h3>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- if .showDescription -}}
|
||||
<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 }}
|
||||
<figcaption class="description{{ if .isOverlay }} overlay hidden{{ end }}">
|
||||
{{- if .showTitle -}}
|
||||
{{- if $href -}}
|
||||
<a href="{{$href}}"><h3>{{ $title }}</h3></a>
|
||||
{{- else -}}
|
||||
<h3>{{ $title }}</h3>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- if .showDescription -}}
|
||||
<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 -}}
|
||||
{{- 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>
|
||||
{{- 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>
|
||||
<ul class="list-unstyled flex row gallery">
|
||||
{{- range .Resources.ByType "image" -}}
|
||||
<li class="col-xs-12 col-sm-4 padding">
|
||||
{{- partial "figure.html" (dict "image" . "ctx" . "lightbox" true "class" "gallery" "showTitle" true "showDescription" true) }}
|
||||
</li>
|
||||
{{- end -}}
|
||||
{{- range .Resources.ByType "image" -}}
|
||||
<li class="col-xs-12 col-sm-4 padding">
|
||||
{{- partial "figure.html" (dict "image" . "ctx" . "lightbox" true "class" "gallery" "showTitle" true "showDescription" true) }}
|
||||
</li>
|
||||
{{- end -}}
|
||||
</ul>
|
||||
|
|
@ -1,32 +1,26 @@
|
|||
{{ $keep := .keepOriginal}}
|
||||
{{- $title := .ctx.Name -}}
|
||||
{{- with .ctx.Title -}}
|
||||
{{- $title = . -}}
|
||||
{{- $title = . -}}
|
||||
{{- end -}}
|
||||
{{- $alt := $title -}}
|
||||
{{- with .ctx.Params.alt -}}
|
||||
{{- $alt = . -}}
|
||||
{{- $alt = . -}}
|
||||
{{- end -}}
|
||||
{{ $class := "" }}
|
||||
{{- with .class -}}
|
||||
{{- $class = . -}}
|
||||
{{- $class = . -}}
|
||||
{{- end -}}
|
||||
{{- $ctx := .ctx -}}
|
||||
{{ with .image }}
|
||||
{{ if eq $keep true }}
|
||||
<img alt="{{ $alt }}"
|
||||
title="{{ $title }}"
|
||||
class="original {{ $class }}"
|
||||
src="{{ .RelPermalink }}" />
|
||||
<img alt="{{ $alt }}" title="{{ $title }}" class="original {{ $class }}" src="{{ .RelPermalink }}" />
|
||||
{{ else }}
|
||||
{{- $imageSm := .Fill "300x300 Top" -}}
|
||||
{{- $imageMd := .Fill "500x500 Top" -}}
|
||||
<img alt="{{ $alt }}"
|
||||
title="{{ $title }}"
|
||||
class="{{ $class }}"
|
||||
srcset="{{ $imageSm.RelPermalink }} 300w, {{ $imageMd.RelPermalink }} 500w"
|
||||
sizes="(min-width: 48rem) 300px, 500px"
|
||||
src="{{ $imageMd.RelPermalink }}" />
|
||||
{{- $imageSm := .Fill "300x300 Top" -}}
|
||||
{{- $imageMd := .Fill "500x500 Top" -}}
|
||||
<img alt="{{ $alt }}" title="{{ $title }}" class="{{ $class }}"
|
||||
srcset="{{ $imageSm.RelPermalink }} 300w, {{ $imageMd.RelPermalink }} 500w" sizes="(min-width: 48rem) 300px, 500px"
|
||||
src="{{ $imageMd.RelPermalink }}" />
|
||||
{{ end }}
|
||||
{{- partial "schema/img.html" (dict "image" . "ctx" $ctx) -}}
|
||||
{{ end }}
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
{{- $currentPage := .ctx -}}
|
||||
{{- $link := .item -}}
|
||||
{{- if (eq .item.Identifier "copyright") -}}
|
||||
<li>
|
||||
<a href="{{ .item.URL }}">
|
||||
<span>© {{ $currentPage.Site.Copyright }}</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ .item.URL }}">
|
||||
<span>© {{ $currentPage.Site.Copyright }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{{- else -}}
|
||||
<li class="{{ if $currentPage.HasMenuCurrent .item.Menu .item }}active{{ end }}">
|
||||
{{- if ne .item.Title "" -}}
|
||||
<a href="{{ .item.URL }}">
|
||||
{{ $link.Pre }}
|
||||
<span>{{ $link.Name }}</span>
|
||||
</a>
|
||||
{{- end -}}
|
||||
</li>
|
||||
<li class="{{ if $currentPage.HasMenuCurrent .item.Menu .item }}active{{ end }}">
|
||||
{{- if ne .item.Title "" -}}
|
||||
<a href="{{ .item.URL }}">
|
||||
{{ $link.Pre }}
|
||||
<span>{{ $link.Name }}</span>
|
||||
</a>
|
||||
{{- end -}}
|
||||
</li>
|
||||
{{- end -}}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
{{- $js := resources.Get .path -}}
|
||||
{{ if .ctx.Site.IsServer }}
|
||||
<script src="{{ $js.RelPermalink }}"></script>
|
||||
{{ else }}
|
||||
{{- $js = $js | resources.Fingerprint -}}
|
||||
<script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}"></script>
|
||||
{{ if .ctx.Site.IsServer }}
|
||||
<script src="{{ $js.RelPermalink }}"></script>
|
||||
{{ else }}
|
||||
{{- $js = $js | resources.Fingerprint -}}
|
||||
<script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}"></script>
|
||||
{{ end }}
|
||||
|
|
@ -3,5 +3,5 @@
|
|||
<link rel="stylesheet" href="{{ $css.RelPermalink }}">
|
||||
{{ else }}
|
||||
{{- $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 }}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<ul class="social-icons">
|
||||
{{- range $key, $value := (index .Site.Data.kontakt.kontakt 0).social -}}
|
||||
{{- with $value }}
|
||||
<li><a href="{{ . }}" title="{{ $key | title }}"><i class="fab fa-{{ $key }}"></i></a></li>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- range $key, $value := (index .Site.Data.kontakt.kontakt 0).social -}}
|
||||
{{- with $value }}
|
||||
<li><a href="{{ . }}" title="{{ $key | title }}"><i class="fab fa-{{ $key }}"></i></a></li>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
</ul>
|
||||
|
|
@ -1,29 +1,29 @@
|
|||
<template id="lightbox-template">
|
||||
<div id="lightbox" class="lightbox">
|
||||
<div id="lightbox-container" class="lightbox-container">
|
||||
<div class="lightbox-header">
|
||||
<h1 class="lightbox-title">Title</h1>
|
||||
<div class="lightbox-controls">
|
||||
<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 id="lightbox" class="lightbox">
|
||||
<div id="lightbox-container" class="lightbox-container">
|
||||
<div class="lightbox-header">
|
||||
<h1 class="lightbox-title">Title</h1>
|
||||
<div class="lightbox-controls">
|
||||
<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>
|
||||
</template>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<h4>{{ i18n "translations" | title }}</h4>
|
||||
<ul class="col-xs-12">
|
||||
{{- range .Translations -}}
|
||||
<li>
|
||||
<a href="{{ .Permalink }}" hreflang="{{ .Language.Lang }}">{{ .Language.LanguageName }}: {{ .Title }}</a>
|
||||
</li>
|
||||
{{- end -}}
|
||||
{{- range .Translations -}}
|
||||
<li>
|
||||
<a href="{{ .Permalink }}" hreflang="{{ .Language.Lang }}">{{ .Language.LanguageName }}: {{ .Title }}</a>
|
||||
</li>
|
||||
{{- end -}}
|
||||
</ul>
|
||||
|
|
@ -4,52 +4,52 @@
|
|||
{{- $description := true -}}
|
||||
{{- $lightbox := true -}}
|
||||
{{- if .IsNamedParams -}}
|
||||
{{- with .Get "search" -}}
|
||||
{{ $search = . }}
|
||||
{{- end -}}
|
||||
{{- with .Get "original" -}}
|
||||
{{- $keep = true }}
|
||||
{{- end -}}
|
||||
{{- with .Get "title" -}}
|
||||
{{ $title = . }}
|
||||
{{- end -}}
|
||||
{{- $description := true -}}
|
||||
{{ with .Get "description" -}}
|
||||
{{- end -}}
|
||||
{{- with .Get "lightbox" -}}
|
||||
{{ $lightbox = true }}
|
||||
{{- end -}}
|
||||
{{- with .Get "search" -}}
|
||||
{{ $search = . }}
|
||||
{{- end -}}
|
||||
{{- with .Get "original" -}}
|
||||
{{- $keep = true }}
|
||||
{{- end -}}
|
||||
{{- with .Get "title" -}}
|
||||
{{ $title = . }}
|
||||
{{- end -}}
|
||||
{{- $description := true -}}
|
||||
{{ with .Get "description" -}}
|
||||
{{- end -}}
|
||||
{{- with .Get "lightbox" -}}
|
||||
{{ $lightbox = true }}
|
||||
{{- end -}}
|
||||
{{- else -}}
|
||||
{{- with .Get 0 -}}
|
||||
{{ $search = . }}
|
||||
{{- end -}}
|
||||
{{- with .Get 1 -}}
|
||||
{{ $title = . }}
|
||||
{{- end -}}
|
||||
{{- with .Get 2 -}}
|
||||
{{ $description = . }}
|
||||
{{- end -}}
|
||||
{{- with .Get 3 -}}
|
||||
{{ $keep = true }}
|
||||
{{- end -}}
|
||||
{{- with .Get 4 -}}
|
||||
{{ $lightbox = true }}
|
||||
{{- end -}}
|
||||
{{- with .Get 0 -}}
|
||||
{{ $search = . }}
|
||||
{{- end -}}
|
||||
{{- with .Get 1 -}}
|
||||
{{ $title = . }}
|
||||
{{- end -}}
|
||||
{{- with .Get 2 -}}
|
||||
{{ $description = . }}
|
||||
{{- end -}}
|
||||
{{- with .Get 3 -}}
|
||||
{{ $keep = true }}
|
||||
{{- end -}}
|
||||
{{- with .Get 4 -}}
|
||||
{{ $lightbox = true }}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
<div class="clearfix"></div>
|
||||
{{ with .Inner }}
|
||||
<ul class="list-unstyled row gallery">
|
||||
{{ . }}
|
||||
</ul>
|
||||
<ul class="list-unstyled row gallery">
|
||||
{{ . }}
|
||||
</ul>
|
||||
{{ else }}
|
||||
<ul class="list-unstyled row gallery">
|
||||
{{ range $.Page.Resources.Match $search }}
|
||||
{{- if (ne .Params.featured true) -}}
|
||||
<li class="col-xs-6 col-sm-4">
|
||||
{{- partial "figure.html" (dict "image" . "ctx" . "lightbox" $lightbox "class" "gallery" "showTitle" $title "showDescription" $description "keepOriginal" $keep) -}}
|
||||
</li>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
</ul>
|
||||
<ul class="list-unstyled row gallery">
|
||||
{{ range $.Page.Resources.Match $search }}
|
||||
{{- if (ne .Params.featured true) -}}
|
||||
<li class="col-xs-6 col-sm-4">
|
||||
{{- partial "figure.html" (dict "image" . "ctx" . "lightbox" $lightbox "class" "gallery" "showTitle" $title "showDescription" $description "keepOriginal" $keep) -}}
|
||||
</li>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
</ul>
|
||||
{{- end -}}
|
||||
|
|
@ -8,48 +8,48 @@
|
|||
{{ $showDescription := true }}
|
||||
{{ $list := false }}
|
||||
{{ if .IsNamedParams }}
|
||||
{{ with .Get "search" }}
|
||||
{{ $search = .}}
|
||||
{{ end }}
|
||||
{{ with .Get "class" }}
|
||||
{{ $class = .}}
|
||||
{{ end }}
|
||||
{{ with .Get "title" }}
|
||||
{{ $title = .}}
|
||||
{{ end }}
|
||||
{{ with .Get "description" }}
|
||||
{{ $description = .}}
|
||||
{{ end }}
|
||||
{{ with .Get "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 }}
|
||||
{{ with .Get "search" }}
|
||||
{{ $search = .}}
|
||||
{{ end }}
|
||||
{{ with .Get "class" }}
|
||||
{{ $class = .}}
|
||||
{{ end }}
|
||||
{{ with .Get "title" }}
|
||||
{{ $title = .}}
|
||||
{{ end }}
|
||||
{{ with .Get "description" }}
|
||||
{{ $description = .}}
|
||||
{{ end }}
|
||||
{{ with .Get "alt" }}
|
||||
{{ $alt = .}}
|
||||
{{ else }}
|
||||
{{ with .Get 0 }}
|
||||
{{ $search = . }}
|
||||
{{ end }}
|
||||
{{ with .Get 1 }}
|
||||
{{ $class = . }}
|
||||
{{ end }}
|
||||
{{ $alt = $description}}
|
||||
{{ end }}
|
||||
{{ with .Get "lightbox" }}
|
||||
{{ $lightbox = .}}
|
||||
{{ 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 }}
|
||||
{{ $image := $.Page.Resources.GetMatch $search }}
|
||||
{{ if $list }}
|
||||
<li class="col-xs-6 col-sm-4 padding">
|
||||
{{ end }}
|
||||
{{ partial "figure.html" (dict "image" $image "ctx" $image "class" $class "lightbox" $lightbox "showTitle" $showTitle "showDescription" $showDescription) }}
|
||||
{{ if $list }}
|
||||
</li>
|
||||
<li class="col-xs-6 col-sm-4 padding">
|
||||
{{ end }}
|
||||
{{ partial "figure.html" (dict "image" $image "ctx" $image "class" $class "lightbox" $lightbox "showTitle" $showTitle "showDescription" $showDescription) }}
|
||||
{{ if $list }}
|
||||
</li>
|
||||
{{ end }}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
{{- $type := .Get "type" -}}
|
||||
<div class="clearfix"></div>
|
||||
<ul class="flex row list-unstyled {{ $type }}">
|
||||
{{ .Inner }}
|
||||
{{ .Inner }}
|
||||
</ul>
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
import Vue from "vue"
|
||||
import Vue from 'vue'
|
||||
|
||||
import CatalogArticle from "../vue/CatalogArticle.vue"
|
||||
import ModelViewer from "../vue/ModelViewer.vue"
|
||||
import CatalogArticle from '../vue/CatalogArticle.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')
|
||||
if (modelViewerRoot) {
|
||||
if (modelViewerRoot) {
|
||||
new Vue({
|
||||
store,
|
||||
render: function(h) {
|
||||
|
|
@ -14,11 +14,10 @@ let modelViewerRoot = document.getElementById('model-viewer-root')
|
|||
},
|
||||
beforeMount() {
|
||||
this.modelUrl = this.$el.dataset.url
|
||||
}
|
||||
},
|
||||
}).$mount(modelViewerRoot)
|
||||
}
|
||||
|
||||
|
||||
let catalogArticle = document.getElementById('catalog-article')
|
||||
if (catalogArticle) {
|
||||
new Vue({
|
||||
|
|
@ -28,6 +27,6 @@ if (catalogArticle) {
|
|||
},
|
||||
beforeMount() {
|
||||
this.modelUrl = this.$el.dataset.url
|
||||
}
|
||||
},
|
||||
}).$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'
|
||||
|
||||
|
||||
var gaDisableStr = 'ga-disable-' + $googleAnalytics;
|
||||
var gaDisableStr = 'ga-disable-' + $googleAnalytics
|
||||
|
||||
function disableGoogleAnalytics() {
|
||||
if (document.cookie.indexOf(gaDisableStr + '=true') > -1) {
|
||||
window[gaDisableStr] = true;
|
||||
}
|
||||
if (document.cookie.indexOf(gaDisableStr + '=true') > -1) {
|
||||
window[gaDisableStr] = true
|
||||
}
|
||||
|
||||
document.cookie = gaDisableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
|
||||
window[gaDisableStr] = true;
|
||||
document.cookie =
|
||||
gaDisableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/'
|
||||
window[gaDisableStr] = true
|
||||
}
|
||||
|
||||
function enableGoogleAnalytics() {
|
||||
var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack);
|
||||
var doNotTrack = (dnt == "1" || dnt == "yes");
|
||||
if (!doNotTrack) {
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},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');
|
||||
}
|
||||
var dnt = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack
|
||||
var doNotTrack = dnt == '1' || dnt == 'yes'
|
||||
if (!doNotTrack) {
|
||||
;(function(i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r
|
||||
;(i[r] =
|
||||
i[r] ||
|
||||
function() {
|
||||
;(i[r].q = i[r].q || []).push(arguments)
|
||||
}),
|
||||
(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) {
|
||||
if (status === 'allow' || status === 'dismiss') {
|
||||
enableGoogleAnalytics();
|
||||
}
|
||||
if (status === 'deny') {
|
||||
disableGoogleAnalytics();
|
||||
}
|
||||
|
||||
if (status === 'allow' || status === 'dismiss') {
|
||||
enableGoogleAnalytics()
|
||||
}
|
||||
if (status === 'deny') {
|
||||
disableGoogleAnalytics()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
window.addEventListener("load", function () {
|
||||
window.cookieconsent.initialise({
|
||||
palette: {
|
||||
popup: {
|
||||
background: "#efefef",
|
||||
text: "#000"
|
||||
},
|
||||
button: {
|
||||
background: "#2d763a",
|
||||
text: "#ffffff"
|
||||
}
|
||||
},
|
||||
theme: "classic",
|
||||
type: "opt-out",
|
||||
content: {
|
||||
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.",
|
||||
dismiss: "OK",
|
||||
allow: "Erlauben",
|
||||
deny: "Verbieten",
|
||||
href: "/datenschutz",
|
||||
link: "Datenschutzbestimmung",
|
||||
policy: "Cookie Vereinbarung"
|
||||
},
|
||||
dismissOnScroll: 600,
|
||||
onInitialise: function (status) {
|
||||
setupGoogleAnalytics(status)
|
||||
},
|
||||
onStatusChange: function (status) {
|
||||
if (status === 'allow' || status === 'dismiss') {
|
||||
if (document.cookie.indexOf(gaDisableStr + '=true') > -1) {
|
||||
window[gaDisableStr] = false;
|
||||
document.cookie = gaDisableStr + '=true; expires=Thu, 31 Dec 1970 23:59:59 UTC; path=/';
|
||||
}
|
||||
}
|
||||
setupGoogleAnalytics(status)
|
||||
},
|
||||
})
|
||||
});
|
||||
window.addEventListener('load', function() {
|
||||
window.cookieconsent.initialise({
|
||||
palette: {
|
||||
popup: {
|
||||
background: '#efefef',
|
||||
text: '#000',
|
||||
},
|
||||
button: {
|
||||
background: '#2d763a',
|
||||
text: '#ffffff',
|
||||
},
|
||||
},
|
||||
theme: 'classic',
|
||||
type: 'opt-out',
|
||||
content: {
|
||||
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.',
|
||||
dismiss: 'OK',
|
||||
allow: 'Erlauben',
|
||||
deny: 'Verbieten',
|
||||
href: '/datenschutz',
|
||||
link: 'Datenschutzbestimmung',
|
||||
policy: 'Cookie Vereinbarung',
|
||||
},
|
||||
dismissOnScroll: 600,
|
||||
onInitialise: function(status) {
|
||||
setupGoogleAnalytics(status)
|
||||
},
|
||||
onStatusChange: function(status) {
|
||||
if (status === 'allow' || status === 'dismiss') {
|
||||
if (document.cookie.indexOf(gaDisableStr + '=true') > -1) {
|
||||
window[gaDisableStr] = false
|
||||
document.cookie =
|
||||
gaDisableStr +
|
||||
'=true; expires=Thu, 31 Dec 1970 23:59:59 UTC; path=/'
|
||||
}
|
||||
}
|
||||
setupGoogleAnalytics(status)
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
var gaOptOut = document.querySelector('a.ga-optout')
|
||||
|
||||
if (gaOptOut !== null) {
|
||||
gaOptOut.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
disableGoogleAnalytics();
|
||||
})
|
||||
gaOptOut.addEventListener('click', e => {
|
||||
e.preventDefault()
|
||||
disableGoogleAnalytics()
|
||||
})
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
function showOverlay(el) {
|
||||
if (el) {
|
||||
let classes = el.className;
|
||||
let classes = el.className
|
||||
if (classes.indexOf('hidden') !== -1) {
|
||||
el.className = classes.replace(/ ?hidden ?/, '')
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@ function showOverlay(el) {
|
|||
|
||||
function hideOverlay(el) {
|
||||
if (el) {
|
||||
let classes = el.className;
|
||||
let classes = el.className
|
||||
if (classes.indexOf('hidden') === -1) {
|
||||
el.className = classes + ' hidden'
|
||||
}
|
||||
|
|
@ -27,7 +27,7 @@ function toggleOverlay(el) {
|
|||
}
|
||||
|
||||
function addListeners(el, overlay) {
|
||||
var isTouchSupported = "ontouchend" in document;
|
||||
var isTouchSupported = 'ontouchend' in document
|
||||
if (isTouchSupported) {
|
||||
el.addEventListener('touchstart', ev => {
|
||||
ev.preventDefault()
|
||||
|
|
|
|||
|
|
@ -1,2 +1,4 @@
|
|||
function requireAll(r) { r.keys().forEach(r); }
|
||||
requireAll(require.context('../img/', true, /\.(png|gif|jpg|jpeg|svg)$/));
|
||||
function requireAll(r) {
|
||||
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 images = document.querySelectorAll('a[data-lightbox]')
|
||||
|
||||
const lightboxes = [];
|
||||
const lightboxes = []
|
||||
|
||||
class Lightbox {
|
||||
constructor(idx) {
|
||||
this.idx = idx
|
||||
this.element = images[idx];
|
||||
this.figure = this.element.parentElement;
|
||||
this.image = this.figure.querySelector('img');
|
||||
if(this.image === null) {
|
||||
this.figure = this.element.parentElement.parentElement;
|
||||
this.image = this.figure.querySelector('img');
|
||||
}
|
||||
this.title = this.figure.querySelector('h3')
|
||||
this.title = this.image.getAttribute('title')
|
||||
this.description = this.figure.querySelector('.description p')
|
||||
if (this.description !== null) {
|
||||
this.description = this.description.innerHTML
|
||||
}
|
||||
|
||||
this.href = this.element.getAttribute('href')
|
||||
this.alt = this.image.getAttribute('alt')
|
||||
this.template = template.cloneNode(true);
|
||||
constructor(idx) {
|
||||
this.idx = idx
|
||||
this.element = images[idx]
|
||||
this.figure = this.element.parentElement
|
||||
this.image = this.figure.querySelector('img')
|
||||
if (this.image === null) {
|
||||
this.figure = this.element.parentElement.parentElement
|
||||
this.image = this.figure.querySelector('img')
|
||||
}
|
||||
this.title = this.figure.querySelector('h3')
|
||||
this.title = this.image.getAttribute('title')
|
||||
this.description = this.figure.querySelector('.description p')
|
||||
if (this.description !== null) {
|
||||
this.description = this.description.innerHTML
|
||||
}
|
||||
|
||||
update() {
|
||||
this.calcSurrounding()
|
||||
this.updateTemplate()
|
||||
this.addEventListeners()
|
||||
}
|
||||
this.href = this.element.getAttribute('href')
|
||||
this.alt = this.image.getAttribute('alt')
|
||||
this.template = template.cloneNode(true)
|
||||
}
|
||||
|
||||
calcSurrounding() {
|
||||
if (images.length > 1) {
|
||||
this.prev = this.idx - 1;
|
||||
this.next = this.idx + 1;
|
||||
if (this.prev === -1) {
|
||||
this.prev = images.length - 1;
|
||||
}
|
||||
if (this.next === images.length) {
|
||||
this.next = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
update() {
|
||||
this.calcSurrounding()
|
||||
this.updateTemplate()
|
||||
this.addEventListeners()
|
||||
}
|
||||
|
||||
updateTemplate() {
|
||||
// Update template
|
||||
container.innerHTML = this.template.innerHTML;
|
||||
let lightbox = container.querySelector('#lightbox');
|
||||
let img = lightbox.querySelector('img');
|
||||
img.setAttribute('src', this.href);
|
||||
img.setAttribute('alt', this.alt);
|
||||
let title = lightbox.querySelector('.lightbox-title');
|
||||
let description = lightbox.querySelector('.lightbox-footer');
|
||||
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;
|
||||
}
|
||||
calcSurrounding() {
|
||||
if (images.length > 1) {
|
||||
this.prev = this.idx - 1
|
||||
this.next = this.idx + 1
|
||||
if (this.prev === -1) {
|
||||
this.prev = images.length - 1
|
||||
}
|
||||
if (this.next === images.length) {
|
||||
this.next = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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 = '';
|
||||
updateTemplate() {
|
||||
// Update template
|
||||
container.innerHTML = this.template.innerHTML
|
||||
let lightbox = container.querySelector('#lightbox')
|
||||
let img = lightbox.querySelector('img')
|
||||
img.setAttribute('src', this.href)
|
||||
img.setAttribute('alt', this.alt)
|
||||
let title = lightbox.querySelector('.lightbox-title')
|
||||
let description = lightbox.querySelector('.lightbox-footer')
|
||||
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() {
|
||||
// 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()
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
// 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
|
||||
let lightboxNext = lightbox
|
||||
.querySelectorAll('a.lightbox-next')
|
||||
.forEach(el => {
|
||||
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() {
|
||||
for (let i = 0; i < images.length; i++) {
|
||||
lightboxes.push(new Lightbox(i))
|
||||
for (let i = 0; i < images.length; i++) {
|
||||
lightboxes.push(new Lightbox(i))
|
||||
|
||||
images[i].addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
lightboxes[i].update();
|
||||
})
|
||||
}
|
||||
images[i].addEventListener('click', e => {
|
||||
e.preventDefault()
|
||||
lightboxes[i].update()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
main();
|
||||
main()
|
||||
|
|
|
|||
|
|
@ -1,45 +1,44 @@
|
|||
const header = document.querySelector('#header');
|
||||
const scrollPosition = 50;
|
||||
const header = document.querySelector('#header')
|
||||
const scrollPosition = 50
|
||||
|
||||
const menuLinks = document.querySelectorAll('.menu-list li a');
|
||||
const checkbox = document.querySelector('#top-navigation-checkbox');
|
||||
const banner = document.querySelector('#banner');
|
||||
const menuLinks = document.querySelectorAll('.menu-list li a')
|
||||
const checkbox = document.querySelector('#top-navigation-checkbox')
|
||||
const banner = document.querySelector('#banner')
|
||||
|
||||
let lastScrollPosition = 0;
|
||||
let lastScrollPosition = 0
|
||||
|
||||
window.addEventListener('scroll', (e) => {
|
||||
let st = window.pageYOffset || document.documentElement.scrollTop;
|
||||
window.addEventListener('scroll', e => {
|
||||
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) {
|
||||
header.classList.add('small')
|
||||
header.classList.remove('large')
|
||||
header.classList.add('hidden')
|
||||
if(banner !== null) {
|
||||
banner.classList.add('hidden')
|
||||
}
|
||||
checkbox.checked = false;
|
||||
header.classList.add('hidden')
|
||||
}
|
||||
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) {
|
||||
header.classList.add('hidden')
|
||||
}
|
||||
}
|
||||
lastScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
|
||||
});
|
||||
|
||||
menuLinks.forEach((el) => {
|
||||
el.addEventListener('click', () => {
|
||||
checkbox.checked = false;
|
||||
})
|
||||
}
|
||||
lastScrollPosition = window.pageYOffset || document.documentElement.scrollTop
|
||||
})
|
||||
|
||||
menuLinks.forEach(el => {
|
||||
el.addEventListener('click', () => {
|
||||
checkbox.checked = false
|
||||
})
|
||||
})
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -10,7 +10,9 @@ $xl-min: 75rem !default;
|
|||
|
||||
/* CALCULATED VARIABLES */
|
||||
|
||||
$breakpoints: 1 8.33333333%, 2 16.66666667%, 3 25%, 4 33.33333333%, 5 41.66666667%, 6 50%, 7 58.33333333%, 8 66.66666667%, 9 75%, 10 83.33333333%, 11 91.66666667%, 12 100%;
|
||||
$breakpoints: 1 8.33333333%, 2 16.66666667%, 3 25%, 4 33.33333333%,
|
||||
5 41.66666667%, 6 50%, 7 58.33333333%, 8 66.66666667%, 9 75%, 10 83.33333333%,
|
||||
11 91.66666667%, 12 100%;
|
||||
|
||||
$half-gutter-width: $gutter-width * 0.5;
|
||||
$gutter-compensation: $half-gutter-width * -1;
|
||||
|
|
@ -18,44 +20,44 @@ $gutter-compensation: $half-gutter-width * -1;
|
|||
/* GRID */
|
||||
|
||||
@mixin flex() {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@mixin col($size) {
|
||||
flex-basis: $size;
|
||||
max-width: $size;
|
||||
flex-basis: $size;
|
||||
max-width: $size;
|
||||
}
|
||||
|
||||
@mixin offset($size) {
|
||||
margin-left: $size;
|
||||
margin-left: $size;
|
||||
}
|
||||
|
||||
.container,
|
||||
.container-fluid {
|
||||
margin: 0 auto;
|
||||
padding: 0 $outer-margin;
|
||||
margin: 0 auto;
|
||||
padding: 0 $outer-margin;
|
||||
}
|
||||
|
||||
.row {
|
||||
@include flex();
|
||||
flex-direction: row;
|
||||
margin: 0 $gutter-compensation;
|
||||
@include flex();
|
||||
flex-direction: row;
|
||||
margin: 0 $gutter-compensation;
|
||||
|
||||
&.reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
&.reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
@include flex();
|
||||
flex-direction: column;
|
||||
@include flex();
|
||||
flex-direction: column;
|
||||
|
||||
&.reverse {
|
||||
flex-direction: row-column;
|
||||
}
|
||||
&.reverse {
|
||||
flex-direction: row-column;
|
||||
}
|
||||
}
|
||||
|
||||
/* XS */
|
||||
|
|
@ -85,333 +87,333 @@ $gutter-compensation: $half-gutter-width * -1;
|
|||
.col-offset-xs-10,
|
||||
.col-offset-xs-11,
|
||||
.col-offset-xs-12 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding: 0 $half-gutter-width;
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding: 0 $half-gutter-width;
|
||||
}
|
||||
|
||||
.col-xs {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@each $i, $x in $breakpoints {
|
||||
.col-xs-#{$i} {
|
||||
@include col($x);
|
||||
}
|
||||
.col-xs-#{$i} {
|
||||
@include col($x);
|
||||
}
|
||||
}
|
||||
|
||||
@each $i, $x in $breakpoints {
|
||||
.col-offset-xs-#{$i} {
|
||||
@include offset($x);
|
||||
}
|
||||
.col-offset-xs-#{$i} {
|
||||
@include offset($x);
|
||||
}
|
||||
}
|
||||
|
||||
.start-xs {
|
||||
justify-content: flex-start;
|
||||
text-align: start;
|
||||
justify-content: flex-start;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.center-xs {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.end-xs {
|
||||
justify-content: flex-end;
|
||||
text-align: end;
|
||||
justify-content: flex-end;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.top-xs {
|
||||
align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.middle-xs {
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottom-xs {
|
||||
align-items: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.around-xs {
|
||||
justify-content: space-around;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.between-xs {
|
||||
justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* SM */
|
||||
|
||||
@media only screen and (min-width: $sm-min) {
|
||||
.container {
|
||||
width: $sm-min;
|
||||
}
|
||||
.container {
|
||||
width: $sm-min;
|
||||
}
|
||||
|
||||
.col-sm,
|
||||
.col-sm-1,
|
||||
.col-sm-2,
|
||||
.col-sm-3,
|
||||
.col-sm-4,
|
||||
.col-sm-5,
|
||||
.col-sm-6,
|
||||
.col-sm-7,
|
||||
.col-sm-8,
|
||||
.col-sm-9,
|
||||
.col-sm-10,
|
||||
.col-sm-11,
|
||||
.col-sm-12,
|
||||
.col-offset-sm-1,
|
||||
.col-offset-sm-2,
|
||||
.col-offset-sm-3,
|
||||
.col-offset-sm-4,
|
||||
.col-offset-sm-5,
|
||||
.col-offset-sm-6,
|
||||
.col-offset-sm-7,
|
||||
.col-offset-sm-8,
|
||||
.col-offset-sm-9,
|
||||
.col-offset-sm-10,
|
||||
.col-offset-sm-11,
|
||||
.col-offset-sm-12 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
.col-sm,
|
||||
.col-sm-1,
|
||||
.col-sm-2,
|
||||
.col-sm-3,
|
||||
.col-sm-4,
|
||||
.col-sm-5,
|
||||
.col-sm-6,
|
||||
.col-sm-7,
|
||||
.col-sm-8,
|
||||
.col-sm-9,
|
||||
.col-sm-10,
|
||||
.col-sm-11,
|
||||
.col-sm-12,
|
||||
.col-offset-sm-1,
|
||||
.col-offset-sm-2,
|
||||
.col-offset-sm-3,
|
||||
.col-offset-sm-4,
|
||||
.col-offset-sm-5,
|
||||
.col-offset-sm-6,
|
||||
.col-offset-sm-7,
|
||||
.col-offset-sm-8,
|
||||
.col-offset-sm-9,
|
||||
.col-offset-sm-10,
|
||||
.col-offset-sm-11,
|
||||
.col-offset-sm-12 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding: 0 $half-gutter-width;
|
||||
}
|
||||
}
|
||||
|
||||
.col-sm {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.col-sm {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@each $i, $x in $breakpoints {
|
||||
.col-sm-#{$i} {
|
||||
@include col($x);
|
||||
}
|
||||
@each $i, $x in $breakpoints {
|
||||
.col-sm-#{$i} {
|
||||
@include col($x);
|
||||
}
|
||||
}
|
||||
|
||||
@each $i, $x in $breakpoints {
|
||||
.col-offset-sm-#{$i} {
|
||||
@include offset($x);
|
||||
}
|
||||
@each $i, $x in $breakpoints {
|
||||
.col-offset-sm-#{$i} {
|
||||
@include offset($x);
|
||||
}
|
||||
}
|
||||
|
||||
.start-sm {
|
||||
justify-content: flex-start;
|
||||
text-align: start;
|
||||
}
|
||||
.start-sm {
|
||||
justify-content: flex-start;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.center-sm {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
.center-sm {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.end-sm {
|
||||
justify-content: flex-end;
|
||||
text-align: end;
|
||||
}
|
||||
.end-sm {
|
||||
justify-content: flex-end;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.top-sm {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.top-sm {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.middle-sm {
|
||||
align-items: center;
|
||||
}
|
||||
.middle-sm {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottom-sm {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.bottom-sm {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.around-sm {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.around-sm {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.between-sm {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.between-sm {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
/* LG */
|
||||
|
||||
@media only screen and (min-width: $lg-min) {
|
||||
.container {
|
||||
width: $lg-min;
|
||||
}
|
||||
.container {
|
||||
width: $lg-min;
|
||||
}
|
||||
|
||||
.col-lg,
|
||||
.col-lg-1,
|
||||
.col-lg-2,
|
||||
.col-lg-3,
|
||||
.col-lg-4,
|
||||
.col-lg-5,
|
||||
.col-lg-6,
|
||||
.col-lg-7,
|
||||
.col-lg-8,
|
||||
.col-lg-9,
|
||||
.col-lg-10,
|
||||
.col-lg-11,
|
||||
.col-lg-12,
|
||||
.col-offset-lg-1,
|
||||
.col-offset-lg-2,
|
||||
.col-offset-lg-3,
|
||||
.col-offset-lg-4,
|
||||
.col-offset-lg-5,
|
||||
.col-offset-lg-6,
|
||||
.col-offset-lg-7,
|
||||
.col-offset-lg-8,
|
||||
.col-offset-lg-9,
|
||||
.col-offset-lg-10,
|
||||
.col-offset-lg-11,
|
||||
.col-offset-lg-12 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
.col-lg,
|
||||
.col-lg-1,
|
||||
.col-lg-2,
|
||||
.col-lg-3,
|
||||
.col-lg-4,
|
||||
.col-lg-5,
|
||||
.col-lg-6,
|
||||
.col-lg-7,
|
||||
.col-lg-8,
|
||||
.col-lg-9,
|
||||
.col-lg-10,
|
||||
.col-lg-11,
|
||||
.col-lg-12,
|
||||
.col-offset-lg-1,
|
||||
.col-offset-lg-2,
|
||||
.col-offset-lg-3,
|
||||
.col-offset-lg-4,
|
||||
.col-offset-lg-5,
|
||||
.col-offset-lg-6,
|
||||
.col-offset-lg-7,
|
||||
.col-offset-lg-8,
|
||||
.col-offset-lg-9,
|
||||
.col-offset-lg-10,
|
||||
.col-offset-lg-11,
|
||||
.col-offset-lg-12 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding: 0 $half-gutter-width;
|
||||
}
|
||||
}
|
||||
|
||||
.col-lg {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.col-lg {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@each $i, $x in $breakpoints {
|
||||
.col-lg-#{$i} {
|
||||
@include col($x);
|
||||
}
|
||||
@each $i, $x in $breakpoints {
|
||||
.col-lg-#{$i} {
|
||||
@include col($x);
|
||||
}
|
||||
}
|
||||
|
||||
@each $i, $x in $breakpoints {
|
||||
.col-offset-lg-#{$i} {
|
||||
@include offset($x);
|
||||
}
|
||||
@each $i, $x in $breakpoints {
|
||||
.col-offset-lg-#{$i} {
|
||||
@include offset($x);
|
||||
}
|
||||
}
|
||||
|
||||
.start-lg {
|
||||
justify-content: flex-start;
|
||||
text-align: start;
|
||||
}
|
||||
.start-lg {
|
||||
justify-content: flex-start;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.center-lg {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
.center-lg {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.end-lg {
|
||||
justify-content: flex-end;
|
||||
text-align: end;
|
||||
}
|
||||
.end-lg {
|
||||
justify-content: flex-end;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.top-lg {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.top-lg {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.middle-lg {
|
||||
align-items: center;
|
||||
}
|
||||
.middle-lg {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottom-lg {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.bottom-lg {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.around-lg {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.around-lg {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.between-lg {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.between-lg {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
/* XL */
|
||||
|
||||
@media only screen and (min-width: $xl-min) {
|
||||
.container {
|
||||
width: $xl-min;
|
||||
}
|
||||
.container {
|
||||
width: $xl-min;
|
||||
}
|
||||
|
||||
.col-xl,
|
||||
.col-xl-1,
|
||||
.col-xl-2,
|
||||
.col-xl-3,
|
||||
.col-xl-4,
|
||||
.col-xl-5,
|
||||
.col-xl-6,
|
||||
.col-xl-7,
|
||||
.col-xl-8,
|
||||
.col-xl-9,
|
||||
.col-xl-10,
|
||||
.col-xl-11,
|
||||
.col-xl-12,
|
||||
.col-offset-xl-1,
|
||||
.col-offset-xl-2,
|
||||
.col-offset-xl-3,
|
||||
.col-offset-xl-4,
|
||||
.col-offset-xl-5,
|
||||
.col-offset-xl-6,
|
||||
.col-offset-xl-7,
|
||||
.col-offset-xl-8,
|
||||
.col-offset-xl-9,
|
||||
.col-offset-xl-10,
|
||||
.col-offset-xl-11,
|
||||
.col-offset-xl-12 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
.col-xl,
|
||||
.col-xl-1,
|
||||
.col-xl-2,
|
||||
.col-xl-3,
|
||||
.col-xl-4,
|
||||
.col-xl-5,
|
||||
.col-xl-6,
|
||||
.col-xl-7,
|
||||
.col-xl-8,
|
||||
.col-xl-9,
|
||||
.col-xl-10,
|
||||
.col-xl-11,
|
||||
.col-xl-12,
|
||||
.col-offset-xl-1,
|
||||
.col-offset-xl-2,
|
||||
.col-offset-xl-3,
|
||||
.col-offset-xl-4,
|
||||
.col-offset-xl-5,
|
||||
.col-offset-xl-6,
|
||||
.col-offset-xl-7,
|
||||
.col-offset-xl-8,
|
||||
.col-offset-xl-9,
|
||||
.col-offset-xl-10,
|
||||
.col-offset-xl-11,
|
||||
.col-offset-xl-12 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding: 0 $half-gutter-width;
|
||||
}
|
||||
}
|
||||
|
||||
.col-xl {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.col-xl {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@each $i, $x in $breakpoints {
|
||||
.col-xl-#{$i} {
|
||||
@include col($x);
|
||||
}
|
||||
@each $i, $x in $breakpoints {
|
||||
.col-xl-#{$i} {
|
||||
@include col($x);
|
||||
}
|
||||
}
|
||||
|
||||
@each $i, $x in $breakpoints {
|
||||
.col-offset-xl-#{$i} {
|
||||
@include offset($x);
|
||||
}
|
||||
@each $i, $x in $breakpoints {
|
||||
.col-offset-xl-#{$i} {
|
||||
@include offset($x);
|
||||
}
|
||||
}
|
||||
|
||||
.start-xl {
|
||||
justify-content: flex-start;
|
||||
text-align: start;
|
||||
}
|
||||
.start-xl {
|
||||
justify-content: flex-start;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.center-xl {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
.center-xl {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.end-xl {
|
||||
justify-content: flex-end;
|
||||
text-align: end;
|
||||
}
|
||||
.end-xl {
|
||||
justify-content: flex-end;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.top-xl {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.top-xl {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.middle-xl {
|
||||
align-items: center;
|
||||
}
|
||||
.middle-xl {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottom-xl {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.bottom-xl {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.around-xl {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.around-xl {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.between-xl {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.between-xl {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,119 +1,91 @@
|
|||
/* roboto-regular - latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/roboto-v18-latin-regular.eot');
|
||||
/* IE9 Compat Modes */
|
||||
src: local('Roboto'), local('Roboto-Regular'),
|
||||
url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'),
|
||||
/* IE6-IE8 */
|
||||
url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'),
|
||||
/* Super Modern Browsers */
|
||||
url('../fonts/roboto-v18-latin-regular.woff') format('woff'),
|
||||
/* 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 */
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/roboto-v18-latin-regular.eot');
|
||||
src: local('Roboto'), local('Roboto-Regular'),
|
||||
url('../fonts/roboto-v18-latin-regular.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'),
|
||||
url('../fonts/roboto-v18-latin-regular.woff') format('woff'),
|
||||
url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'),
|
||||
url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg');
|
||||
}
|
||||
|
||||
/* roboto-italic - latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/roboto-v18-latin-italic.eot');
|
||||
/* IE9 Compat Modes */
|
||||
src: local('Roboto Italic'), local('Roboto-Italic'),
|
||||
url('../fonts/roboto-v18-latin-italic.eot?#iefix') format('embedded-opentype'),
|
||||
/* IE6-IE8 */
|
||||
url('../fonts/roboto-v18-latin-italic.woff2') format('woff2'),
|
||||
/* Super Modern Browsers */
|
||||
url('../fonts/roboto-v18-latin-italic.woff') format('woff'),
|
||||
/* Modern Browsers */
|
||||
url('../fonts/roboto-v18-latin-italic.ttf') format('truetype'),
|
||||
/* Safari, Android, iOS */
|
||||
url('../fonts/roboto-v18-latin-italic.svg#Roboto') format('svg');
|
||||
/* Legacy iOS */
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/roboto-v18-latin-italic.eot');
|
||||
|
||||
src: local('Roboto Italic'), local('Roboto-Italic'),
|
||||
url('../fonts/roboto-v18-latin-italic.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('../fonts/roboto-v18-latin-italic.woff2') format('woff2'),
|
||||
url('../fonts/roboto-v18-latin-italic.woff') format('woff'),
|
||||
url('../fonts/roboto-v18-latin-italic.ttf') format('truetype'),
|
||||
url('../fonts/roboto-v18-latin-italic.svg#Roboto') format('svg');
|
||||
}
|
||||
|
||||
/* roboto-700 - latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('../fonts/roboto-v18-latin-700.eot');
|
||||
/* IE9 Compat Modes */
|
||||
src: local('Roboto Bold'), local('Roboto-Bold'),
|
||||
url('../fonts/roboto-v18-latin-700.eot?#iefix') format('embedded-opentype'),
|
||||
/* IE6-IE8 */
|
||||
url('../fonts/roboto-v18-latin-700.woff2') format('woff2'),
|
||||
/* Super Modern Browsers */
|
||||
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 */
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('../fonts/roboto-v18-latin-700.eot');
|
||||
src: local('Roboto Bold'), local('Roboto-Bold'),
|
||||
url('../fonts/roboto-v18-latin-700.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/roboto-v18-latin-700.woff2') format('woff2'),
|
||||
url('../fonts/roboto-v18-latin-700.woff') format('woff'),
|
||||
url('../fonts/roboto-v18-latin-700.ttf') format('truetype'),
|
||||
url('../fonts/roboto-v18-latin-700.svg#Roboto') format('svg');
|
||||
}
|
||||
|
||||
/* roboto-700italic - latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: url('../fonts/roboto-v18-latin-700italic.eot');
|
||||
/* IE9 Compat Modes */
|
||||
src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
|
||||
url('../fonts/roboto-v18-latin-700italic.eot?#iefix') format('embedded-opentype'),
|
||||
/* IE6-IE8 */
|
||||
url('../fonts/roboto-v18-latin-700italic.woff2') format('woff2'),
|
||||
/* Super Modern Browsers */
|
||||
url('../fonts/roboto-v18-latin-700italic.woff') format('woff'),
|
||||
/* Modern Browsers */
|
||||
url('../fonts/roboto-v18-latin-700italic.ttf') format('truetype'),
|
||||
/* Safari, Android, iOS */
|
||||
url('../fonts/roboto-v18-latin-700italic.svg#Roboto') format('svg');
|
||||
/* Legacy iOS */
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: url('../fonts/roboto-v18-latin-700italic.eot');
|
||||
|
||||
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.woff2') format('woff2'),
|
||||
url('../fonts/roboto-v18-latin-700italic.woff') format('woff'),
|
||||
url('../fonts/roboto-v18-latin-700italic.ttf') format('truetype'),
|
||||
url('../fonts/roboto-v18-latin-700italic.svg#Roboto') format('svg');
|
||||
}
|
||||
|
||||
/* roboto-slab-regular - latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto Slab';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/roboto-slab-v7-latin-regular.eot');
|
||||
/* IE9 Compat Modes */
|
||||
src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'),
|
||||
url('../fonts/roboto-slab-v7-latin-regular.eot?#iefix') format('embedded-opentype'),
|
||||
/* IE6-IE8 */
|
||||
url('../fonts/roboto-slab-v7-latin-regular.woff2') format('woff2'),
|
||||
/* Super Modern Browsers */
|
||||
url('../fonts/roboto-slab-v7-latin-regular.woff') format('woff'),
|
||||
/* 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 */
|
||||
font-family: 'Roboto Slab';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/roboto-slab-v7-latin-regular.eot');
|
||||
src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'),
|
||||
url('../fonts/roboto-slab-v7-latin-regular.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('../fonts/roboto-slab-v7-latin-regular.woff2') format('woff2'),
|
||||
url('../fonts/roboto-slab-v7-latin-regular.woff') format('woff'),
|
||||
url('../fonts/roboto-slab-v7-latin-regular.ttf') format('truetype'),
|
||||
url('../fonts/roboto-slab-v7-latin-regular.svg#RobotoSlab') format('svg');
|
||||
}
|
||||
|
||||
/* roboto-slab-700 - latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto Slab';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('../fonts/roboto-slab-v7-latin-700.eot');
|
||||
/* IE9 Compat Modes */
|
||||
src: local('Roboto Slab Bold'), local('RobotoSlab-Bold'),
|
||||
url('../fonts/roboto-slab-v7-latin-700.eot?#iefix') format('embedded-opentype'),
|
||||
/* IE6-IE8 */
|
||||
url('../fonts/roboto-slab-v7-latin-700.woff2') format('woff2'),
|
||||
/* Super Modern Browsers */
|
||||
url('../fonts/roboto-slab-v7-latin-700.woff') format('woff'),
|
||||
/* Modern Browsers */
|
||||
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 */
|
||||
font-family: 'Roboto Slab';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('../fonts/roboto-slab-v7-latin-700.eot');
|
||||
|
||||
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.woff2') format('woff2'),
|
||||
url('../fonts/roboto-slab-v7-latin-700.woff') format('woff'),
|
||||
url('../fonts/roboto-slab-v7-latin-700.ttf') format('truetype'),
|
||||
url('../fonts/roboto-slab-v7-latin-700.svg#RobotoSlab') format('svg');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,107 +1,107 @@
|
|||
.lightbox {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(#000, 0.5);
|
||||
z-index: 10000;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(#000, 0.5);
|
||||
z-index: 10000;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.lightbox-container {
|
||||
flex: 0 0 0;
|
||||
position: relative;
|
||||
padding: $gutter-width;
|
||||
margin: $gutter-width;
|
||||
background-color: $background-color;
|
||||
border-radius: $border-radius;
|
||||
.lightbox-container {
|
||||
flex: 0 0 0;
|
||||
position: relative;
|
||||
padding: $gutter-width;
|
||||
margin: $gutter-width;
|
||||
background-color: $background-color;
|
||||
border-radius: $border-radius;
|
||||
|
||||
.lightbox-header {
|
||||
flex: 0 0 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
.lightbox-header {
|
||||
flex: 0 0 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
h1 {
|
||||
flex: 1 0 0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
flex: 1 0 0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,47 +1,46 @@
|
|||
@mixin trim-list-margin-horizontal {
|
||||
& {
|
||||
li {
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
& {
|
||||
li {
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin menu-list($direction) {
|
||||
& {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: #{$direction};
|
||||
& {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: #{$direction};
|
||||
|
||||
li {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
li {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin background($class) {
|
||||
$background-image: "/img/background/" + $class + ".jpg";
|
||||
$background-image: '/img/background/' + $class + '.jpg';
|
||||
|
||||
& {
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
& {
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&.background-#{$class} {
|
||||
background-image: url(#{$background-image});
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $sm-min) {
|
||||
&.background-default {
|
||||
background-position-x: 37%;
|
||||
}
|
||||
}
|
||||
&.background-#{$class} {
|
||||
background-image: url(#{$background-image});
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $sm-min) {
|
||||
&.background-default {
|
||||
background-position-x: 37%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -84,12 +84,12 @@ time,
|
|||
mark,
|
||||
audio,
|
||||
video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
|
|
@ -105,32 +105,32 @@ hgroup,
|
|||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before,
|
||||
blockquote:after,
|
||||
q:before,
|
||||
q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@ $gutter-width: 1rem;
|
|||
$base-font-size: 16px;
|
||||
$base-line-height: 1.4em;
|
||||
$base-font-family: Roboto, sans-serif;
|
||||
$heading-font-family: "Roboto Slab", sans-serif;
|
||||
$heading-font-family: 'Roboto Slab', sans-serif;
|
||||
|
||||
$font-color: black;
|
||||
$background-color: white;
|
||||
|
|
@ -12,8 +12,7 @@ $secondary-color: #720026;
|
|||
|
||||
$border-radius: 5px;
|
||||
|
||||
$background-default: 'grabmal';
|
||||
$background-bau: 'bau';
|
||||
|
||||
$background-default: "grabmal";
|
||||
$background-bau: "bau";
|
||||
|
||||
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts/";
|
||||
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts/';
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
@import "_reset.scss";
|
||||
@import "_variables.scss";
|
||||
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
|
||||
@import "~@fortawesome/fontawesome-free/scss/regular.scss";
|
||||
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
|
||||
@import "~@fortawesome/fontawesome-free/scss/brands.scss";
|
||||
@import "~cookieconsent/src/styles/animation.css";
|
||||
@import "~cookieconsent/src/styles/base.css";
|
||||
@import "~cookieconsent/src/styles/layout.css";
|
||||
@import "~cookieconsent/src/styles/media.css";
|
||||
@import "~cookieconsent/src/styles/themes/classic.css";
|
||||
@import "_fonts.scss";
|
||||
@import "_mixins.scss";
|
||||
@import "_flexgrid.scss";
|
||||
@import "_app.scss";
|
||||
@import "_lightbox.scss";
|
||||
@import '_reset.scss';
|
||||
@import '_variables.scss';
|
||||
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
|
||||
@import '~@fortawesome/fontawesome-free/scss/regular.scss';
|
||||
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
|
||||
@import '~@fortawesome/fontawesome-free/scss/brands.scss';
|
||||
@import '~cookieconsent/src/styles/animation.css';
|
||||
@import '~cookieconsent/src/styles/base.css';
|
||||
@import '~cookieconsent/src/styles/layout.css';
|
||||
@import '~cookieconsent/src/styles/media.css';
|
||||
@import '~cookieconsent/src/styles/themes/classic.css';
|
||||
@import '_fonts.scss';
|
||||
@import '_mixins.scss';
|
||||
@import '_flexgrid.scss';
|
||||
@import '_app.scss';
|
||||
@import '_lightbox.scss';
|
||||
|
|
|
|||
|
|
@ -1,28 +1,46 @@
|
|||
<template>
|
||||
<article class="row"v-if="articleData">
|
||||
<article class="row" v-if="articleData">
|
||||
<header class="col-xs-12">
|
||||
<h1>{{ articleData.title }}</h1>
|
||||
</header>
|
||||
<div class="col-xs-12">
|
||||
<div class="row">
|
||||
<div v-if="hasWebGl && articleData.model" class="featured col-xs-12 col-sm-8">
|
||||
<model-viewer :modelData="articleData.model"/>
|
||||
<div
|
||||
v-if="hasWebGl && articleData.model"
|
||||
class="featured col-xs-12 col-sm-8"
|
||||
>
|
||||
<model-viewer :modelData="articleData.model" />
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
<material-switcher :modelData="articleData.model"/>
|
||||
<material-switcher :modelData="articleData.model" />
|
||||
</p>
|
||||
<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 class="type">Typ: {{ types }}</p>
|
||||
<p class="material">Material: {{ material }}</p>
|
||||
<p class="ornament" v-if="articleData.ornament">Ornament: {{ articleData.ornament }}</p>
|
||||
<p class="description" v-if="articleData.description">{{ articleData.description }}</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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -34,18 +52,21 @@
|
|||
import ModelViewer from './components/ModelViewer.vue'
|
||||
import MaterialSwitcher from './components/MaterialSwitcher.vue'
|
||||
import * as WebGL from 'three/examples/js/WebGL.js'
|
||||
import { mapState } from 'vuex';
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
hasWebGl: false
|
||||
hasWebGl: false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('fetchArticleData')
|
||||
console.log(WebGL)
|
||||
var canvas = document.createElement( 'canvas' );
|
||||
if ( window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ) ) {
|
||||
var canvas = document.createElement('canvas')
|
||||
if (
|
||||
window.WebGLRenderingContext &&
|
||||
(canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
|
||||
) {
|
||||
this.hasWebGl = true
|
||||
} else {
|
||||
this.hasWebGl = false
|
||||
|
|
@ -54,22 +75,22 @@ export default {
|
|||
computed: {
|
||||
...mapState(['articleData', 'activeTexture']),
|
||||
types() {
|
||||
if(this.articleData.article_type) {
|
||||
if (this.articleData.article_type) {
|
||||
return this.articleData.article_type.join(', ')
|
||||
}
|
||||
return ""
|
||||
return ''
|
||||
},
|
||||
material() {
|
||||
if(this.activeTexture) {
|
||||
if (this.activeTexture) {
|
||||
return this.activeTexture.name
|
||||
}
|
||||
return this.articleData.material
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
ModelViewer,
|
||||
MaterialSwitcher
|
||||
}
|
||||
MaterialSwitcher,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,17 +6,23 @@
|
|||
<div class="content flex">
|
||||
<div class="padding">
|
||||
<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>
|
||||
<p>
|
||||
<strong>Material ändern</strong>
|
||||
<material-switcher :modelData="articleData.model"/>
|
||||
<material-switcher :modelData="articleData.model" />
|
||||
</p>
|
||||
<p class="type">Typ: {{ types }}</p>
|
||||
<p class="material">Material: {{ material }}</p>
|
||||
<p class="offer" v-if="articleData.offer"><a :href="articleData.offer">Angebot</a></p>
|
||||
<p class="ornament" v-if="articleData.ornament">Ornament: {{ articleData.ornament }}</p>
|
||||
<p class="description" v-if="articleData.description">{{ articleData.description }}</p>
|
||||
<p class="offer" v-if="articleData.offer">
|
||||
<a :href="articleData.offer">Angebot</a>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -26,7 +32,7 @@
|
|||
<script>
|
||||
import ModelViewer from './components/ModelViewer.vue'
|
||||
import MaterialSwitcher from './components/MaterialSwitcher.vue'
|
||||
import { mapState } from 'vuex';
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
mounted() {
|
||||
this.$store.dispatch('fetchArticleData')
|
||||
|
|
@ -34,21 +40,21 @@ export default {
|
|||
computed: {
|
||||
...mapState(['articleData', 'activeTexture']),
|
||||
types() {
|
||||
if(this.articleData.article_type) {
|
||||
if (this.articleData.article_type) {
|
||||
return this.articleData.article_type.join(', ')
|
||||
}
|
||||
return ""
|
||||
return ''
|
||||
},
|
||||
material() {
|
||||
if(this.activeTexture) {
|
||||
if (this.activeTexture) {
|
||||
return this.activeTexture.name
|
||||
}
|
||||
return this.articleData.material
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
ModelViewer,
|
||||
MaterialSwitcher
|
||||
}
|
||||
MaterialSwitcher,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import axios from "axios";
|
||||
import axios from 'axios'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
articleData: {},
|
||||
activeTexture: undefined
|
||||
activeTexture: undefined,
|
||||
},
|
||||
mutations: {
|
||||
setArticleData(store, data) {
|
||||
|
|
@ -15,17 +15,20 @@ export default new Vuex.Store({
|
|||
},
|
||||
setActiveTexture(store, data) {
|
||||
store.activeTexture = data
|
||||
}
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
fetchArticleData({ commit }) {
|
||||
let path = window.location.pathname
|
||||
axios.get(path.replace(/modell\//, '') + 'index.json').then(response => {
|
||||
commit('setArticleData', response.data)
|
||||
}).catch(error => console.log(error))
|
||||
axios
|
||||
.get(path.replace(/modell\//, '') + 'index.json')
|
||||
.then(response => {
|
||||
commit('setArticleData', response.data)
|
||||
})
|
||||
.catch(error => console.log(error))
|
||||
},
|
||||
updateActiveTexture({commit}, data) {
|
||||
updateActiveTexture({ commit }, 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>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,12 +12,12 @@
|
|||
import MaterialSwitcherItem from './MaterialSwitcherItem.vue'
|
||||
export default {
|
||||
components: {
|
||||
materialSwitcherItem: MaterialSwitcherItem
|
||||
materialSwitcherItem: MaterialSwitcherItem,
|
||||
},
|
||||
props: {
|
||||
modelData: {
|
||||
type: Object,
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,12 @@
|
|||
<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>
|
||||
|
||||
<script>
|
||||
|
|
@ -7,14 +14,14 @@ export default {
|
|||
props: {
|
||||
texture: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
applyTexture() {
|
||||
this.$store.dispatch('updateActiveTexture', this.texture)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -29,7 +36,7 @@ export default {
|
|||
}
|
||||
|
||||
li:last-child {
|
||||
padding: 0 0 0 2px
|
||||
padding: 0 0 0 2px;
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
|
|||
|
|
@ -6,168 +6,189 @@
|
|||
</template>
|
||||
|
||||
<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 { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
|
||||
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'
|
||||
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
name: 'model-viewer',
|
||||
data() {
|
||||
return {
|
||||
renderer: null,
|
||||
scene: null,
|
||||
camera: null,
|
||||
model: null,
|
||||
name: 'model-viewer',
|
||||
data() {
|
||||
return {
|
||||
renderer: null,
|
||||
scene: null,
|
||||
camera: 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: {
|
||||
modelData: Object
|
||||
getHeight() {
|
||||
let el = this.$el.parentElement || 0
|
||||
if (el) {
|
||||
return el.offsetWidth / 1.333333
|
||||
}
|
||||
return 0
|
||||
},
|
||||
mounted() {
|
||||
this.setup()
|
||||
this.loadGltf(this.modelData.url)
|
||||
this.render()
|
||||
this.update()
|
||||
getAspectRatio() {
|
||||
return this.getWidth() / this.getHeight()
|
||||
},
|
||||
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
|
||||
},
|
||||
getHeight() {
|
||||
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('/')
|
||||
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) => {
|
||||
mtlLoader.load(mtlPath, materials => resolve(materials), undefined, error => reject(error))
|
||||
}).then((materials) => {
|
||||
new Promise((resolve, reject) => {
|
||||
mtlLoader.load(
|
||||
mtlPath,
|
||||
materials => resolve(materials),
|
||||
undefined,
|
||||
error => reject(error)
|
||||
)
|
||||
})
|
||||
.then(materials => {
|
||||
materials.preload()
|
||||
objLoader.setMaterials(materials)
|
||||
objLoader.load(objPath, this.addObject)
|
||||
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 => {
|
||||
this.readGLTF(gltf)
|
||||
})
|
||||
.catch(error => console.log(error))
|
||||
},
|
||||
changeTexture(texture) {
|
||||
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()
|
||||
.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 => {
|
||||
this.readGLTF(gltf)
|
||||
})
|
||||
},
|
||||
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()
|
||||
}
|
||||
.catch(error => console.log(error))
|
||||
},
|
||||
computed: {
|
||||
...mapState(['activeTexture'])
|
||||
changeTexture(texture) {
|
||||
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: {
|
||||
activeTexture(value) {
|
||||
console.log('hello', value)
|
||||
this.changeTexture(value)
|
||||
}
|
||||
}
|
||||
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: {
|
||||
...mapState(['activeTexture']),
|
||||
},
|
||||
watch: {
|
||||
activeTexture(value) {
|
||||
console.log('hello', value)
|
||||
this.changeTexture(value)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -176,19 +197,18 @@ export default {
|
|||
position: relative;
|
||||
|
||||
canvas {
|
||||
background: rgba(0,0,0,0)
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.mouseover {
|
||||
position: absolute;
|
||||
top:0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-weight: bold;
|
||||
|
||||
i {
|
||||
i {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
import Hello from './Hello.vue'
|
||||
|
||||
export default {
|
||||
hello: Hello
|
||||
}
|
||||
Loading…
Reference in New Issue