From 7239b2c45e73fe5d957876f3d91783f9192c3b31 Mon Sep 17 00:00:00 2001 From: Hoernschen Date: Sat, 19 Mar 2022 23:54:55 +0100 Subject: [PATCH] CHANGE section design to be more dynamic --- assets/scss/footer.scss | 1 + assets/scss/index.scss | 24 ++++++++------- assets/scss/slider.scss | 4 +-- layouts/index.html | 24 ++++++++++----- layouts/partials/contact.html | 4 +-- layouts/partials/head.html | 5 ++++ layouts/partials/{funding.html => logos.html} | 9 +++--- layouts/partials/service.html | 26 ++++++++++++++++ layouts/partials/services.html | 30 ------------------- layouts/partials/slider.html | 17 ++++------- layouts/partials/team.html | 8 ++--- layouts/partials/video.html | 9 +++--- static/Font-Awesome | 2 +- static/css/header.css | 10 +++---- 14 files changed, 90 insertions(+), 83 deletions(-) rename layouts/partials/{funding.html => logos.html} (58%) create mode 100644 layouts/partials/service.html delete mode 100644 layouts/partials/services.html diff --git a/assets/scss/footer.scss b/assets/scss/footer.scss index f83c716..77d196f 100644 --- a/assets/scss/footer.scss +++ b/assets/scss/footer.scss @@ -1,4 +1,5 @@ $color: {{ .Param "color" }}; + .footer { margin: auto; padding: 1.5rem 0rem; diff --git a/assets/scss/index.scss b/assets/scss/index.scss index 21e84a8..9d471bb 100644 --- a/assets/scss/index.scss +++ b/assets/scss/index.scss @@ -1,4 +1,12 @@ $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 { scroll-behavior: smooth; @@ -12,8 +20,11 @@ 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'; + // font-family: system-ui,-apple-system,'Segoe UI',$font,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'; color: #333; + font-family: $font; + font-weight: 400; + font-style: normal; } h1 { @@ -56,7 +67,6 @@ button { [class*="col-"] { float: left; padding: 1.5rem 1.5rem; - height: 100%; } @media screen and (max-width: 600px) { @@ -187,18 +197,10 @@ button { /* Funding */ .funding-logo { - width: 15rem; + width: 14rem; 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; } diff --git a/assets/scss/slider.scss b/assets/scss/slider.scss index 5430b5e..f1f61e3 100644 --- a/assets/scss/slider.scss +++ b/assets/scss/slider.scss @@ -7,7 +7,7 @@ $color: {{ .Param "color" }}; .slider { text-align: center; margin: 0; - margin-top: 5.5rem; + margin-top: 4rem; } .slides { @@ -32,7 +32,7 @@ $color: {{ .Param "color" }}; scroll-snap-align: start; flex-shrink: 0; width: 100%; - height: calc(100vh - 5.5rem); + height: calc(100vh - 4rem); margin-right: 0.5rem; border-radius: 10px; background: #eee; diff --git a/layouts/index.html b/layouts/index.html index b16964d..3c18038 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -3,14 +3,22 @@ {{- partial "head.html" . -}} {{- partial "header.html" . -}} - {{- partial "slider.html" . -}} -
- {{- partial "video.html" . -}} - {{- partial "services.html" . -}} - {{- partial "team.html" . -}} - {{- partial "contact.html" . -}} - {{- partial "funding.html" . -}} -
+ {{- range $index, $section := .Site.Params.sections }} + {{ $odd := mod $index 2 }} + {{if eq .type "slider" }} + {{- partial "slider.html" (dict "slider" $section "odd" $odd) -}} + {{ else if eq .type "video" }} + {{- partial "video.html" (dict "video" $section "odd" $odd) -}} + {{ else if eq .type "service" }} + {{- 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" . -}} \ No newline at end of file diff --git a/layouts/partials/contact.html b/layouts/partials/contact.html index 64d3649..862f55a 100644 --- a/layouts/partials/contact.html +++ b/layouts/partials/contact.html @@ -1,5 +1,5 @@ -{{- $contact := .Site.Params.contact }} -
+{{- $contact := .contact }} +

{{ $contact.title }}

diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 513bc42..6c70da4 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -19,5 +19,10 @@ {{ end }} + {{ $template := resources.Get "scss/slider.scss" }} + {{ if $template }} + {{ $slider := $template | resources.ExecuteAsTemplate "css/slider.scss" . | resources.ToCSS (dict "outputStyle" "compressed") | fingerprint }} + + {{ end }} \ No newline at end of file diff --git a/layouts/partials/funding.html b/layouts/partials/logos.html similarity index 58% rename from layouts/partials/funding.html rename to layouts/partials/logos.html index 0e0ebfc..542e62e 100644 --- a/layouts/partials/funding.html +++ b/layouts/partials/logos.html @@ -1,12 +1,13 @@ -{{- $funding := .Site.Params.funding }} -
+{{- $logos := .logos }} +{{- $odd := .odd }} +
-

{{ $funding.title }}

+

{{ $logos.title }}

- {{- range $funding.logos}} + {{- range $logos.logos}} {{- end}}
diff --git a/layouts/partials/service.html b/layouts/partials/service.html new file mode 100644 index 0000000..ff59328 --- /dev/null +++ b/layouts/partials/service.html @@ -0,0 +1,26 @@ +{{- $service := .service }} +{{- $odd := .odd }} +
+
+ {{if eq $service.image.direction "left"}} +
+ +
+ {{end}} +
+
+

{{ $service.title }}

+
+
+

{{ $service.description }}

+ {{if $service.button.visible}} + {{ $service.button.text }} + {{end}} +
+ {{if eq $service.image.direction "right"}} +
+ +
+ {{end}} +
+
\ No newline at end of file diff --git a/layouts/partials/services.html b/layouts/partials/services.html deleted file mode 100644 index 9f27d00..0000000 --- a/layouts/partials/services.html +++ /dev/null @@ -1,30 +0,0 @@ -{{- $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 index 2ab6a01..b4e75af 100644 --- a/layouts/partials/slider.html +++ b/layouts/partials/slider.html @@ -1,23 +1,18 @@ -{{- $slider := .Site.Params.slider }} -{{ $length := len $slider }} +{{- $slider := .slider }} +{{ $length := len $slider.images }} {{ $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}} + {{- range $index, $slide := $slider.images}} {{ end }}
{{ end }}
- {{- range $index, $slide := $slider}} + {{- range $index, $slide := $slider.images}}
- {{ $index }} + {{ $index }} {{ if gt $length 1}} diff --git a/layouts/partials/team.html b/layouts/partials/team.html index 644ae83..3dff833 100644 --- a/layouts/partials/team.html +++ b/layouts/partials/team.html @@ -1,9 +1,7 @@ -{{- $team := .Site.Params.team }} +{{- $team := .team }} {{ $length := len $team.members }} -{{- $services := .Site.Params.services }} -{{ $servicesLength := len $services }} -{{ $odd := mod $servicesLength 2}} -
+{{- $odd := .odd }} +

{{ $team.title }}

diff --git a/layouts/partials/video.html b/layouts/partials/video.html index 88309d9..f658e55 100644 --- a/layouts/partials/video.html +++ b/layouts/partials/video.html @@ -1,10 +1,11 @@ -{{- $video := .Site.Params.video }} -
+{{- $video := .video }} +{{- $odd := .odd }} +
- {{ if eq $video.type "mp4"}} + {{ if eq $video.video.type "mp4"}} {{ end }}
diff --git a/static/Font-Awesome b/static/Font-Awesome index fcec2d1..d79d85c 160000 --- a/static/Font-Awesome +++ b/static/Font-Awesome @@ -1 +1 @@ -Subproject commit fcec2d1b01ff069ac10500ac42e4478d20d21f4c +Subproject commit d79d85c3fad85ad1885e87ed558f4afd6fce8289 diff --git a/static/css/header.css b/static/css/header.css index 1882ac5..8611559 100644 --- a/static/css/header.css +++ b/static/css/header.css @@ -1,7 +1,7 @@ .header { margin: auto; width: 100%; - padding: 1rem; + padding: 0.5rem; padding-right: 0rem; display: flex; font-size: large; @@ -27,12 +27,12 @@ } .logo { - height: 4rem; + height: 3rem; max-width: 10rem; } .small-logo { - height: 3.5rem; + height: 2.5rem; max-width: 10rem; } @@ -95,7 +95,7 @@ .menu-icon { display: block; position: fixed; - top: 30px; + top: 15px; right: 30px; } @@ -104,7 +104,7 @@ } .small-icon { - top: 20px; + top: 15px; } .header-items {