Dennis/dennispotter-cv
1
0
Fork 0
Code Issues 4 Pull Requests Releases Activity

Mobile view is working

Browse Source 
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
This commit is contained in:
Dennis Potter
2018-07-17 01:10:02 +02:00
committed by Dennis Potter
parent c7a7278561
commit af0267371e
4 changed files with 126 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
css/layout.css
View File

@@ -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;

4
css/media-queries.css
View File

@@ -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);

2
images/riot.svg
View File

@@ -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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 942 B

After

Width:  |  Height:  |  Size: 942 B

13
index.html
View File

@@ -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,8 +527,8 @@
</li>
<li>
<i class="fa fa-envelope contact-fa"></i>
<p class="oneline">dennis@dennispotter.eu</p>
</li>
<p class="oneline"><a href="mailto:dennis@dennispotter.eu">dennis@dennispotter.eu</a></p>
</li>
<li>
<i class="fa fa-key contact-fa"></i>
<p class="pgp">3164 394F FBBF 6F3B AE6A<br />D43B 186A 8AD4 4094 2BAF</p>
@@ -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;">
<i>Download my vCard | Download my Public PGP Key</i>
<div class="twelve columns download">
<i>Download vCard |
<a href="contact/public_pgp_dennis_potter.asc">Download Public PGP Key</a></i>
</div>
</div>