themes/squirrel
themes/squirrel
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

CHANGE section design to be more dynamic

Browse source
This commit is contained in:
Hoernschen 2022-03-19 23:54:55 +01:00
parent 6032aebe80
commit 7239b2c45e
No known key found for this signature in database
GPG key ID: 8B027F540E7DBD58
14 changed files with 90 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
assets/scss/footer.scss
View file

@ -1,4 +1,5 @@
$color: {{ .Param "color" }}; $color: {{ .Param "color" }};
.footer { .footer {
margin: auto; margin: auto;
padding: 1.5rem 0rem; padding: 1.5rem 0rem;

24
assets/scss/index.scss
View file

@ -1,4 +1,12 @@
$color: {{ .Param "color" }}; $color: {{ .Param "color" }};
$font: {{ .Param "font" }};
@font-face {
font-family: $font;
src: url("/fonts/#{$font}/#{$font}-Regular.ttf") format('truetype');
font-weight: 400;
font-style: normal;
}
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
@ -12,8 +20,11 @@ body {
margin: 0; margin: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'; // font-family: system-ui,-apple-system,'Segoe UI',$font,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';
color: #333; color: #333;
font-family: $font;
font-weight: 400;
font-style: normal;
} }
h1 { h1 {
@ -56,7 +67,6 @@ button {
[class*="col-"] { [class*="col-"] {
float: left; float: left;
padding: 1.5rem 1.5rem; padding: 1.5rem 1.5rem;
height: 100%;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
@ -187,18 +197,10 @@ button {
/* Funding */ /* Funding */
.funding-logo { .funding-logo {
width: 15rem; width: 14rem;
padding: 1.5rem; padding: 1.5rem;
} }
.reference-logo {
max-height: 15rem;
max-width: 15rem;
padding: 1.5rem;
/* -webkit-filter: grayscale(100%);
filter: grayscale(100%); */
}
.services { .services {
padding: 1.5rem 0rem; padding: 1.5rem 0rem;
} }

4
assets/scss/slider.scss
View file

@ -7,7 +7,7 @@ $color: {{ .Param "color" }};
.slider { .slider {
text-align: center; text-align: center;
margin: 0; margin: 0;
margin-top: 5.5rem; margin-top: 4rem;
} }
.slides { .slides {
@ -32,7 +32,7 @@ $color: {{ .Param "color" }};
scroll-snap-align: start; scroll-snap-align: start;
flex-shrink: 0; flex-shrink: 0;
width: 100%; width: 100%;
height: calc(100vh - 5.5rem); height: calc(100vh - 4rem);
margin-right: 0.5rem; margin-right: 0.5rem;
border-radius: 10px; border-radius: 10px;
background: #eee; background: #eee;

24
layouts/index.html
View file

@ -3,14 +3,22 @@
{{- partial "head.html" . -}} {{- partial "head.html" . -}}
<body> <body>
{{- partial "header.html" . -}} {{- partial "header.html" . -}}
{{- partial "slider.html" . -}} {{- range $index, $section := .Site.Params.sections }}
<div id="content" class="content"> {{ $odd := mod $index 2 }}
{{- partial "video.html" . -}} {{if eq .type "slider" }}
{{- partial "services.html" . -}} {{- partial "slider.html" (dict "slider" $section "odd" $odd) -}}
{{- partial "team.html" . -}} {{ else if eq .type "video" }}
{{- partial "contact.html" . -}} {{- partial "video.html" (dict "video" $section "odd" $odd) -}}
{{- partial "funding.html" . -}} {{ else if eq .type "service" }}
</div> {{- partial "service.html" (dict "service" $section "odd" $odd) -}}
{{ else if eq .type "team" }}
{{- partial "team.html" (dict "team" $section "odd" $odd) -}}
{{ else if eq .type "contact" }}
{{- partial "contact.html" (dict "contact" $section "odd" $odd) -}}
{{ else if eq .type "logos" }}
{{- partial "logos.html" (dict "logos" $section "odd" $odd) -}}
{{end}}
{{- end }}
{{- partial "footer.html" . -}} {{- partial "footer.html" . -}}
</body> </body>
</html> </html>

4
layouts/partials/contact.html
View file

@ -1,5 +1,5 @@
{{- $contact := .Site.Params.contact }} {{- $contact := .contact }}
<div id="contact" class="section section-highlight"> <div id="{{ $contact.id }}" class="section section-highlight">
<div class="section-content contact"> <div class="section-content contact">
<div class="contact-text"> <div class="contact-text">
<h1>{{ $contact.title }}</h1> <h1>{{ $contact.title }}</h1>

5
layouts/partials/head.html
View file

@ -19,5 +19,10 @@
<link rel="stylesheet" type="text/css" href="{{ $totop.Permalink }}"> <link rel="stylesheet" type="text/css" href="{{ $totop.Permalink }}">
{{ end }} {{ end }}
<!-- <link rel="stylesheet" type="text/css" href="/css/totop.css"> --> <!-- <link rel="stylesheet" type="text/css" href="/css/totop.css"> -->
{{ $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="/Font-Awesome/css/all.min.css"> <link rel="stylesheet" type="text/css" href="/Font-Awesome/css/all.min.css">
</head> </head>

9
layouts/partials/funding.html → layouts/partials/logos.html
View file

@ -1,12 +1,13 @@
{{- $funding := .Site.Params.funding }} {{- $logos := .logos }}
<div id="funding" class="section"> {{- $odd := .odd }}
<div id="{{ $logos.id }}" class="section {{if eq $odd 0}} section-even {{end}}">
<div class="section-content funding"> <div class="section-content funding">
<div class="title"> <div class="title">
<h1 class="content-title">{{ $funding.title }}</h1> <h1 class="content-title">{{ $logos.title }}</h1>
<div class="divider"></div> <div class="divider"></div>
</div> </div>
<div class="funding-logos"> <div class="funding-logos">
{{- range $funding.logos}} {{- range $logos.logos}}
<a href="{{ .url }}"><img class="funding-logo" src="{{ .logo }}" alt="{{ .text }}"></a> <a href="{{ .url }}"><img class="funding-logo" src="{{ .logo }}" alt="{{ .text }}"></a>
{{- end}} {{- end}}
</div> </div>

26
layouts/partials/service.html Normal file
View file

@ -0,0 +1,26 @@
{{- $service := .service }}
{{- $odd := .odd }}
<div id="{{ $service.id }}" class="section {{if eq $odd 0}} section-even {{end}} row">
<div class="section-content services">
{{if eq $service.image.direction "left"}}
<div class="service-icon-container col-5">
<img class="service-icon" src="{{ $service.image.url }}">
</div>
{{end}}
<div class="service-description col-7">
<div class="title">
<h1 class="content-title">{{ $service.title }}</h1>
<div class="divider"></div>
</div>
<p>{{ $service.description }}</p>
{{if $service.button.visible}}
<a class="service-button" href="{{ $service.button.url }}">{{ $service.button.text }}</a>
{{end}}
</div>
{{if eq $service.image.direction "right"}}
<div class="service-icon-container col-5">
<img class="service-icon" src="{{ $service.image.url }}">
</div>
{{end}}
</div>
</div>

30
layouts/partials/services.html
View file

@ -1,30 +0,0 @@
{{- $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 }}

17
layouts/partials/slider.html
View file

@ -1,23 +1,18 @@
{{- $slider := .Site.Params.slider }} {{- $slider := .slider }}
{{ $length := len $slider }} {{ $length := len $slider.images }}
{{ $template := resources.Get "scss/slider.scss" }} {{ $template := resources.Get "scss/slider.scss" }}
{{ if $template }} <div id="{{ $slider.id }}" class="slider">
{{ $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}} {{ if gt $length 1}}
<div class=slide-links> <div class=slide-links>
{{- range $index, $slide := $slider}} {{- range $index, $slide := $slider.images}}
<a class="slide-link {{if eq $index 0}} slide-link-active {{end}}" onclick="scrollToSlide({{$index}})"></a> <a class="slide-link {{if eq $index 0}} slide-link-active {{end}}" onclick="scrollToSlide({{$index}})"></a>
{{ end }} {{ end }}
</div> </div>
{{ end }} {{ end }}
<div class="slides"> <div class="slides">
{{- range $index, $slide := $slider}} {{- range $index, $slide := $slider.images}}
<div class="slide"> <div class="slide">
<img src="{{ $slide.image }}" alt="{{ $index }}"> <img src="{{ $slide }}" alt="{{ $index }}">
{{ if gt $length 1}} {{ if gt $length 1}}
<span class="slider-navigation-right" onclick="scrollToNextSlideNr({{$index}})"> <span class="slider-navigation-right" onclick="scrollToNextSlideNr({{$index}})">
<i class="fas fa-angle-right"></i> <i class="fas fa-angle-right"></i>

8
layouts/partials/team.html
View file

@ -1,9 +1,7 @@
{{- $team := .Site.Params.team }} {{- $team := .team }}
{{ $length := len $team.members }} {{ $length := len $team.members }}
{{- $services := .Site.Params.services }} {{- $odd := .odd }}
{{ $servicesLength := len $services }} <div id="{{ $team.id }}" class="section {{if eq $odd 0}} section-even {{end}}">
{{ $odd := mod $servicesLength 2}}
<div id="team" class="section {{if eq $odd 0}} section-even {{end}}">
<div class="section-content team"> <div class="section-content team">
<div class="title"> <div class="title">
<h1 class="content-title">{{ $team.title }}</h1> <h1 class="content-title">{{ $team.title }}</h1>

9
layouts/partials/video.html
View file

@ -1,10 +1,11 @@
{{- $video := .Site.Params.video }} {{- $video := .video }}
<div id="video" class="section"> {{- $odd := .odd }}
<div id="{{ $video.id }}" class="section {{if eq $odd 0}} section-even {{end}}">
<div class="section-content"> <div class="section-content">
<div class="videoWrapper"> <div class="videoWrapper">
{{ if eq $video.type "mp4"}} {{ if eq $video.video.type "mp4"}}
<video class="video" controls> <video class="video" controls>
<source src="{{ $video.url }}" type="video/mp4"> <source src="{{ $video.video.url }}" type="video/mp4">
</video> </video>
{{ end }} {{ end }}
</div> </div>

2
static/Font-Awesome

@ -1 +1 @@
Subproject commit fcec2d1b01ff069ac10500ac42e4478d20d21f4c Subproject commit d79d85c3fad85ad1885e87ed558f4afd6fce8289

10
static/css/header.css
View file

@ -1,7 +1,7 @@
.header { .header {
margin: auto; margin: auto;
width: 100%; width: 100%;
padding: 1rem; padding: 0.5rem;
padding-right: 0rem; padding-right: 0rem;
display: flex; display: flex;
font-size: large; font-size: large;
@ -27,12 +27,12 @@
} }
.logo { .logo {
height: 4rem; height: 3rem;
max-width: 10rem; max-width: 10rem;
} }
.small-logo { .small-logo {
height: 3.5rem; height: 2.5rem;
max-width: 10rem; max-width: 10rem;
} }
@ -95,7 +95,7 @@
.menu-icon { .menu-icon {
display: block; display: block;
position: fixed; position: fixed;
top: 30px; top: 15px;
right: 30px; right: 30px;
} }
@ -104,7 +104,7 @@
} }
.small-icon { .small-icon {
top: 20px; top: 15px;
} }
.header-items { .header-items {