Skip to content
Permalink
Browse files

docs(styles) sticky footer to avoid overlap with sidebar

  • Loading branch information...
flynnduism committed Sep 6, 2016
1 parent 7088f27 commit b721180f40a736c2a76f516e85c89eedad2be7e2
@@ -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" %}
@@ -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>
@@ -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>

Large diffs are not rendered by default.

Large diffs are not rendered by default.

@@ -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 {
@@ -2,7 +2,6 @@

.sidebar-inner {
padding: 120px 0 40px;

max-width: 320px;
position: relative;
z-index: 50;
@@ -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 {
@@ -25,7 +25,6 @@
width: 117.5%;
z-index: 150;
}

}

@media only screen and (max-width: 64.063em) {

0 comments on commit b721180

Please sign in to comment.
You can’t perform that action at this time.