[release-notes/help-gnome-org] fix: update CSS stylesheet

[Link Dupont <link src gnome org>]

commit 4c70b8db023c2faf849350c18ba8f147ccbeb78f
Author: Link Dupont <link sub-pop net>
Date:   Fri Sep 10 15:50:44 2021 +0000

    fix: update CSS stylesheet

 style.css | 116 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 108 insertions(+), 8 deletions(-)
---
diff --git a/style.css b/style.css
index 73898b62..1f091c0c 100644
--- a/style.css
+++ b/style.css
@@ -83,6 +83,9 @@
   --tocbg: var(--light2);
   --tocfg: var(--dark3);
   --borders: var(--light3);
+  
+  --textwidth: 50rem;
+  --corner: 8px;
 }
 
 ::selection {
@@ -180,7 +183,7 @@ ul.list {
 }
 
 article {
-  max-width: 50rem;
+  max-width: var(--textwidth);
   margin: auto;
   padding: 0 2rem 3rem;
 }
@@ -199,8 +202,92 @@ section {
   filter: drop-shadow(0 1px 3px rgba(0,0,0,0.2));
 }
 
-/* footer JS toggling seems to be broken, disabling footer for now */
-footer { display: none; }
+.note {
+  border: 1px solid var(--light3);
+  background-color: var(--light2);
+  margin: 1rem;
+  padding: .5rem 1rem;
+  font-size: 80%;
+  line-height: 1.5rem;
+  border-radius: var(--corner);
+}
+
+.note-tip {
+  display: flex;
+  flex-direction: row;
+  gap: .5em;
+  margin: 0 0 2rem 0;
+  align-items: center;
+}
+  .note-tip svg {
+    min-width: 24px;
+    aspect-ratio: 1;
+    display: block;
+    margin: 1rem;
+    fill: #999;
+  }
+
+.trails {
+  border-bottom: 1px solid var(--light3);
+  background-color: var(--light2);
+  margin-bottom: 1rem;
+  padding: .5rem 1rem;
+  font-size: 80%;
+  font-weight: bold;
+}
+  div.trail {
+    max-width: var(--textwidth);
+    margin: auto;
+    padding: 0 1rem;
+  }
+  a.trail {
+    display: inline-block;
+    margin: 0 1rem;
+    color: var(--blue3);
+  }
+
+.topiclinks { 
+    margin: 1rem 0 2rem 0;
+}
+
+  .topiclinks .linkdiv-dash { display: none; }
+  .topiclinks a.linkdiv {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    text-decoration: none;
+    background-color: rgba(0,0,0,0);
+    transition: all 300ms ease-out;
+    padding: 1rem;
+    border-radius: var(--corner);
+  }
+  
+  .topiclinks a.linkdiv:hover {
+    background-color: rgba(0,0,0,0.05);
+  }
+  .topiclinks a.linkdiv:active { transform: scale(0.99); }
+  
+  .topiclinks a.linkdiv span.title {
+    font-weight: 800;
+    color: var(--blue3);
+  }
+  .topiclinks a.linkdiv span.desc {
+    color: var(--dark2);
+  }
+
+div.code {
+  background-color: var(--light2);
+  border: 1px solid var(--ligh3);
+  padding: 0.5rem 1rem;
+  border-radius: var(--corner);
+}
+  div.code pre {
+    font-size: 80%;
+    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", 
"DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", 
Courier, monospace;
+    white-space: pre-wrap;
+    overflow-x: auto;
+    tab-size: 2;
+  }
 
 footer {  
   font-size: 80%;
@@ -210,21 +297,29 @@ footer {
   overflow: hidden;
 }
 
+  footer .yelp-title-expanded,
+  footer .yelp-title-collapsed { display: none; }
+  
   footer>div.inner {
-    max-width: 50rem;
+    max-width: var(--textwidth);
     margin: 0 auto 3rem;
     padding: 0 2rem;
   }
   
-  footer div.about.ui-expander > div.inner > div.hgroup span.title:before {
-    content: "";
+  footer>div.inner h2 .title { 
+    font-size: 80%; 
+    font-weight: 600;
+    color: var(--light5); 
   }
-  
+    
   .license, .credits-authors {
     display: flex;
     flex-direction: row;
     gap: 1rem;
   }
+  .license .title, .credits-authors .title {
+    min-width: 5rem;
+  }
   .license p { margin: 0; }
   ul.credits { 
     display: flex;
@@ -232,5 +327,10 @@ footer {
     gap: .5em;
     padding: 0; margin: 0;
   }
-  ul.credits li { display: block; list-style: none; }
+  ul.credits li { 
+    display: block; 
+    list-style: none; 
+  }
+  ul.credits li::after { content: ","; }
+  ul.credits li:last-child::after { content: "."; }