Refactor

Author: amarinelli

Diff for: css/media.css

@@ -1,11 +1,11 @@
-html, body, {
+html, body {
     height: 100%;
 }
 
 body {
     margin: 0;
     color: #FFF;
-    font: normal 16px/1.2 "Roboto", Helvetica, Arial, sans-serif;
+    font-family: 'Source Sans Pro', sans-serif;
     text-align: center;
     text-shadow: 1px 1px #000;
     background: #111 url('../images/mountains.jpg') no-repeat center center fixed;
@@ -19,6 +19,52 @@ body {
     padding: 175px 20px 15px;
 }
 
+h3 {
+    margin: 0;
+    font-weight: 600;
+    font-size: 10vw;
+    display: block;
+}
+
+h3::selection {
+    background: black;
+}
+
+.text-area {
+    display: block;
+}
+
+h4 {
+    margin: 0;
+    font-weight: 400;
+    font-size: 4vw;
+    display: block;
+    padding-top: 20px;
+}
+
+h4>span::selection {
+    background: black;
+}
+
+.highlight {
+    background: linear-gradient(180deg,rgba(255,255,255,0) 65%, #000000 0%)
+}
+
+.text-area-lower {
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    right: 0;    
+    display: flex;
+    justify-content: center;
+    padding-bottom: 10px;;
+}
+
+.image {
+    width: 9vw;
+    max-width: 85px;
+}
+
 .fade-in {
     opacity: 0;
     -webkit-animation: fadeIn ease-in 1;
@@ -38,8 +84,29 @@ body {
     animation-delay: 0.5s;
 }
 
-h3::selection {
-    background: black;
+.text-subtitle {
+    -webkit-animation-delay: 0.7s;
+    -moz-animation-delay: 0.7s;
+    animation-delay: 0.7s;
+}
+
+@media (max-width: 650px) {
+    html {
+        height: 100%;
+    }
+    h3{
+        font-size: 20vw;
+    }
+    h4{
+        font-size: 8vw;
+    }
+    .container {
+        padding-top: 25%;
+    }
+    .image {
+        width: 15vw;
+        max-width: 85px;
+    }
 }
 
 @-webkit-keyframes fadeIn {
@@ -74,23 +141,3 @@ h3::selection {
         -webkit-transform: translateY(20px);
     }
 }
-
-h3 {
-    font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
-    margin: 0;
-    font-weight: 400;
-    font-size: 8em;
-    display: block;
-}
-
-.github-icon {
-    position: fixed;
-    bottom: 15px;
-    left: 15px;
-}
-
-.laylow-icon {
-    position: fixed;
-    bottom: 15px;
-    right: 15px;
-}

Diff for: css/style.css

@@ -11,8 +11,7 @@
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
     <link rel="stylesheet" href="css/style.css">
-    <link rel="stylesheet" href="css/media.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab|Roboto">
+    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js" data-require="angular.js@*"
         data-semver="1.3.9"></script>
@@ -31,10 +30,16 @@ <h3>{{greeting}}</h3>
         </div>
     </div>
 
-    <div>
-        <a class="github-icon" href="https://github.com/amarinelli"><img src="images/GitHub-Mark-Light-64px.png" height="64"
-                width="64" alt="GitHub Icon" /></a>
-        <a class="laylow-icon" href="https://laylow.beer"><img src="images/Laylow-64px.png" height="64" width="64" alt="Laylow Icon" /></a>
+    <div class="text-area">
+        <div class="fade-in text-subtitle">
+            <h4><span class="highlight">Adam Marinelli</span></h4>
+        </div>
+    </div>
+
+    <div class="text-area-lower">
+        <a class="noSelect" rel="noopener" href="https://laylow.beer" target="_blank">
+            <img class="image" src="https://laylow.beer/img/logo-192x192.png"></img>
+        </a>
     </div>
 
 </body>

Diff for: images/GitHub-Mark-32px.png

@@ -1,4 +1,4 @@
-(function(angular) {
+(function (angular) {
 
     // The module code
     angular
@@ -8,7 +8,7 @@
     // The controller code
     function MainController($scope, $http) {
 
-        $scope.greeting = "Hello ...";
+        $scope.greeting = "Hello";
 
     }