forked from Bunteshaus/bunteshaus.de
small fixes
This commit is contained in:
parent
514ba09c93
commit
cc268d818d
Binary file not shown.
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 92 KiB |
|
@ -1,12 +1,15 @@
|
|||
.banner {
|
||||
min-height: calc(60vw / 2.4);
|
||||
max-height: calc(100vh / 2.4);
|
||||
min-height: 10vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 115%;
|
||||
//box-shadow: inset 0px -11px 8px -10px #444;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-size: contain;
|
||||
background-position: top center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
h1 {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
@ -17,39 +20,8 @@
|
|||
|
||||
@media (min-width: 640px) {
|
||||
.banner {
|
||||
width: 89%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.banner {
|
||||
max-width: 768px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.banner {
|
||||
max-width: 1024px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.banner {
|
||||
max-width: 1280px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
}
|
||||
@media (min-width: 1920px) {
|
||||
.banner {
|
||||
max-width: 1920px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -2,48 +2,38 @@
|
|||
max-width: 100%;
|
||||
.list_item {
|
||||
margin-bottom: 5rem;
|
||||
min-height: 17vh;
|
||||
min-height: 25vh;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
.img {
|
||||
height: 240px;
|
||||
background-size: 120% auto;
|
||||
}
|
||||
.img-only {
|
||||
height: 360px;
|
||||
background-size: 110% auto;
|
||||
background-position: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
h3 {
|
||||
margin-top: 0rem;
|
||||
}
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
transition: all .3s ease-in-out;
|
||||
background-position: top center;
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
min-height: 20vw;
|
||||
max-height: 33vw;
|
||||
}
|
||||
.img-only {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
height: 20vh;
|
||||
transition: all .2s ease-in-out;
|
||||
background-size: 100% auto;
|
||||
background-position: top center;
|
||||
background-position: top;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
|
||||
.list {
|
||||
width: 68%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
|
||||
|
|
|
@ -33,7 +33,7 @@ header {
|
|||
|
||||
@media (min-width: 640px) {
|
||||
header {
|
||||
max-width: 640px;
|
||||
width: 86%;
|
||||
div {
|
||||
svg {
|
||||
width: auto;
|
||||
|
@ -45,59 +45,4 @@ header {
|
|||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
header {
|
||||
max-width: 768px;
|
||||
div {
|
||||
svg {
|
||||
width: auto;
|
||||
height: 4rem;
|
||||
}
|
||||
div {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
header {
|
||||
max-width: 1024px;
|
||||
div {
|
||||
svg {
|
||||
width: auto;
|
||||
height: 5rem;
|
||||
}
|
||||
div {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
header {
|
||||
max-width: 1280px;
|
||||
div {
|
||||
svg {
|
||||
width: auto;
|
||||
height: 6rem;
|
||||
}
|
||||
div {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 1920px) {
|
||||
header {
|
||||
max-width: 1920px;
|
||||
div {
|
||||
svg {
|
||||
width: auto;
|
||||
height: 7rem;
|
||||
}
|
||||
div {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -27,6 +27,7 @@ aside {
|
|||
|
||||
@media (min-width: 640px) {
|
||||
.main {
|
||||
width: 89%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
aside {
|
||||
|
@ -39,35 +40,3 @@ aside {
|
|||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.main {
|
||||
max-width: 768px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.main {
|
||||
max-width: 1024px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.main {
|
||||
max-width: 1280px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
}
|
||||
@media (min-width: 1920px) {
|
||||
.main {
|
||||
max-width: 1920px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -46,7 +46,9 @@
|
|||
{{ end }}
|
||||
|
||||
{{ $partial = string (printf "layout/%s" $partial) }}
|
||||
{{ if eq .Type "about" }}<div class="list">{{ end }}
|
||||
{{ partial $partial (dict "context" . "pages" $pages "content" .Content "type" .Type "paginate" $paginate) }}
|
||||
{{ if eq .Type "about" }}</div>{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "sidebar" }}
|
||||
|
|
|
@ -37,21 +37,22 @@
|
|||
{{ if $title }}</h3>{{ else }}</h2>{{ end }}
|
||||
{{ with .Resources.GetMatch $banner }}
|
||||
{{ if eq hugo.Environment "development" }}
|
||||
{{ $good_ratio := "1.7777777777777777"}}
|
||||
{{ $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)<br>
|
||||
{{ else if gt $ratio "2.7" }}
|
||||
Ratio: {{ slicestr $ratio 0 4 }}: not a good ratio, better around 2.6 (higher)<br>
|
||||
{{ if lt $ratio $good_ratio }}
|
||||
Ratio: {{ $ratio }}: not a good ratio, better around {{ $good_ratio }} (lower the hight in relation to the width)<br>
|
||||
{{ else if gt $ratio $good_ratio }}
|
||||
Ratio: {{ $ratio }}: not a good ratio, better around {{ $good_ratio }}(higher)<br>
|
||||
{{ end }}
|
||||
{{ if lt (int .Width) "1200" }}
|
||||
Width: {{ .Width }}px: too small, better 1200px in width<br>
|
||||
{{ else if gt (int .Width) "1200" }}
|
||||
Width: {{ .Width }}px: too big, better 1200px in width<br>
|
||||
{{ if lt (int .Width) "1920" }}
|
||||
Width: {{ .Width }}px: too small, better 1920px in width<br>
|
||||
{{ else if gt (int .Width) "1920" }}
|
||||
Width: {{ .Width }}px: too big, better 1920px in width<br>
|
||||
{{ end }}
|
||||
{{ if lt (int .Height) "460" }}
|
||||
Height: {{ .Height }}px: too small, better 800px in height<br>
|
||||
{{ else if gt (int .Height) "460" }}
|
||||
Height: {{ .Height }}px: too big, better 460px in height<br>
|
||||
{{ if lt (int .Height) "1080" }}
|
||||
Height: {{ .Height }}px: too small, better 1080px in height<br>
|
||||
{{ else if gt (int .Height) "1080" }}
|
||||
Height: {{ .Height }}px: too big, better 1080px in height<br>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<div class="img" style="background-image: url({{ .Permalink }})">
|
||||
|
|
Loading…
Reference in New Issue
Block a user