FY23 redesign

_config.yml

@@ -7,6 +7,10 @@ release_number: LLNL-WEB-680594
 
 url: "https://software.llnl.gov"
 repo_url: "https://github.com/LLNL/llnl.github.io"
+baseurl: ""
+environment: production
+IM_NUMBER: LLNL-WEB-458451
+CONTACT: mailto:[email protected]
 
 # LLNL Piwik Analytics https://analytics.llnl.gov
 piwik_id: 250
@@ -26,18 +30,22 @@ plugins:
   - jekyll-seo-tag
   - jekyll-feed
   - jekyll-sitemap
-  - jekyll-remote-theme
 
+markdown: kramdown
 kramdown:
   auto_ids: true
 
 defaults:
+  - scope:
+      path: ""
+    values:
+      layout: default
   -
     scope:
       path: ""
       type: "posts"
     values:
-      layout: "post"
+      layout: "container-default"
       permalink: "/news/:year/:month/:day/:title/"
 
 permalink: pretty
@@ -48,6 +56,6 @@ exclude:
     - Gemfile.lock
     - README.md
     - Makefile
-    - build
-    - visualize/README.md
     - notes.md
+    - build
+    - visualize/README.md

_includes/additional_css.html

@@ -0,0 +1,2 @@
+<link rel="stylesheet" href="/assets/css/llnl-footer.css">
+<link rel="stylesheet" href="/assets/css/pygments.css">

_includes/breadcrumbs.html

@@ -0,0 +1,18 @@
+<p class="llnl-breadcrumb fs-13 mb-50"><br /><a class="text-software-blue text-decoration-underline-hover llnl-breadcrumb-link fw-semibold" href="{{ site.baseurl }}/">Home</a>
+    {% capture page_url_without_index_html %}{{ page.url | remove: "/index.html" }}{% endcapture %}
+    {% assign splitted_url_parts = page_url_without_index_html | split: '/' %}
+    {% capture forLoopMaxInt %}{{ splitted_url_parts.size | minus:1 }}{% endcapture %}
+    {% for i in (1..forLoopMaxInt) %}
+        {% assign isLast = forloop.last %}
+        {% capture current_breadcrumb_url %}{{next_prepender}}/{{ splitted_url_parts[i] }}/index.html{% endcapture %}
+        {% capture current_breadcrumb_md_url %}{{next_prepender}}/{{ splitted_url_parts[i] }}/{% endcapture %}
+        {% capture next_prepender %}{{next_prepender}}/{{ splitted_url_parts[i] }}{% endcapture %}
+        {% for breadcrumb_page in site.pages %}
+            {% if current_breadcrumb_url == breadcrumb_page.url or current_breadcrumb_md_url == breadcrumb_page.url  %}
+                {% if i == forLoopMaxInt %}class="active"{% endif %}<i class="fa fa-regular fa-chevron-right text-carbon-gray ms-2"></i>
+                    {% capture breadcrumb_page_page_url_without_index_html %}{{ breadcrumb_page.url | remove: "index.html" }}{% endcapture %}
+                    <a class="text-software-blue llnl-breadcrumb-link ms-2 fw-semibold {% if isLast %} text-black text-decoration-none  {% else %} text-decoration-underline-hover {% endif %}"{% unless isLast %} href="{{breadcrumb_page_page_url_without_index_html}}"{% endunless %}>{{breadcrumb_page.breadcrumb}}</a>
+            {% endif %}
+        {% endfor %}
+    {% endfor %}
+</p>

_includes/components/accordion.html

@@ -0,0 +1,15 @@
+{% assign slug = include.title | slugify %}
+<div class="accordion default" id="accordion-{{ slug }}">
+    <div class="accordion-item">
+      <p class="accordion-header" id="heading-{{ slug }}">
+        <button class="accordion-button {% unless(include.open) %}collapsed{% endunless %}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ slug }}" aria-expanded="{% if(include.open) %}true{% else %}false{% endif %}" aria-controls="collapse-{{ slug }}">
+            {{ include.title }}
+        </button>
+        </p>
+        <div id="collapse-{{ slug }}" class="accordion-collapse collapse {% if(include.open) %}show{% endif %}" aria-labelledby="heading-{{ slug }}" data-bs-parent="#accordion-{{ slug }}">
+            <div class="accordion-body">
+                {{ include.content }}
+            </div>
+        </div>
+    </div>
+</div>

_includes/components/alert.html

