css: Improve style of contact widget and refactor (#36)

This commit is contained in:
George Cushen 2016-10-05 03:11:44 +01:00
commit 9c27ae98cf
2 changed files with 31 additions and 13 deletions

View file

@ -14,11 +14,11 @@
<div class="col-xs-12 col-md-8">
{{ with $page.Content }}<p>{{ . | markdownify }}</p>{{ end }}
<ul class="list-unstyled">
<ul class="fa-ul">
{{ with $.Site.Params.email }}
<li>
<i class="fa fa-envelope fa-fw big-icon" aria-hidden="true"></i>
<i class="fa-li fa fa-envelope fa-2x" aria-hidden="true"></i>
<span>
{{- if $autolink }}<a href="mailto:{{ . }}">{{ . }}</a>{{ else }}{{ . }}{{ end -}}
</span>
@ -27,7 +27,7 @@
{{ with $.Site.Params.keybase }}
<li>
<i class="fa fa-lock fa-fw big-icon" aria-hidden="true"></i>
<i class="fa-li fa fa-lock fa-2x" aria-hidden="true"></i>
<span>
<a href="https://keybase.io/{{ . }}" target="_blank">@{{ . }}</a> on Keybase.
</span>
@ -36,7 +36,7 @@
{{ with $.Site.Params.phone }}
<li>
<i class="fa fa-phone fa-fw big-icon" aria-hidden="true"></i>
<i class="fa-li fa fa-phone fa-2x" aria-hidden="true"></i>
<span>
{{- if $autolink }}<a href="tel:{{ . }}">{{ . }}</a>{{ else }}{{ . }}{{ end -}}
</span>
@ -45,7 +45,7 @@
{{ with $.Site.Params.address }}
<li>
<i class="fa fa-map-marker fa-fw big-icon" aria-hidden="true"></i>
<i class="fa-li fa fa-map-marker fa-2x" aria-hidden="true"></i>
<span>{{ . }}</span>
</li>
{{ end }}

View file

@ -262,7 +262,7 @@ blockquote p:last-child {
}
.big-icon {
font-size: 40px;
font-size: 2rem;
}
ul.ul-interests li {
@ -474,24 +474,25 @@ ul.share li:hover .fa {
* Projects
**************************************************/
section#projects.home-section li {
#projects.home-section li {
margin-bottom: 1rem;
}
section#projects.home-section li:last-of-type {
#projects.home-section li:last-of-type {
margin-bottom: 0;
}
section#projects.home-section .project-title {
#projects.home-section .project-title {
display: inline-block;
margin-bottom: 6px;
}
section#projects.home-section .project-summary {
#projects.home-section .project-summary {
font-size: 0.9rem;
margin-bottom: 0.4rem;
}
section#projects.home-section .project-tags {
#projects.home-section .project-tags {
font-size: 0.75rem;
color: #9c9c9c;
}
@ -500,8 +501,25 @@ section#projects.home-section .project-tags {
* Contact
**************************************************/
#contact li span {
padding-left: 10px;
#contact.home-section .fa-ul {
margin-left: 3.14285714rem; /* Must be > `fa-2x` icon size. */
}
#contact.home-section .fa-li {
position: absolute;
left: -3.14285714rem; /* Negative of `#contact.home-section .fa-ul` margin. */
width: 2rem; /* Match `fa-2x` icon size. */
top: 0.14285714em; /* Default FA value. */
text-align: center;
}
#contact.home-section li {
padding-top: 0.8rem; /* Align text with bottom of `fa-2x` icon. */
margin-bottom: 0.3rem;
}
#contact.home-section li:last-of-type {
margin-bottom: 0;
}
/*************************************************