new bs4 js and remove bg from code in titles

MozzieWen · Dec 7, 2020 · 04ab7b0 · 04ab7b0
1 parent c5d5b3d
commit 04ab7b0
Show file tree

Hide file tree

Showing 14 changed files with 197 additions and 55 deletions.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,5 +1,59 @@
 <section class="footer">
   {% if page.back_to_top == true %} {% include back-to-top.html %} {% endif %}
+  <div class="container">
+    <div class="row">
+      <div class="col-md-8 left">
+        <div class="row">
+          <div class="col-md-3">
+            <nav class="navbar navbar-footer navbar-expand-lg navbar-light bg-light">
+              <a class="navbar-brand d-lg-none" href="#">Product</a>
+              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+              </button>
+              <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="nav flex-column">
+                  <li class="nav-item">
+                    <a class="nav-link" href="#">Link</a>
+                  </li>
+
+                  <li class="nav-item">
+                    <a class="nav-link" href="https://www.cockroachlabs.com/product/">CockroachDB</a>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link" href="https://www.cockroachlabs.com/product/cockroachcloud/">CockroachCloud</a>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link" href="https://www.cockroachlabs.com/compare/">Compare</a>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link" href="https://www.cockroachlabs.com/pricing/">Pricing</a>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link" href="https://www.cockroachlabs.com/product/whats-new/">What's New</a>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link" href="https://www.cockroachlabs.com/get-cockroachdb/">Get CockroachDB</a>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link" href="https://cockroachlabs.cloud/">Sign In</a>
+                  </li>
+
+                </ul>
+              </div>
+            </nav>
+          </div>
+          <div class="col-md-3">
+            two
+          </div>
+          <div class="col-md-3">Three</div>
+          <div class="col-md-3">Four</div>
+        </div>
+      </div>
+      <div class="col-md-2 right">
+        form
+      </div>
+    </div>
+  </div>
   <div class="container">
     <div class="footer__flex-wrap">
       <ul class="footer-nav">
@@ -85,11 +139,42 @@
           </li>
         </ul>
       </ul>
+      <!-- Fourth col -->
+      <ul class="footer-nav">
+        <li class="header">
+          Company<span class="blue-arrow blue-arrow--down"></span>
+        </li>
+        <ul class="footer-sub-nav">
+          <li>
+            <a href="https://www.cockroachlabs.com/product/">CockroachDB</a>
+          </li>
+          <li>
+            <a href="https://www.cockroachlabs.com/product/cockroachcloud/"
+              >CockroachCloud</a
+            >
+          </li>
+          <li>
+            <a href="https://www.cockroachlabs.com/compare/">Compare</a>
+          </li>
+          <li>
+            <a href="https://www.cockroachlabs.com/pricing/">Pricing</a>
+          </li>
+          <li>
+            <a href="https://www.cockroachlabs.com/product/whats-new/">What's New</a>
+          </li>
+          <li>
+            <a href="https://www.cockroachlabs.com/get-cockroachdb/">Get CockroachDB</a>
+          </li>
+          <li>
+            <a href="https://cockroachlabs.cloud/">Sign In</a>
+          </li>
+        </ul>
+      </ul>
     </div>
     <div class="footer__right">
       <ul class="footer-nav">
         <li class="header">
-          Company<span class="blue-arrow blue-arrow--down"></span>
+          Get developer news<span class="blue-arrow blue-arrow--down"></span>
         </li>
         <ul class="footer-sub-nav">
           <li><a href="https://www.cockroachlabs.com/about/">About</a></li>

diff --git a/_includes/head.html b/_includes/head.html
@@ -28,7 +28,9 @@
 <script src="{{ 'js/jquery.min.js' | relative_url }}"></script>
 <script src="{{ 'js/jquery.cookie.min.js' | relative_url }}"></script>
 <script src="{{ 'js/jquery.navgoco.min.js' | relative_url }}"></script>
-<script src="{{ 'js/bootstrap.min.js' | relative_url }}"></script>
+<!-- bs 4.X -->
+<script src="{{'js/bootstrap453.min.js' | relative_url }}" crossorigin="anonymous"></script>
+
 <script src="{{ 'js/algoliasearchLite.min.js' | relative_url }}"></script>
 <script src="{{ 'js/instantsearch.production.min.js' | relative_url }}"></script>
 

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -40,13 +40,11 @@
           </div>
         {% endif %}
       </div>
