Preview homepage refresh

404.md

@@ -1,11 +1,9 @@
 ---
-layout: container
-title: 404 Not Found
+layout: title-main-container
+title: 404 Page Not Found
 permalink: /404.html
 ---
 
-# 404 Page Not Found
-
 The page you were looking for was not found.
 If you believe this was in error, please contact <mailto:[email protected]>
 

README.md

@@ -8,7 +8,7 @@ This repository contains the source code of the OSG website; it is not the publi
 
 The real webpage for the OSG is <https://www.opensciencegrid.org>.
 
-# Deployment
+# Deployment 
 
 To have your changes merged into master you must create a PR and get one review. If you don't have anyone in mind you can request _@CannonLock_ and he will review it the next morning.
 

_about/team.html

@@ -1,51 +1,61 @@
 ---
-layout: container
+layout: title-main
 title: The OSG Team
 ---
 
-<div class="container-fluid">
-  <h1>Executive Team</h1><br>
-  <div class="row">
-  {% for member in site.data.orgs.exec-team.personnel %}
-     {% for person_hash in site.data.people %}
+<div class="container-xxl">
+  <h2 class="ps-3">Executive Team</h2>
+  <div class="row g-0 rounded bg-light pb-3 pe-3">
+    {% for member in site.data.orgs.exec-team.personnel %}
+    {% for person_hash in site.data.people %}
+    {% assign person = person_hash[1] %}
+    {% if person.shortname == member %}
+    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 pt-3 ps-3 d-flex">
+      <div class="card shadow border-0 flex-grow-1">
+        <img class="card-img-top" src="{{person.image | relative_url}}" alt="Card image cap">
+        <div class="card-body d-flex flex-column">
+          <div class="card-text">
+            {% if person.website %}
+              <b><a href="{{person.website}}">{{person.name}}</a></b><br>
+            {% else %}
+              <b>{{person.name}}</b><br>
+            {% endif %}
+            <small>{{person.institution}}</small><br><br>
+          </div>
+          <div class="card-text mt-auto"><i>{{person.title}}</i><br></div>
+        </div>
+      </div>
+    </div>
+    {% endif %}
+    {% endfor %}
+    {% endfor %}
+  </div>
+  <br>
+</div>
+<div class="container-xxl">
+  <h2 class="ps-3">Full Team</h2>
+  <div class="row g-0 bg-light rounded bg-light pb-2 pe-2">
+    {% assign people = site.data.people | sort %}
+    {% for person_hash in people %}
        {% assign person = person_hash[1] %}
-       {% if person.shortname == member %}
-         <div class="card p-0" style="width: 12rem;">
-           <img class="card-img-top" src="{{person.image | relative_url}}" alt="Card image cap">
-           <div class="card-body d-flex flex-column">
+    <div class="col-6 col-sm-6 col-md-4 col-lg-3 col-xxl-2 pt-2 ps-2 d-flex">
+       <div class="card border-0 shadow flex-grow-1">
+         <img class="card-img-top" src="{{person.image}}" alt="Card image cap">
+         <div class="card-body d-flex flex-column">
            <div class="card-text">
-           <b><a href="{{person.website}}">{{person.name}}</a></b><br>
-           <small>{{person.institution}}</small><br><br>
+             {% if person.website %}
+             <b><a href="{{person.website}}">{{person.name}}</a></b><br>
+             {% else %}
+             <b>{{person.name}}</b><br>
+             {% endif %}
+             <small>{{person.institution}}</small><br><br>
            </div>
            <div class="card-text mt-auto"><i>{{person.title}}</i><br></div>
-           </div>
          </div>
-       {% endif %}
-     {% endfor %}
-  {% endfor %}
-  </div>
-  <br>
-</div>
-
-<h1>Full Team</h1><br>
-
-<div class="container-fluid">
-<div class="row">
-  {% assign people = site.data.people | sort %}
-  {% for person_hash in people %}
-     {% assign person = person_hash[1] %}
-     <div class="card p-0" style="width: 12rem;">
-       <img class="card-img-top" src="{{person.image}}" alt="Card image cap">
-       <div class="card-body d-flex flex-column">
-         <div class="card-text">
-           <b><a href="{{person.website}}">{{person.name}}</a></b><br>
-           <small>{{person.institution}}</small><br><br>
-         </div>
-         <div class="card-text mt-auto"><i>{{person.title}}</i><br></div>
        </div>
-     </div>
-  {% endfor %}
-  <br>
-</div>
+    </div>
+    {% endfor %}
+    <br>
+  </div>
 </div>
 

_config.yml

@@ -52,6 +52,9 @@ collections:
   spotlights:
     permalink: /spotlights/:title.html
     output: true
+  services:
+    permalink: /services/:title.html
+    output: true
 
 sass:
   style: compressed

_data/footer.yml

