From d8fc6a15b015cadce74fbb8a2e3004449a0a590d Mon Sep 17 00:00:00 2001
From: Jeff MacKinnon <jeff@jeffmackinnon.com>
Date: Sun, 5 Jun 2022 08:43:20 -0300
Subject: [PATCH] Cleaning up entry infor and gallery

---
 static/css/main.css    | 16 +++++---
 static/css/pelican.css | 90 ++++++++++++++++++++++++------------------
 templates/article.html | 44 ++++++++++-----------
 templates/base.html    | 24 ++++-------
 4 files changed, 90 insertions(+), 84 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index e7eebff..2107922 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -2,6 +2,7 @@
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic|Roboto+Slab:400,700");
 @import url(pygment.css);
 @import url(pelican.css);
+
 /*
 	Editorial by HTML5 UP
 	html5up.net | @ajlkn
@@ -131,7 +132,7 @@ em, i {
   font-style: italic; }
 
 p {
-  margin: 0 0 2em 0; }
+  margin: 1em 0 1em 0; }
 
 h1, h2, h3, h4, h5, h6 {
   color: #3d4449;
@@ -1865,7 +1866,7 @@ button,
     margin: 0 auto;
     max-width: 110em; }
     #main > .inner > section {
-      padding: 6em 0 4em 0 ;
+      padding: 2em 0 4em 0 ;
       border-top: solid 2px rgba(210, 215, 217, 0.75); }
       #main > .inner > section:first-of-type {
         border-top: 0 !important; }
@@ -1873,17 +1874,17 @@ button,
     #main > .inner {
       padding: 0 5em 0.1em 5em ; }
       #main > .inner > section {
-        padding: 5em 0 3em 0 ; } }
+        padding: 2em 0 3em 0 ; } }
   @media screen and (max-width: 1280px) {
     #main > .inner {
       padding: 0 4em 0.1em 4em ; }
       #main > .inner > section {
-        padding: 4em 0 2em 0 ; } }
+        padding: 1em 0 2em 0 ; } }
   @media screen and (max-width: 736px) {
     #main > .inner {
       padding: 0 2em 0.1em 2em ; }
       #main > .inner > section {
-        padding: 3em 0 1em 0 ; } }
+        padding: 1em 0 1em 0 ; } }
 
 /* Sidebar */
 #search form {
@@ -2276,4 +2277,7 @@ button,
   #menu > ul > li:first-child {
     border-top: 0;
     margin-top: 0;
