Mobile view is working

Mobile view is working but needs some more work. Added Public PGP key
link.

Work yet to be done in contact section:
* Make all links working
* Check several mobile views
* Clean up code. There is quite some code which can be merged and there
  is a lot of obsolete css

css/layout.css

@@ -243,7 +243,7 @@ ul#nav li.current a { color: #11ABB0; }
 #about a:hover, #about a:focus { color: #11ABB0; }
 
 #about h2 {
-   font: 32px/30px 'librebaskerville-italic', serif;
+   font: 30px/30px 'librebaskerville-italic', serif;
    color: #fff;
    margin-bottom: 12px;
 }
@@ -879,8 +879,8 @@ call-to-action .button {
 }
 #contact .section-head { margin-bottom: 20px; }
 
-#contact a, #contact a:visited  { color: #11ABB0; }
+#contact a, #contact a:visited  { color: #636363; }
-#contact a:hover, #contact a:focus { color: #fff; }
+#contact a:hover, #contact a:focus { color: #636363; }
 
 #contact h1 {
    font: 39px/50px 'librebaskerville-italic', serif;
@@ -943,12 +943,19 @@ call-to-action .button {
 
 #contact .contact-right {
    border-radius: 0px 10px 10px 0px;
-   background-color: #525252;
+   background-color: #303030;
+   -webkit-box-shadow: 10px 20px 25px -13px rgba(0,0,0,0.75);
+   -moz-box-shadow: 10px 20px 25px -13px rgba(0,0,0,0.75);
+   box-shadow: 10px 20px 25px -13px rgba(0,0,0,0.75);
 }
 
 #contact .contact-left {
    border-radius: 10px 0px 0px 10px;
+   margin-left: 8%;
    background-color: #EBEEEE;
+   -webkit-box-shadow: 10px 20px 25px -13px rgba(0,0,0,0.75);
+   -moz-box-shadow: 10px 20px 25px -13px rgba(0,0,0,0.75);
+   box-shadow: 10px 20px 25px -13px rgba(0,0,0,0.75);
 }
 
 #contact-social-list > li {
@@ -965,7 +972,7 @@ call-to-action .button {
     color: #0F0F0F;
 } 
 #contact-social-list a:hover {
-    color: #11ABB0;
+    color: #0F0F0F;
 } 
 
 #contact .businesscard {
@@ -991,7 +998,7 @@ call-to-action .button {
 #contact-riot-logo {
    width: 30px;
    height: 30px;
-   background: #525252 url(../images/riot.svg);
+   background: #303030 url(../images/riot.svg);
    vertical-align: top;
    margin-left: -5px;
    margin-bottom: 5px;
@@ -1003,6 +1010,11 @@ call-to-action .button {
    margin-left: 12px;
 }
 
+#contact .download {
+    margin-top: 40px;
+    text-align: center;
+}
+
 /* Fixes for contact details really small screens */
 @media only screen and (max-width: 380px){
   #contact .pgp {
@@ -1043,7 +1055,8 @@ call-to-action .button {
     }
 }
 
-@media only screen and (min-width: 768px) and (max-width: 899px){
+/* @media only screen and (min-width: 768px) and (max-width: 899px){ */
+@media only screen and (max-width: 899px){
     #contact .pgp{
         font-size: 15px;
     }
@@ -1065,19 +1078,49 @@ call-to-action .button {
 
 @media only screen and (max-width: 767px) {
     #contact .contact-left {
+        border-radius: 10px 10px 0px 0px;
+        background-color: #303030;
+        margin-left: 0%;
+    }
+
+    #row-businesscard {
+        display: block;
+        margin: 0 8% 0 8%;
+    }
+
+    #contact .name {
         display: none;
     }
 
+    #contact .profile-pic { 
+        margin: 0px auto 0 auto;
+        padding-top: 20px;
+        width: 90px;
+    }
+
+    .pgp {
+        display: none;
+    }
+
+    .fa-key {
+        display: none;
+    }
+
+    .contacttext {
+        display: none;
+    }
+
+    #contact .contact-right {
+        border-radius: 0px 0px 10px 10px;
+    }
+
     #contact li {
-        font: 13px/1.1em 'hackregular', monospace
+        font: 13px/1.3em 'hackregular', monospace;
+        margin-bottom: 5px;
     }
 
-    #contact .pgp{
+    #contact li a{
-        font-size: 13px;
+        color: #fff !important;
-    }
-
-    #contact .oneline {
-        font-size: 13px;
     }
 
     #contact .contact-fa {
@@ -1087,29 +1130,72 @@ call-to-action .button {
     }
 
     #contact  ul { 
+        margin-top: 0px;
+        margin-bottom: 0px;
         margin-left: 0px;
