Improve footer styles

Don't attempt to use fixed height footer, since content height can vary greatly, depending on the device. There's a way to muck around with table-* display properties for the entire page and sticky the variable-height footer to the bottom, but instead I chose to unsticky it. Related to #645
Raku · Jun 29, 2016 · d290581 · d290581
1 parent 3029914
commit d290581
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 78 deletions.
diff --git a/assets/sass/style.scss b/assets/sass/style.scss
@@ -1,7 +1,8 @@
 html, body {
     margin: 0;
-    background: #EFEFEF;
-    font-family: sans-serif !important; /*override font from perl.css stylesheet, until we can get rid of it*/
+    background: #EFEFEF!important;
+    font-family: sans-serif !important; /*override font from perl.css
+        stylesheet, until we can get rid of it*/
 }
 
 html {
@@ -12,9 +13,9 @@ html {
 }
 
 body {
-    padding: 0 2em;
+    padding: 1px 10px 0;
+    margin: -1px 0 0;
     width: auto;
-    margin-bottom: 5.5em;  /* max footer height */
 }
 
 .title {
@@ -127,21 +128,6 @@ td {
     margin-left: 1.5em;
 }
 
-@media (max-width : 560px) {
-    #header > a {
-        font-size: 1.1em;
-        display: block;
-        padding: 5px 10px 0;
-        margin: 0;
-        text-align: center;
-    }
-    #home_logo {
-        display: none;
-    }
-
-    body { padding: 0; }
-}
-
 #logo {
     display: inline-block;
     margin: -0.75em 0 -0.5em -0.5em;
@@ -289,8 +275,6 @@ td {
 
 #formalities { font-style: italic; }
 
-#content-wrapper { padding-bottom: 2em; }
-
 #content {
     margin: 2em auto;
     overflow: hidden;
@@ -327,21 +311,6 @@ td {
     }
 }
 
-#footer-wrapper {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    margin: 0 -2em;
-    padding-bottom: 2em;
-    overflow: hidden;
-    max-height: 5.5em;  /* max footer height */
-}
-
-#footer {
-    margin: 0 2em;
-    padding: 0 1em;
-}
-
 .title-anchor {
     visibility: hidden;
     color: #333;
@@ -358,3 +327,29 @@ h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover {
         visibility: visible;
     }
 }
+
+footer.pretty-box {
+    // margin: 0;
+    padding: 0 3px;
+    text-align: center;
+    font-size: 80%;
+}
+
+@media (max-width : 560px) {
+    #header > a {
+        font-size: 1.1em;
+        display: block;
+        padding: 5px 10px 0;
+        margin: 0;
+        text-align: center;
+    }
+    #home_logo {
+        display: none;
+    }
+
+    body { padding: 0; }
+
+    .pretty-box {
+        padding: 3px;
+    }
+}
diff --git a/html/css/style.css b/html/css/style.css
@@ -1,8 +1,9 @@
 html, body {
   margin: 0;
-  background: #EFEFEF;
+  background: #EFEFEF !important;
   font-family: sans-serif !important;
-  /*override font from perl.css stylesheet, until we can get rid of it*/ }
+  /*override font from perl.css
+        stylesheet, until we can get rid of it*/ }
 
 html {
   padding: 0;
@@ -11,10 +12,9 @@ html {
   min-height: 100%; }
 
 body {
-  padding: 0 2em;
-  width: auto;
-  margin-bottom: 5.5em;
-  /* max footer height */ }
+  padding: 1px 10px 0;
+  margin: -1px 0 0;
+  width: auto; }
 
 .title {
   margin-top: 0;
@@ -106,18 +106,6 @@ td {
   font-size: 2em;
   margin-left: 1.5em; }
 
-@media (max-width: 560px) {
-  #header > a {
-    font-size: 1.1em;
-    display: block;
-    padding: 5px 10px 0;
-    margin: 0;
-    text-align: center; }
-  #home_logo {
-    display: none; }
-  body {
-    padding: 0; } }
-
 #logo {
   display: inline-block;
   margin: -0.75em 0 -0.5em -0.5em;
@@ -245,9 +233,6 @@ td {
 #formalities {
   font-style: italic; }
 
-#content-wrapper {
-  padding-bottom: 2em; }
-
 #content {
   margin: 2em auto;
   overflow: hidden;
@@ -275,20 +260,6 @@ td {
     margin-top: 0;
     padding-top: 0; }
 
-#footer-wrapper {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  margin: 0 -2em;
-  padding-bottom: 2em;
-  overflow: hidden;
-  max-height: 5.5em;
-  /* max footer height */ }
-
-#footer {
-  margin: 0 2em;
-  padding: 0 1em; }
-
 .title-anchor {
   visibility: hidden;
   color: #333;
@@ -301,3 +272,22 @@ td {
 
 h1:hover .title-anchor, h2:hover .title-anchor, h3:hover .title-anchor, h4:hover .title-anchor, h5:hover .title-anchor, h6:hover .title-anchor {
   visibility: visible; }
+
+footer.pretty-box {
+  padding: 0 3px;
+  text-align: center;
+  font-size: 80%; }
+
+@media (max-width: 560px) {
+  #header > a {
+    font-size: 1.1em;
+    display: block;
+    padding: 5px 10px 0;
+    margin: 0;
+    text-align: center; }
+  #home_logo {
+    display: none; }
+  body {
+    padding: 0; }
+  .pretty-box {
+    padding: 3px; } }
diff --git a/template/footer.html b/template/footer.html
@@ -1,7 +1,5 @@
 </div>
-</div>
-<div id="footer-wrapper">
-  <div id="footer" class="pretty-box yellow">
+<footer class="pretty-box yellow">
   <p>
       Generated on DATETIME from SOURCEURL, commit <a href="https://github.com/perl6/doc/commit/SOURCECOMMIT">SOURCECOMMIT</a>.
       This is a work in progress to document Perl 6, and known to be
@@ -12,8 +10,7 @@
       <a href="https://raw.githubusercontent.com/perl6/doc/master/LICENSE">Artistic License 2.0</a>.
       The Camelia image is copyright © 2009 by Larry Wall.
   </p>
-  </div> <!-- footer -->
-</div> <!-- footer-wrapper -->
+</footer>
 
 <script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
 <script type="text/javascript" src="/js/jquery-ui.min.js"></script>

diff --git a/template/header.html b/template/header.html
@@ -16,5 +16,4 @@
       MENU
     </div>
 </div>
-<div id="content-wrapper">
-<div id="content" class="pretty-box yellow">
+<div id="content" class="pretty-box yellow">