social links for team members

This commit is contained in:
Matthias Kretschmann 2016-01-10 03:05:55 +01:00
parent 9e97c22fd9
commit 8729f91996
8 changed files with 121 additions and 2 deletions

View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Facebook" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M17,1H3C1.9,1,1,1.9,1,3v14c0,1.101,0.9,2,2,2h7v-7H8V9.525h2V7.475c0-2.164,1.212-3.684,3.766-3.684l1.803,0.002v2.605
h-1.197C13.378,6.398,13,7.144,13,7.836v1.69h2.568L15,12h-2v7h4c1.1,0,2-0.899,2-2V3C19,1.9,18.1,1,17,1z"/>
</svg>

After

Width:  |  Height:  |  Size: 685 B

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Github" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M13.18,11.309c-0.718,0-1.3,0.807-1.3,1.799c0,0.994,0.582,1.801,1.3,1.801s1.3-0.807,1.3-1.801
C14.479,12.116,13.898,11.309,13.18,11.309z M17.706,6.626c0.149-0.365,0.155-2.439-0.635-4.426c0,0-1.811,0.199-4.551,2.08
c-0.575-0.16-1.548-0.238-2.519-0.238c-0.973,0-1.945,0.078-2.52,0.238C4.74,2.399,2.929,2.2,2.929,2.2
C2.14,4.187,2.148,6.261,2.295,6.626C1.367,7.634,0.8,8.845,0.8,10.497c0,7.186,5.963,7.301,7.467,7.301
c0.342,0,1.018,0.002,1.734,0.002c0.715,0,1.392-0.002,1.732-0.002c1.506,0,7.467-0.115,7.467-7.301
C19.2,8.845,18.634,7.634,17.706,6.626z M10.028,16.915H9.972c-3.771,0-6.709-0.449-6.709-4.115c0-0.879,0.31-1.693,1.047-2.369
c1.227-1.127,3.305-0.531,5.662-0.531c0.01,0,0.02,0,0.029,0c0.01,0,0.018,0,0.027,0c2.357,0,4.436-0.596,5.664,0.531
c0.735,0.676,1.045,1.49,1.045,2.369C16.737,16.466,13.8,16.915,10.028,16.915z M6.821,11.309c-0.718,0-1.3,0.807-1.3,1.799
c0,0.994,0.582,1.801,1.3,1.801c0.719,0,1.301-0.807,1.301-1.801C8.122,12.116,7.54,11.309,6.821,11.309z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="LinkedIn" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M5,3c0,1.1-0.7,2-2,2C1.8,5,1,4.1,1,3.1C1,2,1.8,1,3,1S5,1.9,5,3z M1,19h4V6H1V19z M14.6,6.2c-2.1,0-3.3,1.2-3.8,2h-0.1
l-0.2-1.7H6.9C6.9,7.6,7,8.9,7,10.4V19h4v-7.1c0-0.4,0-0.7,0.1-1c0.3-0.7,0.8-1.6,1.9-1.6c1.4,0,2,1.2,2,2.8V19h4v-7.4
C19,7.9,17.1,6.2,14.6,6.2z"/>
</svg>

After

Width:  |  Height:  |  Size: 626 B

View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Twitter" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M17.316,6.246c0.008,0.162,0.011,0.326,0.011,0.488c0,4.99-3.797,10.742-10.74,10.742c-2.133,0-4.116-0.625-5.787-1.697
c0.296,0.035,0.596,0.053,0.9,0.053c1.77,0,3.397-0.604,4.688-1.615c-1.651-0.031-3.046-1.121-3.526-2.621
c0.23,0.043,0.467,0.066,0.71,0.066c0.345,0,0.679-0.045,0.995-0.131c-1.727-0.348-3.028-1.873-3.028-3.703c0-0.016,0-0.031,0-0.047
c0.509,0.283,1.092,0.453,1.71,0.473c-1.013-0.678-1.68-1.832-1.68-3.143c0-0.691,0.186-1.34,0.512-1.898
C3.942,5.498,6.725,7,9.862,7.158C9.798,6.881,9.765,6.594,9.765,6.297c0-2.084,1.689-3.773,3.774-3.773
c1.086,0,2.067,0.457,2.756,1.191c0.859-0.17,1.667-0.484,2.397-0.916c-0.282,0.881-0.881,1.621-1.66,2.088
c0.764-0.092,1.49-0.293,2.168-0.594C18.694,5.051,18.054,5.715,17.316,6.246z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -1,7 +1,7 @@
.icon {
fill: none;
stroke: $brand-main-brown;
stroke: $gray-light;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;

View File

@ -12,6 +12,7 @@
background: $gray;
width: 230px;
clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}
.team__name {
@ -32,4 +33,30 @@
.team__position {
@extend .text-dimmed;
margin-bottom: ($spacer / 2);
}
.team__social {
margin-bottom: 0;
}
.team__social__link {
display: inline-block;
margin: 0 ($spacer / 4);
.icon {
@extend .transition;
width: 1rem;
height: 1rem;
stroke: none;
fill: rgba($link-color, .4);
}
&:hover,
&:focus {
.icon--twitter { fill: #55acee }
.icon--facebook { fill: #3b5998 }
.icon--linkedin { fill: #0077b5 }
.icon--github { fill: #4183c4 }
}
}

View File

@ -2,19 +2,29 @@
- name: Bruce Pon
position: CEO
image: team-bruce.jpg
twitter: BrucePon
facebook: bruce.pon
linkedin: ponbruce
- name: Trent McConaghy
position: CTO
image: team-trent.jpg
twitter: trentmc0
facebook: trent.mcconaghy
linkedin: trentmc
github: trentmc
- name: Andreas Müller
position: Databases
image: team-andreas.jpg
linkedin: andreas-mueller-07152825
- name: Rodolphe Marques
position: Protocols
image: team-rodolphe.jpg
twitter: rodmar_
- name: Troy McConaghy
position:
position: Developer
image: team-troy.jpg
twitter: TroyMc

View File

@ -7,6 +7,44 @@
<img class="team__image" src="/assets/img/{{ member.image }}">
<h1 class="team__name">{{ member.name }}</h1>
<p class="team__position">{{ member.position }}</p>
<p class="team__social">
{% if member.twitter %}
<a class="team__social__link" href="https://twitter.com/{{ member.twitter }}">
<svg class="icon icon--twitter" aria-labelledby="title">
<title>Twitter</title>
<use xlink:href="/assets/img/sprite.svg#twitter"></use>
</svg>
</a>
{% endif %}
{% if member.facebook %}
<a class="team__social__link" href="https://facebook.com/{{ member.facebook }}">
<svg class="icon icon--facebook" aria-labelledby="title">
<title>Facebook</title>
<use xlink:href="/assets/img/sprite.svg#facebook"></use>
</svg>
</a>
{% endif %}
{% if member.github %}
<a class="team__social__link" href="https://github.com/{{ member.github }}">
<svg class="icon icon--github" aria-labelledby="title">
<title>GitHub</title>
<use xlink:href="/assets/img/sprite.svg#github"></use>
</svg>
</a>
{% endif %}
{% if member.linkedin %}
<a class="team__social__link" href="https://www.linkedin.com/in/{{ member.linkedin }}">
<svg class="icon icon--linkedin" aria-labelledby="title">
<title>LinkedIn</title>
<use xlink:href="/assets/img/sprite.svg#linkedin"></use>
</svg>
</a>
{% endif %}
</p>
</article>
</div>
{% endfor %}