Add footer & refactor css

gariasf · Feb 6, 2019 · 12124fd · 12124fd
1 parent cc5d0e0
commit 12124fd
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 55 deletions.
diff --git a/index.html b/index.html
@@ -78,7 +78,7 @@
             </a>
         </p>
     </header>
-    <div class="content">
+    <main class="content">
         <div class="content-side content-side-left">
           <div class="titles-container">
                 <div class="titles-inner-container">
@@ -121,7 +121,8 @@
         <div class="content-side content-side-right">
             <img class="rocket-image" src="./assets/undraw_upgrade_06a0.svg"></img>
         </div>
-    </div>
+    </main>
+    <footer class="footer">2019 &copy; <a href="https://nethruster.com" rel="noopener" target="_blank">Nethruster</a></footer>
     <div class="entertainment-bg"></div>
     <div class="wave-bg"></div>
 </body>

diff --git a/reset.css b/reset.css
diff --git a/style.css b/style.css
@@ -1,11 +1,67 @@
-@import './reset.css';
+/*
+* Reset
+*/
+* { box-sizing: border-box; }
+
+html {
+    font-family: sans-serif;
+    text-size-adjust: 100%;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+body {
+    word-wrap: break-word;
+    -webkit-overflow-scrolling: touch;
+    background-color: #F5F6FA;
+    color: #7C8FB5;
+    font-family: Quicksand, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+body, html { height: 100%; }
+
+html, body, div
+p,
+a,
+img,
+footer, header {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    vertical-align: baseline;
+}
+
+img { border: 0 }
+
+img, svg {
+    max-width: 100%;
+    object-fit: contain;
+    vertical-align: middle;
+}
+
+textarea {
+    resize: vertical;
+    overflow: auto;
+    vertical-align: top;
+}
+
+a { 
+    color: inherit;
+    text-decoration: none;
+    outline: none;
+}
+
+svg path { fill: #B0BFDE; }
 
 /*
 * Layout
 */
+body {
+    display: flex;
+    flex-direction: column;
+}
 .content {
     display: flex;
-    min-height: 100%;
+    flex: 1;
     padding-top: 94px;
     max-width: 80%;
     margin: 0 auto;
@@ -35,7 +91,8 @@
     width: 100%;
     height: 9%;
     background-repeat: no-repeat;
-    background-image: url(./assets/undraw_movie_night_93wl.svg); 
+    background-image: url(./assets/undraw_movie_night_93wl.svg);
+    z-index: -1;
 }
 
 .wave-bg {
@@ -48,6 +105,7 @@
     height: 100%;
     top: 0;
     z-index: -2;
+    z-index: -1;
 }
 
 .titles-container { display: flex; }
@@ -102,6 +160,24 @@
 
 .header-button-twitter:hover svg path { fill: #38A1F3; }
 
+/*
+* Footer
+*/
+.footer {
+    font-size: .9em;
+    font-weight: 500;
+    height: 36¡4px;
+    text-align: center;
+    padding: 8px 0;
+}
+
+.footer a {
+    border-bottom: 1px solid transparent;
+    transition: border-color .4s cubic-bezier(0.19, 1, 0.22, 1)
+}
+
+.footer a:hover { border-color: #7C8FB5; }
+
 /*
 * Fancy titles & text block
 */