-      <div class="row">
-        <div class="col">
-            {% include footer.html %}
-        </div>
-      </div>
     </div>
 
+    {% include footer.html %}
+
+
     <script src="{{ 'js/tocRightScrollHighlight.js' | relative_url }}"></script>
     {% include google_tag_manager.html %}
     {% include google_remarketing.html %}

diff --git a/css/bs/bootstrap.css b/css/bs/bootstrap.css
diff --git a/css/bs/bootstrap.css.map b/css/bs/bootstrap.css.map
diff --git a/css/bs/bootstrap.scss b/css/bs/bootstrap.scss
@@ -17,7 +17,7 @@
 // @import "tables";
 @import "forms";
 @import "buttons";
-// @import "transitions";
+@import "transitions";
 @import "dropdown";
 // @import "button-group";
 @import "input-group";

diff --git a/css/components/_navbar.scss b/css/components/_navbar.scss
@@ -1,3 +1,9 @@
 .navbar {
     height: 50px;
+    &-footer {
+        height: auto;
+        .nav-item {
+            padding: 0;
+        }
+    }
 }
diff --git a/css/customstyles.css b/css/customstyles.css
diff --git a/css/customstyles.css.map b/css/customstyles.css.map
diff --git a/css/customstyles.scss b/css/customstyles.scss
@@ -170,6 +170,12 @@ pre, code {
   hyphens: none;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  code {
+    background: none;
+  }
+}
+
 ul {
   padding-left: 25px;
   li {

diff --git a/css/global/_variables.scss b/css/global/_variables.scss
@@ -16,6 +16,17 @@ $aquamarine: #3DEFC4;
 $spanish-roast: #190F33;
 $border-radius: 5px;
 
+$neutral-100: #F5F7FA;
+$neutral-200: #E7ECF3;
+$neutral-300: #D6DBE7;
+$neutral-400: #C0C6D9;
+$neutral-500: #7E89A9;
+$neutral-600: #475872;
+$neutral-700: #394455;
+$neutral-800: #242A35;
+$neutral-900: #060C12;
+$black:  #000;
+
 $winters-day: rgba(222, 247, 255, .60);
 $cherenkov-radiation: #24CAFF;
 $ice-temple: #1BF8EC;
@@ -34,7 +45,7 @@ $cl_gray_dark: #333333;
 $cl_gray_medium: #DADADA;
 $cl_gray_light: #F3F3F3;
 $cl_gray_body: #142848;
-$cl_gray_footer: #F7F7F7;
+$cl_gray_footer: $neutral-100;
 $cl_warning: #FF7595;
 $cl_warning_light: rgba(255, 227, 234, .60);;
 
@@ -43,7 +54,7 @@ $blue-200: #74BDFD;
 $blue-300: #0788FF;
 $blue-400: #0788FF;
 $blue-500: #00294D;
-
+ 
 // syntax highlighting colors
 $cl_syntax_gray: #A2A2A2;
 $cl_syntax_gray_light: #F7F7F7;
@@ -75,16 +86,6 @@ $grid-gutter-width: 24px;
 
 $white:  #fff;
 
-$neutral-100: #F5F7FA;
-$neutral-200: #E7ECF3;
-$neutral-300: #D6DBE7;
-$neutral-400: #C0C6D9;
-$neutral-500: #7E89A9;
-$neutral-600: #475872;
-$neutral-700: #394455;
-$neutral-800: #242A35;
-$neutral-900: #060C12;
-$black:  #000;
 
 
 $grays: (

diff --git a/css/lavish-bootstrap.css b/css/lavish-bootstrap.css
@@ -2335,7 +2335,7 @@ input[type="button"].btn-block {
 .fade.in {
   opacity: 1;
 }
-.collapse {
+/* .collapse {
   display: none;
 }
 .collapse.in {
@@ -2347,7 +2347,7 @@ input[type="button"].btn-block {
   overflow: hidden;
   -webkit-transition: height 0.35s ease;
   transition: height 0.35s ease;
-}
+} */
 @font-face {
   font-family: 'Glyphicons Halflings';
   src: url('../fonts/glyphicons-halflings-regular.eot');