added datastax icon, social media icons, and footer styles (#11)

Author: josuebran

src/css/ds-logo.css

@@ -6,21 +6,42 @@ html[data-theme="light"] #datastax-docs-logo-main {
   background: url('../img/datastax-docs-logo-dark-bg.svg') no-repeat center / contain;
 }
 
+html[data-theme="dark"] #datastax-docs-logo-text {
+  background: url('../img/datastax-docs-logo-text-dark.svg') no-repeat center / contain;
+}
+
+html[data-theme="light"] #datastax-docs-logo-text {
+  background: url('../img/datastax-docs-logo-text-light.svg') no-repeat center / contain;
+}
+
 #datastax-docs-logo-main {
   width: calc(287 / var(--rem-base) * 1rem);
   height: calc(40 / var(--rem-base) * 1rem);
 }
 
+#datastax-docs-logo-text {
+  width: calc(172 / var(--rem-base) * 1rem);
+  height: calc(16 / var(--rem-base) * 1rem);
+}
+
 @media (prefers-color-scheme: light) {
   :root:not([data-theme="light"]):not([data-theme="dark"]) #datastax-docs-logo-main {
     background: url('../img/datastax-docs-logo-light-bg.svg') no-repeat center / contain;
   }
+
+  :root:not([data-theme="light"]):not([data-theme="dark"]) #datastax-docs-logo-text {
+    background: url('../img/datastax-docs-logo-text-light.svg') no-repeat center / contain;
+  }
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]):not([data-theme="dark"]) #datastax-docs-logo-main {
     background: url('../img/datastax-docs-logo-light-bg.svg') no-repeat center / contain;
   }
+
+  :root:not([data-theme="light"]):not([data-theme="dark"]) #datastax-docs-logo-text {
+    background: url('../img/datastax-docs-logo-text-dark.svg') no-repeat center / contain;
+  }
 }
 
 @media screen and (max-width: 768.5px) {

src/css/footer.css

@@ -1,15 +1,96 @@
 footer.footer {
   background-color: var(--footer-background);
   color: var(--footer-font-color);
-  font-size: calc(12 / var(--rem-base) * 1rem);
+  font-size: calc(14.5 / var(--rem-base) * 1rem);
   line-height: var(--footer-line-height);
   padding: var(--ds-space-5);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--ds-space-3);
+  flex-shrink: 0;
 }
 
 .footer p {
-  margin: 0.5rem 0;
+  margin: 0;
 }
 
 .footer a {
   color: var(--footer-link-font-color);
 }
+
+.footer-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  font-size: calc(14.5 / var(--rem-base) * 1rem);
+}
+
+.footer--divider {
+  background: var(--ds-divider);
+  height: calc(1 / var(--rem-base) * 1rem);
+  width: 100%;
+}
+
+.footer--contact-us a {
+  color: var(--footer-font-color);
+}
+
+.footer--trademarks {
+  font-size: calc(12 / var(--rem-base) * 1rem);
+  color: var(--text-tertiary);
+  max-width: 640px;
+  align-self: stretch;
+}
+
+.social-icons {
+  display: flex;
+  gap: var(--ds-space-2);
+}
+
+.social-icons a {
+  width: var(--ds-space-2h);
+  height: var(--ds-space-2h);
+  background-repeat: no-repeat;
+}
+
+/* footer icons */
+
+a.facebook-icon {
+  background-image: url('../img/social-facebook.svg');
+}
+
+a.x-icon {
+  background-image: url('../img/social-x.svg');
+}
+
+a.git-icon {
+  background-image: url('../img/social-github.svg');
+}
+
+a.medium-icon {
+  background-image: url('../img/social-medium.svg');
+}
+
+a.linkedin-icon {
+  background-image: url('../img/social-linkedin.svg');
+}
+
+a.twitch-icon {
+  content: url('../img/social-twitch.svg');
+}
+
+html[data-theme="dark"] {
+  .social-icons a {
+    filter: invert(1);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not([data-theme="dark"]) {
+    .social-icons a {
+      filter: invert(1);
+    }
+  }
+}

src/css/vars.css

@@ -100,7 +100,7 @@
   --toc-line-height: 1.5;
   /* footer */
   --footer-line-height: var(--doc-line-height);
-  --footer-background: var(--ds-neutral-soft-bg);
+  --footer-background: var(--ds-background-body);
   --footer-font-color: var(--ds-text-primary);
   --footer-link-font-color: var(--link-font-color);
   /* dimensions and positioning */