Merge branch 'projects' into 16-nautical-archaeology-link

.htaccess

@@ -1,4 +1,7 @@
 ErrorDocument 404 /404.html
 RewriteEngine on
+RewriteCond %{REQUEST_FILENAME} -d
+RewriteRule ^(.*?)/$ /$1.html [L]
+
 RewriteCond %{REQUEST_FILENAME}.html -f
 RewriteRule ^(.*?)/?$ /$1.html [L]

_includes/gallery_component.html

@@ -0,0 +1,69 @@
+<div class="gallery">
+    {%- for media_url in include.media -%}
+        <div class="image_container">
+            <img 
+                src="{{site.url | append: "/" | append: media_url}}" 
+                class="gallery_img" 
+                decoding="async" alt="">
+        </div>
+    {%- endfor -%}
+    </div>
+
+
+    {%- if include.grid -%}
+        <!-- https://www.w3schools.com/css/css_grid.asp -->
+        <style>
+            .gallery {
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
+                justify-content: space-evenly;
+                /* grid-template-columns: auto auto auto; */
+                gap: 10px;
+            }
+
+            .image_container {
+                height: 200px;
+                width: 200px;
+            }
+
+            img {
+                object-fit: cover;
+                width: 100%;
+                height: 100%;
+            }
+
+
+        </style>
+    {% else %}
+        <!-- the css to handle nice image resizing from-->
+        <!-- https://blog.logrocket.com/responsive-image-gallery-css-flexbox/ -->
+        <style>
+            .gallery {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-evenly;
+                gap: 10px;
+            }
+
+            .gallery::after {
+                content: "";
+                flex-grow: 999;
+
+            }
+
+            .image_container {
+                height: 300px;
+            }
+
+            img {
+                object-fit: cover;
+                width: 100%;
+                height: 100%;
+                flex: 1 1 auto; 
+            }
+
+
+        </style>
+    {%- endif -%}
+</div>

_includes/img_caption.html

@@ -0,0 +1,19 @@
+<div clas="captioned-img-container">
+    {% if include.src3 %}
+        <div class="img-container">
+            <img class="side_img" src="{{ include.src}}">
+            <img class="side_img" src="{{ include.src2}}">
+            <img class="side_img" src="{{ include.src3}}">
+        </div>
+    {% elsif include.src2 %}
+        <div class="img-container">
+            <img class="side_img" src="{{ include.src}}">
+            <img class="side_img" src="{{ include.src2}}">
+        </div>
+    {% else %}
+        <img src="{{ include.src}}">
+    {% endif %}
+    <p class="caption">
+        {{include.caption}}
+    </p>
+</div>

_includes/vid_caption.html

@@ -0,0 +1,13 @@
+<div clas="captioned-img-container">
+    {% if include.src2 %}
+        <div class="img-container">
+            <iframe width="500" height="400" src="https://www.youtube.com/embed/Tw7VNB5Eo6c" title="3D reconstruction of Native Diver Excavation" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+            <iframe width="500" height="400" src="https://www.youtube.com/embed/Tw7VNB5Eo6c" title="3D reconstruction of Native Diver Excavation" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+        </div>
+    {% else %}
+        <iframe width="500" height="400" src="https://www.youtube.com/embed/Tw7VNB5Eo6c" title="3D reconstruction of Native Diver Excavation" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+    {% endif %}
+    <p class="caption">
+        {{include.caption}}
+    </p>
+</div>

_layouts/gallery.html

@@ -0,0 +1,38 @@
+---
+layout: default
+
+---
+
+<div class="feed">
+  {%- if page.title -%}
+    <h1 class="page-heading">{{ page.title }} Media</h1>
+  {%- endif -%}
+
+  {%- if page.enable_nav -%}
+    <nav id="project-navigation">
+      <ul id="menu-project-nav" class="menu-project">
+        <li id="" class="menu-projects">
+            <a href={{ "./" }}>
+            {{ page.title }}
+            </a>
+        </li>
+        <li id="" class="menu-projects">
+        <a href={{ "./project-updates"  }}>
+            Project Updates
+            </a>
+        </li>
+        <li id="" class="menu-projects">
+            <a  aria-current="page">
+            Media
+            </a>
+        </li>
+
+      </ul>
+    </nav>
+  {%- endif -%}
+
+
+  {% include gallery_component.html media=page.media grid=page.grid %}
+</div>
+
+

_layouts/post_feed.html

