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 d1f314df4a
commit bf1a62fad2
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);