Dark theme bugfixes

docs/source/index.rst

@@ -31,7 +31,7 @@
 .. topic-box::
   :title: Getting started
   :link: getting-started
-  :icon: scylla-icon scylla-icon--getting-started
+  :icon: icon-docs-getting-started
   :class: large-6
   :anchor: Learn more
 
@@ -40,7 +40,7 @@
 .. topic-box::
   :title: Configuration
   :link: configuration
-  :icon: scylla-icon scylla-icon--integrations
+  :icon: icon-docs-configuration
   :class: large-6
   :anchor: Learn more
 
@@ -49,7 +49,7 @@
 .. topic-box::
   :title: Commands
   :link: commands
-  :icon: scylla-icon scylla-icon--apps
+  :icon: icon-docs-commands
   :class: large-6
   :anchor: Learn more
 
@@ -67,7 +67,7 @@
 .. topic-box::
   :title: Demos and Examples
   :link: examples
-  :icon: scylla-icon scylla-icon--tech-talks
+  :icon: icon-docs-training
   :class: large-6
   :anchor: Learn more
 
@@ -76,7 +76,7 @@
 .. topic-box::
   :title: Contribute
   :link: contribute
-  :icon: scylla-icon scylla-icon--about-team
+  :icon: icon-docs-contribute
   :class: large-6
   :anchor: Learn more
 

sphinx_scylladb_theme/footer.html

@@ -10,11 +10,6 @@
                 <a class="footer-links__link" href="https://www.scylladb.com/company/" target="_blank">About Us</a>
             </div>
             <div class="footer-actions">
-                <a class="footer-actions__link" href="https://groups.google.com/g/scylladb-users" target="_blank">
-                    <span data-tooltip tabindex="1" title="User mailing list" data-position="bottom">
-                        <i class="icon-docs-mail"></i>
-                    </span>
-                </a>
                 <a class="footer-actions__link" href="http://slack.scylladb.com/" target="_blank">
                     <span data-tooltip tabindex="1" title="User Slack channel" data-position="bottom">
                         <i class="icon-slack"></i>

src/css/base/_fonticon.scss

@@ -38,6 +38,7 @@ url("#{$fonticon-url}.woff") format("woff");
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: normal !important;
+    vertical-align: middle;
 }
 
 $icons: (
@@ -162,7 +163,15 @@ $icons: (
 "reset": "\ea77",
 "eye": "\ea78",
 "stack-overflow": "\ea79",
-"docs-nsql-guides": "\ea7a"
+"docs-nsql-guides": "\ea7a",
+"docs-cloud": "\ea7b",
+"docs-getting-started": "\ea7c",
+"docs-blog": "\ea7d",
+"docs-contribute": "\ea7e",
+"docs-training": "\ea7f",
+"docs-commands": "\ea80",
+"docs-configuration": "\ea81",
+"docs-enterprise-m": "\ea82"
 );
 
 @each $name, $glyph in $icons {

src/css/components/_contribute.scss

@@ -7,7 +7,14 @@
     padding-bottom: 10px;
     list-style: none;
 
+    a {
+      display: flex;
+      align-items: center;
+    }
+
     i {
+      font-size: 1.2em;
+      line-height: 1em;
       margin-right: 5px;
     }
   }

src/css/components/_dropdown-versions.scss

@@ -1,6 +1,6 @@
 .scylla-dropdown--versions {
   .scylla-dropdown__item {
-    background: var(--color-white);
+    background: var(--card-bg);
     border-radius: $round;
     box-shadow: 0 28px 32px rgba(0, 0, 0, 0.06);
     width: 100%;

src/css/components/_footer.scss

@@ -53,7 +53,7 @@
   align-items: center;
   display: flex;
   justify-content: space-between;
-  width: 70px;
+  gap: $spacer-xs;
 
   &__link {
     color: var(--text-color);

src/css/components/_header.scss

@@ -76,7 +76,9 @@
     text-transform: uppercase;
 
     .chevron {
-      margin-left: 10px;
+      margin-left: 4px;
+      font-size: 24px;
+      line-height: .5em;
     }
   }
   .scylla-dropdown__content .scylla-icon {

src/css/components/_labels.scss

@@ -5,6 +5,10 @@
   color: var(--white);
   font-size: inherit;
 
+  &--default {
+    color: var(--text-color);
+  }
+
   &--note {
     background-color: var(--info);
   }

src/css/components/_promo-banner.scss

@@ -26,7 +26,8 @@
   }
 
   &__button {
-    background: var(--color-white);
+    background: var(--white);
+    color: var(--black);
     border-radius: 4px;
     font-size: $font-smallest;
     min-width: max-content;

src/css/components/_search-box.scss

@@ -7,7 +7,9 @@
   background: var(--well-bg);
   border-radius: 4px;
   display: flex;
+  align-items: center;
   padding: 10px 15px;
+  flex-grow: 1;
 
   &--hero {
     background-color: var(--well-bg);
@@ -19,12 +21,13 @@
     @extend .icon;
     display: inline-block;
     vertical-align: middle;
-    margin-top: 2px;
+    margin-right: $spacer-xxs;
     background-repeat: no-repeat;
     background-size: contain;
     min-height: 18px;
     min-width: 18px;
     width: 20px;
+    font-size: 24px;
   }
 
   ci-search,

src/css/main.scss

@@ -1,4 +1,4 @@
-@import "../../node_modules/foundation-sites/dist/css/foundation.min.css";
+@import "~foundation-sites/dist/css/foundation.min.css";
 
 @import "base/variables";
 @import "base/fonticon";