Initial Commit
This commit is contained in:
hoernschen
parent
bdbb15e52e
commit
c20d262f7c
26 changed files with 1006 additions and 0 deletions
2
archetypes/default.md
Normal file
2
archetypes/default.md
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
+++
|
||||
+++
|
||||
42
assets/scss/footer.scss
Normal file
42
assets/scss/footer.scss
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
$color: {{ .Param "color" }};
|
||||
.footer {
|
||||
margin: auto;
|
||||
padding: 1.5rem 0rem;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
display: block;
|
||||
background-color: #333;
|
||||
color: #f2f2f2;
|
||||
}
|
||||
|
||||
.social-media-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
font-size: 2em;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.links {
|
||||
margin-top: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
line-height: 32px;
|
||||
padding: 0px 24px;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
margin-top: 2rem;
|
||||
width: 100%;
|
||||
font-size: small;
|
||||
}
|
||||
261
assets/scss/index.scss
Normal file
261
assets/scss/index.scss
Normal file
|
|
@ -0,0 +1,261 @@
|
|||
$color: {{ .Param "color" }};
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';
|
||||
color: #333;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
text-transform: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.col-3 {flex: 25%; width: 25%; max-width: 25%;}
|
||||
.col-4 {flex: 33.33%; width: 33.33%; max-width: 33.33%;}
|
||||
.col-5 {flex: 41.66%; width: 41.66%; max-width: 41.66%;}
|
||||
.col-6 {flex: 50%; width: 50%; max-width: 50%;}
|
||||
.col-7 {flex: 58.33%; width: 58.33%; max-width: 58.33%;}
|
||||
.col-8 {flex: 66.66%; width: 66.66%; max-width: 66.66%;}
|
||||
.col-9 {flex: 75%; width: 75%; max-width: 75%;}
|
||||
.col-10 {flex: 83.33%; width: 83.33%; max-width: 83.33%;}
|
||||
.col-11 {flex: 91.66%; width: 91.66%; max-width: 91.66%;}
|
||||
.col-12 {flex: 100%; width: 100%; max-width: 100%;}
|
||||
|
||||
[class*="col-"] {
|
||||
float: left;
|
||||
padding: 1.5rem 1.5rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
[class*="col-"] {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.content {
|
||||
align-self: center;
|
||||
padding-top: 3rem;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 3px;
|
||||
border-radius: 50px;
|
||||
background: $color;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: large;
|
||||
padding-bottom: 1rem;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.videoWrapper {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.video {
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
border: 5px dotted $color;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2.5rem;
|
||||
padding-right: 1.5rem;
|
||||
padding-left: 1.5rem;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
align-self: center;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.section-even {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.section-highlight {
|
||||
background-color: $color;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
/* width: 100%; */
|
||||
max-width: 1152px;
|
||||
margin: auto;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.article {
|
||||
padding-top: 9rem;
|
||||
padding-bottom: 2rem;
|
||||
// padding-right: 1.5rem;
|
||||
// padding-left: 1.5rem;
|
||||
max-width: 1152px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/* Team */
|
||||
|
||||
.team {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.teammember {
|
||||
display: inline-block;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
border-radius: 50%;
|
||||
border: 2px solid $color;
|
||||
object-fit: cover;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.teammember-title {
|
||||
font-size: x-large;
|
||||
padding-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
.social-media {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
font-size: 1.5em;
|
||||
padding-top: 1rem;
|
||||
color: #333;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
/* Funding */
|
||||
|
||||
.funding-logo {
|
||||
width: 15rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.reference-logo {
|
||||
max-height: 15rem;
|
||||
max-width: 15rem;
|
||||
padding: 1.5rem;
|
||||
/* -webkit-filter: grayscale(100%);
|
||||
filter: grayscale(100%); */
|
||||
}
|
||||
|
||||
.services {
|
||||
padding: 1.5rem 0rem;
|
||||
}
|
||||
|
||||
.service-icon-container {
|
||||
/* min-width: 300px; */
|
||||
/* margin: 0 auto;
|
||||
align-self: center; */
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.service-button {
|
||||
background-color: transparent;
|
||||
color: $color;
|
||||
border: 2px solid $color;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem 1.5rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.service-button:hover {
|
||||
background-color: $color;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.contact {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contact-button-container {
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.contact-button {
|
||||
background-color: white;
|
||||
color: $color;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem 1.5rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.contact-text {
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
9
assets/scss/progressbar.scss
Normal file
9
assets/scss/progressbar.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
$color: {{ .Param "color" }};
|
||||
.progress {
|
||||
background: linear-gradient(to right, $color var(--scroll), transparent 0);
|
||||
background-repeat: no-repeat;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
z-index: 1000;
|
||||
}
|
||||
133
assets/scss/slider.scss
Normal file
133
assets/scss/slider.scss
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
$color: {{ .Param "color" }};
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.slider {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
margin-top: 5.5rem;
|
||||
}
|
||||
|
||||
.slides {
|
||||
display: flex;
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
scroll-snap-type: x mandatory;
|
||||
|
||||
scroll-behavior: smooth;
|
||||
scroll-snap-stop: inherit;
|
||||
|
||||
scroll-snap-points-x: repeat(300px);
|
||||
scroll-snap-type: mandatory;
|
||||
}
|
||||
.slides::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.slides > div {
|
||||
scroll-snap-align: start;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
height: calc(100vh - 5.5rem);
|
||||
margin-right: 0.5rem;
|
||||
border-radius: 10px;
|
||||
background: #eee;
|
||||
transform-origin: center center;
|
||||
transform: scale(1);
|
||||
transition: transform 0.5s;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.slide > img {
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.slide-links {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
top: calc(100vh - 5rem);
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.slide-link {
|
||||
display: inline-flex;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background: $color;
|
||||
text-decoration: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
margin: 0 0.5rem 0 0.5rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.slide-link:hover {
|
||||
cursor: pointer;
|
||||
background: #444;
|
||||
}
|
||||
|
||||
.slide-link:active {
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.slide-link-active {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
.slider-navigation-left {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
height: inherit;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
color: $color;
|
||||
font-size: 3.5em;
|
||||
}
|
||||
|
||||
.slider-navigation-left:hover {
|
||||
cursor: pointer;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.slider-navigation-right {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
height: inherit;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
color: $color;
|
||||
font-size: 3.5em;
|
||||
}
|
||||
|
||||
.slider-navigation-right:active > i {
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.slider-navigation-right:hover {
|
||||
cursor: pointer;
|
||||
/* color: #444; */
|
||||
}
|
||||
34
assets/scss/totop.scss
Normal file
34
assets/scss/totop.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
$color: {{ .Param "color" }};
|
||||
.totop {
|
||||
display: inline-flex;
|
||||
background-color: $color;
|
||||
color: #f2f2f2;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
margin: 30px;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
transition: background-color .3s;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.show {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hide {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
.totop:hover {
|
||||
cursor: pointer;
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
5
layouts/404.html
Normal file
5
layouts/404.html
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<html>
|
||||
<body>
|
||||
<img src="/images/undraw_page_not_found_su7k.svg">
|
||||
</body>
|
||||
</html>
|
||||
0
layouts/_default/baseof.html
Normal file
0
layouts/_default/baseof.html
Normal file
0
layouts/_default/list.html
Normal file
0
layouts/_default/list.html
Normal file
18
layouts/_default/single.html
Normal file
18
layouts/_default/single.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ .Site.LanguageCode }}">
|
||||
{{- partial "head.html" . -}}
|
||||
<body>
|
||||
{{- partial "header.html" . -}}
|
||||
{{ block "main" . }}
|
||||
<div class="article">
|
||||
<div class="title">
|
||||
<h1 class="content-title">{{ .Title }}</h1>
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
<!-- <h6>{{ .Date.Format "Mon, Jan 2, 2006" }}</h6> -->
|
||||
{{ .Content }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{- partial "footer.html" . -}}
|
||||
</body>
|
||||
</html>
|
||||
16
layouts/index.html
Normal file
16
layouts/index.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ .Site.LanguageCode }}">
|
||||
{{- partial "head.html" . -}}
|
||||
<body>
|
||||
{{- partial "header.html" . -}}
|
||||
{{- partial "slider.html" . -}}
|
||||
<div id="content" class="content">
|
||||
{{- partial "video.html" . -}}
|
||||
{{- partial "services.html" . -}}
|
||||
{{- partial "team.html" . -}}
|
||||
{{- partial "contact.html" . -}}
|
||||
{{- partial "funding.html" . -}}
|
||||
</div>
|
||||
{{- partial "footer.html" . -}}
|
||||
</body>
|
||||
</html>
|
||||
12
layouts/partials/contact.html
Normal file
12
layouts/partials/contact.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
{{- $contact := .Site.Params.contact }}
|
||||
<div id="contact" class="section section-highlight">
|
||||
<div class="section-content contact">
|
||||
<div class="contact-text">
|
||||
<h1>{{ $contact.title }}</h1>
|
||||
<p>{{ $contact.subtitle }}</p>
|
||||
</div>
|
||||
<div class="contact-button-container">
|
||||
<a class="contact-button" href="{{ $contact.button.url }}">{{ $contact.button.text }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
29
layouts/partials/footer.html
Normal file
29
layouts/partials/footer.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
{{- $footer := .Site.Params.footer }}
|
||||
{{- $social := index $footer "social" }}
|
||||
{{- $links := index $footer "links" }}
|
||||
{{ $template := resources.Get "scss/footer.scss" }}
|
||||
{{ if $template }}
|
||||
{{ $footer := $template | resources.ExecuteAsTemplate "css/footer.scss" . | resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }}
|
||||
<link rel="stylesheet" type="text/css" href="{{ $footer.Permalink }}">
|
||||
{{ end }}
|
||||
<footer class="footer">
|
||||
<div class="social-media-footer">
|
||||
<span>
|
||||
{{- range $social}}
|
||||
<a href="{{ .url }}"><i class="fab fa-{{ .type }}"></i></a>
|
||||
{{- end }}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="links">
|
||||
{{- range $links}}
|
||||
<li class="link"><a href="{{ .url }}">{{ .text }}</a></li>
|
||||
{{- end }}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="copyright">
|
||||
© 2021 <a href="https://nutfactory.org">Nutfactory</a>
|
||||
</div>
|
||||
</footer>
|
||||
<a class="totop hide" id="totop" href="#"><i class="fas fa-chevron-up"></i></a>
|
||||
<script src="/js/totop.js"></script>
|
||||
14
layouts/partials/funding.html
Normal file
14
layouts/partials/funding.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
{{- $funding := .Site.Params.funding }}
|
||||
<div id="funding" class="section">
|
||||
<div class="section-content funding">
|
||||
<div class="title">
|
||||
<h1 class="content-title">{{ $funding.title }}</h1>
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
<div class="funding-logos">
|
||||
{{- range $funding.logos}}
|
||||
<a href="{{ .url }}"><img class="funding-logo" src="{{ .logo }}" alt="{{ .text }}"></a>
|
||||
{{- end}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
20
layouts/partials/head.html
Normal file
20
layouts/partials/head.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<head>
|
||||
<meta name="description" content="{{ if .Params.summary }}{{ .Params.summary }}{{ else if .Site.Params.Description }}{{ .Site.Params.Description }}{{ else }}Hardcoded description; the author should update :){{ end }}" />
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
|
||||
{{ $template := resources.Get "scss/index.scss" }}
|
||||
{{ if $template }}
|
||||
{{ $index := $template | resources.ExecuteAsTemplate "css/index.scss" . | resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }}
|
||||
<link rel="stylesheet" type="text/css" href="{{ $index.Permalink }}">
|
||||
{{ end }}
|
||||
<!-- <link rel="stylesheet" type="text/css" href="/css/index.css"> -->
|
||||
{{ $template := resources.Get "scss/totop.scss" }}
|
||||
{{ if $template }}
|
||||
{{ $totop := $template | resources.ExecuteAsTemplate "css/totop.scss" . | resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }}
|
||||
<link rel="stylesheet" type="text/css" href="{{ $totop.Permalink }}">
|
||||
{{ end }}
|
||||
<!-- <link rel="stylesheet" type="text/css" href="/css/totop.css"> -->
|
||||
<link rel="stylesheet" type="text/css" href="/Font-Awesome/css/all.min.css">
|
||||
</head>
|
||||
33
layouts/partials/header.html
Normal file
33
layouts/partials/header.html
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
{{- $header := .Site.Params.header }}
|
||||
{{- $logo := index $header "logo" }}
|
||||
{{- $links := index $header "links" }}
|
||||
<link rel="stylesheet" href="/css/header.css">
|
||||
{{ $template := resources.Get "scss/progressbar.scss" }}
|
||||
{{ if $template }}
|
||||
{{ $progressbar := $template | resources.ExecuteAsTemplate "css/progressbar.scss" . | resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }}
|
||||
<link rel="stylesheet" type="text/css" href="{{ $progressbar.Permalink }}">
|
||||
{{ end }}
|
||||
<div class="progress"></div>
|
||||
<header class="header" id="header">
|
||||
<div class="header-container">
|
||||
<a class="home" href="{{ $logo.url }}"><img id="logo" class="logo" src="{{ $logo.image }}"></a>
|
||||
<div class="header-items" id="header-items">
|
||||
{{- range $links}}
|
||||
<a class="header-item" href="{{ .url }}">{{ .text }}</a>
|
||||
{{- end }}
|
||||
<!-- <div class="header-item dropdown">
|
||||
<button class="dropbtn">Portfolio
|
||||
<i class="fas fa-caret-down"></i>
|
||||
</button>
|
||||
<div class="dropdown-content">
|
||||
<a href="#">Tauschmärkte</a>
|
||||
<a href="#">Konsumkritischer Stadtrundgang</a>
|
||||
<a href="#">Workshops</a>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<a href="javascript:void(0);" id="menu-icon" class="menu-icon" onclick="unfoldHeader()">☰</a>
|
||||
</header>
|
||||
<script src="/js/header.js"></script>
|
||||
<script src="/js/progress.js"></script>
|
||||
30
layouts/partials/services.html
Normal file
30
layouts/partials/services.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
{{- $services := .Site.Params.services }}
|
||||
{{ $length := len $services }}
|
||||
<div id="services"></div>
|
||||
{{- range $index, $service := $services}}
|
||||
{{ $odd := mod $index 2}}
|
||||
<div class="section {{if eq $odd 0}} section-even {{end}} row">
|
||||
<div class="section-content services">
|
||||
{{if eq $odd 1}}
|
||||
<div class="service-icon-container col-5">
|
||||
<img class="service-icon" src="{{ .image }}">
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="service-description col-7">
|
||||
<div class="title">
|
||||
<h1 class="content-title">{{ .title }}</h1>
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
<p>{{ .description }}</p>
|
||||
{{if .button.visible}}
|
||||
<a class="service-button" href="{{ .button.url }}">{{ .button.text }}</a>
|
||||
{{end}}
|
||||
</div>
|
||||
{{if eq $odd 0}}
|
||||
<div class="service-icon-container col-5">
|
||||
<img class="service-icon" src="{{ .image }}">
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
{{- end }}
|
||||
38
layouts/partials/slider.html
Normal file
38
layouts/partials/slider.html
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
{{- $slider := .Site.Params.slider }}
|
||||
{{ $length := len $slider }}
|
||||
{{ $template := resources.Get "scss/slider.scss" }}
|
||||
{{ if $template }}
|
||||
{{ $slider := $template | resources.ExecuteAsTemplate "css/slider.scss" . | resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }}
|
||||
<link rel="stylesheet" type="text/css" href="{{ $slider.Permalink }}">
|
||||
{{ end }}
|
||||
<!-- <link rel="stylesheet" type="text/css" href="/css/slider.css"> -->
|
||||
<div class="slider">
|
||||
{{ if gt $length 1}}
|
||||
<div class=slide-links>
|
||||
{{- range $index, $slide := $slider}}
|
||||
<a class="slide-link {{if eq $index 0}} slide-link-active {{end}}" onclick="scrollToSlide({{$index}})"></a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="slides">
|
||||
{{- range $index, $slide := $slider}}
|
||||
<div class="slide">
|
||||
<img src="{{ $slide.image }}" alt="{{ $index }}">
|
||||
{{ if gt $length 1}}
|
||||
<span class="slider-navigation-right" onclick="scrollToNextSlideNr({{$index}})">
|
||||
<i class="fas fa-angle-right"></i>
|
||||
</span>
|
||||
<span class="slider-navigation-left" onclick="scrollToPrevSlideNr({{$index}})">
|
||||
<i class="fas fa-angle-left"></i>
|
||||
</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{- end }}
|
||||
</div>
|
||||
</div>
|
||||
<script src="/js/slider.js"></script>
|
||||
{{ if gt $length 1}}
|
||||
<script>
|
||||
window.setInterval(scrollToNextSlide, 10000)
|
||||
</script>
|
||||
{{ end }}
|
||||
35
layouts/partials/team.html
Normal file
35
layouts/partials/team.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
{{- $team := .Site.Params.team }}
|
||||
{{ $length := len $team.members }}
|
||||
{{- $services := .Site.Params.services }}
|
||||
{{ $servicesLength := len $services }}
|
||||
{{ $odd := mod $servicesLength 2}}
|
||||
<div id="team" class="section {{if eq $odd 0}} section-even {{end}}">
|
||||
<div class="section-content team">
|
||||
<div class="title">
|
||||
<h1 class="content-title">{{ $team.title }}</h1>
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
{{- range first 3 $team.members }}
|
||||
<div class="teammember">
|
||||
<img class="avatar" src="{{ .image }}" alt="Avatar">
|
||||
<h1 class="teammember-title">{{ .name }}</h1>
|
||||
{{- range .jobs }}
|
||||
<p>{{ . }}</p>
|
||||
{{- end }}
|
||||
<div class="social-media">
|
||||
<span>
|
||||
{{- range .social}}
|
||||
<a href="{{ .url }}"><i class="fab fa-{{ .type }}"></i></a>
|
||||
{{- end}}
|
||||
{{if .mail}}
|
||||
<a href="mailto:{{ .mail }}"><i class="fas fa-at"></i></a>
|
||||
{{end}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{{- end }}
|
||||
{{if gt $length 3}}
|
||||
<div><a href="#"> > Weitere Teammitglieder < </a></div>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
12
layouts/partials/video.html
Normal file
12
layouts/partials/video.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
{{- $video := .Site.Params.video }}
|
||||
<div id="video" class="section">
|
||||
<div class="section-content">
|
||||
<div class="videoWrapper">
|
||||
{{ if eq $video.type "mp4"}}
|
||||
<video class="video" controls>
|
||||
<source src="{{ $video.url }}" type="video/mp4">
|
||||
</video>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
148
static/css/header.css
Normal file
148
static/css/header.css
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
.header {
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
padding-right: 0rem;
|
||||
display: flex;
|
||||
font-size: large;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
background: white;
|
||||
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
width: 100%;
|
||||
max-width: 1152px;
|
||||
display: flex;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 3.5rem;
|
||||
max-width: 10rem;
|
||||
}
|
||||
|
||||
.small-logo {
|
||||
height: 2.5rem;
|
||||
max-width: 10rem;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
display: none;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
.header-items {
|
||||
margin: auto;
|
||||
margin-left: 0px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header-item {
|
||||
margin-left: 2.5rem
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dropdown .dropbtn {
|
||||
border: none;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: fixed;
|
||||
background-color: #ffffff;
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
padding: 0.5rem 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.header-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.home {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 30px;
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
.menu-icon .hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.small-icon {
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.header-items {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-items.responsive {
|
||||
position: relative;
|
||||
float: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.header-items.responsive .header-item {
|
||||
display: block;
|
||||
margin-left: 0rem;
|
||||
padding-bottom: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.header-items.responsive .icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.header-items.responsive .dropdown {
|
||||
float: none;
|
||||
}
|
||||
.header-items.responsive .dropdown-content {
|
||||
position: relative;
|
||||
box-shadow: none;
|
||||
}
|
||||
.header-items.responsive .dropdown .dropbtn {
|
||||
display: block;
|
||||
width: 100vw;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
}
|
||||
23
static/js/header.js
Normal file
23
static/js/header.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
const logo = document.getElementById('logo');
|
||||
const header = document.getElementById("header");
|
||||
const menuIcon = document.getElementById("menu-icon");
|
||||
const scrollHeaderListener = () => {
|
||||
if (window.scrollY > 0) {
|
||||
logo.className = "small-logo"
|
||||
menuIcon.classList.add("small-icon")
|
||||
} else {
|
||||
logo.className = "logo"
|
||||
menuIcon.classList.remove("small-icon")
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", scrollHeaderListener);
|
||||
|
||||
function unfoldHeader() {
|
||||
var headerItems = document.getElementById("header-items");
|
||||
if (headerItems.className === "header-items") {
|
||||
headerItems.classList.add("responsive")
|
||||
} else {
|
||||
headerItems.classList.remove("responsive")
|
||||
}
|
||||
}
|
||||
11
static/js/progress.js
Normal file
11
static/js/progress.js
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
var h = document.documentElement,
|
||||
b = document.body,
|
||||
st = 'scrollTop',
|
||||
sh = 'scrollHeight',
|
||||
progress = document.querySelector('.progress'),
|
||||
scroll;
|
||||
|
||||
document.addEventListener('scroll', function() {
|
||||
scroll = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
|
||||
progress.style.setProperty('--scroll', scroll + '%');
|
||||
});
|
||||
50
static/js/slider.js
Normal file
50
static/js/slider.js
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
function setActiveSlideLink(slideNr) {
|
||||
const slidelinks = document.querySelectorAll('.slide-link');
|
||||
for (i = 0; i < slidelinks.length; i++) {
|
||||
if (i == slideNr){
|
||||
slidelinks[i].classList.add("slide-link-active");
|
||||
} else {
|
||||
slidelinks[i].classList.remove("slide-link-active");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function scrollToSlide(slideNr) {
|
||||
const slider = document.querySelector('.slider');
|
||||
const slides = slider.querySelector('.slides');
|
||||
const width = slider.querySelector('.slide').clientWidth;
|
||||
slides.scrollTo({left: slideNr * width, top: 0, behavior:'smooth'});
|
||||
setActiveSlideLink(slideNr);
|
||||
}
|
||||
|
||||
function scrollToNextSlideNr(slideNr) {
|
||||
const slidelinks = document.querySelectorAll('.slide-link');
|
||||
nextSlide = slideNr + 1;
|
||||
if (nextSlide >= slidelinks.length){
|
||||
nextSlide = 0;
|
||||
}
|
||||
scrollToSlide(nextSlide);
|
||||
}
|
||||
|
||||
function scrollToPrevSlideNr(slideNr) {
|
||||
const slidelinks = document.querySelectorAll('.slide-link');
|
||||
prevSlide = slideNr - 1;
|
||||
if (prevSlide < 0) {
|
||||
prevSlide = slidelinks.length - 1;
|
||||
}
|
||||
scrollToSlide(prevSlide);
|
||||
}
|
||||
|
||||
function scrollToNextSlide() {
|
||||
const slidelinks = document.querySelectorAll('.slide-link');
|
||||
for (i = 0; i < slidelinks.length; i++) {
|
||||
if (slidelinks[i].classList.contains("slide-link-active")){
|
||||
nextSlide = i+1;
|
||||
if (nextSlide >= slidelinks.length){
|
||||
nextSlide = 0;
|
||||
}
|
||||
scrollToSlide(nextSlide);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
10
static/js/totop.js
Normal file
10
static/js/totop.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
const scrollToTopButton = document.getElementById('totop');
|
||||
const scrollToTopListener = () => {
|
||||
if (window.scrollY > 0) {
|
||||
scrollToTopButton.className = "totop show";
|
||||
} else {
|
||||
scrollToTopButton.className = "totop hide";
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", scrollToTopListener);
|
||||
21
theme.toml
Normal file
21
theme.toml
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
# theme.toml template for a Hugo theme
|
||||
# See https://github.com/gohugoio/hugoThemes#themetoml for an example
|
||||
|
||||
name = "Squirrel"
|
||||
license = "MIT"
|
||||
licenselink = "https://github.com/yourname/yourtheme/blob/master/LICENSE"
|
||||
description = "A Pure CSS Hugo Theme"
|
||||
homepage = "https://nutfactory.org"
|
||||
tags = []
|
||||
features = []
|
||||
min_version = "0.41.0"
|
||||
|
||||
[author]
|
||||
name = "hoernschen"
|
||||
homepage = "https://nutfactory.org"
|
||||
|
||||
# If porting an existing theme
|
||||
[original]
|
||||
name = ""
|
||||
homepage = ""
|
||||
repo = ""
|
||||
Loading…
Reference in a new issue