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
This commit is contained in:
parent
abc94b21fd
commit
e1e1746885
150
css/layout.css
150
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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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>
|
||||
|
||||
|
Before Width: | Height: | Size: 942 B After Width: | Height: | Size: 942 B |
13
index.html
13
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,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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user