pg-us · kjrocker · Dec 27, 2025 · Dec 24, 2025 · Dec 24, 2025 · Dec 24, 2025
diff --git a/media/pgus/css/navigation.css b/media/pgus/css/navigation.css
diff --git a/media/pgus/css/pgus.css b/media/pgus/css/pgus.css
diff --git a/media/pgus/js/navigation.js b/media/pgus/js/navigation.js
@@ -0,0 +1,43 @@
+// Wait for DOM to be ready before running navigation code
+document.addEventListener("DOMContentLoaded", function () {
+  // add classes for mobile navigation toggling
+  var CSbody = document.querySelector("body");
+  const CSnavbarMenu = document.querySelector("#cs-navigation");
+  const CShamburgerMenu = document.querySelector("#cs-navigation .cs-toggle");
+
+  // Check if navigation elements exist before adding event listeners
+  if (CShamburgerMenu && CSnavbarMenu && CSbody) {
+    CShamburgerMenu.addEventListener("click", function () {
+      CShamburgerMenu.classList.toggle("cs-active");
+      CSnavbarMenu.classList.toggle("cs-active");
+      CSbody.classList.toggle("cs-open");
+      // run the function to check the aria-expanded value
+      ariaExpanded();
+    });
+  }
+
+  // checks the value of aria expanded on the cs-ul and changes it accordingly whether it is expanded or not
+  function ariaExpanded() {
+    const csUL = document.querySelector("#cs-expanded");
+    if (csUL) {
+      const csExpanded = csUL.getAttribute("aria-expanded");
+
+      if (csExpanded === "false") {
+        csUL.setAttribute("aria-expanded", "true");
+      } else {
+        csUL.setAttribute("aria-expanded", "false");
+      }
+    }
+  }
+
+  // mobile nav toggle code
+  const dropDowns = Array.from(
+    document.querySelectorAll("#cs-navigation .cs-dropdown")
+  );
+  for (const item of dropDowns) {
+    const onClick = () => {
+      item.classList.toggle("cs-active");
+    };
+    item.addEventListener("click", onClick);
+  }
+});
diff --git a/media/pgus/js/pgus.js b/media/pgus/js/pgus.js
@@ -1,43 +0,0 @@
-// Wait for DOM to be ready before running navigation code
-document.addEventListener("DOMContentLoaded", function() {
-  // add classes for mobile navigation toggling
-  var CSbody = document.querySelector("body");
-  const CSnavbarMenu = document.querySelector("#cs-navigation");
-  const CShamburgerMenu = document.querySelector("#cs-navigation .cs-toggle");
-
-  // Check if navigation elements exist before adding event listeners
-  if (CShamburgerMenu && CSnavbarMenu && CSbody) {
-    CShamburgerMenu.addEventListener("click", function () {
-      CShamburgerMenu.classList.toggle("cs-active");
-      CSnavbarMenu.classList.toggle("cs-active");
-      CSbody.classList.toggle("cs-open");
-      // run the function to check the aria-expanded value
-      ariaExpanded();
-    });
-  }
-
-  // checks the value of aria expanded on the cs-ul and changes it accordingly whether it is expanded or not
-  function ariaExpanded() {
-    const csUL = document.querySelector("#cs-expanded");
-    if (csUL) {
-      const csExpanded = csUL.getAttribute("aria-expanded");
-
-      if (csExpanded === "false") {
-        csUL.setAttribute("aria-expanded", "true");
-      } else {
-        csUL.setAttribute("aria-expanded", "false");
-      }
-    }
-  }
-
-  // mobile nav toggle code
-  const dropDowns = Array.from(
-    document.querySelectorAll("#cs-navigation .cs-dropdown")
-  );
-  for (const item of dropDowns) {
-    const onClick = () => {
-      item.classList.toggle("cs-active");
-    };
-    item.addEventListener("click", onClick);
-  }
-});

diff --git a/template/base_new.html b/template/base_new.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>PgUS - {%block title%}{%endblock%}</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+  <!-- <link rel="stylesheet" href="/media/pgus/css/main.css" /> -->
+  <link rel="stylesheet" href="/media/pgus/css/pgus.css" />
+  <link rel="stylesheet" href="/media/pgus/css/navigation.css" />
+  <script defer src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+  <script defer src="/media/pgus/js/pgus.js"></script>
+  <script defer src="/media/pgus/js/navigation.js"></script>
+  {%block extrahead%}{%endblock%}
+</head>
+
+<body>
+
+  <!-- Header -->
+  {%include "pieces/navigation.html"%}
+  {%block heroblock%}{%endblock%}
+  {%block layoutblock%}{%endblock%}
+  {%include 'pieces/footer.html'%}
+</body>
+
+</html>
diff --git a/template/base_pgus.html b/template/base_pgus.html
@@ -8,10 +8,12 @@
 	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 	<link rel="stylesheet" href="/media/pgus/css/main.css" />
 	<link rel="stylesheet" href="/media/pgus/css/pgus.css" />