+        padding-top: 25px;
+    }
+
+    #contact .download {
+        margin-top: 20px;
+    }
+
+    #contact .businesscard {
+        margin-top: 0px;
+    }
+
+    #contact-social-list > li {
+        margin: 20px 10px;
+    }
+    #contact-social-list {
+        text-align: center;
+        color: #0F0F0F;
+    } 
+    #contact-social-list a {
+        color: #FFFFFF;
+    } 
+    #contact-social-list a:visited {
+        color: #FFFFFF;
+    } 
+    #contact-social-list a:hover {
+        color: #11ABB0;
+    } 
+
+}
+@media only screen and (max-width: 360px) {
+    #contact {
+        padding-top: 55px;
+    }
+
+    #contact .download {
+        font-size: 13px;
+    }
+
+    #contact .oneline {
+        font-size: 14px;
+    }
+
+    #contact .section-head h1 {
+       font: 14px/24px 'librebaskerville-italic', serif;            
+    }
+}
+
+@media only screen and (max-width: 360px) and (min-height: 600px) {
+    #contact {
+        padding-top: 80px;
     }
 
 }
 
-/ * Twitter Feed */
+@media only screen and (max-width: 328px) {
-#twitter {
+    #contact .download {
-   margin-top: 12px;
+        font-size: 12px;
-   padding: 0;
-}
-#twitter li {
-   margin: 6px 0px 12px 0;
-   line-height: 30px;
-}
-#twitter li span {
-   display: block;
-}
-#twitter li b a {
-   font: 13px/36px 'opensans-regular', Sans-serif;
-   color: #474747 !important;
-   border: none;
     }
 
+    #contact .oneline {
+        font-size: 12px;
+    }
+}
 
 /* ------------------------------------------------------------------ */
 /* i. Footer
@@ -1180,7 +1266,7 @@ footer .social-links li:first-child { margin-left: 0; }
 	display: block;
 	width: 60px;
 	height: 60px;
-	background-color: #525252;
+	background-color: #303030;
 
 	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;

css/media-queries.css

@@ -96,7 +96,7 @@
       font-size: 66px;
       line-height: 66px;
    }
-   #contact .section-head p.lead { font: 17px/33px opensans-light, sans-serif; }
+   #contact .section-head p.lead { font: 20px/33px 'librebaskerville-italic', serif; }
 
 
 }
@@ -300,7 +300,7 @@
    #contact { padding-bottom: 66px; }
    #contact .section-head { margin-bottom: 12px; }
    #contact .section-head h1 {
-      font: 16px/24px 'opensans-bold', sans-serif;            
+      font: 19px/24px 'librebaskerville-italic', serif;            
       text-align: center;   
       margin-bottom: 30px;
       text-shadow: 0px 1px 3px rgba(0, 0, 0, 1);

images/riot.svg

@@ -6,7 +6,7 @@
 <path fill="#B2B6BA" d="M761.5,142.1H442c-0.7,0-1.3-0.1-2-0.1c-88.8,0-160.8,72-160.8,160.8v803.9c0,88.8,72,160.8,160.8,160.8
 	s160.8-72,160.8-160.8V945.8h160.7c221.6,0,401.8-180.3,401.8-401.8S983.1,142.1,761.5,142.1z"/>
 <g>
-	<circle fill="#525252" cx="437.5" cy="298.8" r="160.8"/>
+	<circle fill="#303030" cx="437.5" cy="298.8" r="160.8"/>
 	<path fill="#B2B6BA" d="M1134.3,1014.4c50.9,72.7,33.3,173-39.5,223.9c-72.7,50.9-173,33.3-223.9-39.5l-240.8-344
 		c-50.9-72.7-33.3-173,39.5-223.9c72.7-50.9,173-33.3,223.9,39.5L1134.3,1014.4z"/>
 </g>

index.html

@@ -494,9 +494,7 @@
        <div class="twelve columns header-col">
          <h1>Get in Touch</h1>
        </div>
-     </div>
 
-     <div class="row">
        <div class="twelve columns">
          <p class="contacttext">Do you have any further questions? Please don't hesitate to reach out to me!
          </p>
@@ -505,7 +503,6 @@
 
        <!-- Contact details -->
      <div class="row" id="row-businesscard">
-        <div class="one columns"></div>
              <div class="five columns contact-left businesscard">
                <img class="profile-pic"  src="images/profilepic.jpg" alt="" />
                <p class="name">Dennis Potter</p>
@@ -530,7 +527,7 @@
                       </li>
                       <li>
                           <i class="fa fa-envelope contact-fa"></i>
-                          <p class="oneline">dennis@dennispotter.eu</p>
+                          <p class="oneline"><a href="mailto:dennis@dennispotter.eu">dennis@dennispotter.eu</a></p>
                      </li>
                       <li>
                           <i class="fa fa-key contact-fa"></i>
@@ -541,12 +538,12 @@
              </div>
 
 
-        <div class="one columns"></div>
     </div>
 
     <div class="row">
-         <div class="twelve columns" style="text-align: center; margin-top: 40px;">
+         <div class="twelve columns download">
-              <i>Download my vCard | Download my Public PGP Key</i>
+              <i>Download vCard | 
+              <a href="contact/public_pgp_dennis_potter.asc">Download Public PGP Key</a></i>
          </div>
     </div>