Updating layouts and general changes.

static/css/main.css

@@ -1610,7 +1610,7 @@ button,
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   margin: 0 0 2em -3em;
-  width: calc(100% + 3em); }
+  width: calc(80% + 3em); }
   .features article {
     -moz-align-items: center;
     -webkit-align-items: center;
@@ -2275,3 +2275,95 @@ button,
     border-top: 0;
     margin-top: 0;
     padding-top: 0; }
+
+
+
+
+
+
+
+
+    
+/* Trying to figure out how to make notes/warnings/etc working */
+
+/* -- admonitions ----------------------------------------------------------- */
+div.admonition > :last-child {
+  margin-bottom: 0;
+}
+div.admonition::after {
+    display: block;
+    content: '';
+    clear: both;
+}
+
+div.admonition {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding: 7px;
+}
+
+div.admonition dt {
+  font-weight: bold;
+}
+
+p.admonition-title {
+  margin: 0px 10px 5px 0px;
+  font-weight: bold;
+}
+
+div.body p.centered {
+  text-align: center;
+  margin-top: 25px;
+}
+
+
+:root {
+  --pst-color-primary: 19, 6, 84;
+  --pst-color-success: 40, 167, 69;
+  --pst-color-info: 0, 123, 255;  /*23, 162, 184;*/
+  --pst-color-warning: 255, 193, 7;
+  --pst-color-danger: 220, 53, 69;
+  
+  /*****************************************************************************
+  * Icon
+  **/
+
+  /* font awesome icons*/
+  --pst-icon-check-circle: '\f058';
+  --pst-icon-info-circle: '\f05a';
+  --pst-icon-exclamation-triangle: '\f071';
+  --pst-icon-exclamation-circle: '\f06a';
+  --pst-icon-times-circle: '\f057';
+  --pst-icon-lightbulb: '\f0eb';
+
+  /*****************************************************************************
+  * Admonitions
+  **/
+  
+
+
+  --pst-color-admonition-default: var(--pst-color-info);
+  --pst-color-admonition-note: var(--pst-color-info);
+  --pst-color-admonition-attention: var(--pst-color-warning);
+  --pst-color-admonition-caution: var(--pst-color-warning);
+  --pst-color-admonition-warning: var(--pst-color-warning);
+  --pst-color-admonition-danger: var(--pst-color-danger);
+  --pst-color-admonition-error: var(--pst-color-danger);
+  --pst-color-admonition-hint: var(--pst-color-success);
+  --pst-color-admonition-tip: var(--pst-color-success);
+  --pst-color-admonition-important: var(--pst-color-success);
+
+  --pst-icon-admonition-default: var(--pst-icon-info-circle);
+  --pst-icon-admonition-note: var(--pst-icon-info-circle);
+  --pst-icon-admonition-attention: var(--pst-icon-exclamation-circle);
+  --pst-icon-admonition-caution: var(--pst-icon-exclamation-triangle);
+  --pst-icon-admonition-warning: var(--pst-icon-exclamation-triangle);
+  --pst-icon-admonition-danger: var(--pst-icon-exclamation-triangle);
+  --pst-icon-admonition-error: var(--pst-icon-times-circle);
+  --pst-icon-admonition-hint: var(--pst-icon-lightbulb);
+  --pst-icon-admonition-tip: var(--pst-icon-lightbulb);
+  --pst-icon-admonition-important: var(--pst-icon-exclamation-circle);
+
+}
+
+/* They are still not working */

templates/article.html

@@ -62,39 +62,6 @@
          title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h2>
  {% import 'translations.html' as translations with context %}
  {{ translations.translations_for(article) }}
-    {% if article.photo_image %}
-    <img style="max-width:100%; display: block; margin: 0px auto;" src="{{ SITEURL }}/{{ article.photo_image[1] }}" />
-    {% endif %}
-
-  </header>
-
-    <div class="entry-content">
-    <br /><br />
-    {{ article.content }}
-
-    <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>
-    <div class="post series">
-    <br /><br />
-    {% if article.series %}
-    <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>
-      {% endif %}
-    </div>
-
-    <footer class="post-info">
 Published: <time class="published" datetime="{{ article.date.isoformat() }}">
   {{ article.locale_date }}
 </time>
@@ -110,6 +77,51 @@
     {% endfor %}
 </address><br />
 {% endif %}
+<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>
+
+
+    {% 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">
+    <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>

templates/base.html

@@ -34,8 +34,6 @@
 {% if TAG_FEED_RSS and tag %}
   <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 %}
-
-
   <!-- Matomo -->
   <script>
     var _paq = window._paq = window._paq || [];
@@ -53,7 +51,6 @@
     })();
   </script>
   <!-- End Matomo Code -->
-
 {% endblock head %}
 </head>
 
@@ -67,17 +64,23 @@
           <strong><a href="{{ SITEURL }}/" class="logo">{{ SITENAME }}{% if SITESUBTITLE %} {{ SITESUBTITLE }}{% endif %}</a></strong>
 
           <ul class="icons">
