ipdb/website
1
0
Fork 0
mirror of https://github.com/ipdb/website.git synced 2025-02-14 21:10:26 +01:00
Code Releases Activity

start styleguide, default page header component

Browse Source
This commit is contained in:
Matthias Kretschmann 2017-08-24 12:54:16 +02:00
parent 9d0309fbed
commit b81dd98053
Signed by: m
GPG Key ID: 606EEEF3C479A91F
5 changed files with 115 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -10,6 +10,12 @@
[![js ascribe](https://img.shields.io/badge/js-ascribe-39BA91.svg)](https://github.com/ascribe/javascript)
[![Greenkeeper badge](https://badges.greenkeeper.io/ipdb/site.svg)](https://greenkeeper.io/)
---
[**Beta**](https://beta.ipdb.io) | [**Styleguide**](https://beta.ipdb.io/styleguide/)
---
# Contents
- [Content editing](#content-editing)

16
_src/_assets/scss/_header.scss Normal file
View File

@ -0,0 +1,16 @@
.header {
background: $brand-05;
padding-top: $spacer * 2;
padding-bottom: $spacer * 2;
}
.header__title {
font-size: $font-size-h1;
margin-bottom: $spacer / 4;
}
.header__subtitle {
font-size: $font-size-h3;
color: $brand-02;
margin: 0;
}

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

@ -5,3 +5,4 @@
@import 'grid';
@import 'sections';
@import 'hero';
@import 'header';

1
_src/_assets/scss/page-styleguide.scss Normal file
View File

@ -0,0 +1 @@
@import 'variables';

91
_src/styleguide.md Normal file
View File

@ -0,0 +1,91 @@
---
layout: page
sitemap: false
title: Style Guide
subtitle: Look sharp and stay consistent
description: Look sharp and stay consistent
css: page-styleguide
---
# Typography
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
* Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
* Est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
* Maecenas sed diam eget risus varius blandit sit amet non magna.
1. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
2. Est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
3. Maecenas sed diam eget risus varius blandit sit amet non magna.
# Logo
# Components
## Buttons
<a class="button" href="#">Button</a> <a class="button button--small" href="#">Button</a> <a class="button button--large" href="#">Button</a>
<a class="button button--primary" href="#">Button</a> <a class="button button--primary button--small" href="#">Button</a> <a class="button button--primary button--large" href="#">Button</a>
<a class="button button--dark" href="#">Button</a> <a class="button button--dark button--small" href="#">Button</a> <a class="button button--dark button--large" href="#">Button</a>
## Forms
<form class="form js-parsley" action="#">
<div class="form-group">
<input class="form-control" type="text" id="name" name="name" required>
<label class="form-label" for="name">Your Name</label>
</div>
<div class="form-group">
<input class="form-control" type="email" id="email" name="email">
<label class="form-label" for="email">Your Email</label>
</div>
<div class="form-group">
<input class="form-control" type="tel" id="phone" name="phone">
<label class="form-label" for="phone">Your Phone</label>
</div>
<div class="form-group">
<select class="form-control" id="select" name="select" required data-required="true">
<option value="">&nbsp;</option>
<option value="Automotive">Automotive</option>
<option value="Banking">Banking</option>
<option value="Consulting">Consulting</option>
<option value="Data">Data</option>
<option value="Automotive">Automotive</option>
<option value="Banking">Banking</option>
<option value="Consulting">Consulting</option>
<option value="Data">Data</option>
<option value="Automotive">Automotive</option>
<option value="Banking">Banking</option>
<option value="Consulting">Consulting</option>
<option value="Data">Data</option>
</select>
<label class="form-label" for="industry">Industry</label>
</div>
<div class="form-group">
<textarea class="form-control" id="comment" name="comment" rows="1"></textarea>
<label class="form-label" for="comment">Autogrowing textarea</label>
</div>
<p class="form-group text-dimmed mini">
Fields marked with an <span class="required">*</span> are required.
</p>
<div class="form-group">
<input class="btn btn-primary" type="submit" value="Submit">
</div>
</form>