Add mobile responsivity to hero

carolinaknoll · Mar 11, 2016 · ec445eb · ec445eb
1 parent 7707bd7
commit ec445eb
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 6 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -137,7 +137,7 @@ h3 {
   left: 50%;
   padding: 20px;
   /*  resize: both; */
-  overflow: auto;
+  overflow: hidden;
   color: #FFF;
   font-weight: 300;
   line-height: 1;
@@ -166,9 +166,9 @@ h3 {
 .hero-block .fa {
   border: 6px solid #DEDEDE;
   border-radius: 50%;
-  padding: 15px;
+  padding: 10px;
   /* margin: 10px; */
-  width: 35px;
+  width: 25px;
   color: #fff;
 }
 
@@ -178,8 +178,9 @@ h3 {
 }
 
 .hero-anchor .fa {
+  font-size: .8em;
   position: absolute;
-  bottom: 220px;
+  bottom: 120px;
   margin-left: -40px;
   color: #737274;
 }
@@ -631,9 +632,29 @@ h3 {
     min-height: 400px;
   }
   .hero-block {
-    max-height: 150px;
+    max-height: 300px;
     transition: 0.5s;
   }
+  .hero ul li {
+    display: inline;
+    padding: 0;
+    margin: 0;
+  }
+  .hero-block .fa {
+    border: 4px solid #DEDEDE;
+    border-radius: 50%;
+    padding: 8px;
+    width: 35px;
+    font-size: 1em;
+    color: #fff;
+  }
+  .hero-anchor .fa {
+    font-size: .6em;
+    position: absolute;
+    bottom: 20px;
+    margin-left: -20px;
+    color: #737274;
+  }
 
 }
 
@@ -691,6 +712,21 @@ h3 {
   .hero-block h1 {
     font-size: 2.6em;
   }
+  .hero-block .fa {
+    border: 5px solid #DEDEDE;
+    border-radius: 50%;
+    padding: 10px;
+    width: 35px;
+    font-size: 1em;
+    color: #fff;
+  }
+  .hero-anchor .fa {
+    font-size: .8em;
+    position: absolute;
+    bottom: 20px;
+    margin-left: -20px;
+    color: #737274;
+  }
   .three-rules-block {
     width: 80%;
     height: 80%;
@@ -768,6 +804,29 @@ h3 {
     font-weight: 300;
     text-shadow: 1px 2px 3px #111;
   }
+
+  .hero-block ul li {
+    list-style: none;
+    display: inline;
+    padding-right: 1em;
+    font-size: 2em;
+  }
+
+  .hero-block .fa {
+    border: 6px solid #DEDEDE;
+    border-radius: 50%;
+    padding: 15px;
+    width: 35px;
+    color: #fff;
+  }
+
+  .hero-anchor .fa {
+    font-size: 1em;
+    position: absolute;
+    bottom: 220px;
+    margin-left: -40px;
+    color: #737274;
+  }
 }
 
 @media screen and (min-width: 1100px) {

diff --git a/index.html b/index.html
@@ -25,7 +25,7 @@
         <div class="container"> -->
       <div class="header-inner">
         <h2 class="header-logo">
-          <a href="#home"><i class="fa fa-github-alt"></i> Carolina Knoll</a>
+          <a href="#home">Carolina Knoll</a>
         </h2>
         <a id="menu" class="header-menu">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">