-            {% if SOCIAL_TWIITER %}
+            {% if SOCIAL_TWITTER %}
-              <li><a href="https://twitter.com/{{ SOCIAL_TWIITER }}" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
+              <li><a href="https://twitter.com/{{ SOCIAL_TWITTER }}" class="icon brands fa-twitter" target="_blank" rel="noopener noreferrer"><span class="label">Twitter</span></a></li>
+            {% endif %}
+            {% if SOCIAL_FLICKR %}
+              <li><a href="https://www.flickr.com/photos/{{ SOCIAL_FLICKR }}" class="icon brands fa-flickr" target="_blank" rel="noopener noreferrer"><span class="label">Flickr</span></a></li>
             {% endif %}
             {% if SOCIAL_GITHUB %}
-              <li><a href="https://github.com/{{ SOCIAL_GITHUB }}" class="icon brands fa-github"><span class="label">Github</span></a></li>
+              <li><a href="https://github.com/{{ SOCIAL_GITHUB }}" class="icon brands fa-github" target="_blank" rel="noopener noreferrer"><span class="label">Github</span></a></li>
+            {% endif %}
+            {% if SOCIAL_LINKEDIN %}
+              <li><a href="https://www.linkedin.com/in/{{ SOCIAL_LINKEDIN }}" class="icon brands fa-linkedin" target="_blank" rel="noopener noreferrer"><span class="label">LinkedIn</span></a></li>
             {% endif %}
             {% if FEED_ALL_ATOM %}
             <li><a href="{{ FEED_DOMAIN }}/{% if FEED_ALL_ATOM_URL %}{{ FEED_ALL_ATOM_URL }}{% else %}{{ FEED_ALL_ATOM }}{% endif %}" type="application/atom+xml" rel="alternate" class="icon brands fa-atom"><span class="label">atom feed</span></a></li>
             {% endif %}
             {% if FEED_ALL_RSS %}
-            <li><a href="{{ FEED_DOMAIN }}/{% if FEED_ALL_RSS_URL %}{{ FEED_ALL_RSS_URL }}{% else %}{{ FEED_ALL_RSS }}{% endif %}" type="application/rss+xml" class="icon brands fa-rss-square"><span class="label">rss feed</span></a></li>
+            <li><a href="{{ FEED_DOMAIN }}/{% if FEED_ALL_RSS_URL %}{{ FEED_ALL_RSS_URL }}{% else %}{{ FEED_ALL_RSS }}{% endif %}" type="application/rss+xml" class="icon brands fa-rss"><span class="label">rss feed</span></a></li>
             {% endif %}  
           </ul>
         </header>
@@ -160,9 +163,19 @@
             </ul>
           </section> -->
        
+        {% if LINKS %} 
+        <section id="blogroll">
+          <header class="major">
+            <h2>Blogroll</h2>
+          </header>
+          {% for name, link in LINKS %}
+          <li><a href="{{ link }}">{{ name }}</a></li>
+          {% endfor %}  
+        </section>
+        {% endif %}
+
         <!-- Section - The various series -->
-        {% if series_name %}
+        <section id="article-series">
-        <section>
           <header class="major">
             <h2>Here are some post series</h2>
           </header>
@@ -178,30 +191,25 @@
           </article>
           {% endfor %}
         </section>
-      {% endif %}
 
-      {% if LINKS %} 
+        {% if CONTACT_EMAIL or CONTACT_PHONE_NUM or CONTACT_HOME_ADDR %}
-      <section id="blogroll">
-        <header class="major">
-          <h2>Blogroll</h2>
-        </header>
-
-        {% for name, link in LINKS %}
-        <li><a href="{{ link }}">{{ name }}</a></li>
-        {% endfor %}  
-      </section>
-      {% endif %}
-
-        <!-- Section -->
         <section>
           <header class="major">
             <h2>Get in touch</h2>
           </header>
-            <p>I will add some contact information on here eventuall, but for now, NOPE</p>
           <ul class="contact">
-              <li class="icon solid fa-home">Halifax, NS</li>
+          {% if CONTACT_EMAIL %}
+            <li class="icon sold fa-envelope">{{ CONTACT_EMAIL }}</li>
+          {% endif %}
+          {% if CONTACT_PHONE_NUM %}
+            <li class="icon solid fa-phone">{{ CONTACT_PHONE_NUM }}</li>
+          {% endif %}
+          {% if CONTACT_HOME_ADDR %}
+            <li class="icon solid fa-home">{{ CONTACT_HOME_ADDR }}</li>
+          {% endif %}
           </ul>
         </section>
+        {% endif %}
 
         <!-- Footer -->
         <footer id="footer">
@@ -211,7 +219,6 @@
         </footer>
 
       </div>
-
     </div>
   </div>
 
@@ -248,6 +255,5 @@ $('.gallery').magnificPopup({
   });
   </script>
   {% endif %}
-
 </body>
 </html>