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
committed by Dennis Potter
parent 2bd57393e5
commit 1d96b9a840
4 changed files with 99 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
css/layout.css
View File

@@ -901,19 +901,22 @@ call-to-action .button {
}
#contact .header-col { padding-top: 0px; }
#contact li {
position: relative;
font:22px/1.1em 'hackregular', monospace;
vertical-align: middle;
text-align: right;
display: inline-block;
}
#about .main-col { padding-right: 5%; }
#contact ul {
margin-top: 70px;
margin-left: 20px;
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 {
border-radius: 0px 10px 10px 0px;
background-color: #0F0F0F;
background-color: #525252;
}
#contact .contact-left {
@@ -973,27 +976,14 @@ call-to-action .button {
display: inline-block;
}
#contact-fa {
font-size: 28px;
#contact .contact-fa {
font-size: 26px;
vertical-align: top;
float: left;
}
#contact-phone {
margin-top: 3px;
float: left;
margin-left: 12px;
}
#contact-email {
margin-top: 3px;
float: left;
margin-left: 12px;
}
#contact-riot {
margin-top: 3px;
#contact .oneline {
margin-top: 1px;
float: left;
margin-left: 12px;
}
@@ -1001,26 +991,27 @@ call-to-action .button {
#contact-riot-logo {
width: 30px;
height: 30px;
background: #0F0F0F url(../images/riot.svg);
background: #525252 url(../images/riot.svg);
vertical-align: top;
margin-left: -5px;
margin-bottom: 5px;
float: left;
}
#contact-pgp {
#contact .pgp {
float: left;
margin-left: 12px;
}
/* Fixes for contact details really small screens */
@media only screen and (max-width: 380px){
#contact-pgp {
#contact .pgp {
font-size: 17px;
}
}
@media only screen and (max-width: 332px){
#contact-pgp {
#contact .pgp {
font-size: 15px;
}
}
@@ -1032,18 +1023,75 @@ call-to-action .button {
}
/* Fixes for contact details for medium sized screens */
@media only screen and (min-width: 768px) and (max-width: 1020px){
#contact-phone, #contact-email, #contact-pgp{
font-size: 15px;
}
@media (max-width: 879px){
#contact-phone{
font-size: 13px;
@media only screen and (min-width: 900px) and (max-width: 1020px){
#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;
}
#contact .oneline {
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;
}
#contact .oneline {
font-size: 13px;
}
#contact .contact-fa {
font-size: 18px;
vertical-align: top;
float: left;
}
#contact ul {
margin-left: 0px;
}
}
}
/ * Twitter Feed */
#twitter {
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">
<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">
<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"/>
<g>
<circle fill="#0F0F0F" 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
<circle fill="#525252" 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>
</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">
<ul>
<li>
<i class="fa fa-phone" id="contact-fa"></i>
<p id="contact-phone">+49 176 386 635 87</p>
<i class="fa fa-phone contact-fa" id="contact-phone"></i>
<p class="oneline">+49 176 386 635 87</p>
</li>
<li>
<i id="contact-riot-logo"></i>
<p id="contact-riot">@dennis:dennispotter.eu</p>
<p class="oneline">@dennis:dennispotter.eu</p>
</li>
<li>
<i class="fa fa-envelope" id="contact-fa"></i>
<p id="contact-email">dennis@dennispotter.eu</p>
<i class="fa fa-envelope contact-fa"></i>
<p class="oneline">dennis@dennispotter.eu</p>
</li>
<li>
<i class="fa fa-key" id="contact-fa"></i>
<p id="contact-pgp">3164 394F FBBF 6F3B AE6A<br />D43B 186A 8AD4 4094 2BAF</p>
<i class="fa fa-key contact-fa"></i>
<p class="pgp">3164 394F FBBF 6F3B AE6A<br />D43B 186A 8AD4 4094 2BAF</p>
</li>
</ul>
@@ -546,7 +546,7 @@
<div class="row">
<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>

2
js/init.js
View File

@@ -160,7 +160,7 @@
------------------------------------------------------*/
// 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");
});