@@ -0,0 +1,37 @@
+- name: About
+  id: about
+  children:
+    - name: Introduction
+      url: /about/introduction
+    - name: Consortium Members
+      url: /about/organization
+    - name: OSG Team
+      url: /about/team
+    - name: Publications
+      url: /about/publications
+- name: Services
+  id: services
+  children:
+    - name: Open Science Pool
+      url: /about/open_science_pool
+    - name: Open Science Data Federation
+      url: /about/osdf
+    - name: User Spotlights
+      url: /spotlight.html
+- name: Documentation
+  id: documentation
+  children:
+    - name: User
+      url: https://support.opensciencegrid.org/support/home
+    - name: System Admin
+      url: https://opensciencegrid.org/docs/
+    - name: Security
+      url: https://opensciencegrid.org/security/
+- name: Engagement
+  id: engagement
+  children:
+    - name: News
+      url: /news.html
+    - name: Events
+      url: /events.html
+

_includes/about_contents.html

@@ -1,11 +1,11 @@
 <div class="col-md-3">
-  <nav class="d-none d-md-block bg-light sidebar p-2">
+  <nav class="d-none d-md-block bg-light sidebar p-3">
     {% for section in site.data.about %}
     <h5>{{ section.title }}</h5>
     {% include about_ul.html items=section.docs %}
     {% endfor %}
     <a class="nav-link" href="{{ '/acknowledging.html' | relative_url }}">Acknowledging OSG</a>
-    <h5>Documentation</h5>
+    <h5 class="pt-2">Documentation</h5>
     <ul class="nav nav-pills flex-column">
       <li class="nav-item"><a class="nav-link" href="https://support.opensciencegrid.org/">Users</a></li>
       <li class="nav-item"><a class="nav-link" href="https://opensciencegrid.org/docs/">Sysadmins</a></li>

_includes/cards/spotlight-card.html

@@ -1,22 +1,22 @@
 {% if include.article %}
     {% assign article = include.article %}
 {% endif %}
-<a class="text-decoration-none" href="{{ article.url | default: include.url | relative_url }}">
-    <div class="card hover-shadow border-0 h-100">
-        {% if article.card_src or include.card_src %}
-        <img height="{{ include.height | default: '200' }}" src="{{ include.card_src | default: article.card_src }}" class="card-img-top" alt="article">
+<a class="text-decoration-none" href="{{ article.url | relative_url }}">
+    <div class="card border-0 hover-shadow h-100 {{ include.class }}">
+        {% if article.card_image or include.card_image %}
+        <img height="{{ include.height | default: '200' }}" src="{{ include.card_image | default: article.card_image | relative_url }}" class="card-img-top" alt="article">
         {% endif %}
         <div class="card-body d-flex flex-column">
-            <h3 class="text-decoration-none">{{ article.title }}</h3>
+            <h4 class="text-decoration-none">{{ article.title }}</h4>
             {% unless include.no_date %}
                 <div>
                     <span class="text-muted text-decoration-none">{{ article.date | date: "%B %e, %Y"}}</span>
                 </div>
             {% endunless %}
-            <hr/>
+            <hr>
             <span class="text-decoration-none text-dark">
                 {% if include.content | markdownify | strip_html  %}
-                    {{ include.content }}
+                    {{ article.content }}
                 {% else %}
                     {{ article.excerpt | markdownify | strip_html }}
                 {% endif %}

_includes/image-title-card.html

@@ -5,4 +5,4 @@
     <div class="col-6 d-flex">
         <h3 class="mt-auto mb-auto">{{ include.title }}</h3>
     </div>
-</div>
+</div

_includes/image-title-desc-card.html

@@ -1,5 +1,5 @@
 <div class="row mt-4 mb-4 {{ include.class }}">
-    <div class="col-4 col-md-3 col-xxl-2 d-flex">
+    <div class="col-4 col-md-3 d-flex">
         <a class="d-flex w-100" href="{{ include.url }}">
             <img class="w-100 mt-auto mb-auto" src="{{ include.img_src | relative_url }}" alt="{{ include.img_alt}}" />
         </a>

_includes/layout/footer.html

