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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
- SHA1:
3
- metadata.gz: 5b54be6c3c270f38cc051d607aeff0e3b08e8bfd
4
- data.tar.gz: d605bb2e215d7b3750bf4b10b65abd2eb8cd0dc7
2
+ SHA256:
3
+ metadata.gz: 0d1ba6627400728f68b3ce0b1d8ed005e49a4663d08ca3ec49e495e97c25e0d9
4
+ data.tar.gz: 15b4d5acba8303d40f0513be7c53ddf2efdb72c815ebb37bfcf049339b1422d8
5
5
  SHA512:
6
- metadata.gz: d4dc979ac47713409c74108df4af14e9260749ef975d3554879c92a34c86cdcba660d8f05ca279b0d5f182653ec37c6cf22f60e00a56fc22220d78b7b420cb4a
7
- data.tar.gz: 750fe847c0d60e162523bcdba86f9638104774ed683336be8984b39bccbfc4ab33c8c8e45d8cc2403edbdda81a251900e8019210f8f2cefafb043e21087aab03
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
  ![Stellar Theme](assets/images/screenshot.jpg "Stellar Theme")
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
- To post your website as a Github page, fork this reposity and create a branch named `gh-pages`, then start editing the `_config.yml` file.
70
+ ### On Github Pages
40
71
 
41
- # Configuration
72
+ In your own website's repository, edit the `_config.yml` file:
42
73
 
43
- You can use the following custom parameters in `_config.yml`.
74
+ ```yaml
75
+ url: "https://<github-account-name>.github.io/<repository-name>"
76
+ ```
77
+
78
+ Build the website with:
44
79
 
45
- ## Site
46
- - `subtitle` sets the text for the lighter colored text next to your site's title.
47
-
48
- ## Social
49
- - `500px_url`
50
- - `facebook_url`
51
- - `github_url`
52
- - `gitlab_url`
53
- - `googleplus_url`
54
- - `instagram_url`
55
- - `linkedin_url`
56
- - `pinterest_url`
57
- - `slack_url`
58
- - `twitter_url`
59
-
60
- ## Contact
61
- - `street_address`
62
- - `city`
63
- - `state`
64
- - `zip_code`
65
- - `country`
66
- - `phone`
67
- - `email`
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
- # Credits
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
@@ -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 %}
@@ -18,37 +18,43 @@
18
18
  <dd><a href="#">{{ site.email }}</a></dd>
19
19
  </dl>
20
20
  <ul class="icons">
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>
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.googleplus_url %}
25
- <li><a href="{{ site.googleplus_url }}" class="icon alt fa-google-plus" target="_blank"><span class="label">Google+</span></a></li>
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.facebook_url %}
28
- <li><a href="{{ site.facebook_url }}" class="icon alt fa-facebook" target="_blank"><span class="label">Facebook</span></a></li>
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.instagram_url %}
31
- <li><a href="{{ site.instagram_url }}" class="icon alt fa-instagram" target="_blank"><span class="label">Instagram</span></a></li>
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.pinterest_url %}
34
- <li><a href="{{ site.pinterest_url }}" class="icon alt fa-pinterest" target="_blank"><span class="label">Pinterest</span></a></li>
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.500px_url %}
37
- <li><a href="{{ site.500px_url }}" class="icon alt fa-500px" target="_blank"><span class="label">500px</span></a></li>
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.gitlab_url %}
40
- <li><a href="{{ site.gitlab_url }}" class="icon alt fa-gitlab" target="_blank"><span class="label">GitLab</span></a></li>
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.github_url %}
43
- <li><a href="{{ site.github_url }}" class="icon alt fa-github" target="_blank"><span class="label">GitHub</span></a></li>
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.slack_url %}
46
- <li><a href="{{ site.slack_url }}" class="icon alt fa-slack" target="_blank"><span class="label">Slack</span></a></li>
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.linkedin_url %}
49
- <li><a href="{{ site.linkedin_url }}" class="icon alt fa-linkedin" target="_blank"><span class="label">LinkedIn</span></a></li>
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">&copy; {{ site.title }} {{ site.subtitle }}. Design: <a href="https://html5up.net">HTML5 UP</a>. Jekyll integration: <a href="http://github.com/moodule" target="_blank">David Mougeolle</a></p>
53
+ <p class="copyright">
54
+ &copy; {{ 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>
@@ -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>{{ site.title }} {{ site.subtitle }}</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
- <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
7
- </head>
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>
@@ -1,6 +1,6 @@
1
1
  <!-- Header -->
2
2
  <header id="header" class="alt">
3
- <a href="{{ site.baseurl }}/"><span class="logo"><img src="assets/images/logo.svg" alt="" /></span></a>
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 %}
@@ -1,8 +1,22 @@
1
1
  <!-- Nav -->
2
2
  <nav id="nav">
3
3
  <ul>
4
- {% for section in site.home_sections %}
5
- <li><a href="#{{ section.label }}">{{ section.title }}</a></li>
6
- {% endfor %}
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>
@@ -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>
@@ -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,10 @@
1
+ ---
2
+ lang: x-default
3
+ ---
4
+ <!doctype html>
5
+ <html>
6
+ <head>
7
+ <meta http-equiv="refresh" content="0; url={{ page.forward_url | absolute_url }}">
8
+ <link rel="canonical" href="{{ page.forward_url | absolute_url }}" />
9
+ </head>
10
+ </html>
@@ -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
+ }