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

Changed color of businesscard and added a bit more support for mobile view. Still broken

Browse Source
This commit is contained in:
Dennis Potter 2018-07-16 23:48:42 +02:00
parent c800dbeb48
commit 6384e4f656
4 changed files with 99 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
css/layout.css
View File

@ -901,19 +901,22 @@ call-to-action .button {
} }
#contact .header-col { padding-top: 0px; } #contact .header-col { padding-top: 0px; }
#contact li { #about .main-col { padding-right: 5%; }
position: relative;
font:22px/1.1em 'hackregular', monospace;
vertical-align: middle;
text-align: right;
display: inline-block;
}
#contact ul { #contact ul {
margin-top: 70px; margin-top: 70px;
margin-left: 20px; margin-left: 20px;
margin-bottom: 30px; margin-bottom: 30px;
color: #B2B6BA;
}
#contact li {
position: relative;
font:20px/1.1em 'hackregular', monospace;
vertical-align: middle;
text-align: right;
display: inline-block;
} }
@ -940,7 +943,7 @@ call-to-action .button {
#contact .contact-right { #contact .contact-right {
border-radius: 0px 10px 10px 0px; border-radius: 0px 10px 10px 0px;
background-color: #0F0F0F; background-color: #525252;
} }
#contact .contact-left { #contact .contact-left {
@ -973,27 +976,14 @@ call-to-action .button {
display: inline-block; display: inline-block;
} }
#contact .contact-fa {
#contact-fa { font-size: 26px;
font-size: 28px;
vertical-align: top; vertical-align: top;
float: left; float: left;
} }
#contact-phone { #contact .oneline {
margin-top: 3px; margin-top: 1px;
float: left;
margin-left: 12px;
}
#contact-email {
margin-top: 3px;
float: left;
margin-left: 12px;
}
#contact-riot {
margin-top: 3px;
float: left; float: left;
margin-left: 12px; margin-left: 12px;
} }
@ -1001,26 +991,27 @@ call-to-action .button {
#contact-riot-logo { #contact-riot-logo {
width: 30px; width: 30px;
height: 30px; height: 30px;
background: #0F0F0F url(../images/riot.svg); background: #525252 url(../images/riot.svg);
vertical-align: top; vertical-align: top;
margin-left: -5px; margin-left: -5px;
margin-bottom: 5px;
float: left; float: left;
} }
#contact-pgp { #contact .pgp {
float: left; float: left;
margin-left: 12px; margin-left: 12px;
} }
/* Fixes for contact details really small screens */ /* Fixes for contact details really small screens */
@media only screen and (max-width: 380px){ @media only screen and (max-width: 380px){
#contact-pgp { #contact .pgp {
font-size: 17px; font-size: 17px;
} }
} }
@media only screen and (max-width: 332px){ @media only screen and (max-width: 332px){
#contact-pgp { #contact .pgp {
font-size: 15px; font-size: 15px;
} }
} }
@ -1032,18 +1023,75 @@ call-to-action .button {
} }
/* Fixes for contact details for medium sized screens */ /* Fixes for contact details for medium sized screens */
@media only screen and (min-width: 768px) and (max-width: 1020px){ @media only screen and (min-width: 900px) and (max-width: 1020px){
#contact-phone, #contact-email, #contact-pgp{ #contact .pgp{
font-size: 18px;
}
#contact .oneline {
font-size: 18px;
}
#contact .contact-fa {
font-size: 25px;
vertical-align: top;
float: left;
}
#contact ul {
margin-left: 15px;
}
}
@media only screen and (min-width: 768px) and (max-width: 899px){
#contact .pgp{
font-size: 15px; font-size: 15px;
} }
@media (max-width: 879px){ #contact .oneline {
#contact-phone{ font-size: 15px;
}
#contact .contact-fa {
font-size: 22px;
vertical-align: top;
float: left;
}
#contact ul {
margin-left: 10px;
}
}
@media only screen and (max-width: 767px) {
#contact .contact-left {
display: none;
}
#contact li {
font: 13px/1.1em 'hackregular', monospace
}
#contact .pgp{
font-size: 13px; font-size: 13px;
} }
#contact .oneline {
font-size: 13px;
}
#contact .contact-fa {
font-size: 18px;
vertical-align: top;
float: left;
}
#contact ul {
margin-left: 0px;
} }
} }
/ * Twitter Feed */ / * Twitter Feed */
#twitter { #twitter {
margin-top: 12px; margin-top: 12px;

6
images/riot.svg
View File

@ -3,11 +3,11 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1440 1440" enable-background="new 0 0 1440 1440" xml:space="preserve"> viewBox="0 0 1440 1440" enable-background="new 0 0 1440 1440" xml:space="preserve">
<path fill="#636363" 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 <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"/> 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> <g>
<circle fill="#0F0F0F" cx="437.5" cy="298.8" r="160.8"/> <circle fill="#525252" cx="437.5" cy="298.8" r="160.8"/>
<path fill="#636363" 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 <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"/> 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> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 942 B

After

Width:  |  Height:  |  Size: 942 B

16
index.html
View File

@ -521,20 +521,20 @@
<div class="five columns contact-right businesscard"> <div class="five columns contact-right businesscard">
<ul> <ul>
<li> <li>
<i class="fa fa-phone" id="contact-fa"></i> <i class="fa fa-phone contact-fa" id="contact-phone"></i>
<p id="contact-phone">+49 176 386 635 87</p> <p class="oneline">+49 176 386 635 87</p>
</li> </li>
<li> <li>
<i id="contact-riot-logo"></i> <i id="contact-riot-logo"></i>
<p id="contact-riot">@dennis:dennispotter.eu</p> <p class="oneline">@dennis:dennispotter.eu</p>
</li> </li>
<li> <li>
<i class="fa fa-envelope" id="contact-fa"></i> <i class="fa fa-envelope contact-fa"></i>
<p id="contact-email">dennis@dennispotter.eu</p> <p class="oneline">dennis@dennispotter.eu</p>
</li> </li>
<li> <li>
<i class="fa fa-key" id="contact-fa"></i> <i class="fa fa-key contact-fa"></i>
<p id="contact-pgp">3164 394F FBBF 6F3B AE6A<br />D43B 186A 8AD4 4094 2BAF</p> <p class="pgp">3164 394F FBBF 6F3B AE6A<br />D43B 186A 8AD4 4094 2BAF</p>
</li> </li>
</ul> </ul>
@ -546,7 +546,7 @@
<div class="row"> <div class="row">
<div class="twelve columns" style="text-align: center; margin-top: 40px;"> <div class="twelve columns" style="text-align: center; margin-top: 40px;">
<i>Download my information as vCard</i> <i>Download my vCard | Download my Public PGP Key</i>
</div> </div>
</div> </div>

2
js/init.js
View File

@ -160,7 +160,7 @@
------------------------------------------------------*/ ------------------------------------------------------*/
// Adapt Riot logo to format of fontawesome icons // Adapt Riot logo to format of fontawesome icons
var faHeight = document.getElementById('contact-fa').clientHeight * 1.3; var faHeight = document.getElementById('contact-phone').clientHeight * 1.3;
document.getElementById('contact-riot-logo').setAttribute("style","height:"+faHeight+"px; width:"+faHeight+"px"); document.getElementById('contact-riot-logo').setAttribute("style","height:"+faHeight+"px; width:"+faHeight+"px");
}); });