Changed color of businesscard and added a bit more support for mobile view. Still broken
This commit is contained in:
parent
c800dbeb48
commit
6384e4f656
126
css/layout.css
126
css/layout.css
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 942 B After Width: | Height: | Size: 942 B |
16
index.html
16
index.html
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue