OSG Homepage Refresh

_config.yml

@@ -47,6 +47,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/cards/spotlight-card.html

@@ -2,18 +2,18 @@
     {% assign article = include.article %}
 {% endif %}
 <a class="text-decoration-none" href="{{ article.url | relative_url }}">
-    <div class="card hover-shadow border-0 h-100">
+    <div class="card shadow border-0 h-100">
         {% 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  %}
                     {{ article.content }}

_includes/head.html

@@ -2,10 +2,6 @@
 <meta name="viewport" content="width=device-width">
 <link rel="icon" href="/favicon.ico">
 
-<div data-proofer-ignore>
-    {% seo %}
-</div>
-
 {% if jekyll.environment == "production" %}
 
 {% if site.google_analytics and site.production %}
@@ -20,6 +16,7 @@
 </script>
 {% endif %}
 
+{% seo %}
 <meta name="google-site-verification" content="R_4MuU3rtZf36dK9hio23ADQTe3EubRM9kO41cVXldQ" />
 
 {% endif %}
@@ -36,7 +33,7 @@
 {% 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 %}
 
 {% for css in include.css %}

_includes/header.html

@@ -1,7 +1,13 @@
 <header>
-    <nav class="navbar navbar-expand-md navbar-dark fixed-top 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>
@@ -48,6 +54,9 @@
                     </li>
                 </ul>
             </div>
-        </div> <!-- End Container -->
+        </div>
     </nav>
+    <div class="container-xxl">
+        <hr class="my-0"/>
+    </div>
 </header>

_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

@@ -0,0 +1,31 @@
+<footer id="footer" class="mt-4 mt-auto">
+
+    <div class="container-xxl">
+        <hr class="m-0">
+        <div class="row justify-content-center my-4">
+            <div class="col-auto me-4 d-none d-lg-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-sm-10 col-lg-8">
+                <div class="row justify-content-between my-2">
+                    {% for category in site.data.footer %}
+                        <div class="col-auto 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>
+        <hr>
+        <div class="row py-3">
+            <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/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 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>
-    {% assign head = layout.head_extension | default: page.head_extension %}
-    {% include head.html js=page.js_extension css=page.css_extension head=layout.head_extension %}
-  </head>
-  <body>
-    {% include header.html %}
-    <main>
-      {{ content }}
-    </main>
-    {% include footer.html %}
-  </body>
-</html>
+---
+  layout: body
+---
+
+{% include 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/title-main.html

@@ -0,0 +1,9 @@
+---
+ layout: main
+---
+
+
+<div class="container-xxl py-4">
+    <h1 class="fs-1">{{ page.title }}</h1>
+</div>
+{{content}}

_services/Access-Point.html

@@ -0,0 +1,53 @@
+---
+title: OSG Access Point
+layout: title-main
+---
+
+<div class="container-xxl pb-4">
+    <div class="row">
+        <div class="col-12 col-lg-6 col-md-6 d-flex">
+            <div class="">
+                <p class="fs-5">
+                    The OSG Access Point is a researchers entrypoint into their associated computing resource. It provides
+                    a location to place their workloads and data to then be submitted and executed elsewhere.
+                </p>
+                <p class="fs-5">
+                    Designed by <a href="https://htcondor.org">HTCSS Team</a>, the Access Point gives researchers dynamic control
+                    over their workload execution. This allows researchers to configure their workload submissions to meet their specific
+                    computational needs. This can include configurations that request GPUs, order job executions, or
+                    download specific software.
+                </p>
+                <p class="fs-5">
+                    Using an Access Point requires no resources beyond your personal computer, and is designed to be performant
+                    no matter your location. Hence our slogan, "Submit Locally, Run Globally".
+                </p>
+            </div>
+        </div>
+        <div class="col-12 col-xl-5 col-lg-5 col-md-6 d-flex">
+            <img class="mx-5" src="{{ '/assets/images/Access-Point.svg' | relative_url }}" />
+        </div>
+    </div>
+    <div class="row justify-content-between my-6">
+        <div class="col-12 col-xl-5 col-lg-5 col-md-6 d-flex">
+            <a class="d-block my-auto" href="https://connect.osg-htc.org/">
+                <img class="my-auto img-fluid" src="{{ '/assets/images/OSGConnect_Logo.png' | relative_url }}" />
+            </a>
+        </div>
+        <div class="col-12 col-lg-6 col-md-6 d-flex">
+            <div class="">
+                <p class="fs-5">
+                    <a href="https://connect.osg-htc.org/">OSGConnect</a> provides an OSG operated Access Point that is made
+                    available to US-Based Researchers, along with other services to assist their running of HTC workloads.
+                </p>
+                <p class="fs-5">
+                    Using an OSG Access Point, researchers can utilize other OSG resources such as the <a href="{{ '/about/open_science_pool/' | relative_url }}">Open Science Pool</a>
+                    and the <a href="{{ '/about/osdf/' | relative_url }}">Open Science Data Federation</a>. These two services provide computational
+                    resources and data capacity to execute your workloads at an Access Point.
+                </p>
+                <div class="mt-3 d-flex">
+                    <a class="mx-auto btn btn-secondary" href="https://connect.osg-htc.org/">Get Started on OSGConnect</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

assets/css/homepage.scss

@@ -2,29 +2,3 @@
 layout: blank
 ---
 
-{% include /get/hero_data.liquid %}
-
-#hero-image {
-  background: url({{ hero_data.hero_image | relative_url }}) no-repeat center;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -o-background-size: cover;
-  background-size: cover;
-}
-
-#hero-content-container {
-  background-color: rgba(0, 0, 0, .6);
-  border-radius: 5px;
-  min-height: 300px;
-  color: white;
-  p {
-    min-height: 150px;
-  }
-}
-
-@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
-  #hero-content-container {
-    -webkit-backdrop-filter: blur(15px);
-    backdrop-filter: blur(15px);
-  }
-}