Made the gallery a bit nicer
This commit is contained in:
parent
4da221ebee
commit
f8450b7639
2 changed files with 205 additions and 75 deletions
|
|
@ -0,0 +1,128 @@
|
|||
/* resets */
|
||||
|
||||
ul, ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ol {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* reset */
|
||||
|
||||
.post st-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* LIBRARY TEMPLATE */
|
||||
|
||||
.tmpl-library {
|
||||
margin: 0 auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* books */
|
||||
|
||||
.book {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: .1em;
|
||||
position: relative;
|
||||
text-transform: initial;
|
||||
transition: transform .05s;
|
||||
width: 200px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.postlist-home li.book:nth-of-type(7n) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.postlist-home li.book:nth-of-type(6n) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 710px) {
|
||||
.postlist-home li.book:nth-of-type(5n) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.postlist-home li.book:nth-of-type(4n) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.book .book__back {
|
||||
background-color: black;
|
||||
bottom: 0;
|
||||
color: white;
|
||||
font-size: 8px;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding: 0 .5em;
|
||||
position: absolute;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.book:focus .book__back {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.book:hover, book:focus {
|
||||
transform: scale(1.4);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.footer .book:hover, book:focus {
|
||||
transform: scale(2);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.book:hover, book:focus {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.book.book--widescreen {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 650px) {
|
||||
.book.book--midscreen {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bookshelf {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin: .25em 0 0 0;
|
||||
padding-left: 0;
|
||||
width: 100%;
|
||||
border: 1px;
|
||||
}
|
||||
|
||||
.book:hover .book__image {
|
||||
box-shadow: 0 0 10px rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
/* main */
|
||||
|
||||
.tmpl-library .bookshelf {
|
||||
border: 1px solid var(--base-dark);
|
||||
margin: 0 auto;
|
||||
/*max-width: 810px;*/
|
||||
padding: 1em;
|
||||
}
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block html_lang %}{{ article.lang }}{% endblock %}
|
||||
|
||||
{% block title %}{{ SITENAME }} - {{ article.title|striptags }}{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
|
||||
{% import 'translations.html' as translations with context %}
|
||||
{% if translations.entry_hreflang(article) %}
|
||||
{{ translations.entry_hreflang(article) }}
|
||||
|
|
@ -40,7 +40,6 @@
|
|||
<meta name="twitter:image" content="{{ SITEURL }}/{{ article.photo_image[1] }}" />
|
||||
{% endif %}
|
||||
|
||||
|
||||
<!-- Open Graph Tags-->
|
||||
<meta property="og:site_name" content="{{ SITENAME }}" />
|
||||
<meta property="og:title" content="{{ article.title|striptags }}" />
|
||||
|
|
@ -54,84 +53,87 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section id="content" class="body">
|
||||
<header>
|
||||
<h1 class="entry-title">
|
||||
<a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h1>
|
||||
{% import 'translations.html' as translations with context %}
|
||||
{{ translations.translations_for(article) }}
|
||||
Published: <time class="published" datetime="{{ article.date.isoformat() }}">{{ article.locale_date }}</time>
|
||||
{% if article.modified %}
|
||||
<br />Updated: <time class="modified" datetime="{{ article.modified.isoformat() }}">{{ article.locale_modified }}</time>
|
||||
{% endif %}
|
||||
{% if article.authors %}
|
||||
<address class="vcard author">By {% for author in article.authors %}
|
||||
<a class="url fn" href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>
|
||||
{% endfor %}
|
||||
</address><br />
|
||||
{% endif %}
|
||||
|
||||
{% if SOCIAL_SHARE is sameas true %}
|
||||
<p class="share">Share this article on:
|
||||
<span><a class="" href="https://twitter.com/intent/tweet?text={{ article.title|striptags }}&url={{ SITEURL }}/{{ article.url }}{% if SOCIAL_TWITTER %}&via={{ SOCIAL_TWITTER }}{% endif %}" target="_blank" title="Share on Twitter"><i class="fab fa-twitter"></i> Twitter</a></span>
|
||||
<span><a class="" href="https://www.linkedin.com/sharing/share-offsite/?url={{ SITEURL }}/{{ article.url }}" target="_blank" title="Share via Linkedin"><i class="icon brands fa-linkedin"></i> Linkedin</a></span>
|
||||
<span><a class="" href="mailto:?subject={{ article.title|striptags }}&body={{ article.summary|striptags }} - {{ SITEURL }}/{{ article.url }}" target="_blank" title="Share via Email"><i class="fas fa-envelope"></i> Email</a></span>
|
||||
</p>
|
||||
{% else %}
|
||||
<section id="content" class="body">
|
||||
<header>
|
||||
<h1 class="entry-title">
|
||||
<a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h1>
|
||||
{% import 'translations.html' as translations with context %}
|
||||
{{ translations.translations_for(article) }}
|
||||
Published: <time class="published" datetime="{{ article.date.isoformat() }}">{{ article.locale_date }}</time>
|
||||
{% if article.modified %}
|
||||
<br />Updated: <time class="modified" datetime="{{ article.modified.isoformat() }}">{{ article.locale_modified }}</time>
|
||||
{% endif %}
|
||||
{% if article.authors %}
|
||||
<address class="vcard author">By {% for author in article.authors %}
|
||||
<a class="url fn" href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>
|
||||
{% endfor %}
|
||||
</address><br />
|
||||
{% endif %}
|
||||
|
||||
{% if article.photo_image %}
|
||||
<img style="max-width:90%; display: block; margin: 0px auto;" src="{{ SITEURL }}/{{ article.photo_image[1] }}" />
|
||||
<br /><br />
|
||||
{% endif %}
|
||||
</header>
|
||||
<div class="entry-content">
|
||||
{{ article.content }}
|
||||
{% if article.photo_gallery %}
|
||||
<div class="gallery"> <br /><br />
|
||||
{% for title, gallery in article.photo_gallery %}
|
||||
<h2>{{ title }}</h2>
|
||||
{% for name, photo, thumb, exif, caption in gallery %}
|
||||
<a href="{{ SITEURL }}/{{ photo }}" title="{{ name }}" exif="{{ exif }}" caption="{{ caption }}"><img src="{{ SITEURL }}/{{ thumb }}"></a>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if article.series %}
|
||||
<div class="post series">
|
||||
{% if SOCIAL_SHARE is sameas true %}
|
||||
<p class="share">Share this article on:
|
||||
<span><a class="" href="https://twitter.com/intent/tweet?text={{ article.title|striptags }}&url={{ SITEURL }}/{{ article.url }}{% if SOCIAL_TWITTER %}&via={{ SOCIAL_TWITTER }}{% endif %}" target="_blank" title="Share on Twitter"><i class="fab fa-twitter"></i> Twitter</a></span>
|
||||
<span><a class="" href="https://www.linkedin.com/sharing/share-offsite/?url={{ SITEURL }}/{{ article.url }}" target="_blank" title="Share via Linkedin"><i class="icon brands fa-linkedin"></i> Linkedin</a></span>
|
||||
<span><a class="" href="mailto:?subject={{ article.title|striptags }}&body={{ article.summary|striptags }} - {{ SITEURL }}/{{ article.url }}" target="_blank" title="Share via Email"><i class="fas fa-envelope"></i> Email</a></span>
|
||||
</p>
|
||||
{% else %}
|
||||
{% endif %}
|
||||
|
||||
{% if article.photo_image %}
|
||||
<img style="max-width:90%; display: block; margin: 0px auto;" src="{{ SITEURL }}/{{ article.photo_image[1] }}" />
|
||||
<br /><br />
|
||||
<p>This post is part {{ article.series.index }} of the "{{ article.series.name }}" series:</p>
|
||||
<ol class="parts">
|
||||
{% for part_article in article.series.all %}
|
||||
<li {% if part_article == article %}class="active"{% endif %}>
|
||||
<a href='{{ SITEURL }}/{{ part_article.url }}'>{{ part_article.title }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
{% endif %}
|
||||
<footer class="post-info">
|
||||
{% if article.category %}
|
||||
<div class="category">
|
||||
Category: <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if article.tags %}
|
||||
<div class="tags">
|
||||
Tags:
|
||||
{% for tag in article.tags %}
|
||||
<a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a>
|
||||
</header>
|
||||
<div class="entry-content">
|
||||
{{ article.content }}
|
||||
{% if article.photo_gallery %}
|
||||
<br /><br />
|
||||
{% for title, gallery in article.photo_gallery %}
|
||||
<h2>{{ title }}</h2>
|
||||
<section class="photo_gallery">
|
||||
<ol class="bookshelf">
|
||||
{% for name, photo, thumb, exif, caption in gallery %}
|
||||
<li class="book postlist-item"><a href="{{ SITEURL }}/{{ photo }}" target="_blank" title="{{ name }}" exif="{{ exif }}" caption="{{ caption }}"><img src="{{ SITEURL }}/{{ thumb }}"></a></li>
|
||||
{% endfor %}
|
||||
</ol></section>
|
||||
{% endfor %}
|
||||
|
||||
{% endif %}
|
||||
{% if article.series %}
|
||||
<div class="post series">
|
||||
<br /><br />
|
||||
<p>This post is part {{ article.series.index }} of the "{{ article.series.name }}" series:</p>
|
||||
<ol class="parts">
|
||||
{% for part_article in article.series.all %}
|
||||
<li {% if part_article == article %}class="active"{% endif %}>
|
||||
<a href='{{ SITEURL }}/{{ part_article.url }}'>{{ part_article.title }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
</div>
|
||||
{% endif %}
|
||||
</footer><!-- /.post-info -->
|
||||
{% if MASTODON_COMMENTS is sameas True %}
|
||||
<div class="mastodon-comments">
|
||||
<br />
|
||||
<p><strong><a href="{{ SITEURL }}/mastodon-comments/bot.php?title={{ article.title|striptags }}&url={{ SITEURL }}/{{ article.url }}{% if article.photo_image %}&image=../{{ article.photo_image[1] }}{% endif %}">Click Here to Comment on Mastodon.</a></strong></p>
|
||||
<p>If its your first time commenting, <a href="https://jeffmackinnon.com/commenting-on-blog-with-mastodon.html">click here</a> to figure it out.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div><!-- /.entry-content -->
|
||||
</section>
|
||||
<footer class="post-info">
|
||||
{% if article.category %}
|
||||
<div class="category">
|
||||
Category: <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if article.tags %}
|
||||
<div class="tags">
|
||||
Tags:
|
||||
{% for tag in article.tags %}
|
||||
<a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</footer><!-- /.post-info -->
|
||||
{% if MASTODON_COMMENTS is sameas True %}
|
||||
<div class="mastodon-comments">
|
||||
<br />
|
||||
<p><strong><a href="{{ SITEURL }}/mastodon-comments/bot.php?title={{ article.title|striptags }}&url={{ SITEURL }}/{{ article.url }}{% if article.photo_image %}&image=../{{ article.photo_image[1] }}{% endif %}">Click Here to Comment on Mastodon.</a></strong></p>
|
||||
<p>If its your first time commenting, <a href="https://jeffmackinnon.com/commenting-on-blog-with-mastodon.html">click here</a> to figure it out.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div><!-- /.entry-content -->
|
||||
</section>
|
||||
{% endblock %}
|
||||
Loading…
Reference in a new issue