ipdb/website
1
0
Fork 0
mirror of https://github.com/ipdb/website.git synced 2024-12-28 15:47:44 +01:00
Code Releases Activity

put forms to use

Browse Source 
* create contact form
* create newsletter form
* create contact page
* shuffle around connect section content
This commit is contained in:
Matthias Kretschmann 2017-08-30 16:37:05 +02:00
parent 94bc46828e
commit fb2895a681
Signed by: m
GPG Key ID: 606EEEF3C479A91F
13 changed files with 125 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
_config.yml
View File

@ -21,6 +21,11 @@ login:
button: Log in
link: https://developers.ipdb.io/login
# Form actions
forms:
contact: '#'
newsletter: '#'
# Urls
# --------------------
permalink: /:title/

1
_src/_assets/scss/_buttons.scss
View File

@ -18,6 +18,7 @@
cursor: pointer;
user-select: none;
border: 0;
margin: 0;
box-shadow: none;
transition: .25s ease-out;

36
_src/_assets/scss/_forms.scss
View File

@ -8,6 +8,10 @@
.form {
margin-bottom: $spacer;
@media ($screen-sm) {
max-width: 25rem;
}
}
.form__group {
@ -17,9 +21,10 @@
.form__label {
user-select: none;
display: block;
font-size: $font-size-small;
font-size: $font-size-mini;
font-weight: $font-weight-bold;
text-transform: uppercase;
color: $brand-04;
color: $brand-02;
margin-bottom: $spacer / 4;
.required & {
@ -38,6 +43,7 @@
max-width: 100%;
appearance: none;
padding: $spacer / 3 $spacer / 2;
margin: 0;
font-family: $font-family-base;
font-size: $font-size-base;
font-weight: $font-weight-bold;
@ -48,10 +54,6 @@
background: lighten($brand-05, 4%);
transition: .15s ease-out;
@media ($screen-sm) {
max-width: 30rem;
}
&:focus {
outline: 0;
border-color: $brand-02;
@ -60,10 +62,9 @@
// Placeholder
&::placeholder {
color: $brand-02;
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
opacity: 1;
color: $text-color;
opacity: .4;
font-weight: $font-weight-normal;
}
&:disabled,
@ -103,12 +104,25 @@ textarea {
.form__help {
font-size: $font-size-small;
color: $brand-02;
line-height: 1.2;
display: inline-block;
margin-top: $spacer / 4;
input + & {
margin-left: $spacer / 2;
padding-left: $spacer / 2;
padding-right: $spacer / 2;
}
}
//
// Size modifiers
//
.form__control--small {
font-size: $font-size-small;
padding-top: $spacer / 5;
padding-bottom: $spacer / 5;
}
//
// required indicator

16
_src/_assets/scss/_grid.scss
View File

@ -151,6 +151,10 @@
> .grid__col { flex: 0 0 100%; }
}
.grid--fourth {
> .grid__col { flex: 0 0 25%; }
}
.grid--third {
> .grid__col { flex: 0 0 33.3%; }
}
@ -179,6 +183,10 @@
> .grid__col { flex: 0 0 100%; }
}
.grid-small--fourth {
> .grid__col { flex: 0 0 25%; }
}
.grid-small--third {
> .grid__col { flex: 0 0 33.3%; }
}
@ -204,6 +212,10 @@
> .grid__col { flex: 0 0 100%; }
}
.grid-medium--fourth {
> .grid__col { flex: 0 0 25%; }
}
.grid-medium--third {
> .grid__col { flex: 0 0 33.3%; }
}
@ -229,6 +241,10 @@
> .grid__col { flex: 0 0 100%; }
}
.grid-large--fourth {
> .grid__col { flex: 0 0 25%; }
}
.grid-large--third {
> .grid__col { flex: 0 0 33.3%; }
}

4
_src/_assets/scss/ipdb.scss
View File

@ -17,8 +17,4 @@
.content--page--markdown {
padding-top: $spacer * 2;
@media ($screen-sm) {
padding-top: $spacer * 4;
}
}

8
_src/_assets/scss/page-front.scss
View File

@ -171,20 +171,14 @@
// Connect
//
.articles {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 100%;
margin-bottom: $spacer * 4;
}
.article {
margin-bottom: 6%;
transition: .15s ease-out;
@media ($screen-md) {
flex: 0 0 47%;
}
&:hover,
&:focus {
transform: translateY(-1px);

1
_src/_data/content-front.yml
View File

@ -70,4 +70,5 @@ connect:
description: "Stalk us like there's no tomorrow."
blog_title: "From the blog"
newsletter_title: "Newsletter"
newsletter_text: "Our email newsletter will keep you informed of major developments."
social_title: "Follow us"

2
_src/_data/menus.yml
View File

@ -1,5 +1,7 @@
main:
- title: Foundation
url: /foundation/
- title: Contact
url: /contact/
- title: Style guide
url: /styleguide/

20
_src/_includes/form-contact.html Normal file
View File

@ -0,0 +1,20 @@
<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>

10
_src/_includes/form-newsletter.html Normal file
View File

@ -0,0 +1,10 @@
<form class="form" action="{{ config.site.forms.newsletter }}">
<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=" ">
<span class="form__help">We will never use the contact information you submit for anything except delivering our newsletter.</span>
</div>
<div class="form__group">
<input class="button button-primary button--small" type="submit" value="Subscribe">
</div>
</form>

14
_src/contact.md Normal file
View File

@ -0,0 +1,14 @@
---
layout: page
title: Contact
subtitle: Get in touch with IPDB Foundation
narrow: true
---
## Get in touch
{% include form-contact.html %}

50
_src/index.html
View File

@ -123,13 +123,12 @@ css: page-front
</div>
</div>
</header>
</div>
<div class="row">
{% include caretakers.html %}
</div>
<div class="row">
<a href="/foundation/" class="button button--text">{{ content.foundation.button }}</a>
{% include caretakers.html %}
<footer class="section__actions">
<a href="/foundation/" class="button button--text">{{ content.foundation.button }}</a>
</footer>
</div>
</section>
@ -180,28 +179,37 @@ css: page-front
<p class="section__description">{{ content.connect.description }}</p>
</header>
<div class="grid grid--full grid-small--half grid--gutters">
<div class="grid__col">
<div class="connect connect--blog">
<h2 class="connect__title">{{ content.connect.blog_title }}</h2>
<div class="connect connect--blog">
<h2 class="connect__title">{{ content.connect.blog_title }}</h2>
<div class="articles">
{% for article in site.articles limit: 4 %}
<a class="article" href="{{ article.link }}">
<figure class="article__image" style="background-image: url('{{ article.image | escape | strip_html }}')"></figure>
<h1 class="article__title">{{ article.title }}</h1>
</a>
{% endfor %}
</div>
<a href="https://blog.ipdb.io" class="button button--text">IPDB Blog</a>
<div class="articles">
<div class="grid grid--full grid-small--half grid-medium--fourth grid--gutters">
{% for article in site.articles limit: 4 %}
<div class="grid__col">
<a class="article" href="{{ article.link }}">
<figure class="article__image" style="background-image: url('{{ article.image | escape | strip_html }}')"></figure>
<h1 class="article__title">{{ article.title }}</h1>
</a>
</div>
{% endfor %}
</div>
<footer class="section__actions">
<a href="https://blog.ipdb.io" class="button button--text">IPDB Blog</a>
</footer>
</div>
</div>
<div class="grid grid--full grid-small--half grid--gutters">
<div class="grid__col">
<div class="connect connect--newsletter">
<h2 class="connect__title">{{ content.connect.newsletter_title }}</h2>
</div>
<p>{{ content.connect.newsletter_text }}</p>
{% include form-newsletter.html %}
</div>
</div>
<div class="grid__col">
<div class="connect connect--social">
<h2 class="connect__title">{{ content.connect.social_title }}</h2>
</div>

2
_src/styleguide.md
View File

@ -96,7 +96,7 @@ All `form__control` elements require an empty placeholder to make browser valida
</div>
<div class="form__group">
<label class="form__label" for="email">Your Email</label>
<input class="form__control" type="email" id="email" name="email" placeholder=" ">
<input class="form__control" type="email" id="email" name="email" placeholder="hello@whatever.com">
</div>
<div class="form__group">
<label class="form__label" for="phone">Your Phone</label>