diff --git a/themes/buha/static/images/logo.svg b/assets/images/logo/logo.svg similarity index 95% rename from themes/buha/static/images/logo.svg rename to assets/images/logo/logo.svg index c8b9ea77..1f0d4566 100644 --- a/themes/buha/static/images/logo.svg +++ b/assets/images/logo/logo.svg @@ -4,9 +4,9 @@ + width="86.74485px" + fit-margin-top="2.5" + fit-margin-right="3" + lock-margins="false" + fit-margin-left="3" + fit-margin-bottom="10" /> + transform="matrix(9.8356593,0,0,9.8356593,-456.32947,4.466375)" + style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.0305013;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"> diff --git a/themes/buha/static/images/logo_back.svg b/assets/images/logo/logo_back.svg similarity index 100% rename from themes/buha/static/images/logo_back.svg rename to assets/images/logo/logo_back.svg diff --git a/themes/buha/static/images/logo_back_full.png b/assets/images/logo/logo_back_full.png similarity index 100% rename from themes/buha/static/images/logo_back_full.png rename to assets/images/logo/logo_back_full.png diff --git a/themes/buha/assets/images/logo_back_full.svg b/assets/images/logo/logo_back_full.svg similarity index 100% rename from themes/buha/assets/images/logo_back_full.svg rename to assets/images/logo/logo_back_full.svg diff --git a/themes/buha/assets/images/no_article_pic.png b/assets/images/logo/no_article_pic.png similarity index 100% rename from themes/buha/assets/images/no_article_pic.png rename to assets/images/logo/no_article_pic.png diff --git a/config/_default/params.toml b/config/_default/params.toml index 24f7fbb1..43ad35e6 100644 --- a/config/_default/params.toml +++ b/config/_default/params.toml @@ -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" diff --git a/content/news/2022-04-10-Matrix-Space/banner_01.png b/content/news/2022-04-10-Matrix-Space/banner_01.png new file mode 100644 index 00000000..bd1a2e8a Binary files /dev/null and b/content/news/2022-04-10-Matrix-Space/banner_01.png differ diff --git a/content/news/2022-04-10-Matrix-Space/banner_real.jpg b/content/news/2022-04-10-Matrix-Space/image1.jpg similarity index 100% rename from content/news/2022-04-10-Matrix-Space/banner_real.jpg rename to content/news/2022-04-10-Matrix-Space/image1.jpg diff --git a/themes/buha/assets/css/water.css b/themes/buha/assets/css/water.css index e18fd9d5..8d5374c2 100644 --- a/themes/buha/assets/css/water.css +++ b/themes/buha/assets/css/water.css @@ -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; diff --git a/themes/buha/assets/scss/banner.scss b/themes/buha/assets/scss/banner.scss new file mode 100644 index 00000000..9e88feb3 --- /dev/null +++ b/themes/buha/assets/scss/banner.scss @@ -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; + } +} diff --git a/themes/buha/assets/scss/common.scss b/themes/buha/assets/scss/common.scss index c66e7b10..6b49c9e9 100644 --- a/themes/buha/assets/scss/common.scss +++ b/themes/buha/assets/scss/common.scss @@ -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; } } diff --git a/themes/buha/assets/scss/container.scss b/themes/buha/assets/scss/container.scss new file mode 100644 index 00000000..3ed2e083 --- /dev/null +++ b/themes/buha/assets/scss/container.scss @@ -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; + } +} diff --git a/themes/buha/assets/scss/header.scss b/themes/buha/assets/scss/header.scss new file mode 100644 index 00000000..ef4bdbd6 --- /dev/null +++ b/themes/buha/assets/scss/header.scss @@ -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%; + } + } +} diff --git a/themes/buha/assets/scss/main.scss b/themes/buha/assets/scss/main.scss new file mode 100644 index 00000000..c3d6fa20 --- /dev/null +++ b/themes/buha/assets/scss/main.scss @@ -0,0 +1,4 @@ +main { + flex-grow: 1; + overflow: auto; +} diff --git a/themes/buha/layouts/_default/baseof.html b/themes/buha/layouts/_default/baseof.html index deffb333..4c175b95 100644 --- a/themes/buha/layouts/_default/baseof.html +++ b/themes/buha/layouts/_default/baseof.html @@ -1,7 +1,6 @@ {{- partial "snippets/head.html" . -}} - {{ block "css" . -}}{{- end }}
@@ -9,7 +8,7 @@
{{ partial "snippets/banner" . -}} -
+
{{ block "content" . -}}{{- end }} {{ block "sidebar" . -}}{{- end }} {{ block "pagefooter" . -}}{{- end }} diff --git a/themes/buha/layouts/index.html b/themes/buha/layouts/index.html index 76ad97fa..77bb2833 100644 --- a/themes/buha/layouts/index.html +++ b/themes/buha/layouts/index.html @@ -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 }} -
- {{ partial "layout/gen_list" (dict "context" . "pages" $featured "title" $feat )}} - {{ partial "layout/gen_list" (dict "context" . "pages" $posts "title" $news "limit" "5" )}} -
+ {{ 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" }} diff --git a/themes/buha/layouts/partials/layout/gen_list.html b/themes/buha/layouts/partials/layout/gen_list.html index 1ed6256d..6066302d 100644 --- a/themes/buha/layouts/partials/layout/gen_list.html +++ b/themes/buha/layouts/partials/layout/gen_list.html @@ -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) }} - +
@@ -38,6 +40,26 @@ {{ .Title }} {{ with .Resources.GetMatch $banner }} + {{ if eq hugo.Environment "development" }} + Width: {{ .Width }}px
+ Height: {{ .Height }}px
+ {{ $ratio := div (float .Width) (float .Height) }} + Ratio: {{ $ratio }}
+ {{ if lt $ratio "2.608695652173913" }} + not a good ratio
+ {{ else if gt $ratio "2.608695652173913" }} + {{ end }} + {{ if lt (int .Height) "460" }} + to small, better 800px in height
+ {{ else if gt (int .Height) "460" }} + to big, better 460px in height
+ {{ end }} + {{ if lt (int .Width) "1200" }} + to small, better 1200px in width
+ {{ else if gt (int .Width) "1200" }} + to big, better 1200px in width
+ {{ end }} + {{ end }}
{{ end }} diff --git a/themes/buha/layouts/partials/snippets/banner.html b/themes/buha/layouts/partials/snippets/banner.html index 460340d5..0de5b520 100644 --- a/themes/buha/layouts/partials/snippets/banner.html +++ b/themes/buha/layouts/partials/snippets/banner.html @@ -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)) }} - + {{ 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)) }} - + {{ 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)) }} - + {{ else }} - + {{ end }} diff --git a/themes/buha/layouts/partials/snippets/head.html b/themes/buha/layouts/partials/snippets/head.html index acea42b1..0a6a3f62 100644 --- a/themes/buha/layouts/partials/snippets/head.html +++ b/themes/buha/layouts/partials/snippets/head.html @@ -3,13 +3,14 @@ -{{ $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" }} - {{ $title := print .Site.Title " | " .Title }} {{ if .IsHome }}{{ $title = .Site.Title }}{{ end }} {{ $title }} diff --git a/themes/buha/layouts/partials/snippets/header.html b/themes/buha/layouts/partials/snippets/header.html index 18624fc1..f7c36905 100644 --- a/themes/buha/layouts/partials/snippets/header.html +++ b/themes/buha/layouts/partials/snippets/header.html @@ -1,17 +1,18 @@ -{{ $img := resources.GetMatch "/images/logo_back_full.svg" }} - - - - SVG mit img laden - -
- {{- range site.Params.mainMenu -}} - {{ $name := . }} - {{ if i18n . }} - {{ $name = i18n . }} - {{ end }} - {{- $name | humanize -}} - {{- end -}} +{{ $svg := readFile "/assets/images/logo/logo.svg" }} +
+ + {{ safeHTML $svg }} + +
+ {{- range site.Params.mainMenu -}} + {{ $name := . }} + {{ if i18n . }} + {{ $name = i18n . }} + {{ end }} + {{- $name | humanize -}} + {{- end -}} +
+
diff --git a/themes/buha/layouts/partials/style.html b/themes/buha/layouts/partials/style.html new file mode 100644 index 00000000..564dc5d4 --- /dev/null +++ b/themes/buha/layouts/partials/style.html @@ -0,0 +1,5 @@ +