Cover and Download logos

Author: dbazhenov

assets/images/social_cover.jpg

@@ -78,6 +78,46 @@
     }
   }
 
+  .footer-logos {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding-bottom: 1.25rem;
+    margin-bottom: 1.25rem;
+    border-bottom: 1px solid $dark-border;
+    flex-wrap: wrap;
+
+    .footer-logos-label {
+      font-size: 0.75rem;
+      font-weight: 600;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: $muted;
+      white-space: nowrap;
+    }
+
+    .footer-logos-links {
+      display: flex;
+      gap: 0.5rem;
+      flex-wrap: wrap;
+
+      a {
+        font-size: 0.8125rem;
+        color: $muted;
+        text-decoration: none;
+        border: 1px solid $dark-border;
+        border-radius: 6px;
+        padding: 0.25rem 0.625rem;
+        transition: color 0.2s ease, border-color 0.2s ease;
+
+        &:hover {
+          color: $off-white;
+          border-color: rgba($accent, 0.3);
+        }
+      }
+    }
+  }
+
   .footer-bottom {
     display: flex;
     align-items: center;

assets/scss/_footer.scss

@@ -118,6 +118,22 @@
     background: #eef2f7;
     border-top-color: #dde3ed;
 
+    .footer-logos {
+      border-bottom-color: #dde3ed;
+
+      .footer-logos-label { color: #94a3b8; }
+
+      .footer-logos-links a {
+        color: #64748b;
+        border-color: #dde3ed;
+
+        &:hover {
+          color: #0272a5;
+          border-color: rgba(0, 200, 255, 0.4);
+        }
+      }
+    }
+
     .footer-bottom p { color: #94a3b8; }
   }
 }

assets/scss/_light-theme.scss

@@ -1,5 +1,14 @@
 <footer class="site-footer">
   <div class="footer-inner">
+    <div class="footer-logos">
+      <span class="footer-logos-label">Download logo</span>
+      <div class="footer-logos-links">
+        <a href="/oursql-foundation-logo-dark.svg" download>Dark SVG</a>
+        <a href="/oursql-foundation-logo-dark.png" download>Dark PNG</a>
+        <a href="/oursql-foundation-logo-light.svg" download>Light SVG</a>
+        <a href="/oursql-foundation-logo-light.png" download>Light PNG</a>
+      </div>
+    </div>
     <div class="footer-bottom">
       <p>© {{ now.Year }} OurSQL Foundation. A vendor-neutral nonprofit.</p>
     </div>