Change px to em

tighten · Oct 14, 2017 · 49ebfd0 · 49ebfd0
1 parent a09d291
commit 49ebfd0
Show file tree

Hide file tree

Showing 5 changed files with 150 additions and 53 deletions.
diff --git a/public/css/app.css b/public/css/app.css
diff --git a/public/css/app.css.map b/public/css/app.css.map
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
@@ -7,24 +7,28 @@ $body-bg: #F5F6F7;
 body {
     color: #50636C;
     font-weight: 300;
-    line-height: 30px;
+    line-height: 1.5;
 }
 
 p {
-  margin-bottom: 60px;
+  margin-bottom: 3em;
 }
 
 img {
   max-width: 100%;
 }
 
-header {
+.header, .footer {
     background: #fff;
 }
 
+.footer {
+  padding: 1em 0;
+}
+
 .ribbon {
     background: linear-gradient(-90deg, #D7516A 0%, #479CC3 100%);
-    height: 12px;
+    height: .6em;
 }
 
 .navbar-head {
@@ -34,28 +38,28 @@ header {
 
     .navbar-brand {
         height: auto;
-        margin: 50px 0;
+        margin: 2.5em 0;
         padding: 0;
     }
 
     .navbar-buttons {
         text-align: right;
     }
     .navbar-buttons .btn {
-        margin: 50px 0;
+        margin: 2.5em 0;
     }
 }
 
 .main-content {
-    padding: 4rem 0;
+    padding: 2em 0;
 }
 
 .welcome-heading {
     color: #1C313B;
-    font-size: 36px;
+    font-size: 1.8em;
     font-weight: 400;
-    line-height: 44px;
-    margin-bottom: 60px;
+    line-height: 1.5;
+    margin-bottom: 2em;
 }
 
 .sponsors-label {
@@ -66,41 +70,41 @@ header {
     text-transform: uppercase;
     &:after {
       background: #50636C;
-      bottom: 8px;
+      bottom: .5em;
       content: '';
       display: block;
-      height: 2px;
+      height: .1em;
       position: absolute;
-      right: -55px;
-      width: 50px;
+      right: -2.75em;
+      width: 2.5em;
     }
 }
 
 .sponsor {
     display: inline-block;
-    margin: 20px 60px 20px 0;
+    margin: 1em 3em 1em 0;
     img {
-        max-width: 25rem
+        max-width: 12em;
     }
 }
 
 .giscus-logo {
     clear: both;
-    max-width: 40rem;
+    max-width: 7.5em;
 
     @media only screen and (max-width: 600px) {
         width: 75%;
     }
 }
 
 .btn {
-  border: 2px solid #CACED1;
-  border-radius: 8px;
-  font-size: 20px;
-  padding: 10px 30px;
+  border: .1em solid #CACED1;
+  border-radius: .4em;
+  font-size: 1em;
+  padding: .5em 1.5em;
 
   .fa {
-    font-size: 25px;
+    font-size: 1.25em;
   }
 }
 

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -32,11 +32,22 @@
             </div>
 
         </header>
-        <div class="container">
+
+        <main class="container">
             <div class="main-content">
                 @yield('content')
             </div>
-        </div>
+        </main>
+
+        <footer class="footer">
+            <div class="container-fluid">
+                <div class="row col-md-8 col-md-push-2 text-center small">
+                    Giscus' source is on GitHub: <a href="https://github.com/tightenco/giscus">tightenco/giscus</a>.<br>
+                    By <a href="http://mattstauffer.co/">Matt Stauffer</a>, for a <a href="https://speakerdeck.com/mattstauffer/leveraging-laravel-launching-side-projects-quickly-with-laravel">talk at Laracon 2015</a>, powered by <a href="http://www.laravel.com/">Laravel</a>.<br>
+                    Logo by <a href="https://twitter.com/Caneco">Vitor Caneco</a>, with a picture of a <a href="https://en.wikipedia.org/wiki/Discus_(fish)">Discus</a> fish
+                </div>
+            </div>
+        </footer>
 
         @yield('footerScripts')