Improve layout

tiagoporto · Feb 16, 2017 · f107099 · f107099
1 parent d03ccc7
commit f107099
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 3 deletions.
diff --git a/dist/css/demo.css b/dist/css/demo.css
@@ -267,6 +267,40 @@ i[class^="icon-"] {
             transform: rotate(10deg);
   }
 }
+.header {
+  width: auto;
+  max-width: 900px;
+  float: none;
+  display: block;
+  margin-right: auto;
+  margin-left: auto;
+  padding-left: 0;
+  padding-right: 0;
+  margin-bottom: 3em;
+}
+.header::after {
+  content: '';
+  display: table;
+  clear: both;
+}
+.footer {
+  width: auto;
+  max-width: 900px;
+  float: none;
+  display: block;
+  margin-right: auto;
+  margin-left: auto;
+  padding-left: 0;
+  padding-right: 0;
+  text-align: center;
+  font-size: 1.2em;
+  margin-bottom: 1.5em;
+}
+.footer::after {
+  content: '';
+  display: table;
+  clear: both;
+}
 .main {
   width: auto;
   max-width: 900px;

diff --git a/dist/css/demo.min.css b/dist/css/demo.min.css
diff --git a/src/handlebars/includes/footer.hbs b/src/handlebars/includes/footer.hbs
@@ -1,4 +1,4 @@
-        <footer>
+        <footer class="footer">
         Copyright © 2014 - <span id="year"></span> Tiago Porto
         </footer>
 

diff --git a/src/handlebars/includes/header.hbs b/src/handlebars/includes/header.hbs
@@ -36,7 +36,7 @@
         <!-- endbuild -->
     </head>
     <body>
-        <header>
+        <header class="header">
             <h1>Accessibility Buttons</h1>
 
             <p>Buttons to add/remove contrast and increase/decrease font size.</p>

diff --git a/src/stylesheets/components/_footer.styl b/src/stylesheets/components/_footer.styl
@@ -0,0 +1,5 @@
+.footer
+  center(900px)
+  text-align: center
+  font-size: 1.2em
+  trailer(1)
diff --git a/src/stylesheets/components/_header.styl b/src/stylesheets/components/_header.styl
@@ -0,0 +1,3 @@
+.header
+  center(900px)
+  trailer(2)
diff --git a/src/stylesheets/components/_index.styl b/src/stylesheets/components/_index.styl
@@ -1,2 +1,4 @@
 @import "_github-corner"
+@import "_header"
+@import "_footer"
 @import "_main"