From e1e174688574d07875049523b8345499ffc9fd50 Mon Sep 17 00:00:00 2001 From: Dennis Date: Tue, 17 Jul 2018 01:10:02 +0200 Subject: [PATCH] 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 | 150 +++++++++++++++++++++++++++++++++--------- css/media-queries.css | 4 +- images/riot.svg | 2 +- index.html | 13 ++-- 4 files changed, 126 insertions(+), 43 deletions(-) diff --git a/css/layout.css b/css/layout.css index 13152d7..316c574 100755 --- a/css/layout.css +++ b/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:hover, #contact a:focus { color: #fff; } +#contact a, #contact a:visited { color: #636363; } +#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{ - font-size: 13px; - } - - #contact .oneline { - font-size: 13px; + #contact li a{ + color: #fff !important; } #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 */ -#twitter { - margin-top: 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; -} +@media only screen and (max-width: 328px) { + #contact .download { + font-size: 12px; + } + #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; diff --git a/css/media-queries.css b/css/media-queries.css index 272b8bc..d9b361f 100755 --- a/css/media-queries.css +++ b/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); diff --git a/images/riot.svg b/images/riot.svg index 280445e..238d8ba 100644 --- a/images/riot.svg +++ b/images/riot.svg @@ -6,7 +6,7 @@ - + diff --git a/index.html b/index.html index e59fc13..487e810 100755 --- a/index.html +++ b/index.html @@ -494,9 +494,7 @@

Get in Touch

- -

Do you have any further questions? Please don't hesitate to reach out to me!

@@ -505,7 +503,6 @@
-

Dennis Potter

@@ -530,8 +527,8 @@
  • -

    dennis@dennispotter.eu

    -
    • +

    dennis@dennispotter.eu

    +

  • 3164 394F FBBF 6F3B AE6A
    D43B 186A 8AD4 4094 2BAF

    @@ -541,12 +538,12 @@
    • -
    -
    - Download my vCard | Download my Public PGP Key +
    + Download vCard | + Download Public PGP Key