mock news page, first pass

_data/menus.yml

@@ -5,15 +5,18 @@ main:
   - name: "FAQ"
     url: "/faq/"
     weight: 2
+  - name: "News"
+    url: "/news/"
+    weight: 3
   - name: "Team"
     url: "/team/"
-    weight: 3
+    weight: 4
   - name: "Contact"
     url: "/contact/"
-    weight: 4
+    weight: 5
   - name: "Gallery"
     url: "/gallery/"
-    weight: 5
+    weight: 6
 
 footer:
   - name: "Contact"

_data/news.json

@@ -0,0 +1,23 @@
+[
+    {
+    "title": "DH 2024",
+    "date": "2024-07-22",
+    "description": "DHRIFT will present at the AHDO Digital Humanities Conference.",
+    "image": "/images/dhri.png",
+    "link": "https://app.dhrift.org/inst/?instUser=GC-DRI&instRepo=GCDRI24Schedule",
+    "text": "DHRIFT, an OER tool for publishing, reproducing, and revising interactive DH technical
+    skill workshops, includes modules on topics like Python, JavaScript, and R. In this
+    workshop, attendees will learn about DHRIFT's pedagogy and underlying technologies.
+    Participants will create a customized, static workshop site and build new workshops
+    with DHRIFT."
+    },
+    {
+    "title": "DHRIFT is awarded an NEH Digital Humanities Advancement Grant",
+    "date": "2023-07-22",
+    "description": "DHRIFT gains funding to continue its development.",
+    "image": "/images/dhri.png",
+    "link": "https://app.dhrift.org/inst/?instUser=GC-DRI&instRepo=GCDRI23Schedule",
+    "text": "DHRIFT was awarded an NEH Digital Humanities Advancement Grant to support the ongoing development 
+      of the project. The grant will fund the development of new features, including new workshops and content."
+    }
+  ]

_layouts/news.html

@@ -0,0 +1,57 @@
+---
+layout: default
+bodyClass: page-basic
+--- 
+
+<div class="container">
+    <div class="row justify-content-center">
+        <div class="col-md-9">
+            <h1 class="news-head">Stay up to date with the latest news about the DHRIFT project.</h1>
+            {% for data in site.data.news %}
+            <div class="news-container">
+                <div class="news-date">
+                    <h6 class="card-subtitle mb-2 text-muted">{{ data.date }}</h6>
+                </div>
+                <div class="news-content">
+                    <div class="card-body">
+                        <div class="news-details">
+                            <h5 class="card-title">{{ data.title }}</h5>
+                            <p class="card-text">{{ data.description }}</p>
+                        </div>
+                        <div class="news-image-container">
+                            <div class="image-wrapper">
+                                <img src="{{ data.image }}" class="news-image img-fluid" alt="{{ data.title }}">
+                            </div>
+                            <div class="additional-text" style="display: none;">
+                                <p>{{ data.text }}</p>
+                            </div>
+                            <a href="#" class="read-more">Learn more</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+</div>
+
+<script>
+    document.addEventListener("DOMContentLoaded", function() {
+        const readMoreLinks = document.querySelectorAll(".read-more");
+
+        readMoreLinks.forEach(function(link) {
+            link.addEventListener("click", function(event) {
+                event.preventDefault();
+                const additionalText = this.parentElement.querySelector(".additional-text");
+                if (additionalText.style.display === "none" || additionalText.style.display === "") {
+                    additionalText.style.display = "block";
+                    this.textContent = "Read less";
+                } else {
+                    additionalText.style.display = "none";
+                    this.textContent = "Learn more";
+                }
+            });
+        });
+    });
+</script>
+

assets/css/style.scss

@@ -901,3 +901,83 @@ ul li {
   z-index: 1000;
 }
 
+// news
+.news-head {
+  font-size: 2.3em;
+  font-family: $font-family-heading !important;
+  color: $primary;
+  margin-top: 50px;
+  margin-bottom: 50px;
+  text-align: center;
+}
+
+.news-container {
+  display: flex;
+  align-items: center; 
+  margin-bottom: 20px; 
+  min-height: 300px;
+}
+
+.news-date {
+  margin-right: 20px;
+}
+
+.news-content {
+  flex-grow: 1; 
+  display: flex;
+  flex-direction: column;
+}
+
+.card-body {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.news-details {
+  margin-right: 20px;
+}
+
+.news-image-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 50%; 
+}
+
+.image-wrapper {
+  width: 400px; 
+  height: 250px; 
+  overflow: hidden; 
+}
+
+.news-image {
+  width: 100%;
+  height: auto;
+}
+
+.additional-text {
+  width: 100%;
+  overflow: hidden;
+  margin-bottom: 25px;
+  margin-top: -25px;
+}
+
+.read-more {
+  color: $primary;
+  margin-top: -20px;
+  background-color: $primary;
+  border: none;
+  border-radius: 0;
+  transition: background-color 0.3s;
+  font-size: 1.2em;
+  color: $white;
+  padding: 10px 20px;
+}
+
+.read-more:hover {
+  background-color: $sky; 
+  color: $primary;
+  cursor: pointer;
+  text-decoration: none;
+}

news.md

@@ -0,0 +1,5 @@
+---
+title: News
+layout: news
+description: News
+---