From c450bd37f9c876c2799125a768fd0bca858e46e5 Mon Sep 17 00:00:00 2001 From: teldra Date: Wed, 8 Jun 2022 00:38:13 +0200 Subject: [PATCH] small fixes --- themes/buha/assets/scss/banner.scss | 2 +- themes/buha/assets/scss/container.scss | 35 +---- themes/buha/assets/scss/font.scss | 8 ++ themes/buha/assets/scss/footer.scss | 61 +++++++++ themes/buha/assets/scss/header.scss | 36 +++--- themes/buha/assets/scss/main.scss | 103 +++++++++++++++ themes/buha/assets/scss/pagination.scss | 9 ++ themes/buha/layouts/_default/baseof.html | 8 +- themes/buha/layouts/index.html | 3 +- .../layouts/partials/layout/gen_list.html | 121 +++++++++--------- .../layouts/partials/snippets/banner.html | 6 +- .../buha/layouts/partials/snippets/head.html | 5 +- .../layouts/partials/snippets/header.html | 5 +- 13 files changed, 271 insertions(+), 131 deletions(-) create mode 100644 themes/buha/assets/scss/font.scss create mode 100644 themes/buha/assets/scss/footer.scss create mode 100644 themes/buha/assets/scss/pagination.scss diff --git a/themes/buha/assets/scss/banner.scss b/themes/buha/assets/scss/banner.scss index 9e88feb..017e29e 100644 --- a/themes/buha/assets/scss/banner.scss +++ b/themes/buha/assets/scss/banner.scss @@ -2,8 +2,8 @@ min-height: 33vh; display: flex; align-items: center; - //background-attachment: fixed; font-size: 115%; + //box-shadow: inset 0px -11px 8px -10px #444; background-position: center; background-size: cover; background-repeat: no-repeat; diff --git a/themes/buha/assets/scss/container.scss b/themes/buha/assets/scss/container.scss index 3ed2e08..70db3ee 100644 --- a/themes/buha/assets/scss/container.scss +++ b/themes/buha/assets/scss/container.scss @@ -6,44 +6,11 @@ right: 0; left: 0; bottom: 0; - min-width: 190px; - max-width: 98vw; height: 100%; height: 100vh; - margin-left: auto; - margin-right: auto; + width: 100%; 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/font.scss b/themes/buha/assets/scss/font.scss new file mode 100644 index 0000000..88db02b --- /dev/null +++ b/themes/buha/assets/scss/font.scss @@ -0,0 +1,8 @@ +@font-face { + font-family: 'Nanum'; /*a name to be used later*/ + src: url('/fonts/NanumGothic-Regular.ttf'); /*URL to font*/ +} + +* { + font-family: 'Nanum'; +} diff --git a/themes/buha/assets/scss/footer.scss b/themes/buha/assets/scss/footer.scss new file mode 100644 index 0000000..3248eec --- /dev/null +++ b/themes/buha/assets/scss/footer.scss @@ -0,0 +1,61 @@ +.footer { + flex-grow: 0; + min-height: 4rem; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + margin-top: 1rem; + width: 100%; + margin-left: auto; + margin-right: auto; + flex-direction: column-reverse; + div { + margin-top: 1rem; + } + .infobox { + text-align: center; + } +} + +@media (min-width: 640px) { + .footer { + max-width: 640px; + margin-left: auto; + margin-right: auto; + flex-direction: row; + .infobox { + text-align: left; + } + } +} +@media (min-width: 768px) { + .footer { + max-width: 768px; + margin-left: auto; + margin-right: auto; + } +} +@media (min-width: 1024px) { + .footer { + max-width: 1024px; + margin-left: auto; + margin-right: auto; + } + +} +@media (min-width: 1280px) { + .footer { + max-width: 1280px; + margin-left: auto; + margin-right: auto; + } + +} +@media (min-width: 1920px) { + .footer { + max-width: 1920px; + margin-left: auto; + margin-right: auto; + } + +} diff --git a/themes/buha/assets/scss/header.scss b/themes/buha/assets/scss/header.scss index a8092fa..4249b40 100644 --- a/themes/buha/assets/scss/header.scss +++ b/themes/buha/assets/scss/header.scss @@ -1,5 +1,7 @@ -.header { - margin-right: .3rem; +header { + width: 98vw; + margin-left: auto; + margin-right: auto; div { display: flex; min-height: 5em; @@ -8,7 +10,7 @@ svg { margin-left: 0.2vw; width: auto; - height: 2.2rem; + height: 2.5rem; filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 1)); path { fill: var(--logo-color) !important; @@ -29,21 +31,9 @@ } } -@media (min-width: 600px) { - .header { - div { - svg { - width: auto; - height: 2.4rem; - } - div { - font-size: 1.1rem; - } - } - } -} @media (min-width: 640px) { - .header { + header { + max-width: 640px; div { svg { width: auto; @@ -56,7 +46,8 @@ } } @media (min-width: 768px) { - .header { + header { + max-width: 768px; div { svg { width: auto; @@ -69,7 +60,8 @@ } } @media (min-width: 1024px) { - .header { + header { + max-width: 1024px; div { svg { width: auto; @@ -82,7 +74,8 @@ } } @media (min-width: 1280px) { - .header { + header { + max-width: 1280px; div { svg { width: auto; @@ -95,7 +88,8 @@ } } @media (min-width: 1920px) { - .header { + header { + max-width: 1920px; div { svg { width: auto; diff --git a/themes/buha/assets/scss/main.scss b/themes/buha/assets/scss/main.scss index c3d6fa2..7622a53 100644 --- a/themes/buha/assets/scss/main.scss +++ b/themes/buha/assets/scss/main.scss @@ -1,4 +1,107 @@ main { flex-grow: 1; overflow: auto; + .main { + width: 98vw; + margin-left: auto; + margin-right: auto; + } + .page-intro { + text-align: center; + a { text-decoration: underline; } + margin-top: 3rem; + margin-bottom: 1rem; + padding-right: 1.1rem; + font-size: 150%; + } + .gen_list { + .article_list { + margin-bottom: 5rem; + } + a { + text-decoration: none; + &:hover { + .img { + height: 240px; + } + .img-only { + height: 360px; + background-size: 110% auto; + background-position: top; + } + } + } + img { + width: 100%; + } + h3 { + margin-top: 0rem; + } + .img { + width: 100%; + height: 140px; + 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; + background-repeat: no-repeat; + } + } +} + + +@media (min-width: 600px) { + +} +@media (min-width: 640px) { + .main, .banner { + max-width: 640px; + margin-left: auto; + margin-right: auto; + } +} +@media (min-width: 768px) { + .main, .banner { + max-width: 768px; + margin-left: auto; + margin-right: auto; + } + .two_lists { + display: flex; + justify-content: space-between; + .gen_list { + width: 45%; + } + } +} +@media (min-width: 1024px) { + .main, .banner { + max-width: 1024px; + margin-left: auto; + margin-right: auto; + } + +} +@media (min-width: 1280px) { + .main, .banner { + max-width: 1280px; + margin-left: auto; + margin-right: auto; + } + +} +@media (min-width: 1920px) { + .main, .banner { + max-width: 1920px; + margin-left: auto; + margin-right: auto; + } + } diff --git a/themes/buha/assets/scss/pagination.scss b/themes/buha/assets/scss/pagination.scss new file mode 100644 index 0000000..5581420 --- /dev/null +++ b/themes/buha/assets/scss/pagination.scss @@ -0,0 +1,9 @@ +#pagination { + display: flex; + justify-content: center; + margin: 1rem; + a { + padding: .5rem; + margin: .5rem; + } +} diff --git a/themes/buha/layouts/_default/baseof.html b/themes/buha/layouts/_default/baseof.html index 4c175b9..5f7e95b 100644 --- a/themes/buha/layouts/_default/baseof.html +++ b/themes/buha/layouts/_default/baseof.html @@ -3,7 +3,7 @@ {{- partial "snippets/head.html" . -}}
-
+
{{ partial "snippets/header" . }}
@@ -13,9 +13,9 @@ {{ block "sidebar" . -}}{{- end }} {{ block "pagefooter" . -}}{{- end }}
- + diff --git a/themes/buha/layouts/index.html b/themes/buha/layouts/index.html index 77bb283..af20b42 100644 --- a/themes/buha/layouts/index.html +++ b/themes/buha/layouts/index.html @@ -21,9 +21,10 @@ {{ if ne .Content "" }} {{ 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" )}} +
{{ end }} diff --git a/themes/buha/layouts/partials/layout/gen_list.html b/themes/buha/layouts/partials/layout/gen_list.html index 6066302..7ec77f8 100644 --- a/themes/buha/layouts/partials/layout/gen_list.html +++ b/themes/buha/layouts/partials/layout/gen_list.html @@ -1,4 +1,4 @@ - +{{ $title := .title }} {{ $p := .pages }} {{ if and (.limit) (not .paginate) }} @@ -17,69 +17,66 @@ {{ if $p }}
- {{ if .title }}

{{ .title }}

{{ end }} - {{ range $p }} - - {{ $banner := slice }} - {{ $image := slice }} - {{ $images := slice }} - {{ if .Resources.GetMatch "banner*" }} - {{ $banner = slice (.Resources.GetMatch "banner*") }} - {{ end }} - {{ if .Resources.ByType "image" }} - {{ $image = .Resources.ByType "image" }} - {{ end }} - {{ $images = complement $banner $image }} - {{ $image = (index (complement $banner $image) 0) }} - {{ $banner = (index $banner 0) }} - - - -
-

- {{ .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
+ {{ if $title }}

{{ $title }}

{{ end }} + {{ range $p }} +
+ {{ $banner := slice }} + {{ $image := slice }} + {{ $images := slice }} + {{ if .Resources.GetMatch "banner*" }} + {{ $banner = slice (.Resources.GetMatch "banner*") }} + {{ end }} + {{ if .Resources.ByType "image" }} + {{ $image = .Resources.ByType "image" }} + {{ end }} + {{ $images = complement $banner $image }} + {{ $image = (index (complement $banner $image) 0) }} + {{ $banner = (index $banner 0) }} + +
+ {{ if $title }}

{{ else }}

{{ end }} + {{ .Title }} + {{ if $title }}

{{ else }}{{ end }} + {{ with .Resources.GetMatch $banner }} + {{ if eq hugo.Environment "development" }} + {{ $ratio := div (float .Width) (float .Height) }} + {{ if lt $ratio "2.4" }} + Ratio: {{ slicestr $ratio 0 4 }}: not a good ratio, better around 2.6 (lower the hight in relation to the width)
+ {{ else if gt $ratio "2.7" }} + Ratio: {{ slicestr $ratio 0 4 }}: not a good ratio, better around 2.6 (higher)
+ {{ end }} + {{ if lt (int .Width) "1200" }} + Width: {{ .Width }}px: too small, better 1200px in width
+ {{ else if gt (int .Width) "1200" }} + Width: {{ .Width }}px: too big, better 1200px in width
+ {{ end }} + {{ if lt (int .Height) "460" }} + Height: {{ .Height }}px: too small, better 800px in height
+ {{ else if gt (int .Height) "460" }} + Height: {{ .Height }}px: too big, better 460px in height
+ {{ end }} {{ end }} +
+
{{ end }} -
-
- {{ end }} - {{ if .Description }} - {{ .Description }} - {{ else if .Summary }} -

{{ .Summary }}

- {{ else if .Content }} - {{ .Content }} - {{ else if $image }} - {{ $i := (.Resources.GetMatch $image).Permalink }} -
-
- {{ end }} -
- - {{ end }} + {{ if .Description }} + {{ .Description }} + {{ else if .Summary }} +

{{ .Summary }}

+ {{ else if .Content }} + {{ .Content }} + {{ else if $image }} + {{ $i := (.Resources.GetMatch $image).Permalink }} +
+
+ {{ end }} +
+ +
+ {{ end }} - {{ if .paginate }} - {{ partial "snippets/paginator" (dict "paginator" $paginator) }} - {{ end }} + {{ if .paginate }} + {{ partial "snippets/paginator" (dict "paginator" $paginator) }} + {{ end }} {{ end }} diff --git a/themes/buha/layouts/partials/snippets/banner.html b/themes/buha/layouts/partials/snippets/banner.html index 0de5b52..7d6e4b2 100644 --- a/themes/buha/layouts/partials/snippets/banner.html +++ b/themes/buha/layouts/partials/snippets/banner.html @@ -24,7 +24,7 @@ {{ $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)) }} -