neige-theme 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/LICENSE.txt +21 -0
- data/README.md +171 -0
- data/_includes/footer.html +3 -0
- data/_includes/head.html +36 -0
- data/_includes/header.html +23 -0
- data/_includes/info.html +30 -0
- data/_includes/pagination.html +9 -0
- data/_includes/share.html +34 -0
- data/_layouts/default.html +11 -0
- data/_layouts/page.html +7 -0
- data/_layouts/post.html +20 -0
- data/_sass/elements.scss +300 -0
- data/_sass/footer.scss +14 -0
- data/_sass/header.scss +65 -0
- data/_sass/index.scss +11 -0
- data/_sass/info.scss +34 -0
- data/_sass/layout.scss +10 -0
- data/_sass/normalize.scss +447 -0
- data/_sass/pagination.scss +14 -0
- data/_sass/posts.scss +13 -0
- data/_sass/share.scss +31 -0
- data/_sass/syntax.scss +256 -0
- data/_sass/vars.scss +10 -0
- data/assets/css/style.scss +31 -0
- data/assets/img/favicon.png +0 -0
- data/assets/img/icon.png +0 -0
- data/assets/img/og.jpg +0 -0
- metadata +113 -0
checksums.yaml
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
---
|
|
2
|
+
SHA1:
|
|
3
|
+
metadata.gz: 1503cc3dcbe23200d8a1da1db460272818c12a60
|
|
4
|
+
data.tar.gz: 7dbe1ee4e84a3f714e57db52608a30642e370306
|
|
5
|
+
SHA512:
|
|
6
|
+
metadata.gz: e13a10e80667c08ffe2bb3f915a382644521d755f468bb7817e093392e43e85e6e22efedd59fd43c19fbfe5d203bf6d587cfd9386f7d3a5c8af0495a829c1e03
|
|
7
|
+
data.tar.gz: 54e6b88895241cd873a50c5daf1224728a51060c50c90188c713f08d276e5b47b5053c8de2f685ee5afbcdc4d2ac6f5bc2298af9b0236b1ae6931c2e258f8e38
|
data/LICENSE.txt
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2018 Quentin Bellanger
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in
|
|
13
|
+
all copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
21
|
+
THE SOFTWARE.
|
data/README.md
ADDED
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
# Neige
|
|
2
|
+
|
|
3
|
+
> Neige is a minimalist and lightweight Jekyll blog theme :snowflake:
|
|
4
|
+
|
|
5
|
+
![Neige theme preview]()
|
|
6
|
+
|
|
7
|
+
## Table of content
|
|
8
|
+
|
|
9
|
+
- [Features](#features)
|
|
10
|
+
- [Installation](#installation)
|
|
11
|
+
- [Configuration](#configuration)
|
|
12
|
+
- [How to](#how-to)
|
|
13
|
+
- [Add new post](#add-new-post)
|
|
14
|
+
- [Add new lage](#add-new-page)
|
|
15
|
+
- [Edit error page](#edit-error-page)
|
|
16
|
+
- [Update styles](#update-styles)
|
|
17
|
+
- [Development](#development)
|
|
18
|
+
|
|
19
|
+
## Features
|
|
20
|
+
|
|
21
|
+
- Made for blogging
|
|
22
|
+
- Minimalist
|
|
23
|
+
- Fast: no JS
|
|
24
|
+
- Accessible
|
|
25
|
+
- Easy configuration
|
|
26
|
+
- Siteleaf ready
|
|
27
|
+
- Meta tags ready
|
|
28
|
+
- Works on any browser
|
|
29
|
+
- Mobile ready
|
|
30
|
+
- Pixel perfect
|
|
31
|
+
|
|
32
|
+
## Installation
|
|
33
|
+
|
|
34
|
+
- Gem based
|
|
35
|
+
- GH pages
|
|
36
|
+
|
|
37
|
+
## Configuration
|
|
38
|
+
|
|
39
|
+
Everythings happens in the `_config.yml` file.
|
|
40
|
+
|
|
41
|
+
- `title`: set the main title (used for meta tags).
|
|
42
|
+
|
|
43
|
+
- `description`: set the main description (used for meta tags).
|
|
44
|
+
|
|
45
|
+
- `favicon`: set the favicon (located at `assets/img/favicon.png`).
|
|
46
|
+
|
|
47
|
+
- `icon`: set the logo on the header (located at `assets/img/icon.png`).
|
|
48
|
+
|
|
49
|
+
- `og_image`: set the default Open Graph image (located at `assets/img/og.jpg`).
|
|
50
|
+
|
|
51
|
+
- `lang`: set the language of your website. Used as `lang` attribute on the `<html>` tag.
|
|
52
|
+
|
|
53
|
+
- `baseurl`: set the root URL of your website (example: `https://neige-theme.com`).
|
|
54
|
+
|
|
55
|
+
- `twitter`: the main Twitter account of the website (example: `@twitter`).
|
|
56
|
+
|
|
57
|
+
- `navigation`: set the navigation of your website. Add items with the following properties:
|
|
58
|
+
|
|
59
|
+
```yml
|
|
60
|
+
navigation:
|
|
61
|
+
- name: About
|
|
62
|
+
url: "/about"
|
|
63
|
+
title: About me
|
|
64
|
+
external: false
|
|
65
|
+
- name: Contact
|
|
66
|
+
url: "/contact"
|
|
67
|
+
title: Contact me
|
|
68
|
+
external: false
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
> The `title` property is used as the `title` attribute on the link. Set `external` to "true" if the link should open in a new tab.
|
|
72
|
+
|
|
73
|
+
- `authors`: Add authors to your blog with the following properties:
|
|
74
|
+
|
|
75
|
+
```yml
|
|
76
|
+
- id: bilbo
|
|
77
|
+
name: Bilbo Baggins
|
|
78
|
+
twitter: "@bilbo"
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
Then you can link a blog post to an author with its `id`.
|
|
82
|
+
|
|
83
|
+
- `footer`: set custom content for the `<footer>` tag.
|
|
84
|
+
|
|
85
|
+
- `paginate`: define the number of posts displayed on the page.
|
|
86
|
+
|
|
87
|
+
- `paginate_path`: define the path of pagination pages (example: `"/blog/page:num/"` would result in `/blog/2/`).
|
|
88
|
+
|
|
89
|
+
## How to
|
|
90
|
+
|
|
91
|
+
### Add new post
|
|
92
|
+
|
|
93
|
+
To create a new blog post, follow these steps:
|
|
94
|
+
|
|
95
|
+
1. Create a `.md` file in the `_posts` folder (example: `YYYY-MM-DD-post.md`).
|
|
96
|
+
2. Add the following properties in the YAML Front Matter:
|
|
97
|
+
|
|
98
|
+
```yml
|
|
99
|
+
---
|
|
100
|
+
layout: post
|
|
101
|
+
date: YYYY-MM-DD
|
|
102
|
+
title: "Your post title"
|
|
103
|
+
description: "Your post description"
|
|
104
|
+
author: jack
|
|
105
|
+
---
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
> The `title` and `description` are used on the post but also for the meta tags. The `author` must be a existing author `id` in your `_config.yml` file.
|
|
109
|
+
|
|
110
|
+
3. Write with blog post content.
|
|
111
|
+
|
|
112
|
+
### Add new page
|
|
113
|
+
|
|
114
|
+
To create new static pages, follow these steps:
|
|
115
|
+
|
|
116
|
+
1. Create a `.md` file at the root of your project (example: `page.md`).
|
|
117
|
+
2. Add the following properties in the YAML Front Matter:
|
|
118
|
+
|
|
119
|
+
```yml
|
|
120
|
+
---
|
|
121
|
+
layout: page
|
|
122
|
+
title: "Your page title"
|
|
123
|
+
description: "Your page description"
|
|
124
|
+
---
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
> The `title` and `description` are used on the page but also for the meta tags.
|
|
128
|
+
|
|
129
|
+
3. Write the content of your page.
|
|
130
|
+
|
|
131
|
+
### Add meta tags
|
|
132
|
+
|
|
133
|
+
Meta tags for all kind of page (home, page, post and error) are already configured based on the content you're filling in `_config.yml` for the homepage and in the front-matter for the others.
|
|
134
|
+
|
|
135
|
+
If you wish to modify the behavior of already existing meta tags settings or to add new ones, head over the `head.html` partial in `_includes` folder.
|
|
136
|
+
|
|
137
|
+
### Edit error page
|
|
138
|
+
|
|
139
|
+
Simply edit the content of the `404.md` page.
|
|
140
|
+
|
|
141
|
+
### Update styles
|
|
142
|
+
|
|
143
|
+
All the `.scss` files are in the `_sass` folder arranged by components (header, pagination, footer...). They are called by the main stylesheet `/assets/css/style.scss`.
|
|
144
|
+
|
|
145
|
+
Feel free to modify styles the way you want (SASS variables are located in `_sass/vars.scss`).
|
|
146
|
+
|
|
147
|
+
## To do
|
|
148
|
+
|
|
149
|
+
- [ ] Add syntax highlighting
|
|
150
|
+
- [ ] Add Google analytics config
|
|
151
|
+
- Write default posts:
|
|
152
|
+
- [ ] Neige Features
|
|
153
|
+
- [ ] Page elements
|
|
154
|
+
- [ ] Install Neige to your Jekyll website
|
|
155
|
+
- [ ] Make Neige your own
|
|
156
|
+
- Write default pages:
|
|
157
|
+
- [ ] About page
|
|
158
|
+
|
|
159
|
+
## Questions
|
|
160
|
+
|
|
161
|
+
- Gems: in `.gemspec` or `Gemfile`?
|
|
162
|
+
- Difference between GH pages remote theme and classic Jekyll theme
|
|
163
|
+
- Versioning configuration (master branch // dev branch)
|
|
164
|
+
|
|
165
|
+
## Development
|
|
166
|
+
|
|
167
|
+
Launch local web server with live reloading (port = 4000):
|
|
168
|
+
|
|
169
|
+
```shell
|
|
170
|
+
bundle exec jekyll serve --livereload
|
|
171
|
+
```
|
data/_includes/head.html
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<head>
|
|
2
|
+
<!-- Stylesheet and favicon -->
|
|
3
|
+
<link rel="stylesheet" href="{{ site.url }}{{ site.css }}" />
|
|
4
|
+
<link rel="icon" type="image/x-icon" href="{{ site.url }}{{ site.favicon }}" />
|
|
5
|
+
|
|
6
|
+
<!-- Title -->
|
|
7
|
+
<title>
|
|
8
|
+
{% if page.title %}
|
|
9
|
+
{{page.title}}
|
|
10
|
+
{% else %}
|
|
11
|
+
{{ site.title }}
|
|
12
|
+
{% endif %}
|
|
13
|
+
</title>
|
|
14
|
+
|
|
15
|
+
<!-- Base meta -->
|
|
16
|
+
<meta charset="utf-8" />
|
|
17
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
18
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
+
<meta name="theme-color" content="{{ site.color }}">
|
|
20
|
+
<meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
|
|
21
|
+
|
|
22
|
+
<!-- Facebook meta -->
|
|
23
|
+
<meta name="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
|
|
24
|
+
<meta name="og:description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
|
|
25
|
+
<meta name="og:url" content="{{ site.url }}{{ page.url }}">
|
|
26
|
+
<meta name="og:image" content="{{ site.url }}{{ site.og_image }}">
|
|
27
|
+
<meta name="og:site_name" content="{{ site.title }}">
|
|
28
|
+
|
|
29
|
+
<!-- Twitter meta -->
|
|
30
|
+
<meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
|
|
31
|
+
<meta name="twitter:card" content="summary_large_image">
|
|
32
|
+
<meta name="twitter:image" content="{{ site.url }}{{ site.og_image }}">
|
|
33
|
+
<meta name="twitter:widgets:theme" content="light">
|
|
34
|
+
<meta name="twitter:widgets:link-color" content="{{ site.color }}">
|
|
35
|
+
<meta name="twitter:widgets:border-color" content="{{ site.color }}">
|
|
36
|
+
</head>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<header>
|
|
2
|
+
<nav role="navigation">
|
|
3
|
+
<a href="{{ '/' | relative_url }} " title="{{ site.title }}" class="blog-icon">
|
|
4
|
+
<img src="{{ site.url }}{{ site.icon }}" alt="Logo of {{ site.title }}">
|
|
5
|
+
</a>
|
|
6
|
+
{% if site.navigation %}
|
|
7
|
+
<ul>
|
|
8
|
+
{% for link in site.navigation %}
|
|
9
|
+
<li class="item">
|
|
10
|
+
<a
|
|
11
|
+
href="{{ link.url }}"
|
|
12
|
+
title="{{ link.title }}"
|
|
13
|
+
target="{% if link.external %}_blank{% endif %}"
|
|
14
|
+
rel="{% if link.external %}noopener{% endif %}"
|
|
15
|
+
>
|
|
16
|
+
{{ link.name }}
|
|
17
|
+
</a>
|
|
18
|
+
</li>
|
|
19
|
+
{% endfor %}
|
|
20
|
+
</ul>
|
|
21
|
+
{% endif %}
|
|
22
|
+
</nav>
|
|
23
|
+
</header>
|
data/_includes/info.html
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{% assign date = include.date %}
|
|
2
|
+
{% assign author = include.author %}
|
|
3
|
+
|
|
4
|
+
<div class="info">
|
|
5
|
+
{% if date %}
|
|
6
|
+
<div class="info-date">
|
|
7
|
+
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
8
|
+
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
|
|
9
|
+
<line x1="16" y1="2" x2="16" y2="6"/>
|
|
10
|
+
<line x1="8" y1="2" x2="8" y2="6"/>
|
|
11
|
+
<line x1="3" y1="10" x2="21" y2="10"/>
|
|
12
|
+
</svg>
|
|
13
|
+
<time datetime="">
|
|
14
|
+
{{ date | date_to_long_string }}
|
|
15
|
+
</time>
|
|
16
|
+
</div>
|
|
17
|
+
{% endif %}
|
|
18
|
+
|
|
19
|
+
{% if author %}
|
|
20
|
+
<div class="info-author">
|
|
21
|
+
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
22
|
+
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
|
23
|
+
<circle cx="12" cy="7" r="4" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
|
24
|
+
</svg>
|
|
25
|
+
<span>
|
|
26
|
+
{{ author.name }}
|
|
27
|
+
</span>
|
|
28
|
+
</div>
|
|
29
|
+
{% endif %}
|
|
30
|
+
</div>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<div class="pagination">
|
|
2
|
+
{% if paginator.previous_page %}
|
|
3
|
+
<a href="{{ paginator.previous_page_path }}">← Newer Posts</a>
|
|
4
|
+
{% endif %}
|
|
5
|
+
<span class="current ">Page {{ paginator.page }} / {{ paginator.total_pages }}</span>
|
|
6
|
+
{% if paginator.next_page %}
|
|
7
|
+
<a href="{{ paginator.next_page_path }}">Older Posts →</a>
|
|
8
|
+
{% endif %}
|
|
9
|
+
</div>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
{% assign url = include.url %}
|
|
2
|
+
{% assign title = include.title %}
|
|
3
|
+
{% assign twitter = include.twitter %}
|
|
4
|
+
|
|
5
|
+
<div class="share">
|
|
6
|
+
|
|
7
|
+
<a class="button" href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{url}}" target="_blank" rel="noopener" title="Share on Facebook">
|
|
8
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#808080" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
|
9
|
+
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
|
|
10
|
+
</svg>
|
|
11
|
+
|
|
12
|
+
{% if twitter %}
|
|
13
|
+
<a class="button" href="http://twitter.com/share?text={{title}}:&url={{ site.url }}{{url}}" target="_blank" rel="noopener" title="Share on Twitter">
|
|
14
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#808080" stroke-linecap="round" stroke-linejoin="round" stroke-width="1">
|
|
15
|
+
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
|
|
16
|
+
</svg>
|
|
17
|
+
</a>
|
|
18
|
+
{% else %}
|
|
19
|
+
<a class="button" href="http://twitter.com/share?text={{title}}&url={{ site.url }}{{url}}" target="_blank" rel="noopener" title="Share on Twitter">
|
|
20
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#808080" stroke-linecap="round" stroke-linejoin="round" stroke-width="1">
|
|
21
|
+
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
|
|
22
|
+
</svg>
|
|
23
|
+
</a>
|
|
24
|
+
{% endif %}
|
|
25
|
+
|
|
26
|
+
<a class="button" href="https://bufferapp.com/add/?url={{ site.baseurl }}{{url}}&text={{title}}" target="_blank" rel="noopener" title="Share on Buffer">
|
|
27
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#808080" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
|
28
|
+
<polygon points="12 2 2 7 12 12 22 7 12 2"/>
|
|
29
|
+
<polyline points="2 17 12 22 22 17"/>
|
|
30
|
+
<polyline points="2 12 12 17 22 12"/>
|
|
31
|
+
</svg>
|
|
32
|
+
</a>
|
|
33
|
+
|
|
34
|
+
</div>
|
data/_layouts/page.html
ADDED
data/_layouts/post.html
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: default
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<main>
|
|
6
|
+
<h1>{{ page.title }}</h1>
|
|
7
|
+
|
|
8
|
+
{% assign date = page.date %}
|
|
9
|
+
{% assign author = site.authors | where: "id", page.author | first %}
|
|
10
|
+
|
|
11
|
+
{% include info.html date = date author = author %}
|
|
12
|
+
|
|
13
|
+
{{ content }}
|
|
14
|
+
|
|
15
|
+
{% assign url = page.url %}
|
|
16
|
+
{% assign title = page.title %}
|
|
17
|
+
{% assign twitter = author.twitter %}
|
|
18
|
+
|
|
19
|
+
{% include share.html url = url title = title twitter = twitter %}
|
|
20
|
+
</main>
|
data/_sass/elements.scss
ADDED
|
@@ -0,0 +1,300 @@
|
|
|
1
|
+
/* HEADINGS */
|
|
2
|
+
/*----------*/
|
|
3
|
+
|
|
4
|
+
h1,
|
|
5
|
+
h2,
|
|
6
|
+
h3,
|
|
7
|
+
h4,
|
|
8
|
+
h5,
|
|
9
|
+
h6 {
|
|
10
|
+
font-family: $font-serif;
|
|
11
|
+
font-weight: 400;
|
|
12
|
+
line-height: 1.4em;
|
|
13
|
+
margin: 25px 0 12.5px;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
h1 {
|
|
17
|
+
font-size: 32px;
|
|
18
|
+
|
|
19
|
+
@media(min-width: 768px){
|
|
20
|
+
font-size: 45px;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
h2 {
|
|
25
|
+
font-family: $font-serif;
|
|
26
|
+
font-size: 28px;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
h3 {
|
|
30
|
+
font-size: 24px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
h4 {
|
|
34
|
+
font-size: 20px;
|
|
35
|
+
font-weight: bold;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
h5 {
|
|
39
|
+
font-size: 18px;
|
|
40
|
+
font-weight: bold;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
h6 {
|
|
44
|
+
font-size: 16px;
|
|
45
|
+
font-weight: bold;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* MEDIAS */
|
|
49
|
+
/*--------*/
|
|
50
|
+
|
|
51
|
+
img,
|
|
52
|
+
video {
|
|
53
|
+
max-width: 100%;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* LISTS */
|
|
57
|
+
/*-------*/
|
|
58
|
+
|
|
59
|
+
dl {
|
|
60
|
+
line-height: 25px;
|
|
61
|
+
margin: 25px 0 12.5px;
|
|
62
|
+
|
|
63
|
+
dt {
|
|
64
|
+
border-bottom: 1px dashed $color-grey;
|
|
65
|
+
display: inline-block;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
dd {
|
|
69
|
+
margin: 0 0 0 20px;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
ol,
|
|
74
|
+
ul {
|
|
75
|
+
line-height: 25px;
|
|
76
|
+
margin: 25px 0 12.5px;
|
|
77
|
+
padding: 0 0 0 20px;
|
|
78
|
+
|
|
79
|
+
ol,
|
|
80
|
+
ul {
|
|
81
|
+
margin-top: 0;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
li {
|
|
85
|
+
margin: 12.5px 0;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
ul {
|
|
90
|
+
list-style-type: circle;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/* TABLES */
|
|
94
|
+
/*--------*/
|
|
95
|
+
|
|
96
|
+
table {
|
|
97
|
+
border-collapse: collapse;
|
|
98
|
+
display: block;
|
|
99
|
+
margin: 25px 0 12.5px;
|
|
100
|
+
overflow-x: auto;
|
|
101
|
+
width: 100%;
|
|
102
|
+
|
|
103
|
+
@media(min-width: 768px) {
|
|
104
|
+
display: table;
|
|
105
|
+
overflow-x: visible;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
th {
|
|
110
|
+
background: $color-grey-70;
|
|
111
|
+
text-align: left;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
th,
|
|
115
|
+
td {
|
|
116
|
+
border: 1px solid $color-grey;
|
|
117
|
+
min-width: 80px;
|
|
118
|
+
padding: 10px;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* PREFORMATED TEXT */
|
|
122
|
+
/*------------------*/
|
|
123
|
+
|
|
124
|
+
pre {
|
|
125
|
+
background: $color-grey-70;
|
|
126
|
+
padding: 20px;
|
|
127
|
+
margin: 25px 0 12.5px;
|
|
128
|
+
overflow-x: auto;
|
|
129
|
+
white-space: pre-wrap;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
code {
|
|
133
|
+
background: $color-grey-70;
|
|
134
|
+
line-height: 1.4em;
|
|
135
|
+
padding: 2px 5px;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* BLOCKQUOTES */
|
|
139
|
+
/*-------------*/
|
|
140
|
+
|
|
141
|
+
blockquote {
|
|
142
|
+
border-left: 2px solid $color-grey-30;
|
|
143
|
+
color: $color-grey-30;
|
|
144
|
+
font-family: $font-serif;
|
|
145
|
+
font-size: 20px;
|
|
146
|
+
font-style: italic;
|
|
147
|
+
line-height: 1.4em;
|
|
148
|
+
margin: 25px 25px 12.5px 0;
|
|
149
|
+
padding: 0 0 0 25px;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/* TEXT-LEVEL SEMANTICS */
|
|
153
|
+
/*----------------------*/
|
|
154
|
+
|
|
155
|
+
a {
|
|
156
|
+
border-bottom: 1px solid $color-grey-30;
|
|
157
|
+
color: inherit;
|
|
158
|
+
text-decoration: none;
|
|
159
|
+
|
|
160
|
+
&:hover {
|
|
161
|
+
border-bottom: 0;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
&:focus {
|
|
165
|
+
border-bottom: 0;
|
|
166
|
+
outline-color: $color-grey-30;
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
cite {
|
|
171
|
+
font-style: italic;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
dfn {
|
|
175
|
+
font-style: italic;
|
|
176
|
+
|
|
177
|
+
&[title] {
|
|
178
|
+
border-bottom: 0;
|
|
179
|
+
text-decoration: underline;
|
|
180
|
+
text-decoration: underline dotted;
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
kbd {
|
|
185
|
+
border: 1px solid $color-grey-30;
|
|
186
|
+
padding: 2px 5px;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
mark {
|
|
190
|
+
color: $color-grey;
|
|
191
|
+
padding: 2px 5px;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
p {
|
|
195
|
+
line-height: 25px;
|
|
196
|
+
margin: 25px 0 12.5px;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
samp {
|
|
200
|
+
background: $color-grey-70;
|
|
201
|
+
padding: 2px 5px;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
/* FORMS */
|
|
205
|
+
/*-------*/
|
|
206
|
+
|
|
207
|
+
button,
|
|
208
|
+
input[type=submit],
|
|
209
|
+
input[type=reset],
|
|
210
|
+
input[type=button] {
|
|
211
|
+
background: $color-grey-30;
|
|
212
|
+
border: 1px solid $color-grey-30;
|
|
213
|
+
box-sizing: border-box;
|
|
214
|
+
color: $color-white;
|
|
215
|
+
display: block;
|
|
216
|
+
margin: 5px 0 15px;
|
|
217
|
+
padding: 10px;
|
|
218
|
+
width: 100%;
|
|
219
|
+
|
|
220
|
+
&:hover {
|
|
221
|
+
background: $color-white;
|
|
222
|
+
color: $color-grey-30;
|
|
223
|
+
cursor: pointer;
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
fieldset {
|
|
228
|
+
border: 1px solid $color-grey-30;
|
|
229
|
+
margin: 25px 0 12.5px;
|
|
230
|
+
padding: 10px;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
form {
|
|
234
|
+
margin: 25px 0 12.5px;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
input {
|
|
238
|
+
background: $color-grey-70;
|
|
239
|
+
border: 1px solid $color-grey-30;
|
|
240
|
+
box-sizing: border-box;
|
|
241
|
+
color: $color-grey;
|
|
242
|
+
display: block;
|
|
243
|
+
margin: 5px 0 15px;
|
|
244
|
+
padding: 10px;
|
|
245
|
+
width: 100%;
|
|
246
|
+
|
|
247
|
+
&[type=color] {
|
|
248
|
+
padding: 0;
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
label {
|
|
253
|
+
display: block;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
legend {
|
|
257
|
+
padding: 0 10px;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
select {
|
|
261
|
+
background: $color-grey-70;
|
|
262
|
+
box-sizing: border-box;
|
|
263
|
+
display: block;
|
|
264
|
+
margin: 5px 0 15px;
|
|
265
|
+
width: 100%;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
textarea {
|
|
269
|
+
background: $color-grey-70;
|
|
270
|
+
border: 1px solid $color-grey-30;
|
|
271
|
+
box-sizing: border-box;
|
|
272
|
+
color: $color-grey;
|
|
273
|
+
display: block;
|
|
274
|
+
margin: 5px 0 15px;
|
|
275
|
+
padding: 10px;
|
|
276
|
+
width: 100%;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
button:focus,
|
|
280
|
+
input:focus,
|
|
281
|
+
select:focus,
|
|
282
|
+
textarea:focus {
|
|
283
|
+
background: $color-white;
|
|
284
|
+
color: $color-grey-30;
|
|
285
|
+
outline-color: $color-grey-30;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
/* EMBED */
|
|
289
|
+
/*-------*/
|
|
290
|
+
|
|
291
|
+
iframe {
|
|
292
|
+
max-width: 100%;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
/* OTHER */
|
|
296
|
+
/*-------*/
|
|
297
|
+
hr {
|
|
298
|
+
border-top: 1px solid $color-grey-70;
|
|
299
|
+
margin: 50px 0;
|
|
300
|
+
}
|