started work on wide-cards layout
This commit is contained in:
parent
a3e73644b0
commit
25a77f9d94
@ -1,9 +1,29 @@
|
||||
Title: Romane
|
||||
Author: Tobias Radloff
|
||||
Summary: Übersicht über meine Romane
|
||||
Lang: de
|
||||
Category: Romane
|
||||
Template: cards
|
||||
Card_selector_key: category
|
||||
Save_as: romane/index.html
|
||||
Url: romane/
|
||||
---
|
||||
title: Romane
|
||||
author: Tobias Radloff
|
||||
summary: Übersicht über meine Romane
|
||||
lang: de
|
||||
category: Romane
|
||||
template: cards
|
||||
card_selector_key: category
|
||||
save_as: romane/index.html
|
||||
url: romane/
|
||||
featured_images:
|
||||
- pic: images/romane/amoralisch.jpg
|
||||
post: romane/amoralisch.html
|
||||
alt: Amoralisch
|
||||
y_offset: -500px
|
||||
- pic: images/romane/schwarzspeicher.jpg
|
||||
post: romane/schwarzspeicher
|
||||
alt: Schwarzspeicher
|
||||
y_offset: -1140px
|
||||
- pic: images/romane/satinavs-auge.jpg
|
||||
post: romane/satinavs-auge
|
||||
alt: Satinavs Auge
|
||||
y_offset: -900px
|
||||
- pic: images/romane/das-geheimnis-der-lady-luck.jpg
|
||||
post: romane/das-geheimnis-der-lady-luck
|
||||
alt: Das Geheimnis der Lady Luck
|
||||
y_offset: -300px
|
||||
---
|
||||
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
Title: Werke
|
||||
Date: 2025-02-04 10:20
|
||||
Author: Tobias Radloff
|
||||
Summary: Übersicht über mein Werk bzw. meine Werke
|
||||
Save_as: werke/index.html
|
||||
Url: werke/
|
||||
#Template: wide_cards
|
||||
Lang: de
|
||||
|
||||
Perspiciatis nam ipsam doloremque incidunt veritatis. Ducimus voluptatem eius odit eveniet voluptatibus. Laborum et quia vero necessitatibus sequi.
|
||||
|
||||
Et vero nihil eum vel alias. Nesciunt qui repudiandae quia qui sint non. Repudiandae facilis eos inventore nisi deserunt maxime distinctio nihil. Iusto autem eveniet in fugit voluptatem. Nemo ut quo quisquam. Ducimus et et est qui aperiam ex.
|
||||
|
||||
Quibusdam omnis tempore voluptas possimus est nesciunt occaecati est. Voluptatum dignissimos excepturi et ab tempore amet. Quia necessitatibus dolor vero voluptatibus et eum. Ut vel dolor laboriosam incidunt dolorem nisi error. Delectus at expedita eaque architecto. Expedita quae reprehenderit quisquam hic ut exercitationem.
|
||||
---
|
||||
title: Werke
|
||||
date: 2025-02-04 10:20
|
||||
author: Tobias Radloff
|
||||
summary: Übersicht über mein Werk bzw. meine Werke
|
||||
save_as: werke/index.html
|
||||
url: werke/
|
||||
template: wide-cards
|
||||
wide_cards:
|
||||
- romane
|
||||
- kurzprosa
|
||||
- lyrik
|
||||
- in-english
|
||||
lang: de
|
||||
---
|
||||
|
||||
|
||||
@ -285,6 +285,92 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* settings for slide shows on wide cards */
|
||||
/* see https://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/ */
|
||||
.wcard-gallery {
|
||||
height: 270px;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
|
||||
.wcard-gallery-mask {
|
||||
height: 270px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
li.wcard-image {
|
||||
position: absolute;
|
||||
list-style: none;
|
||||
height: 270px;
|
||||
width: 100%;
|
||||
|
||||
animation: image-slide 20s ease-in-out infinite;
|
||||
left: -100%;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wcard-tooltip {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
/* width: 300px; */
|
||||
max-width: 100%;
|
||||
/* height: 60px; */
|
||||
position: absolute;
|
||||
top: -75px;
|
||||
left: 20px;
|
||||
transition: top 0.3s ease-in-out;
|
||||
|
||||
p {
|
||||
color: var(--pico-tooltip-color);
|
||||
font-size: var(--pico-font-size);
|
||||
/* font-weight: var(--pico-font-weight); */
|
||||
/* line-height: var(--pico-line-height); */
|
||||
padding: var(--pico-nav-element-spacing-horizontal);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
li.wcard-image:hover .wcard-tooltip {
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes image-slide {
|
||||
|
||||
0%,
|
||||
31% {
|
||||
left: -100%;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
5%,
|
||||
25% {
|
||||
left: 0px;
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
30% {
|
||||
left: 100%;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
.article-footer {
|
||||
margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1);
|
||||
|
||||
33
theme/templates/wide-cards.html
Normal file
33
theme/templates/wide-cards.html
Normal file
@ -0,0 +1,33 @@
|
||||
{% extends "page.html" %}
|
||||
|
||||
{% block content_body %}
|
||||
{% for wcard in pages|selectattr("slug", "in", page.wide_cards)|list %}
|
||||
{# {% for wide_card in page.wide_cards %} #}
|
||||
<article class="wcard">
|
||||
<header>
|
||||
<h3><a href="{{ SITEURL }}/{{ wcard.title|lower }}/">{{ wcard.title }}</a></h3>
|
||||
</header>
|
||||
<div class="wcard-gallery">
|
||||
{% if wcard.featured_images is defined %}
|
||||
<div class="wcard-gallery-mask">
|
||||
<ul>
|
||||
{% for image in wcard.featured_images %}
|
||||
<li class="wcard-image" style="animation-delay: {{ loop.index0 * 5 }}s">
|
||||
<a href="{{ SITEURL }}/{{ image.post }}">
|
||||
<img src="{{ SITEURL }}/{{ image.pic }}" alt="{{ image.alt }}" {% if image.y_offset is defined %}
|
||||
style="top: {{ image.y_offset }};" {% endif %} />
|
||||
</a>
|
||||
<div class="wcard-tooltip">
|
||||
<p>{{ image.alt }}</p>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
{% endblock content_body %}
|
||||
|
||||
{% block content_footer %}
|
||||
{% endblock content_footer %}
|
||||
Loading…
Reference in New Issue
Block a user