1
0
mirror of https://github.com/ipdb/website.git synced 2024-11-13 16:54:50 +01:00

add social icons, add contact data to contact page

This commit is contained in:
Matthias Kretschmann 2017-08-30 18:43:08 +02:00
parent fb2895a681
commit ea2213d171
Signed by: m
GPG Key ID: 606EEEF3C479A91F
18 changed files with 185 additions and 38 deletions

View File

@ -3,23 +3,18 @@
title: "IPDB"
description: "The Interplanetary Database."
url: "https://ipdb.io"
email: "contact@ipdb.io"
github:
org: "ipdb"
repo: "site"
analyticsID: ""
typekitID: "bko7hwo"
signup:
button: Sign up for free (testnet)
button_short: Sign up
link: https://developers.ipdb.io/signup?plan_ids[]=2357355879577
button: "Sign up for free (testnet)"
button_short: "Sign up"
link: "https://developers.ipdb.io/signup?plan_ids[]=2357355879577"
login:
button: Log in
link: https://developers.ipdb.io/login
button: "Log in"
link: "https://developers.ipdb.io/login"
# Form actions
forms:

View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<g fill="#000000" fill-rule="nonzero" transform="translate(0 .833)">
<path d="M.2575 7.94833333C.1 8.01333333-.00166666667 8.1675 0 8.33916667.00166666667 8.50833333.106666667 8.66.265833333 8.72166667L7.18416667 11.4125 19.2916667.0866666667.2575 7.94833333zM7.50833333 12.25L7.5 12.2416667 7.5 17.9166667C7.5 18.145 7.68416667 18.3333333 7.91666667 18.3333333 8.06166667 18.3333333 8.20083333 18.2566667 8.27666667 18.1266667L11.0158333 13.43 16.0491667 16.1975C16.1675 16.2641667 16.3083333 16.265 16.4225 16.2125 16.5425 16.1583333 16.6291667 16.0508333 16.6566667 15.9208333L19.9716667.591666667 7.50833333 12.25z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 732 B

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path fill="#000000" d="M16,0 L2,0 C0.9,0 0,0.9 0,2 L0,16 C0,17.101 0.9,18 2,18 L9,18 L9,11 L7,11 L7,8.525 L9,8.525 L9,6.475 C9,4.311 10.212,2.791 12.766,2.791 L14.569,2.793 L14.569,5.398 L13.372,5.398 C12.378,5.398 12,6.144 12,6.836 L12,8.526 L14.568,8.526 L14,11 L12,11 L12,18 L16,18 C17.1,18 18,17.101 18,16 L18,2 C18,0.9 17.1,0 16,0 Z" transform="translate(1 1)"/>
</svg>

After

Width:  |  Height:  |  Size: 462 B

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path fill="#000000" d="M13.1948822,9.31951126 C12.4760715,9.31951126 11.8934143,10.1274225 11.8934143,11.1205426 C11.8934143,12.115665 12.4760715,12.9235762 13.1948822,12.9235762 C13.9136929,12.9235762 14.4963501,12.115665 14.4963501,11.1205426 C14.495349,10.1274225 13.9136929,9.31951126 13.1948822,9.31951126 Z M17.7259927,4.63122345 C17.875161,4.26581131 17.8811678,2.18946945 17.0902757,0.20022583 C17.0902757,0.20022583 15.2772308,0.399450531 12.534137,2.28257446 C11.9584877,2.1223938 10.984389,2.04430573 10.0122926,2.04430573 C9.03819397,2.04430573 8.06509644,2.1223938 7.48944717,2.28257446 C4.74535217,0.399450531 2.93230728,0.20022583 2.93230728,0.20022583 C2.14241638,2.18946945 2.15042542,4.26581131 2.2975914,4.63122345 C1.36854355,5.64036163 0.80090332,6.85272903 0.80090332,8.50659439 C0.80090332,15.7007085 6.77063644,15.8158383 8.27633469,15.8158383 C8.61872086,15.8158383 9.29548416,15.8178406 10.0122926,15.8178406 C10.7281,15.8178406 11.4058644,15.8158383 11.7462483,15.8158383 C13.2539488,15.8158383 19.2216797,15.7007085 19.2216797,8.50659439 C19.2216797,6.85272903 18.6550406,5.64036163 17.7259927,4.63122345 Z M10.0393231,14.9318413 L9.98325989,14.9318413 C6.20800186,14.9318413 3.26668442,14.4823343 3.26668442,10.8121948 C3.26668442,9.9322023 3.57703445,9.11728317 4.31486664,8.44051987 C5.54325211,7.31224731 7.62359848,7.90892029 9.98325989,7.90892029 C9.99327118,7.90892029 10.0032825,7.90892029 10.0122926,7.90892029 C10.0223039,7.90892029 10.030313,7.90892029 10.0393231,7.90892029 C12.3989845,7.90892029 14.480332,7.31224731 15.7097186,8.44051987 C16.4455486,9.11728317 16.7558986,9.9322023 16.7558986,10.8121948 C16.7558986,14.4823343 13.8155823,14.9318413 10.0393231,14.9318413 Z M6.82870193,9.31951126 C6.1098912,9.31951126 5.52723404,10.1274225 5.52723404,11.1205426 C5.52723404,12.115665 6.1098912,12.9235762 6.82870193,12.9235762 C7.54851379,12.9235762 8.13117096,12.115665 8.13117096,11.1205426 C8.13117096,10.1274225 7.54851379,9.31951126 6.82870193,9.31951126 Z" transform="translate(0 1.991)"/>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path fill="#000000" d="M4,2 C4,3.1 3.3,4 2,4 C0.8,4 0,3.1 0,2.1 C0,1 0.8,0 2,0 C3.2,0 4,0.9 4,2 Z M0,18 L4,18 L4,5 L0,5 L0,18 Z M13.6,5.2 C11.5,5.2 10.3,6.4 9.8,7.2 L9.7,7.2 L9.5,5.5 L5.9,5.5 C5.9,6.6 6,7.9 6,9.4 L6,18 L10,18 L10,10.9 C10,10.5 10,10.2 10.1,9.9 C10.4,9.2 10.9,8.3 12,8.3 C13.4,8.3 14,9.5 14,11.1 L14,18 L18,18 L18,10.6 C18,6.9 16.1,5.2 13.6,5.2 Z" transform="translate(1 1)"/>
</svg>

