jekyll-theme-stellar 0.1.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|
+
}
|