+	<link rel="stylesheet" href="/media/pgus/css/navigation.css" />
 	<script defer src="/media/pgus/js/jquery.min.js"></script>
 	<script defer src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 	<!-- <script defer src="/media/pgus/js/jquery.matchHeight-min.js"></script> -->
 	<script defer src="/media/pgus/js/pgus.js"></script>
+	<script defer src="/media/pgus/js/navigation.js"></script>
 	{%block extrahead%}{%endblock%}
 </head>
 

diff --git a/template/index.html b/template/index.html
@@ -1,4 +1,4 @@
-{%extends "base_pgus.html" %}
+{%extends "base_new.html" %}
 {%load pgmarkdown%}
 {%block title%}Welcome{%endblock%}
 
@@ -17,85 +17,63 @@ <h1>United States PostgreSQL Association</h1>
 
 {%block layoutblock%}
 <!-- One -->
-<section id="one" class="wrapper">
-  <div class="row">
-    <div class="col-md-4">
-      <header>
-        <h3 class="top2">Who We Are</h3>
-      </header>
+<main class="container">
+  <section id="introduction" class="pg-row">
+    <div>
+      <h2>Who We Are</h2>
       <p>
         The United States PostgreSQL Association, affectionately known as PgUS, is a IRS 501(c)(3) public charity. Our
         purpose is
         to support the growth and education of PostgreSQL, the world's most advanced open source database.
       </p>
-      <footer>
-        <a href="/aboutus" class="button special">More</a>
-      </footer>
+      <a href="/aboutus">More</a>
     </div>
-    <div class="col-md-4">
-      <header>
-        <h3 class="top1">Membership</h3>
-      </header>
+    <div>
+      <h2>Membership</h2>
       <p>
         Are you interested in PostgreSQL growth and education? Do you support
         PostgreSQL and want to help? By becoming a member you will be helping to support our mission
         and be able to influence what we do.
       </p>
-      <footer>
-        <a href="/becomeamember" class="button special">More</a>
-      </footer>
+      <a href="/becomeamember">More</a>
     </div>
-    <div class="col-md-4">
-      <header>
-        <h3 class="top3">Upcoming Events</h3>
-      </header>
+    <div>
+      <h2>Upcoming Events</h2>
       <ul>
         {%for event in events %}
         <li><a href="/events/{{event.urlname}}">{{event.conferencename}}</a></li>
         {%endfor%}
       </ul>
-      <footer>
-        <a href="/events" class="button special">More</a>
-      </footer>
+      <a href="/events">More</a>
     </div>
-  </div>
-  </div>
-</section>
+  </section>
 
-<!-- News -->
-<section id="three" class="wrapper special style3">
-  <header class="text-center">
-    <h2>News</h2>
-    <p>
-      Latest PgUS News
-    </p>
-  </header>
-  <div class="row">
-    <div class="col-md-6">
+  <!-- News -->
+  <section id="news">
+    <!-- TODO: Check 'header' semantics -->
+    <header>
+      <h2>News</h2>
+      <h3>
+        Latest PgUS News
+      </h3>
+    </header>
+    <div class="pg-row">
       <article>
-        <header>
-          <h3>{{news.0.title}}</h3>
-        </header>
-        <p>
-          {{news.0.summary|markdown}}
-        </p>
-      </article>
-    </div>
-    <div class="col-md-6">
-      <article>
-        <header>
-          <h3>Recent News Posts</h3>
-        </header>
-        <ul class="alt">
+        <ul>
           {%for newsitem in news %}
-          <li>{{newsitem.summary|markdown}}</li>
+          <li>
+            <h3><a href="{{newsitem.itemlink}}">{{newsitem.title}}</a></h3>
+            <div class="content">
+              {{newsitem.summary|markdown}}
+            </div>
+            <a class="more-link" href="{{newsitem.itemlink}}">Read More</a>
+          </li>
           {%endfor%}
         </ul>
       </article>
     </div>
-  </div>
-  </div>
-</section>
+  </section>
 
-{%include "pieces/team_info.html"%}
+  {%include "pieces/team_info.html"%}
+</main>
 {%endblock%}
diff --git a/template/pieces/footer.html b/template/pieces/footer.html
@@ -35,6 +35,22 @@
         order: 1;
         justify-content: start;
       }
+
+      .fa-twitter {
+        color: #55acee;
+      }
+
+      .fa-bluesky {
+        color: #87CEEB;
+      }
+
+      .fa-mastodon {
+        color: #6364FF;
+      }
+
+      .fa-github {
+        color: #333;
+      }
     }
   }
 </style>