-    padding-top: 0; }
\ No newline at end of file
+    padding-top: 0; }
+
+
+
diff --git a/static/css/pelican.css b/static/css/pelican.css
index 28f03fe..5ef6d0c 100644
--- a/static/css/pelican.css
+++ b/static/css/pelican.css
@@ -30,7 +30,7 @@ ol {
 
 /* main */
 
-.tmpl-library .bookshelf {
+.tmpl-library .photo_gallery {
     border: 1px solid var(--base-dark);
     margin: 0 auto;
     padding: 1em;
@@ -54,8 +54,10 @@ ol {
 }
 /************************************************/
 
+
+
 /************************************************/
-/* LIBRARY TEMPLATE                             */
+/* Gallery TEMPLATE                             */
 
 /* "sourced" aka copied from - https://www.pagemelt.ink/published/ */
 /* I have probably made enough changes that is it now "inspired by", but where is that lie really? */
@@ -66,9 +68,20 @@ ol {
     overflow-x: hidden;
 }
 
-/* books */
+.photo_gallery {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: left;
+    /*margin: .25em 0 0 0; */
+    padding-left: 0;
+    width: 100%;
+    border: 1px;
+    }
+    
 
-.book {
+/* photos */
+
+.photo {
     display: flex;
     justify-content: center;
     margin: .1em;
@@ -80,87 +93,86 @@ ol {
 }
 
 @media screen and (max-width: 900px) {
-.postlist-home li.book:nth-of-type(7n) {
+.gallery-home li.photo:nth-of-type(7n) {
     display: none;
 }
 }
 
 @media screen and (max-width: 800px) {
-.postlist-home li.book:nth-of-type(6n) {
+.gallery-home li.photo:nth-of-type(6n) {
     display: none;
 }
 }
 
 @media screen and (max-width: 710px) {
-.postlist-home li.book:nth-of-type(5n) {
+.gallery-home li.photo:nth-of-type(5n) {
     display: none;
 }
 }
 
 @media screen and (max-width: 600px) {
-.postlist-home li.book:nth-of-type(4n) {
+.gallery-home li.photo: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 {
+.photo:focus .photo__back {
 display: flex;
 }
 
-.book:hover, book:focus {
+.photo:hover, photo:focus {
 transform: scale(1.4);
 z-index: 1000;
 }
 
-.footer .book:hover, book:focus {
+.footer .photo:hover, photo:focus {
 transform: scale(2);
 }
 
 @media screen and (max-width: 800px) {
-.book:hover, book:focus {
+.photo:hover, photo:focus {
     transform: scale(1.5);
 }
 }
 
 @media screen and (max-width: 800px) {
-.book.book--widescreen {
+.photo.photo--widescreen {
     display: none;
 }
 }
 
 @media screen and (max-width: 650px) {
-.book.book--midscreen {
+.photo.photo--midscreen {
     display: none;
     width: 400px;
 
 }
 }
 
-.bookshelf {
-display: flex;
-flex-wrap: wrap;
-justify-content: right;
-/*margin: .25em 0 0 0; */
-padding-left: 0;
-width: 100%;
-border: 1px;
-}
-
-.book:hover .book__image {
+.photo:hover .photo__image {
 box-shadow: 0 0 10px rgba(0,0,0,.5);
 }
 
-/************************************************/
\ No newline at end of file
+/************************************************/
+
+
+/* Article/Entry Info */
+#entry-info {
+    margin: 0 0 2em 0;
+    border-bottom: solid 5px #f56a6a;
+    padding: 1em 0 0 0;
+    position: relative;
+}
+VB 
+.pentry {
+    margin: 0 0 0 0;
+}
+/************************************************/
+
+/* Special Classes */
+
+.share {
+    margin: 1em 0 1em 0;
+}
+
+/************************************************/
diff --git a/templates/article.html b/templates/article.html
index d2928ae..502fa80 100644
--- a/templates/article.html
+++ b/templates/article.html
@@ -55,20 +55,26 @@
 {% 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>
+      <h1 class="entry-title"><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h1>
+      {% if article.photo_image %}
+      <img style="display: block; margin: 0px auto;" src="{{ SITEURL }}/{{ article.photo_image[1] }}" />
+      {% endif %}
+
+
+    </header>
+    <div id="entry-info">
+      {% import 'translations.html' as translations with context %}
+      {{ translations.translations_for(article) }}
+      <p class="pentry">Published: <time class="published" datetime="{{ article.date.isoformat() }}">{{ article.locale_date }}</time></p>
+      {% if article.modified %}
+      <p class="pentry">Updated: <time class="modified" datetime="{{ article.modified.isoformat() }}">{{ article.locale_modified }}</time></p>
+      {% endif %}
+      {% if article.authors %}
+      <p class="pentry"><address class="vcard author">By {% for author in article.authors %}
+        <a class="url fn" href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a> 
       {% endfor %}
-      </address><br />
-    {% endif %}
+      </address></p>
+      {% endif %}
 
       {% if SOCIAL_SHARE is sameas true %}
       <p class="share">Share this article on: 
@@ -76,14 +82,8 @@
         <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 />
-      {% endif %}
-    </header>    
+    </div>
     <div class="entry-content">
     {{ article.content }}
       {% if article.photo_gallery %}
@@ -91,9 +91,9 @@
       {% for title, gallery in article.photo_gallery %}
       <h2>{{ title }}</h2>
           <section class="photo_gallery"> 
-          <ol class="bookshelf">
+          <ol class="photo_gallery">
           {% 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>
+            <li class="photo gallery-item"><a href="{{ SITEURL }}/{{ photo }}" target="_blank"  title="{{ name }}" exif="{{ exif }}" caption="{{ caption }}"><img src="{{ SITEURL }}/{{ thumb }}"></a></li>
           {% endfor %}
         </ol></section>
       {% endfor %}
diff --git a/templates/base.html b/templates/base.html
index d73560f..b916f61 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -39,25 +39,10 @@
   <link href="{{ FEED_DOMAIN }}/{% if TAG_FEED_RSS_URL %}{{ TAG_FEED_RSS_URL.format(slug=tag.slug) }}{% else %}{{ TAG_FEED_RSS.format(slug=tag.slug) }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Tags RSS Feed" />
 {% endif %}
 {% if TRACKING %}
-  <!-- Matomo -->
-    <script>
-    var _paq = window._paq = window._paq || [];
-    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-    _paq.push(["setDoNotTrack", true]);
-    _paq.push(["disableCookies"]);
-    _paq.push(['trackPageView']);
-    _paq.push(['enableLinkTracking']);
-    (function() {
-      var u="//stats.jeffmackinnon.com/";
-      _paq.push(['setTrackerUrl', u+'matomo.php']);
-      _paq.push(['setSiteId', '2']);
-      var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-      g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
-    })();
-  </script>
-  <!-- End Matomo Code -->
+<!-- This is where you would put the evil javascript cookie based tracking -->
 {% endif %}
 
+
 {% endblock head %}
 {% block somemorehead %}
 {% endblock somemorehead %}
@@ -144,5 +129,10 @@
   });
   </script>
   {% endif %}
+
+{% if IMAGETRACKINGCODE %}
+{{ IMAGETRACKINGCODE }}
+{% endif %}
+
 </body>
 </html>