🎨 (#386): Experimenting with the button looks

ACCESS-NRI · Jul 18, 2023 · f32abf7 · f32abf7
1 parent 6f4ebbb
commit f32abf7
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/docs/assets/ACCESS-Logo.png b/docs/assets/ACCESS-Logo.png
diff --git a/docs/css/access-nri.css b/docs/css/access-nri.css
@@ -319,6 +319,14 @@ h3 {
 /* =============================================================== 
   Community Forum Button
 */
+.flex-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  gap: 0.6em;
+}
+
 .header-btn {
   /* color: var(--nri-orange); */
   border-radius: 0.3em;
@@ -328,6 +336,7 @@ h3 {
   font-weight: 500;
   transition: background-color 0.5s;
   margin: 0 0.1em 0 1em;
+  height: 1.8rem;
 }
 
 .header-btn:hover {
@@ -346,7 +355,12 @@ h3 {
 }
 
 .nri-green-border {
-  border-color: var(--nri-green);
+  border-color: var(--nri-dark-blue);
+}
+
+.icon-image {
+  height: 1.3em;
+  width: auto;
 }
 
 /* =============================================================== 

diff --git a/overrides/partials/header.html b/overrides/partials/header.html
@@ -97,14 +97,15 @@
         {% include "partials/search.html" %}
       {% endif %}
         <a href="https://forum.access-hive.org.au/" target="_blank">
-            <div class="header-btn nri-orange-border large-text bold">
-                Hive Forum
+            <div class="flex-container header-btn nri-orange-border large-text bold">
+                <i class="fa-regular fa-earth-americas"></i>
+                <span>Hive Forum</span>
             </div>
         </a>
         <a href="https://forum.access-hive.org.au/" target="_blank">
-            <div class="header-btn nri-green-border large-text bold">
-                <img src="../../../docs/assets/ACCESS-Logo.png">
-                ACCESS-NRI
+            <div class="flex-container header-btn nri-green-border large-text bold">
+                <img src="../assets/ACCESS-Logo.png" class="icon-image">
+                <span>ACCESS-NRI</span>
             </div>
         </a>
       {% if config.repo_url %}