small fixes

This commit is contained in:
teldra 2022-06-07 20:15:31 +02:00
parent ebc35f6d7f
commit b34288dc7f
21 changed files with 256 additions and 48 deletions

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View File

Before

Width:  |  Height:  |  Size: 2.3 MiB

After

Width:  |  Height:  |  Size: 2.3 MiB

View File

Before

Width:  |  Height:  |  Size: 152 KiB

After

Width:  |  Height:  |  Size: 152 KiB

View File

Before

Width:  |  Height:  |  Size: 4.3 MiB

After

Width:  |  Height:  |  Size: 4.3 MiB

View File

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

View File

@ -32,6 +32,9 @@ placeholder = "/images/no_article_pic.png"
items_per_list = 5
page_width = "80%"
header_heigth = "460"
# data for your imprint and contact page
[imprintdata]
tel = "(+) 49 5141 907 927"

Binary file not shown.

After

Width:  |  Height:  |  Size: 989 KiB

View File

Before

Width:  |  Height:  |  Size: 169 KiB

After

Width:  |  Height:  |  Size: 169 KiB

View File

@ -4,7 +4,10 @@
* if a system-wide theme preference is set on the user's device.
*/
:root {
--shadow-color: #282828;
--logo-color: #202b38;
--background-body: #fff;
--background: #efefef;
--background-alt: #f7f7f7;
@ -30,6 +33,8 @@
@media (prefers-color-scheme: dark) {
:root {
--shadow-color: #000000;
--logo-color: #fff;
--background-body: #202b38;
--background: #161f27;
--background-alt: #1a242f;

View File

@ -0,0 +1,17 @@
.banner {
min-height: 33vh;
display: flex;
align-items: center;
//background-attachment: fixed;
font-size: 115%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
h1 {
margin-left: auto;
margin-right: auto;
text-align: center;
word-break: break-all;
}
}

View File

@ -12,7 +12,6 @@
bottom: 0;
height: 100%;
height: 100vh;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
a {
@ -57,8 +56,14 @@
}
.banner {
display: flex; align-items: center; background-position: top; background-repeat: no-repeat; background-attachment: fixed;
display: flex;
align-items: center;
background-repeat: no-repeat;
background-attachment: fixed;
font-size: 115%;
background-size: cover;
background-position: top;
h1 {
margin-left: auto;
margin-right: auto;
@ -98,9 +103,7 @@ section, article, .article_footer, .sidebar {
margin-bottom: 5rem;
&:hover {
.img {
height: 180px;
background-size: 110% auto;
background-position: top;
height: 240px;
}
.img-only {
height: 360px;
@ -122,17 +125,17 @@ section, article, .article_footer, .sidebar {
.img {
width: 100%;
height: 140px;
background-size: 100% auto;
background-position: top;
transition: all .3s ease-in-out;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.img-only {
width: 100%;
height: 360px;
transition: all .2s ease-in-out;
background-size: 100% auto;
background-position: top;
transition: all .2s ease-in-out;
background-repeat: no-repeat;
}
}

View File

@ -0,0 +1,49 @@
.container {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
min-width: 190px;
max-width: 98vw;
height: 100%;
height: 100vh;
margin-left: auto;
margin-right: auto;
a {
color: var(--text-color);
}
}
@media (min-width: 600px) {
.container {
max-width: 98vw;
}
}
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.container {
max-width:1024px;
}
}
@media (min-width: 1280px) {
.container {
max-width:1280px;
}
}
@media (min-width: 1920px) {
.container {
max-width:1920px;
}
}

View File

@ -0,0 +1,70 @@
.header {
.header_content {
display: flex;
min-height: 5rem;
align-items: center;
justify-content: space-between;
margin-right: 1rem;
svg {
margin-left: 0.8rem;
min-width: 80px;
width: 13vw; height: auto;
filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 1));
path {
fill: var(--logo-color) !important;
}
}
div {
display: flex;
flex-wrap: wrap;
text-shadow: 0px 4px 4px var(--shadow-color);
a {
margin-left: .8rem;
}
}
}
hr {
}
}
@media (min-width: 640px) {
.header_content {
min-height: 6rem;
div {
font-size: 110%;
}
}
}
@media (min-width: 768px) {
.header_content {
min-height: 6.5rem;
div {
font-size: 115%;
}
}
}
@media (min-width: 1024px) {
.header_content {
min-height: 7rem;
div {
font-size: 120%;
}
}
}
@media (min-width: 1280px) {
.header_content {
min-height: 7.5rem;
div {
font-size: 125%;
}
}
}
@media (min-width: 1920px) {
.header_content {
min-height: 8rem;
div {
font-size: 130%;
}
}
}

View File

@ -0,0 +1,4 @@
main {
flex-grow: 1;
overflow: auto;
}

View File

@ -1,7 +1,6 @@
<!DOCTYPE html>
<html lang="{{ .Site.Language }}">
{{- partial "snippets/head.html" . -}}
{{ block "css" . -}}{{- end }}
<body>
<div class="container">
<header class="header">
@ -9,7 +8,7 @@
</header>
<main class="content">
{{ partial "snippets/banner" . -}}
<div class="main minheight">
<div class="main">
{{ block "content" . -}}{{- end }}
{{ block "sidebar" . -}}{{- end }}
{{ block "pagefooter" . -}}{{- end }}

View File

@ -5,7 +5,7 @@
{{ $featured := where (where (where $all ".Params.featured" "=" true) "Type" "in" .Site.Params.searchSections) ".Params.Lastmod" "gt" (now.AddDate 0 0 $days) }}
{{ if eq hugo.Environment "development" }}
devel
{{ "" }}
{{ end }}
{{ $featured = $all | intersect $featured }}
@ -22,10 +22,9 @@
{{ partial "snippets/content" (dict "content" .Content) }}
{{ end }}
<div class="twolists">
{{ partial "layout/gen_list" (dict "context" . "pages" $featured "title" $feat )}}
{{ partial "layout/gen_list" (dict "context" . "pages" $posts "title" $news "limit" "5" )}}
</div>
{{ partial "layout/gen_list" (dict "context" . "pages" $featured "title" $feat )}}
{{ partial "layout/gen_list" (dict "context" . "pages" $posts "title" $news "limit" "5" )}}
{{ end }}
{{ define "sidebar" }}

View File

@ -1,3 +1,5 @@
{{ $p := .pages }}
{{ if and (.limit) (not .paginate) }}
{{ $p = first .limit .pages }}
@ -30,7 +32,7 @@
{{ $images = complement $banner $image }}
{{ $image = (index (complement $banner $image) 0) }}
{{ $banner = (index $banner 0) }}
<a href="{{ .Permalink }}">
<section>
@ -38,6 +40,26 @@
{{ .Title }}
</h3>
{{ with .Resources.GetMatch $banner }}
{{ if eq hugo.Environment "development" }}
Width: {{ .Width }}px<br>
Height: {{ .Height }}px<br>
{{ $ratio := div (float .Width) (float .Height) }}
Ratio: {{ $ratio }}<br>
{{ if lt $ratio "2.608695652173913" }}
not a good ratio<br>
{{ else if gt $ratio "2.608695652173913" }}
{{ end }}
{{ if lt (int .Height) "460" }}
to small, better 800px in height<br>
{{ else if gt (int .Height) "460" }}
to big, better 460px in height<br>
{{ end }}
{{ if lt (int .Width) "1200" }}
to small, better 1200px in width<br>
{{ else if gt (int .Width) "1200" }}
to big, better 1200px in width<br>
{{ end }}
{{ end }}
<div class="img" style="background-image: url({{ .Permalink }})">
</div>
{{ end }}

View File

@ -24,15 +24,40 @@
{{ $height := safeCSS (printf "min-height: calc(%spx - 5rem); max-height: calc(%spx - 5rem);" $px $px) }}
{{ if and (resources.GetMatch $banner) (ne .Params.banner false) }}
{{ $height = safeCSS (printf "height: calc(%spx - 5rem);" (string $img.Height)) }}
<div style="background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)), url({{- $img.Permalink -}}); {{ $height }}" class="banner banner-shadow"><h1 class="funny-text-shadow">{{ $title }}</h1></div>
<div style="background-image: url({{- $img.Permalink -}})" class="banner banner-shadow center_bg_img">
<h1>{{ $title }}</h1>
{{ if eq hugo.Environment "development" }}
<div style="display: flex; flex-direction: column;">
<div>Width: {{ (resources.GetMatch $banner).Width }}px</div>
<div>Height: {{ (resources.GetMatch $banner).Height }}px</div>
<div>Ratio: {{div (float (resources.GetMatch $banner).Width) (float (resources.GetMatch $banner).Height) }}</div>
</div>
{{ end }}
</div>
{{ else if and (.Resources.Match "banner*") (ne .Params.banner false) }}
{{ $img = (.Resources.GetMatch "banner*").Fill $fill }}
{{ $height = safeCSS (printf "height: calc(%spx - 5rem);" (string $img.Height)) }}
<div style="background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)), url({{- $img.Permalink -}}); {{ $height }}" class="banner banner-shadow"><h1 class="funny-text-shadow">{{ $title }}</h1></div>
<div style="background-image:url({{- $img.Permalink -}})" class="banner banner-shadow center_bg_img"><h1>{{ $title }}</h1>
{{ if eq hugo.Environment "development" }}
<div style="display: flex; flex-direction: column;">
<div>Width: {{ (index (.Resources.Match "banner*") 0).Width }}px</div>
<div>Height: {{ (index (.Resources.Match "banner*") 0).Height }}px</div>
<div>Ratio: {{div (float (index (.Resources.Match "banner*") 0).Width) (float (index (.Resources.Match "banner*") 0).Height) }}</div>
</div>
{{ end }}
</div>
{{ else if and (.Resources.ByType "image") (ne .Params.banner false) $all }}
{{ $img = (index (.Resources.ByType "image") 0).Fill $fill }}
{{ $height = safeCSS (printf "height: calc(%spx - 5rem);" (string $img.Height)) }}
<div style="background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)), url({{- $img.Permalink -}}); {{ $height }}" class="banner banner-shadow"><h1 class="funny-text-shadow">{{ $title }}</h1></div>
<div style="background-image: url({{- $img.Permalink -}})" class="banner banner-shadow center_bg_img"><h1>{{ $title }}</h1>
{{ if eq hugo.Environment "development" }}
<div style="display: flex; flex-direction: column;">
<div>Width: {{ (index (.Resources.ByType "image") 0).Width }}px</div>
<div>Height: {{ (index (.Resources.ByType "image") 0).Height }}px</div>
<div>Ratio: {{div (float (index (.Resources.ByType "image") 0).Width) (float (index (.Resources.ByType "image") 0).Height) }}</div>
</div>
{{ end }}
</div>
{{ else }}
<div style="background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)); {{ $height }}" class="banner"><h1 class="funny-text-shadow">{{ $title }}</h1></div>
<div class="banner"><h1>{{ $title }}</h1></div>
{{ end }}

View File

@ -3,13 +3,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{ $common := resources.Get "scss/common.scss" | resources.ToCSS }}
{{ $water := resources.Get "css/water.css" | resources.ToCSS }}
{{ $big := resources.Get "scss/big.scss" | resources.ToCSS }}
{{ $allcss := slice $water $common $big | resources.Concat "/css/vendor.css" | minify | fingerprint "sha512" }}
{{ $container := resources.Get "scss/container.scss" | resources.ToCSS }}
{{ $header := resources.Get "scss/header.scss" | resources.ToCSS }}
{{ $banner := resources.Get "scss/banner.scss" | resources.ToCSS }}
{{ $main := resources.Get "scss/main.scss" | resources.ToCSS }}
{{ $allcss := slice $water $container $header $banner $main | resources.Concat "/css/vendor.css" | minify | fingerprint "sha512" }}
<link rel="stylesheet" href="{{ $allcss.RelPermalink }}" integrity="{{ $allcss.Data.Integrity }}">
{{ $title := print .Site.Title " | " .Title }}
{{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}
<title>{{ $title }}</title>

View File

@ -1,17 +1,18 @@
{{ $img := resources.GetMatch "/images/logo_back_full.svg" }}
<a href="/" style="margin-left: .8rem;">
<img src="/images/logo.svg" alt="SVG mit img laden" class="dark-shadow">
</a>
<div>
{{- range site.Params.mainMenu -}}
{{ $name := . }}
{{ if i18n . }}
{{ $name = i18n . }}
{{ end }}
<a href="{{- . | relLangURL -}}" style="margin-left: .8rem;" class="funny-text-shadow">{{- $name | humanize -}}</a>
{{- end -}}
{{ $svg := readFile "/assets/images/logo/logo.svg" }}
<div class="header_content">
<a href="/" class="loppp">
{{ safeHTML $svg }}
</a>
<div>
{{- range site.Params.mainMenu -}}
{{ $name := . }}
{{ if i18n . }}
{{ $name = i18n . }}
{{ end }}
<a href="{{- . | relLangURL -}}" >{{- $name | humanize -}}</a>
{{- end -}}
</div>
</div>
<hr />

View File

@ -0,0 +1,5 @@
<style>
{{ partial "css/container" . }}
{{ partial "css/header" . }}
</style>