diff --git a/archetypes/default.md b/archetypes/default.md new file mode 100644 index 0000000..ac36e06 --- /dev/null +++ b/archetypes/default.md @@ -0,0 +1,2 @@ ++++ ++++ diff --git a/assets/scss/footer.scss b/assets/scss/footer.scss new file mode 100644 index 0000000..f83c716 --- /dev/null +++ b/assets/scss/footer.scss @@ -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; +} \ No newline at end of file diff --git a/assets/scss/index.scss b/assets/scss/index.scss new file mode 100644 index 0000000..21e84a8 --- /dev/null +++ b/assets/scss/index.scss @@ -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; +} \ No newline at end of file diff --git a/assets/scss/progressbar.scss b/assets/scss/progressbar.scss new file mode 100644 index 0000000..8386e00 --- /dev/null +++ b/assets/scss/progressbar.scss @@ -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; +} \ No newline at end of file diff --git a/assets/scss/slider.scss b/assets/scss/slider.scss new file mode 100644 index 0000000..5430b5e --- /dev/null +++ b/assets/scss/slider.scss @@ -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; */ +} \ No newline at end of file diff --git a/assets/scss/totop.scss b/assets/scss/totop.scss new file mode 100644 index 0000000..83e177c --- /dev/null +++ b/assets/scss/totop.scss @@ -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; + } +} \ No newline at end of file diff --git a/layouts/404.html b/layouts/404.html new file mode 100644 index 0000000..9ac434d --- /dev/null +++ b/layouts/404.html @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html new file mode 100644 index 0000000..e69de29 diff --git a/layouts/_default/list.html b/layouts/_default/list.html new file mode 100644 index 0000000..e69de29 diff --git a/layouts/_default/single.html b/layouts/_default/single.html new file mode 100644 index 0000000..bfc5d40 --- /dev/null +++ b/layouts/_default/single.html @@ -0,0 +1,18 @@ + + + {{- partial "head.html" . -}} + + {{- partial "header.html" . -}} + {{ block "main" . }} +
+
+

{{ .Title }}

+
+
+ + {{ .Content }} +
+ {{ end }} + {{- partial "footer.html" . -}} + + \ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html new file mode 100644 index 0000000..b16964d --- /dev/null +++ b/layouts/index.html @@ -0,0 +1,16 @@ + + + {{- partial "head.html" . -}} + + {{- partial "header.html" . -}} + {{- partial "slider.html" . -}} +
+ {{- partial "video.html" . -}} + {{- partial "services.html" . -}} + {{- partial "team.html" . -}} + {{- partial "contact.html" . -}} + {{- partial "funding.html" . -}} +
+ {{- partial "footer.html" . -}} + + \ No newline at end of file diff --git a/layouts/partials/contact.html b/layouts/partials/contact.html new file mode 100644 index 0000000..64d3649 --- /dev/null +++ b/layouts/partials/contact.html @@ -0,0 +1,12 @@ +{{- $contact := .Site.Params.contact }} +
+
+
+

{{ $contact.title }}

+

{{ $contact.subtitle }}

+
+
+ {{ $contact.button.text }} +
+
+
\ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html new file mode 100644 index 0000000..202981d --- /dev/null +++ b/layouts/partials/footer.html @@ -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 }} + +{{ end }} + + + \ No newline at end of file diff --git a/layouts/partials/funding.html b/layouts/partials/funding.html new file mode 100644 index 0000000..0e0ebfc --- /dev/null +++ b/layouts/partials/funding.html @@ -0,0 +1,14 @@ +{{- $funding := .Site.Params.funding }} +
+
+
+

{{ $funding.title }}

