jekyll-theme-stellar 0.1.0 → 0.2.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +5 -5
- data/README.md +80 -27
- data/_includes/date.html +24 -0
- data/_includes/footer.html +27 -21
- data/_includes/head.html +11 -4
- data/_includes/header.html +1 -1
- data/_includes/language.html +10 -0
- data/_includes/navigation.html +17 -3
- data/_includes/scripts.html +20 -7
- data/_layouts/default.html +11 -3
- data/_layouts/redirect.html +10 -0
- data/_layouts/sitemap.html +21 -0
- data/_sass/components/_cookieconsent.scss +402 -0
- data/_sass/layout/_header.scss +74 -74
- data/_sass/layout/_nav.scss +95 -69
- data/_sass/main.scss +5 -0
- data/assets/css/main.scss +4 -0
- data/assets/css/noscript.scss +4 -0
- data/assets/images/favicon.ico +0 -0
- data/assets/js/cookieconsent.min.js +1 -0
- data/sitemap.md +4 -0
- metadata +14 -6
- data/assets/css/main.css +0 -3764
- data/assets/css/noscript.css +0 -18
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
2
|
+
SHA256:
|
|
3
|
+
metadata.gz: 0d1ba6627400728f68b3ce0b1d8ed005e49a4663d08ca3ec49e495e97c25e0d9
|
|
4
|
+
data.tar.gz: 15b4d5acba8303d40f0513be7c53ddf2efdb72c815ebb37bfcf049339b1422d8
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: d19c1325fff0f6bdf9c0cc0d7149ccfdbebb763ce2fc85a7851f2ee70560bd26b512e23e2ef2637ecdc9f1c3f35dc31134ddcddd622b7b538ec36e678168b754
|
|
7
|
+
data.tar.gz: 0a9f1b6a603708e6e6a1e82ba1b61816f2dd3f523fd0166378ddb5c29f60d51b5af1c3e3055c8f31fd00ba38cc90822e7f0de6e073e45538be28f149ac10c4fc
|
data/README.md
CHANGED
|
@@ -6,6 +6,22 @@ You can preview the template [here](https://moodule.github.io/jekyll-theme-stell
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
+
# Features
|
|
10
|
+
|
|
11
|
+
> **Responsive**: out of the box support for all screen sizes, be it smartphones, laptops, tablets...
|
|
12
|
+
|
|
13
|
+
> **Multilingual**: easily manage pages, menu, url, dates, sitemap in several languages
|
|
14
|
+
|
|
15
|
+
> **Customizable**: theme colors, menu, social items can be changed from a central config file
|
|
16
|
+
|
|
17
|
+
> **Many page templates**: contact forms, navigation menus, and others can be easily inserted thanks to custom Jekyll includes
|
|
18
|
+
|
|
19
|
+
> **Vector images**: the theme images are vectorized, render smoothly on any display and can be dynamically styled
|
|
20
|
+
|
|
21
|
+
> **GDPR ready**: bundled with a cookie consent plugin and a boilerplate privacy policy compliant with GDPR
|
|
22
|
+
|
|
23
|
+
> **SEO ready**: sitemap, robots.txt and tags are automatically generated for the website
|
|
24
|
+
|
|
9
25
|
# Installation
|
|
10
26
|
|
|
11
27
|
Add this line to your Jekyll site's `Gemfile`:
|
|
@@ -34,37 +50,71 @@ For those unfamiliar with how Jekyll works, check out [jekyllrb.com](https://jek
|
|
|
34
50
|
or read up on just the basics of [front matter](https://jekyllrb.com/docs/frontmatter/), [writing posts](https://jekyllrb.com/docs/posts/),
|
|
35
51
|
and [creating pages](https://jekyllrb.com/docs/pages/).
|
|
36
52
|
|
|
53
|
+
## Configuration
|
|
54
|
+
|
|
55
|
+
You can use the following custom parameters in `_config.yml`.
|
|
56
|
+
|
|
57
|
+
### Site
|
|
58
|
+
Both `title` and `subtitle` are displayed side by side :
|
|
59
|
+
- in the tab name
|
|
60
|
+
- at the top of the page, in the header
|
|
61
|
+
|
|
62
|
+
### Social
|
|
63
|
+
Social icons will appear for each url your fill in, among `facebook_url` etc.
|
|
64
|
+
|
|
65
|
+
### Contact
|
|
66
|
+
Your contact information can be used in contact forms, the footer or anywhere else.
|
|
67
|
+
|
|
37
68
|
## Publication
|
|
38
69
|
|
|
39
|
-
|
|
70
|
+
### On Github Pages
|
|
40
71
|
|
|
41
|
-
|
|
72
|
+
In your own website's repository, edit the `_config.yml` file:
|
|
42
73
|
|
|
43
|
-
|
|
74
|
+
```yaml
|
|
75
|
+
url: "https://<github-account-name>.github.io/<repository-name>"
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
Build the website with:
|
|
44
79
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
-
|
|
67
|
-
|
|
80
|
+
$ JEKYLL_ENV=production bundle exec jekyll build
|
|
81
|
+
|
|
82
|
+
Commit all your work to the current branch.
|
|
83
|
+
|
|
84
|
+
Create a branch named `gh-pages`:
|
|
85
|
+
|
|
86
|
+
$ git checkout -b gh-pages
|
|
87
|
+
|
|
88
|
+
And finally replace the repository's content with the generated webpages:
|
|
89
|
+
|
|
90
|
+
$ mkdir ~/backup
|
|
91
|
+
$ mv ./* ~/backup/
|
|
92
|
+
$ mv ~/backup/.git ./
|
|
93
|
+
$ mv ~/backup/_site/* ./
|
|
94
|
+
$ git add .
|
|
95
|
+
$ git commit -m "First draft"
|
|
96
|
+
|
|
97
|
+
The repository's content is backup in the home directory of the user.
|
|
98
|
+
|
|
99
|
+
And finally push to github
|
|
100
|
+
|
|
101
|
+
$ git push --u origin gh-pages
|
|
102
|
+
|
|
103
|
+
### On any server
|
|
104
|
+
|
|
105
|
+
In your own website's directory, edit the `_config.yml` file:
|
|
106
|
+
|
|
107
|
+
```yaml
|
|
108
|
+
url: "https:<domain-name>"
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
Build the website with:
|
|
112
|
+
|
|
113
|
+
$ JEKYLL_ENV=production bundle exec jekyll build
|
|
114
|
+
|
|
115
|
+
Copy the content of the folder `_site` to your server, most likely in `www`.
|
|
116
|
+
|
|
117
|
+
If necessary, configure your server to serve this directory.
|
|
68
118
|
|
|
69
119
|
# Contributing
|
|
70
120
|
|
|
@@ -79,7 +129,7 @@ Your theme is setup just like a normal Jekyll site! To test your theme, run `bun
|
|
|
79
129
|
When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
|
|
80
130
|
To add a custom directory to your theme-gem, please edit the regexp in `jekyll-theme-stellar.gemspec` accordingly.
|
|
81
131
|
|
|
82
|
-
#
|
|
132
|
+
# Credits
|
|
83
133
|
|
|
84
134
|
Original README from HTML5 UP:
|
|
85
135
|
|
|
@@ -119,6 +169,8 @@ Credits:
|
|
|
119
169
|
|
|
120
170
|
Inspired by the Jekyll ports of [Andrew Banchich][andrew-banchich].
|
|
121
171
|
|
|
172
|
+
Uses the basic template from the [cookie consent plugin][cookieconsent].
|
|
173
|
+
|
|
122
174
|
Repository [Jekyll logo][jekyll-logo] icon licensed under a [Creative Commons Attribution 4.0 International License][cc4-license].
|
|
123
175
|
|
|
124
176
|
## License
|
|
@@ -128,5 +180,6 @@ The theme is available as open source under the terms of the [CC-BY-3.0](LICENSE
|
|
|
128
180
|
[andrew-banchich]: https://gitlab.com/andrewbanchich
|
|
129
181
|
[cc4-license]: http://choosealicense.com/licenses/cc-by-4.0/
|
|
130
182
|
[contributor-covenant]: http://contributor-covenant.org
|
|
183
|
+
[cookieconsent]: https://github.com/osano/cookieconsent
|
|
131
184
|
[html5up]: https://html5up.net/
|
|
132
185
|
[jekyll-logo]: https://github.com/jekyll/brand
|
data/_includes/date.html
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{% assign day = include.date | date: "%-d" %}
|
|
2
|
+
{% assign month = include.date | date: "%-m" %}
|
|
3
|
+
{% if page.lang == "en" %}
|
|
4
|
+
{{ include.date | date: "%B" }} {{ day }}, {{ include.date | date: "%Y" }}
|
|
5
|
+
{% elsif page.lang == "fr" %}
|
|
6
|
+
{% if day == "1" %}
|
|
7
|
+
{{ day }}<sup>er</sup>
|
|
8
|
+
{% else %} {{ day }}
|
|
9
|
+
{% endif %}
|
|
10
|
+
{% case month %}
|
|
11
|
+
{% when '1' %}janvier
|
|
12
|
+
{% when '2' %}février
|
|
13
|
+
{% when '3' %}mars
|
|
14
|
+
{% when '4' %}avril
|
|
15
|
+
{% when '5' %}mai
|
|
16
|
+
{% when '6' %}juin
|
|
17
|
+
{% when '7' %}juillet
|
|
18
|
+
{% when '8' %}août
|
|
19
|
+
{% when '9' %}septembre
|
|
20
|
+
{% when '10' %}octobre
|
|
21
|
+
{% when '11' %}novembre
|
|
22
|
+
{% when '12' %}décembre
|
|
23
|
+
{% endcase %} {{ include.date | date: "%Y" }}
|
|
24
|
+
{% endif %}
|
data/_includes/footer.html
CHANGED
|
@@ -18,37 +18,43 @@
|
|
|
18
18
|
<dd><a href="#">{{ site.email }}</a></dd>
|
|
19
19
|
</dl>
|
|
20
20
|
<ul class="icons">
|
|
21
|
-
{% if site.
|
|
22
|
-
<li><a href="{{ site.
|
|
21
|
+
{% if site.twitter.url %}
|
|
22
|
+
<li><a href="{{ site.twitter.url }}" class="icon alt fa-twitter" target="_blank"><span class="label">Twitter</span></a></li>
|
|
23
23
|
{% endif %}
|
|
24
|
-
{% if site.
|
|
25
|
-
<li><a href="{{ site.
|
|
24
|
+
{% if site.googleplus.url %}
|
|
25
|
+
<li><a href="{{ site.googleplus.url }}" class="icon alt fa-google-plus" target="_blank"><span class="label">Google+</span></a></li>
|
|
26
26
|
{% endif %}
|
|
27
|
-
{% if site.
|
|
28
|
-
<li><a href="{{ site.
|
|
27
|
+
{% if site.facebook.url %}
|
|
28
|
+
<li><a href="{{ site.facebook.url }}" class="icon alt fa-facebook" target="_blank"><span class="label">Facebook</span></a></li>
|
|
29
29
|
{% endif %}
|
|
30
|
-
{% if site.
|
|
31
|
-
<li><a href="{{ site.
|
|
30
|
+
{% if site.instagram.url %}
|
|
31
|
+
<li><a href="{{ site.instagram.url }}" class="icon alt fa-instagram" target="_blank"><span class="label">Instagram</span></a></li>
|
|
32
32
|
{% endif %}
|
|
33
|
-
{% if site.
|
|
34
|
-
<li><a href="{{ site.
|
|
33
|
+
{% if site.pinterest.url %}
|
|
34
|
+
<li><a href="{{ site.pinterest.url }}" class="icon alt fa-pinterest" target="_blank"><span class="label">Pinterest</span></a></li>
|
|
35
35
|
{% endif %}
|
|
36
|
-
{% if site.
|
|
37
|
-
<li><a href="{{ site.
|
|
36
|
+
{% if site.500px.url %}
|
|
37
|
+
<li><a href="{{ site.500px.url }}" class="icon alt fa-500px" target="_blank"><span class="label">500px</span></a></li>
|
|
38
38
|
{% endif %}
|
|
39
|
-
{% if site.
|
|
40
|
-
<li><a href="{{ site.
|
|
39
|
+
{% if site.gitlab.url %}
|
|
40
|
+
<li><a href="{{ site.gitlab.url }}" class="icon alt fa-gitlab" target="_blank"><span class="label">GitLab</span></a></li>
|
|
41
41
|
{% endif %}
|
|
42
|
-
{% if site.
|
|
43
|
-
<li><a href="{{ site.
|
|
42
|
+
{% if site.github.url %}
|
|
43
|
+
<li><a href="{{ site.github.url }}" class="icon alt fa-github" target="_blank"><span class="label">GitHub</span></a></li>
|
|
44
44
|
{% endif %}
|
|
45
|
-
{% if site.
|
|
46
|
-
<li><a href="{{ site.
|
|
45
|
+
{% if site.slack.url %}
|
|
46
|
+
<li><a href="{{ site.slack.url }}" class="icon alt fa-slack" target="_blank"><span class="label">Slack</span></a></li>
|
|
47
47
|
{% endif %}
|
|
48
|
-
{% if site.
|
|
49
|
-
<li><a href="{{ site.
|
|
48
|
+
{% if site.linkedin.url %}
|
|
49
|
+
<li><a href="{{ site.linkedin.url }}" class="icon alt fa-linkedin" target="_blank"><span class="label">LinkedIn</span></a></li>
|
|
50
50
|
{% endif %}
|
|
51
51
|
</ul>
|
|
52
52
|
</section>
|
|
53
|
-
<p class="copyright"
|
|
53
|
+
<p class="copyright">
|
|
54
|
+
© {{ site.copyright.holder }} - {{ site.copyright.license }}.
|
|
55
|
+
Design: <a href="https://html5up.net">HTML5 UP</a>.
|
|
56
|
+
Jekyll integration: <a href="http://github.com/moodule" target="_blank">David Mougeolle</a>.
|
|
57
|
+
{% if site.privacy_policy.url %}<a href="{{ site.privacy_policy.url | absolute_url }}">Privacy policy</a>.{% endif %}
|
|
58
|
+
{% if site.legal_terms.url %}<a href="{{ site.legal_terms.url | absolute_url }}">Legal terms</a>.{% endif %}
|
|
59
|
+
</p>
|
|
54
60
|
</footer>
|
data/_includes/head.html
CHANGED
|
@@ -1,7 +1,14 @@
|
|
|
1
|
+
{% assign posts=site.posts | where:"lang-ref", page.lang-ref | sort: 'lang' %}
|
|
2
|
+
{% assign pages=site.pages | where:"lang-ref", page.lang-ref | sort: 'lang' | concat: posts %}
|
|
3
|
+
|
|
1
4
|
<head>
|
|
2
|
-
<title>{{
|
|
5
|
+
<title>{{ include.title }} - {{ include.subtitle }}</title>
|
|
3
6
|
<meta charset="utf-8" />
|
|
4
7
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
|
5
|
-
<link rel="stylesheet" href="assets/css/main.css" />
|
|
6
|
-
|
|
7
|
-
|
|
8
|
+
<link rel="stylesheet" href="{{ 'assets/css/main.css' | absolute_url }}" />
|
|
9
|
+
{% for page in pages %}
|
|
10
|
+
<link rel="alternate" hreflang="{{ page.lang }}" href="{{ page.url }}" />
|
|
11
|
+
{% endfor %}
|
|
12
|
+
<noscript><link rel="stylesheet" href="{{ 'assets/css/noscript.css' | absolute_url }}" /></noscript>
|
|
13
|
+
{% if site.favicon.url %}<link rel="icon" href="{{ site.favicon.url | absolute_url }}" />{% endif %}
|
|
14
|
+
</head>
|
data/_includes/header.html
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<!-- Header -->
|
|
2
2
|
<header id="header" class="alt">
|
|
3
|
-
<a href="{{ site.
|
|
3
|
+
<a href="{{ site.url }}/"><span class="logo"><img src="{{ 'assets/images/logo.svg' | absolute_url }}" alt="logo" /></span></a>
|
|
4
4
|
<h1>{{ page.title }}</h1>
|
|
5
5
|
<p>{{ page.subtitle }}<br />
|
|
6
6
|
{% if page.layout == "default" %}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
{% assign posts=site.posts | where:"lang-ref", page.lang-ref | sort: 'lang' %}
|
|
2
|
+
{% assign pages=site.pages | where:"lang-ref", page.lang-ref | sort: 'lang' | concat: posts %}
|
|
3
|
+
|
|
4
|
+
{% for page in pages %}
|
|
5
|
+
{% if page.lang != "x-default" %}
|
|
6
|
+
<li class="language">
|
|
7
|
+
<a href="{{ page.url | absolute_url }}" class="{{ page.lang }}">{{ page.lang }}</a>
|
|
8
|
+
</li>
|
|
9
|
+
{% endif %}
|
|
10
|
+
{% endfor %}
|
data/_includes/navigation.html
CHANGED
|
@@ -1,8 +1,22 @@
|
|
|
1
1
|
<!-- Nav -->
|
|
2
2
|
<nav id="nav">
|
|
3
3
|
<ul>
|
|
4
|
-
|
|
5
|
-
<li
|
|
6
|
-
{%
|
|
4
|
+
{% for item in include.menu %}
|
|
5
|
+
<li {% if item.url == page.url %} class="current" {% endif %}>
|
|
6
|
+
{% if item.menu[0] %}
|
|
7
|
+
<span class="opener">{{ item.title }}</span>
|
|
8
|
+
<ul>
|
|
9
|
+
{% for subitem in item.menu %}
|
|
10
|
+
<li {% if subitem.url == page.url %} class="current" {% endif %}>
|
|
11
|
+
<a href="{{ subitem.url | absolute_url }}">{{ subitem.title }}</a>
|
|
12
|
+
</li>
|
|
13
|
+
{% endfor %}
|
|
14
|
+
</ul>
|
|
15
|
+
{% else %}
|
|
16
|
+
<a href="{{ item.url | absolute_url }}">{{ item.title }}</a>
|
|
17
|
+
</li>
|
|
18
|
+
{% endif %}
|
|
19
|
+
{% endfor %}
|
|
20
|
+
{% include language.html %}
|
|
7
21
|
</ul>
|
|
8
22
|
</nav>
|
data/_includes/scripts.html
CHANGED
|
@@ -1,8 +1,21 @@
|
|
|
1
1
|
<!-- Scripts -->
|
|
2
|
-
<script src="assets/js/jquery.min.js"></script>
|
|
3
|
-
<script src="assets/js/jquery.scrollex.min.js"></script>
|
|
4
|
-
<script src="assets/js/jquery.scrolly.min.js"></script>
|
|
5
|
-
<script src="assets/js/browser.min.js"></script>
|
|
6
|
-
<script src="assets/js/breakpoints.min.js"></script>
|
|
7
|
-
<script src="assets/js/util.js"></script>
|
|
8
|
-
<script src="assets/js/main.js"></script>
|
|
2
|
+
<script src="{{ 'assets/js/jquery.min.js' | absolute_url }}"></script>
|
|
3
|
+
<script src="{{ 'assets/js/jquery.scrollex.min.js' | absolute_url }}"></script>
|
|
4
|
+
<script src="{{ 'assets/js/jquery.scrolly.min.js' | absolute_url }}"></script>
|
|
5
|
+
<script src="{{ 'assets/js/browser.min.js' | absolute_url }}"></script>
|
|
6
|
+
<script src="{{ 'assets/js/breakpoints.min.js' | absolute_url }}"></script>
|
|
7
|
+
<script src="{{ 'assets/js/util.js' | absolute_url }}"></script>
|
|
8
|
+
<script src="{{ 'assets/js/main.js' | absolute_url }}"></script>
|
|
9
|
+
<script src="{{ '{{ 'assets/js/cookieconsent.min.js' | absolute_url }}" data-cfasync="false"></script>
|
|
10
|
+
<script>
|
|
11
|
+
window.cookieconsent.initialise({
|
|
12
|
+
"palette": {
|
|
13
|
+
"popup": {
|
|
14
|
+
"background": "#252e39"
|
|
15
|
+
},
|
|
16
|
+
"button": {
|
|
17
|
+
"background": "#14a7d0"
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
</script>
|
data/_layouts/default.html
CHANGED
|
@@ -1,12 +1,20 @@
|
|
|
1
|
+
---
|
|
2
|
+
---
|
|
3
|
+
{% assign lang = page.lang | default: site.lang | default: 'en' %}
|
|
4
|
+
{% assign menu = site.data.translations.menu[page.menu][lang] %}
|
|
5
|
+
{% assign title = page.title | default: site.title %}
|
|
6
|
+
{% assign subtitle = page.subtitle | default: site.subtitle %}
|
|
7
|
+
{% assign description = page.description | default: site.description %}
|
|
8
|
+
|
|
1
9
|
<!DOCTYPE HTML>
|
|
2
10
|
<!--
|
|
3
11
|
Stellar by HTML5 UP
|
|
4
12
|
html5up.net | @ajlkn
|
|
5
13
|
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
|
|
6
14
|
-->
|
|
7
|
-
<html>
|
|
15
|
+
<html lang="{{ lang }}">
|
|
8
16
|
|
|
9
|
-
{% include head.html %}
|
|
17
|
+
{% include head.html title=title subtitle=subtitle %}
|
|
10
18
|
|
|
11
19
|
<body class="is-preload">
|
|
12
20
|
|
|
@@ -15,7 +23,7 @@
|
|
|
15
23
|
|
|
16
24
|
{% include header.html %}
|
|
17
25
|
|
|
18
|
-
{% include navigation.html %}
|
|
26
|
+
{% include navigation.html menu=menu%}
|
|
19
27
|
|
|
20
28
|
<!-- Main -->
|
|
21
29
|
<div id="main">
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: sitemap
|
|
3
|
+
permalink: /sitemap.xml
|
|
4
|
+
---
|
|
5
|
+
{% assign posts=site.posts | sort: 'lang' %}
|
|
6
|
+
{% assign pages=site.html_pages | sort: 'lang' | concat: posts %}
|
|
7
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
8
|
+
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
|
|
9
|
+
{% for page in pages %}
|
|
10
|
+
{% assign versions=pages | where:"lang-ref", page.lang-ref %}
|
|
11
|
+
{% unless page.url contains "404" %}
|
|
12
|
+
<url>
|
|
13
|
+
<loc>{{ page.url | absolute_url}}</loc>
|
|
14
|
+
{% for version in versions %}
|
|
15
|
+
<xhtml:link rel="alternate" hreflang="{{ version.lang }}" href="{{ version.url | absolute_url }}" />
|
|
16
|
+
{% endfor %}
|
|
17
|
+
<changefreq>weekly</changefreq>
|
|
18
|
+
</url>
|
|
19
|
+
{% endunless %}
|
|
20
|
+
{% endfor %}
|
|
21
|
+
</urlset>
|
|
@@ -0,0 +1,402 @@
|
|
|
1
|
+
.cc-window {
|
|
2
|
+
opacity: 1;
|
|
3
|
+
|
|
4
|
+
-webkit-transition: opacity 1s ease;
|
|
5
|
+
-moz-transition: opacity 1s ease;
|
|
6
|
+
-ms-transition: opacity 1s ease;
|
|
7
|
+
-o-transition: opacity 1s ease;
|
|
8
|
+
transition: opacity 1s ease;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.cc-window.cc-invisible {
|
|
12
|
+
opacity: 0;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/* only animate ifhas class 'cc-animate' */
|
|
16
|
+
.cc-animate.cc-revoke {
|
|
17
|
+
-webkit-transition: transform 1s ease;
|
|
18
|
+
-moz-transition: transform 1s ease;
|
|
19
|
+
-ms-transition: transform 1s ease;
|
|
20
|
+
-o-transition: transform 1s ease;
|
|
21
|
+
transition: transform 1s ease;
|
|
22
|
+
}
|
|
23
|
+
.cc-animate.cc-revoke.cc-top {
|
|
24
|
+
transform: translateY(-2em);
|
|
25
|
+
}
|
|
26
|
+
.cc-animate.cc-revoke.cc-bottom {
|
|
27
|
+
transform: translateY(2em);
|
|
28
|
+
}
|
|
29
|
+
.cc-animate.cc-revoke.cc-active.cc-top {
|
|
30
|
+
transform: translateY(0);
|
|
31
|
+
}
|
|
32
|
+
.cc-animate.cc-revoke.cc-active.cc-bottom {
|
|
33
|
+
transform: translateY(0);
|
|
34
|
+
}
|
|
35
|
+
.cc-revoke:hover {
|
|
36
|
+
transform: translateY(0);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.cc-grower {
|
|
40
|
+
/* Initially we don't want any height, and we want the contents to be hidden */
|
|
41
|
+
max-height: 0;
|
|
42
|
+
overflow: hidden;
|
|
43
|
+
|
|
44
|
+
/* Set our transitions up. */
|
|
45
|
+
-webkit-transition: max-height 1s;
|
|
46
|
+
-moz-transition: max-height 1s;
|
|
47
|
+
-ms-transition: max-height 1s;
|
|
48
|
+
-o-transition: max-height 1s;
|
|
49
|
+
transition: max-height 1s;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* the popup window */
|
|
53
|
+
.cc-window,
|
|
54
|
+
.cc-revoke {
|
|
55
|
+
position: fixed;
|
|
56
|
+
overflow: hidden;
|
|
57
|
+
box-sizing: border-box; /* exclude padding when dealing with width */
|
|
58
|
+
|
|
59
|
+
font-family: Helvetica, Calibri, Arial, sans-serif;
|
|
60
|
+
font-size: 16px; /* by setting the base font here, we can size the rest of the popup using CSS `em` */
|
|
61
|
+
line-height: 1.5em;
|
|
62
|
+
|
|
63
|
+
display: flex;
|
|
64
|
+
flex-wrap: nowrap;
|
|
65
|
+
|
|
66
|
+
/* the following are random unjustified styles - just because - should probably be removed */
|
|
67
|
+
z-index: 9998;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.cc-revoke {
|
|
71
|
+
z-index: 9999;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.cc-window.cc-static {
|
|
75
|
+
position: static;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* 2 basic types of window - floating / banner */
|
|
79
|
+
.cc-window.cc-floating {
|
|
80
|
+
padding: 2em;
|
|
81
|
+
max-width: 24em; /* 1em == 16px therefore 24em == 384px */
|
|
82
|
+
flex-direction: column;
|
|
83
|
+
}
|
|
84
|
+
.cc-window.cc-banner {
|
|
85
|
+
padding: 1em 1.8em;
|
|
86
|
+
width: 100%;
|
|
87
|
+
flex-direction: row;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.cc-revoke {
|
|
91
|
+
padding: 0.5em;
|
|
92
|
+
}
|
|
93
|
+
.cc-revoke:hover {
|
|
94
|
+
text-decoration: underline;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.cc-header {
|
|
98
|
+
font-size: 18px;
|
|
99
|
+
font-weight: bold;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* clickable things */
|
|
103
|
+
.cc-btn,
|
|
104
|
+
.cc-link,
|
|
105
|
+
.cc-close,
|
|
106
|
+
.cc-revoke {
|
|
107
|
+
cursor: pointer;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.cc-link {
|
|
111
|
+
opacity: 0.8;
|
|
112
|
+
display: inline-block;
|
|
113
|
+
border: none;
|
|
114
|
+
padding: 0.2em;
|
|
115
|
+
text-decoration: underline;
|
|
116
|
+
}
|
|
117
|
+
.cc-link:hover {
|
|
118
|
+
opacity: 1;
|
|
119
|
+
}
|
|
120
|
+
.cc-link:active,
|
|
121
|
+
.cc-link:visited {
|
|
122
|
+
color: initial;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.cc-btn {
|
|
126
|
+
display: block;
|
|
127
|
+
padding: 0.4em 0.8em;
|
|
128
|
+
font-size: 0.9em;
|
|
129
|
+
font-weight: bold;
|
|
130
|
+
border-width: 2px;
|
|
131
|
+
border-style: solid;
|
|
132
|
+
text-align: center;
|
|
133
|
+
white-space: nowrap;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.cc-highlight .cc-btn:first-child {
|
|
137
|
+
background-color: transparent;
|
|
138
|
+
border-color: transparent;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.cc-highlight .cc-btn:first-child:hover,
|
|
142
|
+
.cc-highlight .cc-btn:first-child:focus {
|
|
143
|
+
background-color: transparent;
|
|
144
|
+
text-decoration: underline;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.cc-close {
|
|
148
|
+
display: block;
|
|
149
|
+
position: absolute;
|
|
150
|
+
top: 0.5em;
|
|
151
|
+
right: 0.5em;
|
|
152
|
+
font-size: 1.6em;
|
|
153
|
+
opacity: 0.9;
|
|
154
|
+
|
|
155
|
+
/* seeing as this contains text and not an image, the element taller than it is wide (because it is text) */
|
|
156
|
+
/* - we want it to be a square, because it's acting as an icon */
|
|
157
|
+
/* - setting the line height normalizes the height */
|
|
158
|
+
line-height: 0.75;
|
|
159
|
+
}
|
|
160
|
+
.cc-close:hover,
|
|
161
|
+
.cc-close:focus {
|
|
162
|
+
opacity: 1;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/* This file should contain styles that modifies the popup layout. */
|
|
166
|
+
/* By layout, we mean the physical position of the elements on the popup window, and the margin / padding around those elements. */
|
|
167
|
+
|
|
168
|
+
.cc-revoke.cc-top {
|
|
169
|
+
top: 0;
|
|
170
|
+
left: 3em;
|
|
171
|
+
border-bottom-left-radius: 0.5em;
|
|
172
|
+
border-bottom-right-radius: 0.5em;
|
|
173
|
+
}
|
|
174
|
+
.cc-revoke.cc-bottom {
|
|
175
|
+
bottom: 0;
|
|
176
|
+
left: 3em;
|
|
177
|
+
border-top-left-radius: 0.5em;
|
|
178
|
+
border-top-right-radius: 0.5em;
|
|
179
|
+
}
|
|
180
|
+
.cc-revoke.cc-left {
|
|
181
|
+
left: 3em;
|
|
182
|
+
right: unset;
|
|
183
|
+
}
|
|
184
|
+
.cc-revoke.cc-right {
|
|
185
|
+
right: 3em;
|
|
186
|
+
left: unset;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
/**************************************** FLOATING ****************************************/
|
|
190
|
+
|
|
191
|
+
/* these classes position the floating element */
|
|
192
|
+
.cc-top {
|
|
193
|
+
top: 1em;
|
|
194
|
+
}
|
|
195
|
+
.cc-left {
|
|
196
|
+
left: 1em;
|
|
197
|
+
}
|
|
198
|
+
.cc-right {
|
|
199
|
+
right: 1em;
|
|
200
|
+
}
|
|
201
|
+
.cc-bottom {
|
|
202
|
+
bottom: 1em;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
/* links that are direct decendants should be displayed as block */
|
|
206
|
+
.cc-floating > .cc-link {
|
|
207
|
+
margin-bottom: 1em;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.cc-floating .cc-message {
|
|
211
|
+
display: block;
|
|
212
|
+
margin-bottom: 1em;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.cc-window.cc-floating .cc-compliance {
|
|
216
|
+
flex: 1 0 auto;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
/**************************************** BANNER ****************************************/
|
|
220
|
+
|
|
221
|
+
.cc-window.cc-banner {
|
|
222
|
+
align-items: center;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.cc-banner.cc-top {
|
|
226
|
+
left: 0;
|
|
227
|
+
right: 0;
|
|
228
|
+
top: 0;
|
|
229
|
+
}
|
|
230
|
+
.cc-banner.cc-bottom {
|
|
231
|
+
left: 0;
|
|
232
|
+
right: 0;
|
|
233
|
+
bottom: 0;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.cc-banner .cc-message {
|
|
237
|
+
display: block;
|
|
238
|
+
flex: 1 1 auto;
|
|
239
|
+
max-width: 100%;
|
|
240
|
+
margin-right: 1em;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
/* COMPLIANCE BOX */
|
|
244
|
+
|
|
245
|
+
.cc-compliance {
|
|
246
|
+
display: flex;
|
|
247
|
+
align-items: center;
|
|
248
|
+
justify-content: space-between;
|
|
249
|
+
}
|
|
250
|
+
.cc-floating .cc-compliance > .cc-btn {
|
|
251
|
+
flex: 1;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.cc-btn + .cc-btn {
|
|
255
|
+
margin-left: 0.5em;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
/* Categories Layout */
|
|
259
|
+
.cc-window.cc-type-categories {
|
|
260
|
+
display : inline-flex;
|
|
261
|
+
flex-direction: column;
|
|
262
|
+
overflow : visible;
|
|
263
|
+
.form{
|
|
264
|
+
text-align: right;
|
|
265
|
+
}
|
|
266
|
+
.cc-btn {
|
|
267
|
+
margin: 0;
|
|
268
|
+
&.cc-save {
|
|
269
|
+
margin : 0;
|
|
270
|
+
display : inline-block;
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
.cc-categories {
|
|
275
|
+
display: inline-flex;
|
|
276
|
+
.cc-category{
|
|
277
|
+
display : flex;
|
|
278
|
+
max-width: 100%;
|
|
279
|
+
margin : 0 2px;
|
|
280
|
+
position : relative;
|
|
281
|
+
}
|
|
282
|
+
.cc-btn {
|
|
283
|
+
border-right: none;
|
|
284
|
+
outline : none;
|
|
285
|
+
input[type=checkbox]{
|
|
286
|
+
float: left;
|
|
287
|
+
height: 26px;
|
|
288
|
+
width: calc( 100% - 22px );
|
|
289
|
+
display: block;
|
|
290
|
+
position: absolute;
|
|
291
|
+
top: 0;
|
|
292
|
+
left: 2px;
|
|
293
|
+
cursor: pointer;
|
|
294
|
+
}
|
|
295
|
+
&:not(.cc-info):not(.cc-save){
|
|
296
|
+
padding-left: 26px;
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
.cc-info {
|
|
300
|
+
border-left : none;
|
|
301
|
+
border-right: 2px solid lightgrey;
|
|
302
|
+
padding : 4px;
|
|
303
|
+
font-variant: all-small-caps;
|
|
304
|
+
&:focus + .cc-tooltip{
|
|
305
|
+
display: block;
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
.cc-tooltip{
|
|
309
|
+
display : none;
|
|
310
|
+
position : absolute;
|
|
311
|
+
z-index : 3;
|
|
312
|
+
width : 190px;
|
|
313
|
+
bottom : 46px;
|
|
314
|
+
padding : 8px;
|
|
315
|
+
border : thin solid lightgrey;
|
|
316
|
+
box-shadow: 1px 1px 4px rgba( 150, 150, 150, .7 );
|
|
317
|
+
&:after{
|
|
318
|
+
content : "";
|
|
319
|
+
width : 10px;
|
|
320
|
+
height : 10px;
|
|
321
|
+
transform : rotate(45deg);
|
|
322
|
+
position : absolute;
|
|
323
|
+
bottom : -7px;
|
|
324
|
+
left : 10px;
|
|
325
|
+
box-shadow: 2px 1px 1px rgba( 200, 200, 200, .5 );
|
|
326
|
+
}
|
|
327
|
+
p {
|
|
328
|
+
margin: 0;
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
@media print {
|
|
334
|
+
.cc-window,
|
|
335
|
+
.cc-revoke {
|
|
336
|
+
display: none;
|
|
337
|
+
}
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
@media screen and (max-width: 900px) {
|
|
341
|
+
.cc-btn {
|
|
342
|
+
white-space: normal;
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
/* dimensions for 'iPhone6 Plus' and lower */
|
|
347
|
+
@media screen and (max-width: 414px) and (orientation: portrait),
|
|
348
|
+
screen and (max-width: 736px) and (orientation: landscape) {
|
|
349
|
+
.cc-window {
|
|
350
|
+
&.cc-top {
|
|
351
|
+
top: 0;
|
|
352
|
+
}
|
|
353
|
+
&.cc-bottom {
|
|
354
|
+
bottom: 0;
|
|
355
|
+
}
|
|
356
|
+
&.cc-banner,
|
|
357
|
+
&.cc-floating,
|
|
358
|
+
&.cc-right,
|
|
359
|
+
&.cc-left {
|
|
360
|
+
left: 0;
|
|
361
|
+
right: 0;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
&.cc-banner {
|
|
365
|
+
flex-direction: column;
|
|
366
|
+
align-items: unset;
|
|
367
|
+
.cc-compliance {
|
|
368
|
+
flex: 1 1 auto;
|
|
369
|
+
}
|
|
370
|
+
.cc-message {
|
|
371
|
+
margin-right: 0;
|
|
372
|
+
margin-bottom: 1em;
|
|
373
|
+
}
|
|
374
|
+
}
|
|
375
|
+
&.cc-floating {
|
|
376
|
+
max-width: none;
|
|
377
|
+
}
|
|
378
|
+
&.cc-type-categories {
|
|
379
|
+
flex-direction: column;
|
|
380
|
+
}
|
|
381
|
+
.cc-message {
|
|
382
|
+
margin-bottom: 1em;
|
|
383
|
+
}
|
|
384
|
+
.cc-categories{
|
|
385
|
+
flex-direction: column;
|
|
386
|
+
width: 100%;
|
|
387
|
+
margin-right: 8px;
|
|
388
|
+
}
|
|
389
|
+
.cc-category {
|
|
390
|
+
margin: 4px 0;
|
|
391
|
+
.cc-btn:not(.cc-info){
|
|
392
|
+
width: calc( 100% - 16px);
|
|
393
|
+
min-width: 140px;
|
|
394
|
+
}
|
|
395
|
+
}
|
|
396
|
+
}
|
|
397
|
+
}
|
|
398
|
+
@media screen and (max-width: 854px) {
|
|
399
|
+
.cc-window.cc-type-categories .cc-btn.cc-save {
|
|
400
|
+
margin: 8px 0;
|
|
401
|
+
}
|
|
402
|
+
}
|