website

My personal website www.ortlepp.eu
git clone https://git.ortlepp.eu/website.git/
Log | Files | Refs | README | LICENSE

commit 782a0f5d90b1dc1801bbf1e98c5f8c0145f10c4f
parent 7f6631bcf27b029bb54a4518cbdfd7ab89c5bc82
Author: Thorsten Ortlepp <post@ortlepp.eu>
Date:   Sun,  6 Feb 2022 16:35:13 +0100

Design improvement for teasers

Diffstat:
Mlayouts/shortcodes/teaser.html | 12+++++++-----
Mstatic/css/custom.css | 22++++++++++++++--------
2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/layouts/shortcodes/teaser.html b/layouts/shortcodes/teaser.html @@ -1,9 +1,11 @@ <div class="teaser"> - <img class="teaserimage" {{ with .Get "image" }}src="{{ . }}"{{ end }} {{ with .Get "title" }}alt="{{ . }}"{{ end }} /> - <div class="teaserbox"> - {{ with .Get "title" }}<h3 class="teasertitle">{{ . }}</h3>{{ end }} - {{ with .Get "text" }}<p class="teasertext">{{ . }}</p>{{ end }} - {{ with .Get "link" }}<p class="teaserlink"><a href="{{ . }}">Mehr über diese Wanderung</a></p>{{ end }} + {{ with .Get "title" }}<h3 class="teasertitle">{{ . }}</h3>{{ end }} + <div class="teasercontent"> + <img class="teaserimage" {{ with .Get "image" }}src="{{ . }}"{{ end }} {{ with .Get "title" }}alt="{{ . }}"{{ end }} /> + <div class="teaserbox"> + {{ with .Get "text" }}<p class="teasertext">{{ . }}</p>{{ end }} + {{ with .Get "link" }}<p class="teaserlink"><a class="button" href="{{ . }}"><span class="button-inner">Mehr über diese Wanderung</span></a></p>{{ end }} + </div> </div> </div> \ No newline at end of file diff --git a/static/css/custom.css b/static/css/custom.css @@ -10,24 +10,26 @@ padding: 1px; } .teaser { + margin: 30px 0; +} +.teasertitle { + margin-top: 0 !important; + padding-top: 0 !important; + margin-bottom: 0 !important; + padding-bottom: 0 !important; +} +.teasercontent { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; - margin: 30px 0; } .teaserimage { width: 150px; height: 113px; margin-right: 20px !important; } -.teasertitle { - margin-top: 0 !important; - padding-top: 0 !important; - margin-bottom: 0 !important; - padding-bottom: 0 !important; -} .teasertext { margin-top: 3px !important; padding-top: 0 !important; @@ -36,11 +38,15 @@ text-align: justify; } .teaserlink { - margin-top: 0 !important; + margin-top: 5px !important; padding-top: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } +.teaserlink a { + box-shadow: 0 0 !important; + margin: 0 !important; +} #osmmap { margin: 0 0 25px 0; padding: 0;