small fixes
This commit is contained in:
parent
09c396146f
commit
c450bd37f9
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
#pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 1rem;
|
||||
a {
|
||||
padding: .5rem;
|
||||
margin: .5rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
{{- partial "snippets/head.html" . -}}
|
||||
<body>
|
||||
<div class="container">
|
||||
<header class="header">
|
||||
<header>
|
||||
{{ partial "snippets/header" . }}
|
||||
</header>
|
||||
<main class="content">
|
||||
|
|
@ -13,9 +13,9 @@
|
|||
{{ block "sidebar" . -}}{{- end }}
|
||||
{{ block "pagefooter" . -}}{{- end }}
|
||||
</div>
|
||||
<footer class="footer">
|
||||
{{- partial "snippets/footer" . -}}
|
||||
</footer>
|
||||
<footer class="footer">
|
||||
{{- partial "snippets/footer" . -}}
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -21,9 +21,10 @@
|
|||
{{ if ne .Content "" }}
|
||||
{{ partial "snippets/content" (dict "content" .Content) }}
|
||||
{{ end }}
|
||||
|
||||
<div class="two_lists">
|
||||
{{ partial "layout/gen_list" (dict "context" . "pages" $featured "title" $feat )}}
|
||||
{{ partial "layout/gen_list" (dict "context" . "pages" $posts "title" $news "limit" "5" )}}
|
||||
</div>
|
||||
|
||||
{{ end }}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
|
||||
{{ $title := .title }}
|
||||
|
||||
{{ $p := .pages }}
|
||||
{{ if and (.limit) (not .paginate) }}
|
||||
|
|
@ -17,69 +17,66 @@
|
|||
|
||||
{{ if $p }}
|
||||
<div class="gen_list">
|
||||
{{ if .title }}<h2>{{ .title }}</h2>{{ 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) }}
|
||||
|
||||
|
||||
<a href="{{ .Permalink }}">
|
||||
<section>
|
||||
<h3>
|
||||
{{ .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>
|
||||
{{ if $title }}<h2>{{ $title }}</h2>{{ end }}
|
||||
{{ range $p }}
|
||||
<div class="article_list">
|
||||
{{ $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) }}
|
||||
<a href="{{ .Permalink }}">
|
||||
<section>
|
||||
{{ if $title }}<h3>{{ else }}<h2>{{ end }}
|
||||
{{ .Title }}
|
||||
{{ if $title }}</h3>{{ else }}</h2>{{ 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)<br>
|
||||
{{ else if gt $ratio "2.7" }}
|
||||
Ratio: {{ slicestr $ratio 0 4 }}: not a good ratio, better around 2.6 (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>
|
||||
{{ 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>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<div class="img" style="background-image: url({{ .Permalink }})">
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="img" style="background-image: url({{ .Permalink }})">
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ if .Description }}
|
||||
{{ .Description }}
|
||||
{{ else if .Summary }}
|
||||
<p>{{ .Summary }}</p>
|
||||
{{ else if .Content }}
|
||||
{{ .Content }}
|
||||
{{ else if $image }}
|
||||
{{ $i := (.Resources.GetMatch $image).Permalink }}
|
||||
<div class="img-only" style="background-image: url({{ $i }})">
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ if .Description }}
|
||||
{{ .Description }}
|
||||
{{ else if .Summary }}
|
||||
<p>{{ .Summary }}</p>
|
||||
{{ else if .Content }}
|
||||
{{ .Content }}
|
||||
{{ else if $image }}
|
||||
{{ $i := (.Resources.GetMatch $image).Permalink }}
|
||||
<div class="img-only" style="background-image: url({{ $i }})">
|
||||
</div>
|
||||
{{ end }}
|
||||
</section>
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if .paginate }}
|
||||
{{ partial "snippets/paginator" (dict "paginator" $paginator) }}
|
||||
{{ end }}
|
||||
{{ if .paginate }}
|
||||
{{ partial "snippets/paginator" (dict "paginator" $paginator) }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -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)) }}
|
||||
<div style="background-image: url({{- $img.Permalink -}})" class="banner banner-shadow center_bg_img">
|
||||
<div style="background-image: url({{- $img.Permalink -}})" class="banner">
|
||||
<h1>{{ $title }}</h1>
|
||||
{{ if eq hugo.Environment "development" }}
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
{{ 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:url({{- $img.Permalink -}})" class="banner banner-shadow center_bg_img"><h1>{{ $title }}</h1>
|
||||
<div style="background-image:url({{- $img.Permalink -}})" class="banner"><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>
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
{{ 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: url({{- $img.Permalink -}})" class="banner banner-shadow center_bg_img"><h1>{{ $title }}</h1>
|
||||
<div style="background-image: url({{- $img.Permalink -}})" class="banner"><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>
|
||||
|
|
|
|||
|
|
@ -5,10 +5,13 @@
|
|||
|
||||
{{ $water := resources.Get "css/water.css" | resources.ToCSS }}
|
||||
{{ $container := resources.Get "scss/container.scss" | resources.ToCSS }}
|
||||
{{ $font := resources.Get "scss/font.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" }}
|
||||
{{ $pagination := resources.Get "scss/pagination.scss" | resources.ToCSS }}
|
||||
{{ $footer := resources.Get "scss/footer.scss" | resources.ToCSS }}
|
||||
{{ $allcss := slice $water $font $container $header $banner $main $pagination $footer | resources.Concat "/css/vendor.css" | minify | fingerprint "sha512" }}
|
||||
<link rel="stylesheet" href="{{ $allcss.RelPermalink }}" integrity="{{ $allcss.Data.Integrity }}">
|
||||
|
||||
{{ $title := print .Site.Title " | " .Title }}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{ $svg := readFile "/assets/images/logo/logo.svg" }}
|
||||
<div class="header_content">
|
||||
<div>
|
||||
<a href="/">
|
||||
{{ safeHTML $svg }}
|
||||
</a>
|
||||
|
|
@ -13,6 +13,3 @@
|
|||
{{- end -}}
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue