New website announcement post (#20)

* New website announcement post

* Add author names to pages

* Apply Hank's suggestions for announcement post

Co-authored-by: Henry Wilkinson <[email protected]>

* Additional tweaks as per Hank's suggestions

* Spelling fixes, link clarification, and minor casing fix

* Spelling fix

* Added alt-text as per Hank's suggestion

* Optimized images with Oxipng

---------

Co-authored-by: Henry Wilkinson <[email protected]>

Author: Songtech-0912

.gitignore

@@ -13,4 +13,7 @@ vendor/
 *.temp
 *.tmp
 *.vscode
-*.idea
+*.idea
+
+# Other
+.trunk/

_includes/image-gallery.html

@@ -0,0 +1,17 @@
+<!-- modified from https://dmnfarrell.github.io/software/jekyll-galleries -->
+<div class ="image-gallery">
+  {% assign sorted = site.static_files | sort: 'date' | reverse %}
+  {% for file in sorted %}
+  {% if file.path contains include.folder %}
+  {% if file.extname == '.png' %}
+    {% assign filenameparts = file.path | split: "/" %}
+      {% assign filename = filenameparts | last | replace: file.extname,"" %}
+       <div class="box">
+        <a href="{{ file.path | relative_url }}" title="{{ filename }}">
+         <img src="{% base %}{{ file.path | relative_url }} " target="_blank" alt="{{ filename }}"  class="img-gallery" />
+        </a>
+       </div>
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+ </div>

_includes/news-img.html

@@ -0,0 +1,2 @@
+<!-- Jekyll template specifically for standalone images on the news page -->
+<img src="{% base %}/img/news/{{ include.img }}" alt="{{ include.alt }}" />

_layouts/post.html

@@ -10,7 +10,11 @@
         <div class="newspost-header">
           <img src="{% base %}{{ page.postimg }}" alt="{{ page.postimgalttext }}"/>
           <h1>{{ page.title }}</h1>
-          <time class="text-uppercase" datetime="{{ page.date | date: "%Y-%m-%d" }}">{{ page.date | date: "%B %d, %Y" }}</time>
+          <div>
+            <time class="text-uppercase" datetime="{{ page.date | date: "%Y-%m-%d" }}">{{ page.date | date: "%B %d, %Y" }}</time>
+            <span>&middot;</span>
+            <span rel="author">{{ page.author }}</span>
+          </div>
           <p>{{ page.description }}</p>
           <div class="horizontal-rule"></div>
         </div>
@@ -23,4 +27,4 @@ <h1>{{ page.title }}</h1>
   {% include footer.html %}
 </body>
 
-</html>
+</html>

_sass/_textpost.scss

@@ -20,10 +20,16 @@
   }
 
   time {
-    padding: 0 8vw 0 8vw;
+    padding: 0 0 0 8vw;
+  }
+
+  span {
+    color: var(--purple);
+    line-height: 1.5;
   }
 
   p {
+    text-wrap: pretty;
     font-variation-settings: 'wght' 500;
     font-size: 1.4rem;
     margin-bottom: 4rem;
@@ -69,14 +75,15 @@
   article {
     padding-left: 8vw;
     padding-right: 8vw;
+    max-width: 100ch;
 
     h1 {
       font-size: 3.5rem;
     }
 
     h2 {
       font-size: 2.5rem;
-      margin-top: 6rem;
+      margin-top: 4rem;
     }
 
     h3 {
@@ -191,3 +198,30 @@
     }
   }
 }
+
+/* from: https://dmnfarrell.github.io/software/jekyll-galleries */
+.image-gallery {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+  justify-content: center;
+  padding: 4px;
+}
+
+.box {
+  flex-basis: 25%;
+  width: 100%;
+  padding: 10px;
+  margin: 2px;
+}
+
+.img-gallery {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  transform: scale(1);
+  transition: all 0.3s ease-in-out;
+    &:hover {
+      transform: scale(1.05);
+    }
+}