Move Admin link to teal bar (footer) / gray bar (home), camouflaged

- _includes/footer.html: admin link moves from .footer-bar-dark to
  .footer-bar-teal.
- index.md: adds the admin link inside .home-divider-bars .bar-light
  on the home page (where .footer-bars is hidden).
- CSS: footer .footer-admin uses accent teal (#007e79) on the teal bar
  so it's nearly invisible until hovered (white on hover). On home,
  .home-admin overrides the color to #ccc to match the gray bar's
  background — completely hidden until hovered.

Author: rhiju

_includes/footer.html

@@ -1,9 +1,9 @@
 <footer class="site-footer">
   <div class="footer-bars">
-    <div class="footer-bar-dark">
+    <div class="footer-bar-dark"></div>
+    <div class="footer-bar-teal">
       <a class="footer-admin" href="https://github.com/DasLab/DasLab.github.io/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener">Admin</a>
     </div>
-    <div class="footer-bar-teal"></div>
   </div>
   <div class="institutional-logos">
     <a href="https://www.stanford.edu/" target="_blank" rel="noopener noreferrer external">

assets/css/style.scss

@@ -828,12 +828,12 @@ details.show-more {
 .footer-bar-dark {
   flex: 0 0 68.86%;
   background-image: url("{{ '/assets/images/site/public/footer_bar_dark.png' | relative_url }}");
-  position: relative;
 }
+.footer-bar-teal { position: relative; }
 
 /* Subtle "Admin" shortcut for lab members — links to CONTRIBUTING.md.
-   Anchored in the dark bar, low-contrast text so it doesn't pull
-   attention from the institutional logos but is discoverable. */
+   Color matches the bar background so it's effectively hidden until
+   hovered. */
 .footer-admin {
   position: absolute;
   right: 0.6rem;
@@ -842,10 +842,20 @@ details.show-more {
   font-size: 0.7rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
-  color: rgba(255, 255, 255, 0.55);
   text-decoration: none;
-  &:hover { color: rgba(255, 255, 255, 1); }
+  /* Inside the teal footer bar — teal text on teal bg, hidden until
+     hover. Footer_bar_teal.png is roughly #007e79. */
+  color: $accent;
+  &:hover { color: #fff; }
+}
+
+/* On the home page, the admin link lives in the gray .bar-light. Match
+   that bar's #ccc background so it is completely invisible until hovered. */
+.home-admin {
+  color: #ccc;
+  &:hover { color: $text; }
 }
+.home-divider-bars .bar-light { position: relative; }
 .footer-bar-teal {
   flex: 1 1 auto;
   background-image: url("{{ '/assets/images/site/public/footer_bar_teal.png' | relative_url }}");

index.md

@@ -9,9 +9,11 @@ slug: home
   <div class="home-banner" role="img" aria-label="Das Lab — RNA fold and function from scratch"></div>
 </div>
 
-<div class="home-divider-bars" aria-hidden="true">
+<div class="home-divider-bars">
   <div class="bar-dark"></div>
-  <div class="bar-light"></div>
+  <div class="bar-light">
+    <a class="footer-admin home-admin" href="https://github.com/DasLab/DasLab.github.io/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener">Admin</a>
+  </div>
 </div>
 
 <div class="home-callouts">