@@ -0,0 +1,10 @@
+<div class="alert alert-{{ include.type }} row mt-3 mb-5 py-4 border-0">
+    {% if include.icon %}
+    <div class="col-1 d-flex justify-content-center vertical-center" role="alert">
+        <i class="fa fa-light {{ include.icon }} fa-2xl text-alert-{{ include.type }}-icon"></i>
+    </div>
+    {% endif %}
+    <div class="{% if include.icon %}col-11{% else %}col-12{% endif %} text-start text-black">
+        {{ include.content }}
+    </div>
+</div>

_includes/components/button.html

@@ -0,0 +1 @@
+<{{ include.tag | default: 'a' }} href="{{ include.url }}" class="btn btn-gradient text-white px-3 py-3">{% if include.icon %}<i class="fa {{ include.type | default: 'fa-regular' }} {{ include.icon }} me-2"></i>{% endif %}{{ include.content }}</{{ include.tag | default: 'a' }}>

_includes/components/call-to-action.html

@@ -0,0 +1,11 @@
+<div class="row pt-4 pb-2 my-5 bg-livermorium-ice">
+    {% if include.icon %}
+        <div class="col-12 col-md-2 col-xxl-1 d-flex justify-content-center vertical-center pb-5 pt-3 py-md-0">
+            <i class="fa {{ include.type | default: 'fa-regular' }} {{ include.icon }} fa-2xl"></i>
+        </div>
+    {% endif %}
+    <div class="{% if include.icon %}col-12 col-md-10 col-xxl-11 ps-4{% else %}col-12{% endif %}">
+        <h2 id="{{ include.title | slugify }}" class="mt-2 mb-4 text-center text-md-start">{{ include.title }}</h2>
+        {{ include.content }}
+    </div>
+</div>

_includes/components/card.html

@@ -0,0 +1,7 @@
+<div class="llnl-link-card border-bottom-gradient-software-blue-green border-bottom-3 position-relative {{ include.classes }} p-3">
+    <{{ include.tag | default: 'h3' }} class="text-center my-4 text-balance">{{ include.title }}</{{ include.tag | default: 'h3' }}>
+    <hr class="border-carbon-gray border-2"/>
+    <div class="mt-4 llnl-content">
+    {{ include.content }}
+    </div>
+</div>

_includes/components/icon-header.html

@@ -0,0 +1,4 @@
+<div class="d-flex align-items-center mb-3">
+    <i class="fa {{ include.type | default: 'fa-light' }} {{ include.icon }} {{ include.iconsize | default: 'fa-xl' }}"></i>
+    <{{ include.tag | default: 'h2' }} class="ms-3 my-0">{{ include.title }}</{{ include.tag | default: 'h2' }}>
+</div>

_includes/components/icon-list-item.html

@@ -0,0 +1,4 @@
+<a class="llnl-list-item d-flex align-items-center px-2 my-2 fs-14 fw-medium text-decoration-none text-black" href="{% if include.url %}{{ include.url }}{% endif %}{% unless include.url %}#{{ include.title | slugify }}{% endunless %}">
+    <div class="icon me-3 d-flex align-items-center justify-content-center"><i class="fa fa-light {{ include.icon }} fa-lg"></i></div>
+    <span>{{ include.title }}</span>
+</a>

_includes/components/quick-link.html

@@ -0,0 +1,8 @@
+<a href="{{ include.url }}" class="llnl-quick-link row text-decoration-none mb-2 box-shadow-10 bg-light-blue-hover h-100">
+    <div class="col-2 py-4 px-3 bg-gradient-software-blue-green-v d-flex justify-content-center vertical-center">
+        <i class="text-white fa {{ include.type | default: 'fa-regular' }} {{ include.icon }} {{ include.icon_size | default: 'fa-lg' }}"></i>
+    </div>
+    <div class="llnl-content col-10 py-2 d-flex align-items-center text-black">
+        <p class="ms-2 m-0">{{ include.title }}</p>
+    </div>
+</a>

_includes/components/tile.html

@@ -0,0 +1,7 @@
+<a class="tile px-2 text-decoration-none text-elemental-navy" href="{{ include.url }}">
+    <div class="text-center px-2 pt-3">
+        <img src="{{ include.image }}" />
+        <p class="h3 mt-4">{{ include.title }}</p>
+        <p class="text-start mt-3 fs-13">{{ include.description }}</p>
+    </div>
+</a>

_includes/footer.html

