small fixes
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 2.3 MiB After Width: | Height: | Size: 2.3 MiB |
Before Width: | Height: | Size: 152 KiB After Width: | Height: | Size: 152 KiB |
Before Width: | Height: | Size: 4.3 MiB After Width: | Height: | Size: 4.3 MiB |
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
@ -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"
|
||||
|
|
BIN
content/news/2022-04-10-Matrix-Space/banner_01.png
Normal file
After Width: | Height: | Size: 989 KiB |
Before Width: | Height: | Size: 169 KiB After Width: | Height: | Size: 169 KiB |
|
@ -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;
|
||||
|
|
17
themes/buha/assets/scss/banner.scss
Normal 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;
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
49
themes/buha/assets/scss/container.scss
Normal 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;
|
||||
}
|
||||
}
|
70
themes/buha/assets/scss/header.scss
Normal 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%;
|
||||
}
|
||||
}
|
||||
}
|
4
themes/buha/assets/scss/main.scss
Normal file
|
@ -0,0 +1,4 @@
|
|||
main {
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
}
|
|
@ -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 }}
|
||||
|
|
|
@ -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" }}
|
||||
|
|
|
@ -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 }}
|
||||
|
|
|
@ -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 }}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 />
|
||||
|
||||
|
||||
|
|
5
themes/buha/layouts/partials/style.html
Normal file
|
@ -0,0 +1,5 @@
|
|||
<style>
|
||||
{{ partial "css/container" . }}
|
||||
{{ partial "css/header" . }}
|
||||
|
||||
</style>
|