@@ -1,6 +1,32 @@
-<footer>
-    <div class="container-xxl my-5">
-        <hr/>
-        Funded by the National Science Foundation under Grant Nos. 2030508, 1836650, and 1148698. Any opinions, findings, and conclusions or recommendations expressed in this material are those of the author(s) and do not necessarily reflect the views of the National Science Foundation.
+<footer id="footer" class="mt-auto">
+    <div class="shadow bg-secondary">
+        <div class="container-xxl">
+            <div class="row justify-content-center py-5">
+                <div class="col-auto me-4 d-none d-md-flex">
+                    <a class="my-auto" href="{{ '/' | relative_url }}"><img style="height:5rem" src="{{ '/assets/images/logos/OSG-logo.svg' | relative_url }}" alt="OSG logo"></a>
+                </div>
+                <div class="col-12 col-md-8 col-lg-8">
+                    <div class="row justify-content-between my-2">
+                        {% for category in site.data.footer %}
+                            <div class="col-6 col-lg-4 col-xl-3 my-2">
+                                <table>
+                                    <tr><th>{{ category.name }}</th></tr>
+                                    {% for child in category.children %}
+                                        <tr><td><a href="{{ child.url | relative_url }}">{{ child.name }}</a></td></tr>
+                                    {% endfor %}
+                                </table>
+                            </div>
+                        {% endfor %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="container-xxl">
+        <div class="row py-5">
+            <div class="col text-center">
+                This work is supported by <a href="https://www.nsf.gov/div/index.jsp?div=OAC">NSF</a> under Grant Nos. 2030508, 1836650, and 1148698. Any opinions, findings, and conclusions or recommendations expressed in this material are those of the author(s) and do not necessarily reflect the views of the National Science Foundation.. <br />
+            </div>
+        </div>
     </div>
 </footer>

_includes/layout/head.html

@@ -2,8 +2,6 @@
 <meta name="viewport" content="width=device-width">
 <link rel="icon" href="/favicon.ico">
 
-{% seo %}
-
 {% if jekyll.environment == "production" %}
 
 {% if site.google_analytics and site.production %}
@@ -35,8 +33,9 @@
 {% endfor %}
 
 {% for js in include.js %}
-<script src="{{ js.src | relative_url }}" type="text/javascript" {{ js.loading}}></script>
+<script src="{{ js.src | relative_url }}" type="{{ js.type | default: 'text/javascript' }}" {{ js.loading}}></script>
 {% endfor %}
+<script src="{{ '/assets/js/base.js' | relative_url }}" defer></script>
 
 {% for css in include.css %}
 <link href="{{ css.href | relative_url }}" media="screen, tv, projection" title="Default" rel="stylesheet">

_includes/layout/header.html

@@ -1,7 +1,13 @@
 <header>
-    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
+    <nav class="navbar navbar-light navbar-expand-md {% if page.url == '/' %}bg-secondary{% endif %}">
         <div class="container-xxl">
-            <a class="navbar-brand pt-1 pb-1" href="{{ '/' | relative_url }}"><img height="55" src="{{ '/assets/images/logos/OSG-logo.svg' | relative_url }}" alt="OSG logo"></a>
+            <a class="navbar-brand pt-1 pb-1" href="{{ '/' | relative_url }}">
+                {% if page.url == "/" %}
+                    <img class="my-1" height="36" style="height: 2rem" src="{{ '/assets/images/logos/OSG_Logo_Text.svg' | relative_url }}" alt="OSG logo">
+                {% else %}
+                    <img style="height: 3rem" src="{{ '/assets/images/logos/OSG-logo.svg' | relative_url }}" alt="OSG logo">
+                {% endif %}
+            </a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
@@ -49,6 +55,9 @@
                     </li>
                 </ul>
             </div>
-        </div> <!-- End Container -->
+        </div>
     </nav>
+    <div class="container-xxl">
+        <hr class="my-0"/>
+    </div>
 </header>

_includes/picture.html

@@ -0,0 +1,8 @@
+{% assign extension = include.extension | default: 'jpg' %}
+
+<div style="height:{{include.height}};">
+    <picture>
+        <source type="image/webp" srcset="{{ include.path | append: '.webp' | relative_url }}">
+        <img class="h-100" src="{{ include.path | append: '.' | append: extension | relative_url }}" alt="{{ include.alt }}">
+    </picture>
+</div>

_layouts/body.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="{{ site.lang | default: 'en-US' }}">
+<head>
+    {% assign head = layout.head_extension | default: page.head_extension %}
+    {% include layout/head.html js=page.js_extension css=page.css_extension head=layout.head_extension %}
+</head>
+<body>
+{{ content }}
+</body>
+</html>

_layouts/container.html

@@ -1,5 +1,5 @@
 ---
-    layout: default
+    layout: main
 ---
 
 

_layouts/default.html

@@ -1,14 +1,8 @@
-<!doctype html>
-<html lang="{{ site.lang | default: 'en-US' }}">
-  <head  data-proofer-ignore>
-    {% assign head = layout.head_extension | default: page.head_extension %}
-    {% include layout/head.html js=page.js_extension css=page.css_extension head=layout.head_extension %}
-  </head>
-  <body>
-    {% include layout/header.html %}
-    <main>
-      {{ content }}
-    </main>
-    {% include layout/footer.html %}
-  </body>
-</html>
+---
+  layout: body
+---
+
+{% include layout/header.html %}
+{{ content }}
+{% include layout/footer.html %}
+

_layouts/main.html

@@ -0,0 +1,7 @@
+---
+layout: default
+---
+
+<main>
+    {{ content }}
+</main>

_layouts/padded-default.html

@@ -1,7 +1,7 @@
 ---
-    layout: default
+    layout: main
 ---
 
-<div class="py-5">
+<div class="py-2">
     {{ content }}
 </div>

_layouts/posts.html

@@ -1,9 +1,9 @@
 ---
-layout: container
+layout: title-main-container
 ---
 
 <div class="row justify-content-center">
-  <div class="col-12 col-xl-7 col-lg-8 col-md-10">
+  <div class="col-12 col-md-10 col-lg-9 col-xl-8">
     <section class="news-article">
       {% if page.title %}
       <div class="mb-1">