After

Width:  |  Height:  |  Size: 487 B

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<path fill="#000000" d="M17.316,4.246 C17.324,4.408 17.327,4.572 17.327,4.734 C17.327,9.724 13.53,15.476 6.587,15.476 C4.454,15.476 2.471,14.851 0.8,13.779 C1.096,13.814 1.396,13.832 1.7,13.832 C3.47,13.832 5.097,13.228 6.388,12.217 C4.737,12.186 3.342,11.096 2.862,9.596 C3.092,9.639 3.329,9.662 3.572,9.662 C3.917,9.662 4.251,9.617 4.567,9.531 C2.84,9.183 1.539,7.658 1.539,5.828 C1.539,5.812 1.539,5.797 1.539,5.781 C2.048,6.064 2.631,6.234 3.249,6.254 C2.236,5.576 1.569,4.422 1.569,3.111 C1.569,2.42 1.755,1.771 2.081,1.213 C3.942,3.498 6.725,5 9.862,5.158 C9.798,4.881 9.765,4.594 9.765,4.297 C9.765,2.213 11.454,0.524 13.539,0.524 C14.625,0.524 15.606,0.981 16.295,1.715 C17.154,1.545 17.962,1.231 18.692,0.799 C18.41,1.68 17.811,2.42 17.032,2.887 C17.796,2.795 18.522,2.594 19.2,2.293 C18.694,3.051 18.054,3.715 17.316,4.246 Z" transform="translate(0 2)"/>
</svg>

After

Width:  |  Height:  |  Size: 958 B

View File

