forked from tsc-vfl/hugo-page
Create main parts of short codes
This commit is contained in:
parent
e15b181a99
commit
71c823a653
@ -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;
|
||||
}
|
||||
.teaser-image, .intro {
|
||||
.more {
|
||||
// float: right;
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
// .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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -3,24 +3,32 @@
|
||||
<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="right-side">
|
||||
<div class="intro">
|
||||
{{ with .Summary }}
|
||||
{{ . }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="more"><a href="{{ $urlBlogEntry }}">MEHR...</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
@ -30,4 +38,3 @@
|
||||
{{ partial "totop" }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "left" }}<!-- No left side menu -->{{ end }}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -1 +1,7 @@
|
||||
{{ $colClass := "" }}
|
||||
{{- with .Get "columns" }}
|
||||
{{ $colClass = (print "cols-" .) }}
|
||||
{{ end -}}
|
||||
<div class="tsc-gallery {{ $colClass }}">
|
||||
{{ .Inner }}
|
||||
</div>
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
18
themes/tsc_vfl/static/js/gallery.js
Normal file
18
themes/tsc_vfl/static/js/gallery.js
Normal 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')
|
||||
// }
|
||||
// })
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user