Logo and color palette updates throughout site (#736)

* image additions, renames, moves

* css updates

* update .md files that reference images and css

* update html includes

* two more logo references

Author: hauten

_includes/breadcrumbs.html

@@ -1,4 +1,4 @@
-<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>
+<p class="llnl-breadcrumb fs-13 mb-50"><br /><a class="text-impact-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 %}
@@ -11,7 +11,7 @@
             {% 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>
+                    <a class="text-impact-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 %}

_includes/components/card.html

@@ -1,4 +1,4 @@
-<div class="llnl-link-card border-bottom-gradient-software-blue-green border-bottom-3 position-relative {{ include.classes }} p-3">
+<div class="llnl-link-card border-bottom-gradient-impact-extreme 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">

_includes/components/quick-link.html

@@ -1,5 +1,5 @@
 <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">
+    <div class="col-2 py-4 px-3 bg-gradient-impact-extreme-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">

_includes/head.html

@@ -12,8 +12,8 @@
 {% 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="shortcut icon" href="/assets/images/favicon.png">
+<link rel="icon" href="/assets/images/logomark-llnl.svg" />
 <link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
 <link rel="stylesheet" href="/assets/css/gov-banner.css" />
 <link rel="stylesheet" href="/assets/css/llnl-header.css" />
@@ -25,7 +25,7 @@
 <meta name="twitter:site" content="@livermore_comp" />
 <meta name="twitter:title" content="LLNL Computing" />
 <meta name="twitter:description" content="All computing topics at LLNL." />
-<meta name="twitter:image" content="/assets/images/llnl-logo-400x400.png" aria-label="LLNL logo" />
+<meta name="twitter:image" content="/assets/images/logomark-llnl.png" aria-label="LLNL logo" />
 
 <meta name="google-site-verification" content="477TVoInt3HiUgSl_hU4rb5_JrgNMKK5Rl-KPMUClpQ" />
 

about/contributing.md

@@ -11,7 +11,7 @@ menus:
 
 <!-- START: Info box -->
 {% capture alertContent %}
-The LLNL Software Catalog website is an open-source project. We welcome contributions via pull requests as well as questions, feature requests, or bug reports via issues. Contact our team at [open-source@llnl.gov](mailto:open-source@llnl.gov) with any questions. Please also refer to our [FAQ](/about/faq) and [Code of Conduct](/about/conduct).
+The LLNL Software Catalog website is an open source project. We welcome contributions via pull requests as well as questions, feature requests, or bug reports via issues. Contact our team at [open-source@llnl.gov](mailto:open-source@llnl.gov) with any questions. Please also refer to our [FAQ](/about/faq) and [Code of Conduct](/about/conduct).
 {% endcapture %}
 {% assign alertContent = alertContent | markdownify %}
 {% include components/alert.html type="warning" icon="fa-circle-info" content=alertContent  %}
@@ -28,7 +28,7 @@ To contribute to this website, please create a fork of [llnl.github.io](https://
 * Be explicit when opening issues and reporting bugs. What behavior are you expecting? What is your justification or use case for the new feature/enhancement? How can the bug be recreated? What are any environment variables to consider (e.g., browser, OS)?
 
 <!-- START: Accordions Each h2 below will be a separate accordion. -->
-<div class="border-top-gradient-software-blue-green border-bottom-gradient-software-blue-green">
+<div class="border-top-gradient-impact-extreme border-bottom-gradient-impact-extreme">
 
 {% capture accordionContent %}
 Before you begin, make sure you have working installs of Git, Ruby, and [Bundler](https://bundler.io). After you fork the repo, make sure you are in the directory you just created by running `cd llnl.github.io` Then you can use `bundler` to install the Ruby dependencies (see the [Jekyll installation docs](https://jekyllrb.com/docs/installation/) for step-by-step guides to setting this up):
@@ -75,7 +75,7 @@ A [JSON file](https://github.com/LLNL/llnl.github.io/blob/main/visualize/github-
 | -------- | ----------- | ------ | ------- |
 | Category | Description | Tag(s) | FA icon |
 | -------- | ----------- | ------ | ------- |
-| **All Software** | Browse all LLNL open-source projects | (no tags required) | (image: `logomark-software.svg`) |
+| **All Software** | Browse all LLNL open-source projects | (no tags required) | (image: `logomark-llnl.svg`) |
 | **AI & Machine Learning** | Integrate artificial intelligence and machine learning into scientific applications | `artificial-intelligence`, `deep-learning`, `machine-learning`, `neural-network` | fa-brain-circuit |
 | **App Infrastructure** | Browse tools for basic functionality common in HPC codes | `app-infrastructure` | fa-gear-complex-code |
 | **Applications** | Browse scientific simulation codes and IT management tools | `application`, `applications`, `simulation`, `simulations` | fa-laptop-code |

about/faq.md

@@ -18,7 +18,7 @@ menus:
 <!-- End: Info box -->
 
 <!-- START: Accordions Each h2 below will be a separate accordion. -->
-<div class="border-top-gradient-software-blue-green border-bottom-gradient-software-blue-green">
+<div class="border-top-gradient-impact-extreme border-bottom-gradient-impact-extreme">
   {% capture accordionContent %}
 If you’re new to GitHub and open source in general, figuring out how to get set up can be a challenge. You may want to read through the GitHub Help pages on [setting up and managing your GitHub profile](https://support.github.com/features/account).
 

assets/css/bootstrap.min.css

@@ -48,7 +48,7 @@ select.form-control {
 
 .hero-home,
 .hero-default {
-    background: url('/assets/images/software-hero.png') center center / cover;
+    background: url('/assets/images/software-hero-new.png') center center / cover;
 }
 
 .hero-home {
@@ -78,7 +78,7 @@ select.form-control {
 
 @media (max-width: 991px) {
     .hero-home {
-        background: url('/assets/images/software-mobile-hero.png') top center / cover;
+        background: url('/assets/images/software-mobile-hero-new.png') top center / cover;
     }
 
     .hero-home .logo {
@@ -88,17 +88,17 @@ select.form-control {
 
 @media (max-width: 719px) {
     .hero-home {
-        background: linear-gradient(to top, black 0%, rgba(0, 141, 203, 0.8) 38%, transparent), url('/assets/images/software-mobile-hero.png') top center / cover
+        background: linear-gradient(to top, black 0%, rgba(0, 141, 203, 0.8) 38%, transparent), url('/assets/images/software-mobile-hero-new.png') top center / cover
     }
 }
 
 .alert-warning,
 .bg-alert-yellow {
-    background: #FFF7E7;
+    background: #fdcc63;
 }
 
 .text-alert-warning-icon {
-    color: #FCB317;
+    color: #00A5B8;
 }
 
 .cta-title {
@@ -145,7 +145,7 @@ select.sort-by {
     display: block;
     height: var(--hover-border-width);
     transform: translateY(var(--hover-border-width));
-    background: linear-gradient(to right, var(--software-blue), var(--software-green));
+    background: linear-gradient(to right, var(--impact-blue), var(--extreme));
     transition: 0.2s transform;
 }
 
@@ -245,7 +245,7 @@ select.sort-by {
 
 .llnl-list-item.active,
 .llnl-list-item:hover {
-    color: var(--software-blue) !important;
+    color: var(--impact-blue) !important;
 }
 
 .llnl-list-item:hover .icon,

assets/css/bootstrap.min.css.map

@@ -485,11 +485,11 @@
 
   .navbar-nav .nav-link {
     color: white;
-    --bs-navbar-active-color: var(--software-blue);
+    --bs-navbar-active-color: var(--impact-blue);
   }
 
   .navbar-nav .nav-link.active,
   .navbar-nav .nav-link.show {
-    --bs-navbar-active-color: var(--software-blue);
+    --bs-navbar-active-color: var(--impact-blue);
   }
 }