+
+
+
+ {{- range $funding.logos}} + + {{- end}} +
+
+
\ No newline at end of file diff --git a/layouts/partials/head.html b/layouts/partials/head.html new file mode 100644 index 0000000..d64ce31 --- /dev/null +++ b/layouts/partials/head.html @@ -0,0 +1,20 @@ + + + + + + {{ block "title" . }}{{ .Site.Title }}{{ end }} + {{ $template := resources.Get "scss/index.scss" }} + {{ if $template }} + {{ $index := $template | resources.ExecuteAsTemplate "css/index.scss" . | resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }} + + {{ end }} + + {{ $template := resources.Get "scss/totop.scss" }} + {{ if $template }} + {{ $totop := $template | resources.ExecuteAsTemplate "css/totop.scss" . | resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }} + + {{ end }} + + + \ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html new file mode 100644 index 0000000..6e3de9d --- /dev/null +++ b/layouts/partials/header.html @@ -0,0 +1,33 @@ +{{- $header := .Site.Params.header }} +{{- $logo := index $header "logo" }} +{{- $links := index $header "links" }} + +{{ $template := resources.Get "scss/progressbar.scss" }} +{{ if $template }} +{{ $progressbar := $template | resources.ExecuteAsTemplate "css/progressbar.scss" . | resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }} + +{{ end }} +
+ + + \ No newline at end of file diff --git a/layouts/partials/services.html b/layouts/partials/services.html new file mode 100644 index 0000000..9f27d00 --- /dev/null +++ b/layouts/partials/services.html @@ -0,0 +1,30 @@ +{{- $services := .Site.Params.services }} +{{ $length := len $services }} +
+{{- range $index, $service := $services}} +{{ $odd := mod $index 2}} +
+
+ {{if eq $odd 1}} +
+ +
+ {{end}} +
+
+

{{ .title }}

+
+
+

{{ .description }}

+ {{if .button.visible}} + {{ .button.text }} + {{end}} +
+ {{if eq $odd 0}} +
+ +
+ {{end}} +
+
+{{- end }} \ No newline at end of file diff --git a/layouts/partials/slider.html b/layouts/partials/slider.html new file mode 100644 index 0000000..2ab6a01 --- /dev/null +++ b/layouts/partials/slider.html @@ -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 }} + +{{ end }} + +
+ {{ if gt $length 1}} +
+ {{- range $index, $slide := $slider}} + + {{ end }} +
+ {{ end }} +
+ {{- range $index, $slide := $slider}} +
+ {{ $index }} + {{ if gt $length 1}} + + + + + + + {{ end }} +
+ {{- end }} +
+
+ +{{ if gt $length 1}} + +{{ end }} \ No newline at end of file diff --git a/layouts/partials/team.html b/layouts/partials/team.html new file mode 100644 index 0000000..644ae83 --- /dev/null +++ b/layouts/partials/team.html @@ -0,0 +1,35 @@ +{{- $team := .Site.Params.team }} +{{ $length := len $team.members }} +{{- $services := .Site.Params.services }} +{{ $servicesLength := len $services }} +{{ $odd := mod $servicesLength 2}} +
+
+
+

{{ $team.title }}

+
+
+ {{- range first 3 $team.members }} +
+ Avatar +

{{ .name }}

+ {{- range .jobs }} +

{{ . }}

+ {{- end }} + +
+ {{- end }} + {{if gt $length 3}} +
> Weitere Teammitglieder <
+ {{end}} +
+
\ No newline at end of file diff --git a/layouts/partials/video.html b/layouts/partials/video.html new file mode 100644 index 0000000..88309d9 --- /dev/null +++ b/layouts/partials/video.html @@ -0,0 +1,12 @@ +{{- $video := .Site.Params.video }} +
+
+
+ {{ if eq $video.type "mp4"}} + + {{ end }} +
+
+
\ No newline at end of file diff --git a/static/css/header.css b/static/css/header.css new file mode 100644 index 0000000..a57b724 --- /dev/null +++ b/static/css/header.css @@ -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; + } + +} \ No newline at end of file diff --git a/static/js/header.js b/static/js/header.js new file mode 100644 index 0000000..6203b05 --- /dev/null +++ b/static/js/header.js @@ -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") + } +} \ No newline at end of file diff --git a/static/js/progress.js b/static/js/progress.js new file mode 100644 index 0000000..6c0aaea --- /dev/null +++ b/static/js/progress.js @@ -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 + '%'); +}); \ No newline at end of file diff --git a/static/js/slider.js b/static/js/slider.js new file mode 100644 index 0000000..619d3c9 --- /dev/null +++ b/static/js/slider.js @@ -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; + } + } +} \ No newline at end of file diff --git a/static/js/totop.js b/static/js/totop.js new file mode 100644 index 0000000..14381e7 --- /dev/null +++ b/static/js/totop.js @@ -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); \ No newline at end of file diff --git a/theme.toml b/theme.toml new file mode 100644 index 0000000..a1f6dca --- /dev/null +++ b/theme.toml @@ -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 = ""