@ -44,9 +44,15 @@ $avatar-size: 100px;
text-align: center;
a {
display: block;
display: inline-block;
margin: 0 $spacer / 4;
}
}
.icon {
width: $font-size-small;
height: $font-size-small;
}
}
.boardmember__bio {

View File

@ -93,12 +93,13 @@
border-color: $brand-failure;
}
}
}
textarea {
// for textarea-autogrow
resize: none;
box-sizing: content-box;
&textarea {
// for textarea-autogrow
resize: none;
box-sizing: content-box;
max-width: 95%;
}
}
.form__help {

View File

@ -0,0 +1,13 @@
.icon {
fill: $brand-01;
stroke: none;
width: $font-size-small;
height: $font-size-small;
vertical-align: baseline;
margin-bottom: -.05rem;
}
.icon--sm {
width: .5rem;
height: .5rem;
}

View File

@ -107,6 +107,7 @@ strong {
a {
color: $link-color;
text-decoration: none;
transition: .15s ease-out;
&:hover,
&:focus {

View File

@ -8,6 +8,7 @@
@import 'forms';
@import 'code';
@import 'media';
@import 'icons';
@import 'sections';
@import 'header';
@import 'menus';
@ -18,3 +19,30 @@
.content--page--markdown {
padding-top: $spacer * 2;
}
.social-list {
margin: 0;
padding: 0;
li { display: inline; }
a {
display: inline-block;
padding: $spacer / 4 0;
margin: 0 $spacer / 2;
&:hover,
&:focus {
transform: translateY(-1px);
}
&:active {
transform: translateY(0);
}
}
.icon {
width: $font-size-base;
height: $font-size-base;
}
}

View File

@ -0,0 +1,6 @@
@import 'variables';
.company__name {
font-size: $font-size-large;
margin-bottom: $spacer / 4;
}

20
_src/_data/contact.yml Normal file
View File

@ -0,0 +1,20 @@
name: "IPDB Foundation e.V."
address:
street: "Wichertstraße 14a"
zip: "10439"
city: "Berlin"
country: "Germany"
email: "contact@ipdb.io"
# All the social links
social:
- name: "Twitter"
link: "https://twitter.com/ipdbfoundation"
- name: "Facebook"
link: "https://facebook.com/ipdbfoundation"
- name: "LinkedIn"
link: "https://www.linkedin.com/company/7963161"
- name: "GitHub"
link: "https://github.com/ipdb"
org: "ipdb"
repo: "site"

View File

@ -21,7 +21,12 @@
{% if member.social %}
<p class="boardmember__social">
{% for item in member.social %}
<a href="{{ item.link }}">{{ item.name }}</a>
<a href="{{ item.link }}" title="{{ item.name }}">
<svg class="icon" aria-labelledby="title">
<title>{{ item.name }}</title>
<use xlink:href="/assets/img/sprite.svg#icon-{{ item.name | downcase }}"></use>
</svg>
</a>
{% endfor %}
</p>
{% endif %}

View File

@ -1,20 +1,56 @@
<form class="form" action="{{ config.site.forms.contact }}">
<div class="form__group required">
<label class="form__label" for="name">Your Name</label>
<input class="form__control" type="text" id="name" name="name" required placeholder=" ">
<div class="grid grid--full grid-medium--columns grid--gutters">
<div class="grid__col grid__col--4">
<form class="form" action="{{ config.site.forms.contact }}">
<div class="form__group required">
<label class="form__label" for="name">Your Name</label>
<input class="form__control" type="text" id="name" name="name" required placeholder=" ">
</div>
<div class="form__group required">
<label class="form__label" for="email">Your Email</label>
<input class="form__control" type="email" id="email" name="email" required placeholder=" ">
</div>
<div class="form__group required">
<label class="form__label" for="comment">Your message</label>
<textarea class="form__control" id="comment" name="comment" rows="2" required placeholder=" "></textarea>
</div>
<p class="form__group form__help">
Fields marked with an <span class="required">*</span> are required.
</p>
<div class="form__group">
<input class="button button-primary" type="submit" value="Submit">
</div>
</form>
</div>
<div class="form__group required">
<label class="form__label" for="email">Your Email</label>
<input class="form__control" type="email" id="email" name="email" required placeholder=" ">
<div class="grid__col grid__col--2">
<h3></h3>
{% assign contact = site.data.contact %}
<div class="company">
<h4 class="company__name">{{ contact.name }}</h4>
<p>
<a href="mailto:{{ contact.email }}">{{ contact.email }}</a>
</p>
<p>
{{ contact.address.street }}<br />
{{ contact.address.zip }} {{ contact.address.city }}<br />
{{ contact.address.country }}
</p>
</div>
<ul class="social-list">
{% for item in contact.social %}
<li>
<a href="{{ item.link }}" title="{{ item.name }}">
<svg class="icon" aria-labelledby="title">
<title>{{ item.name }}</title>
<use xlink:href="/assets/img/sprite.svg#icon-{{ item.name | downcase }}"></use>
</svg>
</a>
</li>
{% endfor %}
</ul>
</div>
<div class="form__group required">
<label class="form__label" for="comment">Your message</label>
<textarea class="form__control" id="comment" name="comment" rows="2" required placeholder=" "></textarea>
</div>
<p class="form__group form__help">
Fields marked with an <span class="required">*</span> are required.
</p>
<div class="form__group">
<input class="button button-primary" type="submit" value="Submit">
</div>
</form>
</div>

View File

@ -18,7 +18,7 @@
{% endif %}
{% unless page.path contains 'foundation/index' %}
<a class="menu__link {{ active }}" href="{{ page.url }}">{{ page.title }}</a>
<a class="menu__link {{ active }}" href="{{ page.url }}">{{ page.title }}</a>
{% endunless %}
{% endif %}
{% endfor%}

View File

@ -5,6 +5,7 @@ title: Contact
subtitle: Get in touch with IPDB Foundation
narrow: true
css: page-contact
---
## Get in touch

View File

@ -136,8 +136,13 @@ css: page-front
<section class="section section--roadmap">
<div class="row">
<header class="section__header">
<h1 class="section__title">{{ content.roadmap.title }}</h1>
<p class="section__description">{{ content.roadmap.description }}</p>
<div class="grid grid--full grid-medium--columns grid--gutters">
<div class="grid__col grid__col--4">
<h1 class="section__title">{{ content.roadmap.title }}</h1>
<p class="section__description">{{ content.roadmap.description }}</p>
</div>
</div>
</header>
</div>
@ -212,6 +217,19 @@ css: page-front
<div class="grid__col">
<div class="connect connect--social">
<h2 class="connect__title">{{ content.connect.social_title }}</h2>
<ul class="social-list">
{% for item in site.data.contact.social %}
<li>
<a href="{{ item.link }}" title="{{ item.name }}">
<svg class="icon" aria-labelledby="title">
<title>{{ item.name }}</title>
<use xlink:href="/assets/img/sprite.svg#icon-{{ item.name | downcase }}"></use>
</svg>
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>