Create main parts of short codes

This commit is contained in:
Christian Wolf 2023-10-25 14:38:54 +02:00
parent e15b181a99
commit 71c823a653
10 changed files with 209 additions and 17 deletions

View File

@ -25,6 +25,7 @@ body {
margin: 0px;
background-color: #ececec;
font: 90% 'Open Sans', sans-serif;
height: 100vh;
}
h1, h2, h3, h4, h5, h6 {
@ -44,6 +45,7 @@ h1 {
max-width: 1280px;
margin: auto;
background-color: #fcfcfc;
overflow: auto;
#header {
border-bottom: 2px solid rgba(173,173,173,.5);
@ -63,6 +65,7 @@ h1 {
> .slider {
width: calc(100% - 60px);
// visibility: hidden;
// height: 250px;
display: flex;
padding: 0 10px;
@ -264,6 +267,46 @@ h1 {
}
}
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
z-index: 10;
&.hidden {
display: none;
}
.background {
width: 100%;
height: 100%;
position: absolute;
z-index: -10;
background-color: lightgrey;
opacity: 50%;
}
.spacer {
flex: auto 1 0;
}
.dialog-column {
flex: 0 1 1;
display: flex;
flex-direction: column;
justify-content: center;
.dialog {
background-color: white;
padding: 10px;
flex: 30% 0 0;
// height: 30%;
}
}
}
.person-list {
display: flex;
flex-wrap: wrap;
@ -306,28 +349,48 @@ h1 {
.news-blog {
.blog-entry {
.header {
margin: 5px 0 10px;
a {
&::before {
content: '' !important;
}
font-size: larger;
}
}
.details {
display: flex;
min-height: 240px;
// min-height: 240px;
margin-right: 2px;
.teaser-image {
flex: 33% 1 0;
background-color: lightcyan;
img {
width: 90%;
height: 190px;
object-fit: contain;
object-position: left top;
}
}
.intro {
.right-side {
flex: 66% 1 1;
display: flex;
flex-direction: column;
.intro {
padding-right: 40px;
}
.more {
// float: right;
margin-top: 20px;
text-align: right;
}
}
.teaser-image, .intro {
// .teaser-image, .intro {
// display: ;
}
// }
}
}
.pagination {
@ -347,6 +410,24 @@ h1 {
}
}
.tsc-gallery {
display: grid;
&.cols-2 {
grid-template-columns: 1fr 1fr;
}
&.cols-3 {
grid-template-columns: 1fr 1fr 1fr;
}
&.cols-4 {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.tsc-gallery-img {
margin: none;
}
}
@font-face{
font-family: 'Open Sans Condensed';
font-style: normal;

View File

@ -16,5 +16,19 @@
</div>
{{- partial "page/footer.html" . -}}
</div>
<div id="overlay" class="hidden">
<div class="background"></div>
<div class="spacer"></div>
<div class="dialog-column">
<div class="spacer"></div>
<div class="dialog">
<div class="img">
<img>
</div>
</div>
<div class="spacer"></div>
</div>
<div class="spacer"></div>
</div>
</body>
</html>

View File

@ -3,23 +3,31 @@
<h1>{{ .Title }}</h1>
</a>
<div class="news-blog">
{{ range (.Paginate (first 10 ( where .Site.RegularPages "Section" "==" "news")) 5 ).Pages }}
{{ range (.Paginate (first 200 ( where .Site.RegularPages "Section" "==" "news")) 10 ).Pages }}
{{ $urlBlogEntry := .RelPermalink}}
<div class="blog-entry">
<div class="header">
{{ .Date.Format "02.01.2006" }}
<a href="{{ .Permalink }}">{{ .Title }}</a>
<a href="{{ $urlBlogEntry }}">{{ .Title }}</a>
</div>
<div class="details">
<div class="teaser-image">
{{ $page := . }}
{{ if .Params.Image }}
<img src="{{ (.Resources.GetMatch (.Params.Image)).RelPermalink }}">
{{ with (.Resources.GetMatch (.Params.Image)).Fit "290x190 webp" }}
<a href="{{ $urlBlogEntry }}">
<img src="{{ .RelPermalink }}">
</a>
{{ end }}
{{ end }}
</div>
<div class="intro">
{{ with .Summary }}
{{ . }}
{{ end }}
<div class="right-side">
<div class="intro">
{{ with .Summary }}
{{ . }}
{{ end }}
</div>
<div class="more"><a href="{{ $urlBlogEntry }}">MEHR...</a></div>
</div>
</div>
</div>
@ -30,4 +38,3 @@
{{ partial "totop" }}
{{ end }}
{{ define "left" }}<!-- No left side menu -->{{ end }}

View File

@ -9,4 +9,5 @@
<title>{{ $title }}</title>
<script defer src="{{ relURL "js/jquery-3.6.3.min.js" }}"></script>
<script defer src="{{ relURL "js/slider.js" }}"></script>
<script defer src="{{ relURL "js/gallery.js" }}"></script>
</head>

View File

@ -0,0 +1,27 @@
{{ $cols := .Parent.Get "columns" }}
{{ $imgOriginal := .Page.Resources.GetMatch (.Get "src") }}
{{ $img := $imgOriginal }}
{{ if eq $cols "2" }}
{{ $img = $imgOriginal.Fit "500x1000 webp" }}
{{ else if eq $cols "3" }}
{{ $img = $imgOriginal.Fit "333x800 webp" }}
{{ else if eq $cols "4" }}
{{ $img = $imgOriginal.Fit "250x500 webp" }}
{{ else }}
{{ $img = $imgOriginal.Fit "800x1000 webp" }}
{{ end }}
{{ $imgFitted := $imgOriginal.Fit "850x1000 webp" }}
<figure class="tsc-gallery-img">
<a
{{ with .Get "href" }}
href="{{ . }}"
{{ else }}
data-url="{{ $imgFitted.RelPermalink }}"
{{ end }}
>
<img
{{ with .Get "alt"}}alt="{{.}}"{{ end }}
src="{{ $img.RelPermalink }}"
>
</a>
</figure>

View File

@ -1 +1,7 @@
{{ .Inner }}
{{ $colClass := "" }}
{{- with .Get "columns" }}
{{ $colClass = (print "cols-" .) }}
{{ end -}}
<div class="tsc-gallery {{ $colClass }}">
{{ .Inner }}
</div>

View File

@ -0,0 +1,19 @@
<figure>
{{ with .Get "href" }}
<a href="{{ . }}">
{{ end }}
<img
{{- with .Get "alt" }}alt="{{ . }}"{{ end }}
{{- $filename := .Get "src" }}
{{ $resource := .Page.Resources.Get $filename -}}
src="{{ $resource.RelPermalink }}"
>
{{ with .Get "href" }}
</a>
{{ end }}
{{ with .Get "caption" }}
<figcaption>
{{ . }}
</figcaption>
{{ end }}
</figure>

View File

@ -0,0 +1,10 @@
<video controls
{{ with .Get "poster" }}poster="{{ . }}"{{ end }}
{{ with .Get "width" }}width="{{ . }}"{{ end }}
{{ with .Get "height" }}height="{{ . }}"{{ end }}
>
<source
{{ with .Get "type" }}type="{{ . }}"{{ end }}
src="{{ (.Page.Resources.GetMatch (.Get "src")).RelPermalink }}"
>
</video>

View File

@ -0,0 +1,9 @@
<iframe
{{ with .Get "width" }}width="{{ . }}"{{ end }}
{{ with .Get "height" }}height="{{ . }}"{{ end }}
src="https://www.youtube-nocookie.com/embed/{{ .Get "id" }}"
title="{{ with .Get "title" }}{{ . }}{{ else }}YouTube video player{{ end }}"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>

View File

@ -0,0 +1,18 @@
$(function() {
$(".tsc-gallery-img a").click(function(ev){
// console.debug(ev)
const url = ev.currentTarget.dataset.url
console.debug(url)
$('#overlay').removeClass('hidden')
$('#overlay .img img').attr('src', url)
})
$('#overlay .background, #overlay .spacer').click(function(ev) {
$('#overlay').addClass('hidden')
$('#overlay .img img').attr('src', '')
})
// $('#overlay').on('keydown', function(ev){
// if(ev.keyCode === 27) {
// console.log('closing')
// }
// })
})