GNOME.org
 

[gnome-continuous] Use CSS flexbox for footer layout

commit 2119611904aa503d0659421bdaf2007bce6aaa3b
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Tue Nov 12 13:44:39 2013 -0500

    Use CSS flexbox for footer layout

 extras/build.gnome.org/app.css    |   37 ++++++++++++++++++-------------------
 extras/build.gnome.org/index.html |   10 ++++------
 2 files changed, 22 insertions(+), 25 deletions(-)
---
diff --git a/extras/build.gnome.org/app.css b/extras/build.gnome.org/app.css
index fc11836..41c71fe 100644
--- a/extras/build.gnome.org/app.css
+++ b/extras/build.gnome.org/app.css
@@ -1,9 +1,12 @@
 
-html, body {
+body {
        font-family: sans-serif;
-       height: 100%;
+
        margin: 0;
-       padding: 0;
+
+       display: flex;
+       flex-direction: column;
+       min-height: 100vh;
 }
 
 h1 {
@@ -11,14 +14,22 @@ h1 {
        margin: 0;
 }
 
-.container {
-       position: relative;
-       min-height: 100%;
+.content {
+       flex: 1;
 }
 
 article {
        padding: 1em;
-       padding-bottom: 50px;
+}
+
+footer {
+       width: 100%;
+       height: 50px;
+       line-height: 50px;
+
+       text-align: center;
+       background-color: lightgray;
+       font-size: smaller;
 }
 
 .machine {
@@ -43,15 +54,3 @@ article {
        background-color: salmon;
        background-image: url(images/build-bad.svg);
 }
-
-footer {
-       position: absolute;
-       bottom: 0px;
-       width: 100%;
-       height: 50px;
-       line-height: 50px;
-
-       text-align: center;
-       background-color: lightgray;
-       font-size: smaller;
-}
diff --git a/extras/build.gnome.org/index.html b/extras/build.gnome.org/index.html
index 6e23b1c..493f45d 100644
--- a/extras/build.gnome.org/index.html
+++ b/extras/build.gnome.org/index.html
@@ -10,12 +10,10 @@
   <script src="controllers.js"></script>
 </head>
 <body>
-  <div class="container">
-    <div ng-view></div>
+  <div ng-view class="content"></div>
 
-    <footer>
-      This site is maintained in the <a 
href="http://git.gnome.org/browse/gnome-continuous";>gnome-continuous</a> git module.
-    </footer>
-  </div>
+  <footer>
+    This site is maintained in the <a 
href="http://git.gnome.org/browse/gnome-continuous";>gnome-continuous</a> git module.
+  </footer>
 </body>
 </html>
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]