From f8450b7639a8afcd9e25e99c8a07ae45a158c7a4 Mon Sep 17 00:00:00 2001 From: Jeff MacKinnon Date: Sat, 28 May 2022 15:41:30 -0300 Subject: [PATCH] Made the gallery a bit nicer --- static/css/pelican.css | 128 ++++++++++++++++++++++++++++++++++ templates/article.html | 152 +++++++++++++++++++++-------------------- 2 files changed, 205 insertions(+), 75 deletions(-) diff --git a/static/css/pelican.css b/static/css/pelican.css index e69de29..6a95d06 100644 --- a/static/css/pelican.css +++ b/static/css/pelican.css @@ -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; +} \ No newline at end of file diff --git a/templates/article.html b/templates/article.html index 39665a0..d2928ae 100644 --- a/templates/article.html +++ b/templates/article.html @@ -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 @@ {% endif %} - @@ -54,84 +53,87 @@ {% endblock %} {% block content %} -
-
-

- {{ article.title }}

- {% import 'translations.html' as translations with context %} - {{ translations.translations_for(article) }} - Published: - {% if article.modified %} -
Updated: - {% endif %} - {% if article.authors %} -
By {% for author in article.authors %} - {{ author }} - {% endfor %} -

- {% endif %} - - {% if SOCIAL_SHARE is sameas true %} - - {% else %} +
+
+

+ {{ article.title }}

+ {% import 'translations.html' as translations with context %} + {{ translations.translations_for(article) }} + Published: + {% if article.modified %} +
Updated: + {% endif %} + {% if article.authors %} +
By {% for author in article.authors %} + {{ author }} + {% endfor %} +

{% endif %} - {% if article.photo_image %} - -

- {% endif %} -
-
- {{ article.content }} - {% if article.photo_gallery %} -


- {% for title, gallery in article.photo_gallery %} -

{{ title }}

- {% for name, photo, thumb, exif, caption in gallery %} - - {% endfor %} - {% endfor %} -
- {% endif %} - {% if article.series %} -
+ {% if SOCIAL_SHARE is sameas true %} + + {% else %} + {% endif %} + + {% if article.photo_image %} +

-

This post is part {{ article.series.index }} of the "{{ article.series.name }}" series:

-
    - {% for part_article in article.series.all %} -
  1. - {{ part_article.title }} -
    2. - {% endfor %} -
-
- {% endif %} -
- {% if article.category %} -
- Category: {{ article.category }} -
{% endif %} - {% if article.tags %} -
- Tags: - {% for tag in article.tags %} - {{ tag }} +
+
+ {{ article.content }} + {% if article.photo_gallery %} +

+ {% for title, gallery in article.photo_gallery %} +

{{ title }}

+
+
    + {% for name, photo, thumb, exif, caption in gallery %} +
    2. {% endfor %} +
+ {% endfor %} + + {% endif %} + {% if article.series %} +
+

+

This post is part {{ article.series.index }} of the "{{ article.series.name }}" series:

+
    + {% for part_article in article.series.all %} +
  1. + {{ part_article.title }} +
    2. + {% endfor %} +
{% endif %} - - {% if MASTODON_COMMENTS is sameas True %} -
-
-

Click Here to Comment on Mastodon.

-

If its your first time commenting, click here to figure it out.

-
- {% endif %} -
-
+ + {% if MASTODON_COMMENTS is sameas True %} +
+
+

Click Here to Comment on Mastodon.

+

If its your first time commenting, click here to figure it out.

+
+ {% endif %} + + {% endblock %} \ No newline at end of file