@@ -0,0 +1,59 @@
+---
+layout: default
+---
+
+<div class="feed">
+  {%- if page.title -%}
+  <h1 class="page-heading">{{ page.title }} Posts</h1>
+{%- endif -%}
+
+  {%- if page.enable_nav -%}
+    <nav id="project-navigation">
+      <ul id="menu-project-nav" class="menu-project">
+        <li id="" class="menu-projects">
+          <a href={{ "./" }}>
+            {{ page.title }}
+          </a>
+        </li>
+        <li id="" class="menu-projects">
+          <a aria-current="page">
+            Project Updates
+          </a>
+        </li>
+        <li id="" class="menu-projects">
+          <a href={{ "./media"  }}>
+            Media
+          </a>
+        </li>
+
+      </ul>
+    </nav>
+  {%- endif -%}
+
+
+
+  {%- if site.posts.size > 0 -%}
+    <ul class="post-list">
+      {%- for post in site.posts -%}
+        {%- if post.categories contains page.category -%}
+
+          <li>
+            {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
+            <span class="post-meta">{{ post.date | date: date_format }}</span>
+            <h3>
+              <a class="post-link" href="{{ post.url | relative_url }}">
+                {{ post.title | escape }}
+              </a>
+            </h3>
+            {%- if site.show_excerpts -%}
+              {{ post.excerpt }}
+            {%- endif -%}
+          </li>
+        {%- endif -%}
+      {%- endfor -%}
+    </ul>
+
+    <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></p>
+  {%- endif -%}
+
+</div>

_layouts/project.html

@@ -0,0 +1,35 @@
+---
+layout: default
+---
+
+<!-- TODO what is itemtype + itemscope-->
+<article class="project h-entry" itemscope itemtype="http://schema.org/BlogPosting">
+  <h1 class="page-heading">{{ page.title }}</h1>
+
+  {%- if page.enable_nav -%}
+  <nav id="project-navigation">
+    <ul id="menu-project-nav" class="menu-project">
+      <li id="" class="menu-projects">
+        <a href={{ page.permalink }} aria-current="page">
+          {{ page.title }}
+        </a>
+      </li>
+      <li id="" class="menu-projects">
+        <a href={{ page.permalink | append: "/project-updates"  }}>
+          Project Updates
+        </a>
+      </li>
+      <li id="" class="menu-projects">
+        <a href={{ page.permalink | append: "/media"  }}>
+          Media
+        </a>
+      </li>
+    </ul>
+  </nav>
+  {%- endif -%}
+
+
+  <div class="project-content">
+    {{ content }}
+  </div>
+</article>

_layouts/project_gallery.html

@@ -0,0 +1,52 @@
+---
+layout: default
+---
+
+<!-- Contains data for indivual project webpage -->
+<div class="projects-overview">
+    <h1 class="page-heading">{{ page.title }}</h1>
+
+    {{ content }}
+
+    <div class="project-gallery">
+        {%- for project_data in page.blurbs -%}
+        <div class="project-container">
+            <a href={{ project_data.redict }}>
+                <img 
+                    src="{{site.url | append: "/" | append: project_data.photo}}" 
+                    class="gallery_img" 
+                    decoding="async" alt="">
+            </a>
+            <div description>
+                <a href={{ project_data.redict }}>
+                    {{ project_data.project_name }}
+                </a>
+
+                <p>
+                    {{ project_data.text }}
+                </p>
+            </div>
+        </div>
+    {%- endfor -%}
+    </div>
+
+    <style>
+        .project-gallery {
+            display: flex;
+            flex: auto;
+            flex-direction: row;
+            flex-wrap: wrap;
+            justify-content: space-evenly;
+            gap: 10px;
+        }
+
+        .project-container {
+            width: 250px;
+        }
+
+        img {
+            width: 250px;
+            height: 250px;
+        }
+    </style>
+</div>

_posts/2024-04-01-TESTING-NEWS_FEED.markdown

@@ -0,0 +1,7 @@
+---
+layout: post
+title:  "TESTING ACOUSTIC SPECIES NEWS FEED"
+date:   2024-01-18 20:29:36 -0800
+categories: 
+- acoustic-species-identification
+---

_sass/minima.scss

@@ -47,5 +47,6 @@ $on-laptop:        800px !default;
 @import
   "minima/base",
   "minima/layout",
-  "minima/syntax-highlighting"
+  "minima/syntax-highlighting",
+  "minima/project.scss"
 ;

_sass/minima/_project.scss

@@ -0,0 +1,57 @@
+.menu-project {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 15px;
+}
+
+.menu-projects {
+    list-style-type: none;
+}
+
+.captioned-img-container {
+    width: fit-content;
+    margin: auto;
+}
+
+.project-content img {
+    max-width: 100%;
+    vertical-align: middle;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+.captioned-img-container{
+    width: fit-content; margin: auto; text-align: center;
+}
+
+.img-container{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    height: 100%;
+}
+
+.side_img{
+    min-width: 0;
+    flex: 2 0 10%;
+    object-fit: cover;
+    width: auto;
+    min-height: 200px;
+    height: auto;
+}
+
+.caption{
+    text-align: center;
+}
+
+iframe {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}