@@ -0,0 +1,36 @@
+<div class="footer-bottom">
+  <div class="container">
+    <div class="row">
+      <div class="col-12 col-lg-6 mb-2">
+        <div id="footer-logo">
+          <a class="llnl" href="https://www.llnl.gov/" target="_blank"><img src="/assets/images/llnl-logo-dark.png" alt="LLNL"></a>
+        </div>
+        <div id="footer-text">
+          <div id="footer-text-name">Lawrence Livermore National Laboratory </div>
+          <div id="footer-text-address">
+            <span class="hidden-xs">&nbsp;|</span>
+            7000 East Avenue • Livermore, CA 94550 | {{ site.IM_NUMBER }}
+          </div>
+
+          <div id="footer-text-info">
+            Operated by the Lawrence Livermore National Security, LLC for the Department of Energy's National Nuclear Security Administration Learn about the Department of Energy's <a href="https://doe.responsibledisclosure.com/hc/en-us" target="_blank" rel="noopener noreferrer">Vulnerability Disclosure Program</a>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12 col-md-6 col-xl-3" id="footer-affiliates">
+        <a class="llns" href="http://www.llnsllc.com/" target="_blank" rel="noopener noreferrer"><img src="/assets/images/llns.png" alt="LLNS"></a>
+        <a class="doe" href="https://www.energy.gov/" target="_blank" rel="noopener noreferrer"><img src="/assets/images/doe_small.png" alt="U.S. DOE"></a>
+        <a class="nnsa" href="https://www.energy.gov/nnsa/national-nuclear-security-administration/" target="_blank" rel="noopener noreferrer"><img src="/assets/images/nnsa.png" alt="NNSA"></a>
+      </div>
+
+      <div class="col-12 col-md-6 col-xl-3" id="footer-links">
+        <div class="disclaimer">
+          <a href="/">Home</a>
+          <a href="https://www.llnl.gov/disclaimer">Disclaimer</a>
+          <a href="https://www.llnl.gov/website-privacy-notice">Privacy</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

_includes/google_analytics.html

@@ -0,0 +1,10 @@
+{% if site.environment == 'production' and site.google_analytics.tracking_id %}
+<script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+    ga('create', '{{ site.google_analytics.tracking_id }}', 'auto');
+    ga('send', 'pageview');
+</script>
+{% endif %}

_includes/head.html

@@ -1,34 +1,31 @@
-<head>
-
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-75179431-1"></script>
-  <script>
+{% if site.environment == 'production' %}
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-75179431-1"></script>
+<script>
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
 
     gtag('config', 'UA-75179431-1');
-  </script>
-
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-  <link rel="shortcut icon" href="/assets/images/OS-icon-color.png">
-
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" media="screen">
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" media="screen">
-
-  <link rel="stylesheet" href="/css/main.css" media="screen">
-  <link rel="stylesheet" href="https://cdn.llnl.gov/onelab/0.1.1/css/onelab.css" media="screen">
-
-  <meta name="twitter:card" content="summary" />
-  <meta name="twitter:site" content="@llnl_opensource" />
-  <meta name="twitter:title" content="LLNL Software Catalog" />
-  <meta name="twitter:description" content="Software available from LLNL." />
-  <meta name="twitter:image" content="https://cdn.llnl.gov/onelab/0.1.1/images/llnl-logo-blue-128x128.jpg" aria-label="LLNL logo" />
-
-  <meta name="google-site-verification" content="477TVoInt3HiUgSl_hU4rb5_JrgNMKK5Rl-KPMUClpQ" />
-
-  {% seo %}
-</head>
+</script>
+{% else %}
+<meta name="robots" content="noindex">
+{% endif %}
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="shortcut icon" href="/assets/images/OS-icon-color.png">
+<link rel="icon" href="/assets/images/logomark-software.svg" />
+<link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
+<link rel="stylesheet" href="/assets/css/llnl-header.css" />
+<link rel="stylesheet" href="/assets/css/utility.css" />
+<link rel="stylesheet" href="/assets/css/components.css" />
+<script src="https://kit.fontawesome.com/87728a7429.js" crossorigin="anonymous" async></script>
+
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:site" content="@llnl_opensource" />
+<meta name="twitter:title" content="LLNL Software Catalog" />
+<meta name="twitter:description" content="Software available from LLNL." />
+<meta name="twitter:image" content="https://cdn.llnl.gov/onelab/0.1.1/images/llnl-logo-blue-128x128.jpg" aria-label="LLNL logo" />
+
+<meta name="google-site-verification" content="477TVoInt3HiUgSl_hU4rb5_JrgNMKK5Rl-KPMUClpQ" />
+
+{% seo %}