Merge pull request #520 from simonbaird/add-mission-vision

Add new vision and mission statement to home page

Author: simonbaird

website/assets/css/custom.css

@@ -153,7 +153,18 @@ body.article {
 
 footer.footer {
   /* Cosmetic tweak so the footer color continues to the bottom for short pages */
-  padding-bottom: 15em;
+  padding: 12rem 1.5rem 1.5rem 1.5rem;
+
+  /* Cosmetic tweak so the footer background is visible at the bottom of the final wavy divider */
+  margin-top: -2em;
+}
+
+footer.footer p {
+  font-size: 80%;
+  opacity: 0.6;
+  margin: 2rem auto;
+  text-align: center;
+  max-width: 35rem;
 }
 
 h3.button {
@@ -189,13 +200,6 @@ h3.button {
   stroke: white;
 }
 
-a.all-downloads {
-  display: block;
-  position: absolute;
-  color: var(--color-gray-30);
-  padding-left: 1rem;
-}
-
 p.big {
     font-size: 115%;
 }
@@ -446,7 +450,7 @@ p.big {
   max-width: var(--doc-max-width--landing);
   margin: 2rem auto;
   padding: 0 20px 0 20px;
-  min-height: calc(100vh - 183px);
+  /* min-height: calc(100vh - 183px); */
 }
 
 .hero-header {
@@ -475,15 +479,24 @@ p.big {
 }
 
 .hero-intro p.announcement {
-  margin-top: 2em;
   padding: 1em;
-  border: solid 1px var(--ec-icon-purple);
-  border-radius: 0.25em;
   font-style: italic;
-  font-size: 90%;
+  font-size: 75%;
+  color: var(--ec-icon-purple);
+}
+
+.hero-intro p.mission {
+  padding: 1em;
+  font-style: italic;
+  font-size: 130%;
   color: var(--ec-icon-purple);
 }
 
+.hero-intro p.mission span {
+  opacity: 0.3;
+  font-weight: bold;
+}
+
 .hero-highlights {
   display: grid;
   grid-template-columns: auto auto;
@@ -520,29 +533,33 @@ p.big {
   line-height: var(--doc-line-height);
 }
 
-a.all-downloads{
-  position:relative!important;
-  padding:0;
-  margin: 0;
+.#all-downloads {
+  /* This is hidden to begin with, see 07-download.js */
+  display: none!important;
 }
 
-.hero-links{
-  display: grid;
-  grid-template-columns: auto;
-  grid-template-columns: auto;
+.hero-links {
+  display: flex;
+  flex-direction: row;
   justify-content: center;
+  align-items: center;
+  gap: 1rem;
   text-align: center;
+  padding-bottom: 2.5em;
 }
 
 .hero-links h3.button {
   padding-top: 10px;
-  margin: 0 auto;
-  margin-top: 1em;
-  margin-bottom: 2em;
+  margin: 1em 0.5em;
 }
 
-.hero-links h3.button#download{
-  margin-bottom: 5px;
+.hero-links h3.button a {
+  white-space: nowrap;
+}
+
+.hero-links h3.button:hover {
+  transform: translateY(-1px);
+  background-color: var(--ec-icon-purple);
 }
 
 .hero h2 {
@@ -590,18 +607,35 @@ a.all-downloads{
   }
 
 }
+
+/* Stack the hero-link (download) buttons on small screens */
+@media screen and (max-width: 768px) {
+  .hero-links {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .hero-links h3.button {
+    margin: 0.5rem 0;
+    width: 100%;
+    max-width: 220px;
+    text-align: left;
+  }
+}
 /* end index page hero section */
 
 /* begin front page divider */
 .divider {
-  min-height: 80px;
+  min-height: 40px;
+  background-color: transparent;
+  opacity: 0.8;
 }
 
 .flowing {
   display: block;
   width: 100%;
-  height: 60px;
-  max-height: 60px;
+  height: 20px;
+  max-height: 20px;
   margin: 0;
   z-index: 5;
   position: absolute;
@@ -626,31 +660,31 @@ g.parallax4 {
 }
 
 .parallax1>use {
-  animation: move-forever1 10s linear infinite;
+  animation: move-forever1 14s linear infinite;
 
   &:nth-child(1) {
     animation-delay: -2s;
   }
 }
 
 .parallax2>use {
-  animation: move-forever2 8s linear infinite;
+  animation: move-forever2 12s linear infinite;
 
   &:nth-child(1) {
     animation-delay: -2s;
   }
 }
 
 .parallax3>use {
-  animation: move-forever3 6s linear infinite;
+  animation: move-forever3 10s linear infinite;
 
   &:nth-child(1) {
     animation-delay: -2s;
   }
 }
 
 .parallax4>use {
-  animation: move-forever4 4s linear infinite;
+  animation: move-forever4 8s linear infinite;
 
   &:nth-child(1) {
     animation-delay: -2s;

website/assets/js/07-download.js

@@ -1,22 +1,25 @@
 document.addEventListener('DOMContentLoaded', async () => {
     const download = document.querySelector('#download a');
+    const downloadAll = document.querySelector('#all-downloads a');
     if (!download) {
         return
     }
     try {
-        const response = await fetch('https://api.github.com/repos/conforma/cli/releases/tags/snapshot');
+        const response = await fetch('https://api.github.com/repos/conforma/cli/releases/latest');
         const snapshot = await response.json();
         const uap = new UAParser();
         const os = uap.getOS().name.replace('macOS', 'darwin').toLowerCase();
         const arch = uap.getCPU().architecture;
         const file = `ec_${os}_${arch}`;
         const asset = snapshot.assets.find(a => a.name === file);
         if (asset) {
-            download.parentNode.insertAdjacentHTML('afterend', `<a class="all-downloads" href=${download.href}>(All downloads)</a>`)
+            // Update the download button href to the user's specific platform/arch
             download.href = asset.browser_download_url;
             download.title = `${uap.getOS().name} / ${uap.getCPU().architecture}`;
+            // Unhide the download all button
+            downloadAll.style.display = 'inline-flex';
         }
-    } catch(e) {
+    } catch (e) {
         // Unable to fetch the releases leave the download link as is
         return;
     }

website/config/_default/hugo.toml

@@ -3,7 +3,7 @@ languageCode = 'en-us'
 title = 'Conforma'
 theme = 'github.com/basil/antora-default-ui-hugo-theme'
 publishDir = '../public'
-copyright = "Red Hat, Inc. All rights reserved."
+copyright = 'Red Hat, Inc. All rights reserved. <a href="https://github.com/conforma/conforma.github.io">Source</a>.'
 relativeURLs = true
 staticDir = ["static", "antora"]
 paginate = 12

website/content/_index.md

@@ -1,7 +1,8 @@
 ---
 kind: home
 ---
+### [{{< icon "arrow-down-circle" >}} Download](https://github.com/conforma/cli/releases/latest){#download .button}
 
-### [{{< icon "arrow-down-circle" >}} Download](https://github.com/conforma/cli/releases/tag/snapshot){#download .button}
+### [{{< icon "arrow-down-circle" >}} All downloads](https://github.com/conforma/cli/releases/latest){#all-downloads .button}
 
 ### [{{< icon "book-open" >}} Getting Started](docs/user-guide/hitchhikers-guide.html){.button}

website/layouts/_default/contribute.html

@@ -18,29 +18,29 @@ <h2>Collaboration is Welcomed!</h2>
                         We encourage you to reach out and be part of our community.
                     </p>
                     <p>
-                        If you'd like to report an issue with Conforma (formerly Enterprise Contract), or if you have questions
+                        If you'd like to report an issue with Conforma, or if you have questions
                         about the code, visit the appropriate GitHub repository:
                     </p>
                     <div class="github">
                         <div class="github-repos">
                             {{ partial "github-repo.html" (dict
                             "name" "cli"
-                            "description" "Enterprise Contract command line interface"
+                            "description" "Conforma CLI"
                             "repo_url" "https://github.com/conforma/cli"
                             "issue_url" "https://github.com/conforma/cli/issues"
                             "discussion_url" "https://github.com/conforma/cli/discussions"
                             ) }}
 
                             {{ partial "github-repo.html" (dict
                             "name" "policy"
-                            "description" "Rego policies related to Konflux Enterprise Contract"
+                            "description" "Conforma Policy"
                             "repo_url" "https://github.com/conforma/policy"
                             "issue_url" "https://github.com/conforma/policy/issues"
                             ) }}
 
                             {{ partial "github-repo.html" (dict
                             "name" "community"
-                            "description" "A repo for community utilization. If you're unsure where to open an issue, you can use this repository"
+                            "description" "Conforma Community. If you're unsure where to open an issue, use this repository"
                             "repo_url" "https://github.com/conforma/community"
                             "issue_url" "https://github.com/conforma/community/issues"
                             "discussion_url" "https://github.com/conforma/community/discussions"

website/layouts/index.html

@@ -19,7 +19,6 @@
           <div class="hero-intro">
             <p>Securely verify supply chain artifacts, and enforce policies about how they were built and tested, in a manageable, scalable, and declarative way.</p>
 
-            <p class="announcement">Note: Conforma was previously known as "Enterprise Contract", often abbreviated as "EC". Please bear with us as we update the documentation and other resources to use the new name.</p>
           </div>
 
           <div class="hero-links">{{ .Content }}</div>
@@ -51,10 +50,32 @@
 
           </div>
         </div>
+
+          <div class="hero-intro">
+            <p class="announcement">Note that Conforma was originally known as "Enterprise Contract". You might find it still refered to as "Enterprise Contract", or "EC" in some of the older content on this website.</p>
+          </div>
+
+        <div class="divider">
+          {{ partial "svg-wave-divider.html"}}
+        </div>
+
+        {{/* Recycling the hero-intro class even though this is not the intro */}}
+        <div class="hero-intro">
+          <p class="mission"><span>Vision:</span> A world where every
+            software supply chain includes robust policy enforcement and secure artifact
+            verification by default.</p>
+
+          <p class="mission"><span>Mission:</span> To create user-friendly,
+            standards-based tooling to empower software, release, and security engineers to
+            consistently deliver artifacts that verifiably and transparently meet business,
+            quality, and security policies.</p>
+        </div>
+
         <div class="divider">
           {{ partial "svg-wave-divider.html"}}
         </div>
-        <div class="blog-excerpts">
+
+        <div class="blog-excerpts" style="padding-top: 2em; padding-bottom: 0em;">
           <h2>Recently Published</h2>
           <article class="doc">
             {{ $posts := where .Site.RegularPages "Type" "in" .Site.Params.mainSections }}
@@ -64,7 +85,7 @@ <h2>Recently Published</h2>
 
             {{/* This div is not really for pagination but the CSS does what we want and also I'm lazy */}}
             <div class="pagination-centered">
-              <div class="pagination pagination-default" style="padding: 3em 0; opacity: 70%;">
+              <div class="pagination pagination-default" style="padding: 2.5em 0 0 0; opacity: 70%;">
                 {{/* Note the hard coded url here should match what's in website/config/_default/menu.toml) */}}
                 <a href="/posts">More articles &hellip;</a>
               </div>

website/layouts/partials/svg-wave-divider.html

@@ -1,27 +1,17 @@
-<svg class="flowing"
-xmlns="http://www.w3.org/2000/svg"
-xmlns:xlink="http://www.w3.org/1999/xlink"
-viewBox="0 24 150 28 "
-preserveAspectRatio="none">
-    <defs>
-        <path id="gentle-wave"
-        d="M-160 44c30 0 
-        58-18 88-18s
-        58 18 88 18 
-        58-18 88-18 
-        58 18 88 18
-        v44h-352z" />
-    </defs>
-        <g class="parallax1">
-            <use xlink:href="#gentle-wave" x="50" y="3"/>
-        </g>
-        <g class="parallax2">
-            <use xlink:href="#gentle-wave" x="50" y="0"/>
-        </g>
-        <g class="parallax3">
-            <use xlink:href="#gentle-wave" x="50" y="9"/>
-        </g>
-        <g class="parallax4">
-            <use xlink:href="#gentle-wave" x="50" y="6"/>  
-        </g>
+<svg
+  class="flowing"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  viewBox="0 24 150 28"
+  preserveAspectRatio="none">
+  <defs>
+    <path
+      id="gentle-wave"
+      d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
+    />
+  </defs>
+  <g class="parallax1"><use xlink:href="#gentle-wave" x="50" y="3"/></g>
+  <g class="parallax2"><use xlink:href="#gentle-wave" x="50" y="0"/></g>
+  <g class="parallax3"><use xlink:href="#gentle-wave" x="50" y="9"/></g>
+  <g class="parallax4"><use xlink:href="#gentle-wave" x="50" y="6"/></g>
 </svg>