Merge pull request #494 from flynnduism/styles

docs(styles) sticky footer to avoid overlap with sidebar

Author: flynnduism

themes/deis/base.html

@@ -48,35 +48,7 @@
           </div>
         </div>
 
-        <nav class="sidebar hide-for-small">
-          <div class="sidebar-inner">
-            <h1><a href="/" class="logo"><img src="{{ base_url }}/static/img/svg/logo.svg" width="128px" height="41px" alt="Deis"></a></h1>
-
-            <ul class="current sidebar-main">
-              {%- include "nav.html" %}
-              <li class="toctree-l1">
-                {% if READTHEDOCS %}
-                <a class="reference internal" href="../" state="open">Versions</a>
-                  <ul class="current">
-                    {% for slug, url in versions %}
-                    <li class="toctree-l2"><a href="{{ url }}{%- for word in pagename.split('/') -%}
-                      {%- if word != 'index' -%}
-                      {%- if word != '' -%}
-                      {{ word }}/
-                      {%- endif -%}
-                      {%- endif -%}
-                      {%- endfor -%}"
-                      title="Switch to {{ slug }}">{{ slug }}</a></li>
-                  {% endfor %}
-                  </ul>
-                {% endif %}
-              </li>
-            </ul>
-          </div>
-
-          <div class="sidebar-bg"></div>
-        </nav>
-
+        {%- include "sidebar.html" %}
       </div>
 
       {%- include "footer.html" %}

themes/deis/footer.html

@@ -39,20 +39,20 @@
   </section>
   <section class="panel panel-links">
     <div class="row fullwidth">
-      <div class="small-4 medium-4 large-4 small-only-text-center columns logo-and-copyright">
+      <div class="small-4 medium-2 large-4 small-only-text-center columns logo-and-copyright">
         <div class="logo">
           <a id="footer-return" href="//deis.com"><img src="{{ base_url }}/static/img/svg/footer-logo.svg" alt="Deis"></a>
         </div>
-        <p class="copyright show-for-medium-up">
+        <p class="copyright show-for-large-up">
           <a id="footer-privacy" href="//deis.com/policies/privacy">Privacy Policy</a>
         </p>
-        <p class="copyright show-for-medium-up">Deis.com and the Deis project are maintained by <a href="https://engineyard.com/"><img src="{{ base_url }}/static/img/svg/footer-engine-yard.svg" alt="Engine Yard"></p>
+        <p class="copyright show-for-large-up">Deis.com and the Deis project are maintained by <a href="https://engineyard.com/"><img src="{{ base_url }}/static/img/svg/footer-engine-yard.svg" alt="Engine Yard"></p>
       </div>
-      <div class="small-8 medium-8 large-8 columns">
+      <div class="small-8 medium-10 large-8 columns">
         <div class="row">
           <div class="small-6 medium-3 columns">
             <dl>
-              <dt><a id="footer-gh-community" href="//deis.com/community"><span class="hide-for-medium-down">Deis</span> Community</a></dt>
+              <dt><a id="footer-gh-community" href="//deis.com/community">Community</a></dt>
               <dd><a id="footer-get-involved" href="//deis.com/community">Get Involved</a></dd>
               <dd><a id="footer-videos-events" href="//deis.com/community#videos-events">Videos &amp; Events</a></dd>
               <dd><a id="footer-roadmap" href="https://docs-v2.readthedocs.io/en/latest/roadmap/roadmap/">Project Roadmap</a></dd>

themes/deis/sidebar.html

@@ -0,0 +1,28 @@
+<nav class="sidebar hide-for-small">
+  <div class="sidebar-inner">
+    <h1><a href="/" class="logo"><img src="{{ base_url }}/static/img/svg/logo.svg" width="128px" height="41px" alt="Deis"></a></h1>
+
+    <ul class="current sidebar-main">
+      {%- include "nav.html" %}
+      <li class="toctree-l1">
+        {% if READTHEDOCS %}
+        <a class="reference internal" href="../" state="open">Versions</a>
+          <ul class="current">
+            {% for slug, url in versions %}
+            <li class="toctree-l2"><a href="{{ url }}{%- for word in pagename.split('/') -%}
+              {%- if word != 'index' -%}
+              {%- if word != '' -%}
+              {{ word }}/
+              {%- endif -%}
+              {%- endif -%}
+              {%- endfor -%}"
+              title="Switch to {{ slug }}">{{ slug }}</a></li>
+          {% endfor %}
+          </ul>
+        {% endif %}
+      </li>
+    </ul>
+  </div>
+
+  <div class="sidebar-bg"></div>
+</nav>

themes/deis/static/css/styles.css

@@ -1,7 +1,13 @@
-html, body{
+html,
+body {
   height:100%;
 }
 
+.off-canvas-wrap,
+.inner-wrap {
+    min-height: 100%;
+}
+
 body {
     @include helvetica;
     overflow-x: hidden;
@@ -20,7 +26,14 @@ body {
 .content-wrap {
     position: relative;
     padding-left: 320px;
-    padding-bottom: 10em;
+    min-height: 100%;
+    margin-bottom: -335px;
+
+    &:after {
+        content: "";
+        display: block;
+        height: 390px;
+    }
 }
 
 .content-inner {
@@ -29,6 +42,7 @@ body {
     margin-left: auto;
     margin-right: auto;
     padding-top: 128px;
+    padding-bottom: 128px;
 }
 
 .sidebar {

themes/deis/static/css/styles.css.map

@@ -2,7 +2,6 @@
 
     .sidebar-inner {
         padding: 120px 0 40px;
-        
         max-width: 320px;
         position: relative;
         z-index: 50;

themes/deis/static/scss/_doc-layout.scss

@@ -2,6 +2,13 @@ footer {
   padding: 0;
   z-index: 1020;
   position: relative;
+  height: 335px;
+  background: white;
+  margin-left: 290px;
+
+  @include mobile {
+      margin-left: 0;
+  }
 
   .logo {
     margin: 0 0 2em;
@@ -142,15 +149,16 @@ footer {
 
   .panel-links {
     padding-top: 2.5em;
+    background: white;
+
     @include tablet {
       padding-bottom: 0;
+      font-size: 1.25rem;
     }
-    background: white;
 
     dl {
         font-size: 0.925em;
         float: left;
-        // min-width: 20%;
         margin: 0.75em 0 2em 7.5%;
 
         @include mobile {

themes/deis/static/scss/_doc-sidebar.scss

@@ -20,12 +20,53 @@
     }
   }
 
+  .content-wrap {
+    margin-bottom: -225px !important;
+  }
+
+  footer {
+    height: 225px !important;
+  }
+
   .shape-position.shape-position-bottom {
     bottom: -3.5em;
     width: 117.5%;
     z-index: 150;
   }
 
+  .off-canvas-wrap.move-right,
+  .off-canvas-wrap.move-left {
+    height: 100%;
+
+    .inner-wrap,
+    .content-wrap {
+      height: 100%;
+
+      & + footer {
+        display: none;
+      }
+    }
+  }
+
+  aside.right-off-canvas-menu {
+
+    ul:first-child {
+      height: 100%;
+      max-height: 100%;
+      overflow-y: scroll;
+
+      ul {
+        height: auto;
+        margin: 0 0 1.25em 0;
+      }
+
+      ul li a {
+        font-size: 0.875em;
+        padding-left: 2.75rem;
+        opacity: 0.75;
+      }
+    }
+  }
 }
 
 @media only screen and (max-width: 64.063em) {