@moreonion/foundist 3.4.0-beta → 3.4.0
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.
- package/package.json +17 -15
- package/src/html/basic-action-page-cover-1col-with-headline.html +2 -2
- package/src/html/basic-action-page-cover-1col.html +2 -2
- package/src/html/basic-action-page-cover-2col-reversed.html +2 -2
- package/src/html/basic-action-page-cover-2col-with-headline.html +2 -2
- package/src/html/basic-action-page-cover-2col.html +2 -2
- package/src/html/basic-action-page-cover-banner-with-headline.html +2 -2
- package/src/html/basic-action-page-cover-banner.html +2 -2
- package/src/html/basic-action-page-reversed.html +1 -1
- package/src/html/basic-action-page-with-banner-and-headline.html +2 -2
- package/src/html/basic-action-page-with-banner-reversed.html +2 -2
- package/src/html/basic-action-page-with-banner.html +2 -2
- package/src/html/basic-action-page-with-callouts.html +1 -1
- package/src/html/basic-action-page.html +1 -1
- package/src/html/donation-action-page.html +1 -1
- package/src/html/e2t-action-page.html +1 -1
- package/src/html/includes/language-switcher.html +1 -2
- package/src/html/includes/letter.html +1 -1
- package/src/html/includes/menu-responsive.html +17 -0
- package/src/html/includes/menu.html +7 -5
- package/src/html/includes/section-1col.html +1 -1
- package/src/html/includes/section-2col.html +1 -1
- package/src/html/includes/section-quote.html +1 -1
- package/src/html/includes/section-slideshow.html +3 -3
- package/src/html/includes/teasers.html +1 -1
- package/src/html/signup-action-page.html +1 -1
- package/src/html/snippets-demo.html +4 -0
- package/src/html/templates/page.html +3 -0
- package/src/html/thank-you-page-cover-1col-with-headline.html +1 -1
- package/src/html/thank-you-page-cover-1col.html +1 -1
- package/src/html/thank-you-page-cover-2col-with-headline.html +1 -1
- package/src/html/thank-you-page-cover-2col.html +1 -1
- package/src/html/thank-you-page-cover-banner-with-headline.html +1 -1
- package/src/html/thank-you-page-cover-banner.html +1 -1
- package/src/html/thank-you-page-with-banner-and-headline.html +1 -1
- package/src/html/thank-you-page-with-banner.html +1 -1
- package/src/html/thank-you-page.html +1 -1
- package/src/html/typography-static-page.html +3 -3
- package/src/scss/components/_headline.scss +1 -0
- package/src/scss/components/_menu.scss +17 -2
- package/src/scss/components/_mobile-menu.scss +152 -0
- package/src/scss/components/_quote.scss +23 -20
- package/src/scss/components/_settings.scss +2 -0
- package/src/scss/components/_top-bar.scss +35 -0
- package/src/scss/form/_braintree_apple_pay.scss +13 -0
- package/src/scss/main.scss +2 -1
- package/src/scss/typography/_elements.scss +1 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@moreonion/foundist",
|
|
3
|
-
"version": "3.4.0
|
|
3
|
+
"version": "3.4.0",
|
|
4
4
|
"description": "Foundation based default theme for Impact Stack landing pages.",
|
|
5
5
|
"author": "More Onion <kontakt@more-onion.at>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -26,26 +26,28 @@
|
|
|
26
26
|
"prepare": "husky"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@moreonion/foundation-base": "3.3.
|
|
30
|
-
"
|
|
31
|
-
"
|
|
29
|
+
"@moreonion/foundation-base": "3.3.5",
|
|
30
|
+
"foundation-sites": "6.8.1",
|
|
31
|
+
"jquery": "^3.7.0",
|
|
32
|
+
"sass": "npm:sass-embedded@^1.77.0",
|
|
33
|
+
"select2": "^4.1.0-rc.0"
|
|
34
|
+
},
|
|
35
|
+
"devDependencies": {
|
|
36
|
+
"autoprefixer": "^10.4.19",
|
|
37
|
+
"eslint": "8.57.0",
|
|
32
38
|
"eslint-config-standard": "^17.1.0",
|
|
33
39
|
"eslint-plugin-import": "^2.29.0",
|
|
34
|
-
"eslint-plugin-n": "^
|
|
35
|
-
"eslint-plugin-promise": "^6.
|
|
36
|
-
"foundation-sites": "6.8.1",
|
|
40
|
+
"eslint-plugin-n": "^17.8.0",
|
|
41
|
+
"eslint-plugin-promise": "^6.2.0",
|
|
37
42
|
"husky": "^9.0.0",
|
|
38
|
-
"jquery": "^3.7.0",
|
|
39
43
|
"lint-staged": "^15.2.0",
|
|
40
|
-
"postcss": "^8.4.
|
|
41
|
-
"prettier": "^3.
|
|
42
|
-
"
|
|
43
|
-
"select2": "^4.1.0-rc.0",
|
|
44
|
-
"stylelint": "^16.2.0",
|
|
44
|
+
"postcss": "^8.4.38",
|
|
45
|
+
"prettier": "^3.3.0",
|
|
46
|
+
"stylelint": "^16.6.0",
|
|
45
47
|
"stylelint-config-idiomatic-order": "^10.0.0",
|
|
46
48
|
"stylelint-config-recommended-scss": "^14.0.0",
|
|
47
|
-
"stylelint-scss": "^6.
|
|
48
|
-
"vite": "^5.
|
|
49
|
+
"stylelint-scss": "^6.3.0",
|
|
50
|
+
"vite": "^5.3.0",
|
|
49
51
|
"vite-plugin-nunjucks": "^0.2.0"
|
|
50
52
|
},
|
|
51
53
|
"lint-staged": {
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
{% block page_title %}Take action now!{% endblock %}
|
|
8
8
|
|
|
9
9
|
{% block background %}
|
|
10
|
-
<img src="
|
|
10
|
+
<img src="https://loremflickr.com/1280/588/cat" alt="test image with cats" crossorigin="">
|
|
11
11
|
{% endblock %}
|
|
12
12
|
|
|
13
13
|
{% block headline %}
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
|
|
38
38
|
{% block content_top %}
|
|
39
39
|
<div class="media-stretch">
|
|
40
|
-
<img src="
|
|
40
|
+
<img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
|
|
41
41
|
</div>
|
|
42
42
|
{% endblock %}
|
|
43
43
|
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
{% block page_title %}Take action now!{% endblock %}
|
|
6
6
|
|
|
7
7
|
{% block background %}
|
|
8
|
-
<img src="
|
|
8
|
+
<img src="https://loremflickr.com/1280/588/cat" alt="test image with cats" crossorigin="">
|
|
9
9
|
{% endblock %}
|
|
10
10
|
|
|
11
11
|
{% block top %}
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
|
|
32
32
|
{% block content_top %}
|
|
33
33
|
<div class="media-stretch">
|
|
34
|
-
<img src="
|
|
34
|
+
<img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
|
|
35
35
|
</div>
|
|
36
36
|
{% endblock %}
|
|
37
37
|
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
{% block page_title %}Take action now!{% endblock %}
|
|
6
6
|
|
|
7
7
|
{% block background %}
|
|
8
|
-
<img src="
|
|
8
|
+
<img src="https://loremflickr.com/1600/1000/cat" alt="test image with cats" crossorigin="">
|
|
9
9
|
{% endblock %}
|
|
10
10
|
|
|
11
11
|
{% block top %}
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
|
|
32
32
|
{% block content_top %}
|
|
33
33
|
<div class="media-stretch">
|
|
34
|
-
<img src="
|
|
34
|
+
<img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
|
|
35
35
|
</div>
|
|
36
36
|
{% endblock %}
|
|
37
37
|
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
{% block page_title %}Take action now!{% endblock %}
|
|
8
8
|
|
|
9
9
|
{% block background %}
|
|
10
|
-
<img src="
|
|
10
|
+
<img src="https://loremflickr.com/1600/1000/cat" alt="test image with cats" crossorigin="">
|
|
11
11
|
{% endblock %}
|
|
12
12
|
|
|
13
13
|
{% block headline %}
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
|
|
38
38
|
{% block content_top %}
|
|
39
39
|
<div class="media-stretch">
|
|
40
|
-
<img src="
|
|
40
|
+
<img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
|
|
41
41
|
</div>
|
|
42
42
|
{% endblock %}
|
|
43
43
|
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
{% block page_title %}Take action now!{% endblock %}
|
|
6
6
|
|
|
7
7
|
{% block background %}
|
|
8
|
-
<img src="
|
|
8
|
+
<img src="https://loremflickr.com/1600/1000/cat" alt="test image with cats" crossorigin="">
|
|
9
9
|
{% endblock %}
|
|
10
10
|
|
|
11
11
|
{% block top %}
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
|
|
32
32
|
{% block content_top %}
|
|
33
33
|
<div class="media-stretch">
|
|
34
|
-
<img src="
|
|
34
|
+
<img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
|
|
35
35
|
</div>
|
|
36
36
|
{% endblock %}
|
|
37
37
|
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
{% block page_title %}Take action now!{% endblock %}
|
|
8
8
|
|
|
9
9
|
{% block background %}
|
|
10
|
-
<img src="
|
|
10
|
+
<img src="https://loremflickr.com/1280/588/cat" alt="test image with cats" crossorigin="">
|
|
11
11
|
{% endblock %}
|
|
12
12
|
|
|
13
13
|
{% block headline %}
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
|
|
38
38
|
{% block content_top %}
|
|
39
39
|
<div class="media-stretch">
|
|
40
|
-
<img src="
|
|
40
|
+
<img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
|
|
41
41
|
</div>
|
|
42
42
|
{% endblock %}
|
|
43
43
|
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
{% block page_title %}Take action now!{% endblock %}
|
|
6
6
|
|
|
7
7
|
{% block background %}
|
|
8
|
-
<img src="
|
|
8
|
+
<img src="https://loremflickr.com/1280/588/cat" alt="test image with cats" crossorigin="">
|
|
9
9
|
{% endblock %}
|
|
10
10
|
|
|
11
11
|
{% block top %}
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
|
|
32
32
|
{% block content_top %}
|
|
33
33
|
<div class="media-stretch">
|
|
34
|
-
<img src="
|
|
34
|
+
<img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
|
|
35
35
|
</div>
|
|
36
36
|
{% endblock %}
|
|
37
37
|
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
|
|
28
28
|
{% block content_top %}
|
|
29
29
|
<div class="media-stretch">
|
|
30
|
-
<img src="
|
|
30
|
+
<img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
|
|
31
31
|
</div>
|
|
32
32
|
{% endblock %}
|
|
33
33
|
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
{% block page_title %}Take action now!{% endblock %}
|
|
8
8
|
|
|
9
9
|
{% block banner %}
|
|
10
|
-
<img src="
|
|
10
|
+
<img src="https://loremflickr.com/1280/588/cat" alt="test image with cats" crossorigin="">
|
|
11
11
|
{% endblock %}
|
|
12
12
|
|
|
13
13
|
{% block top %}
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
|
|
38
38
|
{% block content_top %}
|
|
39
39
|
<div class="media-stretch">
|
|
40
|
-
<img src="
|
|
40
|
+
<img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
|
|
41
41
|
</div>
|
|
42
42
|
{% endblock %}
|
|
43
43
|
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
{% block page_title %}Take action now!{% endblock %}
|
|
6
6
|
|
|
7
7
|
{% block banner %}
|
|
8
|
-
<img src="
|
|
8
|
+
<img src="https://loremflickr.com/1280/588/cat" alt="test image with cats" crossorigin="">
|
|
9
9
|
{% endblock %}
|
|
10
10
|
|
|
11
11
|
{% block top %}
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
|
|
32
32
|
{% block content_top %}
|
|
33
33
|
<div class="media-stretch">
|
|
34
|
-
<img src="
|
|
34
|
+
<img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
|
|
35
35
|
</div>
|
|
36
36
|
{% endblock %}
|
|
37
37
|
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
{% block page_title %}Take action now!{% endblock %}
|
|
6
6
|
|
|
7
7
|
{% block banner %}
|
|
8
|
-
<img src="
|
|
8
|
+
<img src="https://loremflickr.com/1280/588/cat" alt="test image with cats" crossorigin="">
|
|
9
9
|
{% endblock %}
|
|
10
10
|
|
|
11
11
|
{% block top %}
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
|
|
32
32
|
{% block content_top %}
|
|
33
33
|
<div class="media-stretch">
|
|
34
|
-
<img src="
|
|
34
|
+
<img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
|
|
35
35
|
</div>
|
|
36
36
|
{% endblock %}
|
|
37
37
|
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
|
|
36
36
|
{% block content_top %}
|
|
37
37
|
<div class="media-stretch">
|
|
38
|
-
<img src="
|
|
38
|
+
<img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
|
|
39
39
|
</div>
|
|
40
40
|
{% endblock %}
|
|
41
41
|
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
|
|
28
28
|
{% block content_top %}
|
|
29
29
|
<div class="media-stretch">
|
|
30
|
-
<img src="
|
|
30
|
+
<img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
|
|
31
31
|
</div>
|
|
32
32
|
{% endblock %}
|
|
33
33
|
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
|
|
24
24
|
{% block content_top %}
|
|
25
25
|
<div class="media-stretch">
|
|
26
|
-
<img src="
|
|
26
|
+
<img src="https://loremflickr.com/860/460/cat" alt="test image with cats" crossorigin="">
|
|
27
27
|
</div>
|
|
28
28
|
{% endblock %}
|
|
29
29
|
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
|
|
24
24
|
{% block content_top %}
|
|
25
25
|
<div class="media-stretch">
|
|
26
|
-
<img src="
|
|
26
|
+
<img src="https://loremflickr.com/860/460/cat" alt="test image with cats" crossorigin="">
|
|
27
27
|
</div>
|
|
28
28
|
{% endblock %}
|
|
29
29
|
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<p>Yours,</p>
|
|
7
7
|
<ul class="signatures">
|
|
8
8
|
<li>
|
|
9
|
-
<span class="signature-image"><img src="
|
|
9
|
+
<span class="signature-image"><img src="https://loremflickr.com/100/100/cat,portrait/all" alt="portrait of a cat" crossorigin=""></span>
|
|
10
10
|
<span class="signature-name">Kitty</span>
|
|
11
11
|
<span class="signature-description">the cat</span>
|
|
12
12
|
</li>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<button type="button"
|
|
2
|
+
class="mobile-menu-toggle"
|
|
3
|
+
data-toggle="mobile-menu"
|
|
4
|
+
aria-hidden="true"
|
|
5
|
+
tabindex="-1"><span class="menu-icon"></span>
|
|
6
|
+
</button>
|
|
7
|
+
<div id="mobile-menu" class="mobile-menu" data-toggler="open">
|
|
8
|
+
{% include "src/html/includes/menu.html" %}
|
|
9
|
+
{% include "src/html/includes/language-switcher.html" %}
|
|
10
|
+
<button type="button"
|
|
11
|
+
class="close-button large"
|
|
12
|
+
data-toggle="mobile-menu"
|
|
13
|
+
aria-hidden="true"
|
|
14
|
+
tabindex="-1"
|
|
15
|
+
onclick="event.target.blur();">
|
|
16
|
+
</button>
|
|
17
|
+
</div>
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
<
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
</
|
|
1
|
+
<nav aria-label="Main menu">
|
|
2
|
+
<ul class="menu">
|
|
3
|
+
<li class="is-active"><a href="#">About cats</a></li>
|
|
4
|
+
<li><a href="#">Meouw</a></li>
|
|
5
|
+
<li><a href="#">Another link</a></li>
|
|
6
|
+
</ul>
|
|
7
|
+
</nav>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<section>
|
|
2
2
|
<div class="background">
|
|
3
|
-
<img src="
|
|
3
|
+
<img src="https://loremflickr.com/1600/1000/cat" alt="test image with cats" crossorigin="">
|
|
4
4
|
</div>
|
|
5
5
|
<div class="grid-container narrow">
|
|
6
6
|
<blockquote>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<section>
|
|
2
2
|
<div class="grid-container">
|
|
3
3
|
<div class="column media-stretch">
|
|
4
|
-
<img src="
|
|
4
|
+
<img src="https://loremflickr.com/600/400/cat" alt="test image with cats" crossorigin="">
|
|
5
5
|
</div>
|
|
6
6
|
<div class="column">
|
|
7
7
|
<h2>What's your problem?</h2>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<section class="blockquote-section">
|
|
2
2
|
<div class="grid-container">
|
|
3
3
|
<div class="column blockquote-image">
|
|
4
|
-
<img src="
|
|
4
|
+
<img src="https://loremflickr.com/500/500/cat" alt="test image with cats" crossorigin="">
|
|
5
5
|
</div>
|
|
6
6
|
<div class="column">
|
|
7
7
|
<blockquote>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{% macro img_slide(width, height) %}
|
|
2
2
|
<li>
|
|
3
3
|
<img
|
|
4
|
-
src="
|
|
5
|
-
alt="test image with
|
|
4
|
+
src="https://loremflickr.com/{{ width|default([480, 640, 880, 1280]|random) }}/{{ height|default([480, 640, 880]|random) }}/animal"
|
|
5
|
+
alt="test image with random animal"
|
|
6
6
|
crossorigin=""
|
|
7
7
|
>
|
|
8
8
|
</li>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<li>
|
|
13
13
|
<div class="card">
|
|
14
14
|
<div class="card-image">
|
|
15
|
-
<img src="
|
|
15
|
+
<img src="https://loremflickr.com/480/270/cat" alt="test image with cats" crossorigin="">
|
|
16
16
|
</div>
|
|
17
17
|
<div class="card-section">
|
|
18
18
|
<p>{{ caption }}</p>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{% macro teaser(title) %}
|
|
2
2
|
<article class="card">
|
|
3
3
|
<div class="card-image">
|
|
4
|
-
<img src="
|
|
4
|
+
<img src="https://loremflickr.com/480/270/cat" alt="test image with cats" crossorigin="">
|
|
5
5
|
</div>
|
|
6
6
|
<div class="card-section">
|
|
7
7
|
<div class="progress-wrapper" data-pgbar-current="140" data-pgbar-target="200">
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
|
|
24
24
|
{% block content_top %}
|
|
25
25
|
<div class="media-stretch">
|
|
26
|
-
<img src="
|
|
26
|
+
<img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
|
|
27
27
|
</div>
|
|
28
28
|
{% endblock %}
|
|
29
29
|
|
|
@@ -4,6 +4,9 @@
|
|
|
4
4
|
<div id="page" class="{% block page_class %}default-layout{% endblock %}">
|
|
5
5
|
|
|
6
6
|
<section id="header">
|
|
7
|
+
<div class="skip-link grid-container">
|
|
8
|
+
<a class="show-on-focus small" href="#main">Skip to main content</a>
|
|
9
|
+
</div>
|
|
7
10
|
<div class="top-bar grid-container">
|
|
8
11
|
<div class="top-bar-left">
|
|
9
12
|
{% block logo %}
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
{% block page_title %}Thank you for taking action. You’re awesome!{% endblock %}
|
|
8
8
|
|
|
9
9
|
{% block background %}
|
|
10
|
-
<img src="
|
|
10
|
+
<img src="https://loremflickr.com/1600/735/cat" alt="test image with cats" crossorigin="">
|
|
11
11
|
{% endblock %}
|
|
12
12
|
|
|
13
13
|
{% block headline %}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
{% block page_title %}Thank you for taking action. You’re awesome!{% endblock %}
|
|
6
6
|
|
|
7
7
|
{% block background %}
|
|
8
|
-
<img src="
|
|
8
|
+
<img src="https://loremflickr.com/1600/735/cat" alt="test image with cats" crossorigin="">
|
|
9
9
|
{% endblock %}
|
|
10
10
|
|
|
11
11
|
{% block content %}
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
{% block page_title %}Thank you for taking action. You’re awesome!{% endblock %}
|
|
8
8
|
|
|
9
9
|
{% block background %}
|
|
10
|
-
<img src="
|
|
10
|
+
<img src="https://loremflickr.com/1600/800/cat" alt="test image with cats" crossorigin="">
|
|
11
11
|
{% endblock %}
|
|
12
12
|
|
|
13
13
|
{% block headline %}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
{% block page_title %}Thank you for taking action. You’re awesome!{% endblock %}
|
|
6
6
|
|
|
7
7
|
{% block background %}
|
|
8
|
-
<img src="
|
|
8
|
+
<img src="https://loremflickr.com/1600/800/cat" alt="test image with cats" crossorigin="">
|
|
9
9
|
{% endblock %}
|
|
10
10
|
|
|
11
11
|
{% block content %}
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
{% block page_title %}Thank you for taking action. You’re awesome!{% endblock %}
|
|
8
8
|
|
|
9
9
|
{% block background %}
|
|
10
|
-
<img src="
|
|
10
|
+
<img src="https://loremflickr.com/1600/735/cat" alt="test image with cats" crossorigin="">
|
|
11
11
|
{% endblock %}
|
|
12
12
|
|
|
13
13
|
{% block headline %}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
{% block page_title %}Thank you for taking action. You’re awesome!{% endblock %}
|
|
6
6
|
|
|
7
7
|
{% block background %}
|
|
8
|
-
<img src="
|
|
8
|
+
<img src="https://loremflickr.com/1600/735/cat" alt="test image with cats" crossorigin="">
|
|
9
9
|
{% endblock %}
|
|
10
10
|
|
|
11
11
|
{% block content %}
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
{% block page_title %}Thank you for taking action. You’re awesome!{% endblock %}
|
|
8
8
|
|
|
9
9
|
{% block banner %}
|
|
10
|
-
<img src="
|
|
10
|
+
<img src="https://loremflickr.com/1600/735/cat" alt="test image with cats" crossorigin="">
|
|
11
11
|
{% endblock %}
|
|
12
12
|
|
|
13
13
|
{% block headline %}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
{% block page_title %}Thank you for taking action. You’re awesome!{% endblock %}
|
|
6
6
|
|
|
7
7
|
{% block banner %}
|
|
8
|
-
<img src="
|
|
8
|
+
<img src="https://loremflickr.com/1600/735/cat" alt="test image with cats" crossorigin="">
|
|
9
9
|
{% endblock %}
|
|
10
10
|
|
|
11
11
|
{% block content %}
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
{% block content_top %}
|
|
8
8
|
<div class="media-stretch">
|
|
9
|
-
<img src="
|
|
9
|
+
<img src="https://loremflickr.com/625/400/cat" alt="test image with cats" crossorigin="">
|
|
10
10
|
</div>
|
|
11
11
|
{% endblock %}
|
|
12
12
|
|
|
@@ -3,12 +3,12 @@
|
|
|
3
3
|
{% block page_title %}This is the main headline{% endblock %}
|
|
4
4
|
|
|
5
5
|
{% block top %}
|
|
6
|
-
<p>Experiences short bursts of poo-phoria after going to the loo chirp at birds, destroy the blinds. Spend all night ensuring people don't sleep sleep all day climb leg, so i show my fluffy belly but it's a trap! if you pet it i will tear up your hand yet steal the warm chair right after you get up get video posted to internet for chasing red dot.</p><p>Texts have been generated on <a href="http://www.catipsum.com/">Cat Ipsum</a>, images provided by <a href="
|
|
6
|
+
<p>Experiences short bursts of poo-phoria after going to the loo chirp at birds, destroy the blinds. Spend all night ensuring people don't sleep sleep all day climb leg, so i show my fluffy belly but it's a trap! if you pet it i will tear up your hand yet steal the warm chair right after you get up get video posted to internet for chasing red dot.</p><p>Texts have been generated on <a href="http://www.catipsum.com/">Cat Ipsum</a>, images provided by <a href="https://loremflickr.com/">LoremFlickr</a>.</p>
|
|
7
7
|
{% endblock %}
|
|
8
8
|
|
|
9
9
|
{% block content_top %}
|
|
10
10
|
<div class="media-stretch">
|
|
11
|
-
<img src="
|
|
11
|
+
<img src="https://loremflickr.com/800/400/cat" alt="test image with cats" crossorigin="">
|
|
12
12
|
</div>
|
|
13
13
|
{% endblock %}
|
|
14
14
|
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
<blockquote>
|
|
25
25
|
<p>Mark territory peer out window, chatter at birds, lure them to mouth vommit food and eat it again. Crusty butthole need to chase tail licks paws sit in box make meme, make cute face.</p>
|
|
26
26
|
<footer>
|
|
27
|
-
<img src="
|
|
27
|
+
<img src="https://loremflickr.com/150/150/cat" alt="test image with cats" crossorigin="">
|
|
28
28
|
<div>
|
|
29
29
|
<span class="blockquote-source">Famous Cat</span>
|
|
30
30
|
<span>CEO of mysterious cat organisation</span>
|
|
@@ -2,6 +2,13 @@
|
|
|
2
2
|
// - - - - - - - - - - - - - - -
|
|
3
3
|
// Custom overrides for menu components
|
|
4
4
|
|
|
5
|
+
// Additional variables for fancy underlines
|
|
6
|
+
$menu-item-decoration-active: underline $secondary-color !default;
|
|
7
|
+
$menu-item-underline-position: under !default;
|
|
8
|
+
$menu-item-underline-offset: 0 !default;
|
|
9
|
+
// Including thickness in text-decoration shorthand is not yet supported by Safari.
|
|
10
|
+
$menu-item-decoration-thickness: 15% !default;
|
|
11
|
+
|
|
5
12
|
// General menu styles
|
|
6
13
|
// -------------------
|
|
7
14
|
|
|
@@ -15,13 +22,21 @@
|
|
|
15
22
|
a {
|
|
16
23
|
color: $menu-item-color;
|
|
17
24
|
line-height: inherit;
|
|
25
|
+
text-underline-position: $menu-item-underline-position;
|
|
26
|
+
text-underline-offset: $menu-item-underline-offset;
|
|
18
27
|
|
|
19
28
|
&:hover {
|
|
20
29
|
color: $menu-item-color-hover;
|
|
21
30
|
text-decoration: $menu-item-decoration-hover;
|
|
31
|
+
text-decoration-thickness: $menu-item-decoration-thickness;
|
|
22
32
|
}
|
|
23
33
|
}
|
|
24
34
|
|
|
35
|
+
.is-active > a {
|
|
36
|
+
text-decoration: $menu-item-decoration-active;
|
|
37
|
+
text-decoration-thickness: $menu-item-decoration-thickness;
|
|
38
|
+
}
|
|
39
|
+
|
|
25
40
|
.menu-text {
|
|
26
41
|
color: $menu-text-color;
|
|
27
42
|
font-weight: $menu-text-font-weight;
|
|
@@ -62,9 +77,9 @@ $dropdown-menu-parent-border-radius: $select-radius !default;
|
|
|
62
77
|
}
|
|
63
78
|
}
|
|
64
79
|
|
|
65
|
-
// Reduced padding on small screens
|
|
80
|
+
// Reduced padding on small screens if not in mobile-menu
|
|
66
81
|
@include breakpoint(small down) {
|
|
67
|
-
> li > a {
|
|
82
|
+
&:where(:not(.mobile-menu &)) > li > a {
|
|
68
83
|
padding: {
|
|
69
84
|
top: get-side($dropdownmenu-padding, top) * 0.5;
|
|
70
85
|
right: get-side($dropdownmenu-padding, right) * 0.5;
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
// Mobile menu
|
|
2
|
+
// - - - - - - - - - - - - - - -
|
|
3
|
+
// Turn a menu wrapper into a mobile menu at a certain breakpoint
|
|
4
|
+
|
|
5
|
+
@use "sass:color";
|
|
6
|
+
|
|
7
|
+
// Mobile menu
|
|
8
|
+
$mobile-menu-breakpoint: medium down !default;
|
|
9
|
+
$mobile-menu-background: $header-background !default;
|
|
10
|
+
$mobile-menu-padding: (3 * $global-margin) (1.5 * $global-margin) !default;
|
|
11
|
+
$mobile-menu-max-width: 22rem !default;
|
|
12
|
+
$mobile-menu-boxshadow: 0 0 rem-calc(3) color.scale($black, $alpha: -75%) !default;
|
|
13
|
+
$mobile-menu-align-content: flex-start !default;
|
|
14
|
+
|
|
15
|
+
// Mobile menu items
|
|
16
|
+
$mobile-menu-item-font-size: $large-font-size !default;
|
|
17
|
+
$mobile-menu-item-line-height: if(
|
|
18
|
+
$mobile-menu-item-font-size == $large-font-size,
|
|
19
|
+
$large-lineheight,
|
|
20
|
+
grid-lineheight($mobile-menu-item-font-size)
|
|
21
|
+
) !default;
|
|
22
|
+
$mobile-menu-item-font-weight: $global-weight-bold !default;
|
|
23
|
+
$mobile-menu-item-color: $menu-item-color !default;
|
|
24
|
+
$mobile-menu-item-color-hover: if(
|
|
25
|
+
$mobile-menu-item-color == $menu-item-color,
|
|
26
|
+
$menu-item-color-hover,
|
|
27
|
+
$mobile-menu-item-color
|
|
28
|
+
) !default;
|
|
29
|
+
$mobile-menu-item-decoration-hover: $menu-item-decoration-hover !default;
|
|
30
|
+
$mobile-menu-text-color: if(
|
|
31
|
+
$mobile-menu-item-color == $menu-item-color,
|
|
32
|
+
$menu-text-color,
|
|
33
|
+
$mobile-menu-text-color
|
|
34
|
+
) !default;
|
|
35
|
+
$mobile-menu-text-font-weight: $mobile-menu-item-font-weight !default;
|
|
36
|
+
|
|
37
|
+
// Mobile menu icon
|
|
38
|
+
$mobile-menu-icon-color: color-pick-contrast(
|
|
39
|
+
get-background-color($header-background),
|
|
40
|
+
($body-font-color, $body-font-color-alt)
|
|
41
|
+
) !default;
|
|
42
|
+
$mobile-menu-icon-color-hover: $mobile-menu-icon-color !default;
|
|
43
|
+
$mobile-menu-icon-height: rem-calc($base-line-height) !default;
|
|
44
|
+
$mobile-menu-icon-width: 1.25 * $mobile-menu-icon-height !default;
|
|
45
|
+
$mobile-menu-icon-weight: rem-calc(0.125 * $base-line-height) !default;
|
|
46
|
+
|
|
47
|
+
.mobile-menu-toggle,
|
|
48
|
+
.mobile-menu .close-button {
|
|
49
|
+
display: none;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.mobile-menu-toggle {
|
|
53
|
+
text-align: #{$global-right};
|
|
54
|
+
padding-top: 0.5 * $global-padding;
|
|
55
|
+
padding-bottom: 0.5 * $global-padding;
|
|
56
|
+
|
|
57
|
+
.menu-icon {
|
|
58
|
+
@include hamburger(
|
|
59
|
+
$color: $mobile-menu-icon-color,
|
|
60
|
+
$color-hover: $mobile-menu-icon-color-hover,
|
|
61
|
+
$height: $mobile-menu-icon-height,
|
|
62
|
+
$width: $mobile-menu-icon-width,
|
|
63
|
+
$weight: $mobile-menu-icon-weight
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.mobile-menu {
|
|
69
|
+
@extend .small-add-container-padding;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@include breakpoint($mobile-menu-breakpoint) {
|
|
73
|
+
.mobile-menu-toggle {
|
|
74
|
+
display: block;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.mobile-menu {
|
|
78
|
+
position: fixed;
|
|
79
|
+
top: 0;
|
|
80
|
+
bottom: 0;
|
|
81
|
+
#{$global-right}: 0;
|
|
82
|
+
width: 100%;
|
|
83
|
+
max-width: $mobile-menu-max-width;
|
|
84
|
+
background: $header-background;
|
|
85
|
+
padding: $mobile-menu-padding;
|
|
86
|
+
overflow: auto;
|
|
87
|
+
z-index: 10;
|
|
88
|
+
|
|
89
|
+
&:not(.open) {
|
|
90
|
+
transform: translateX(100%);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
&.open,
|
|
94
|
+
&:not(.open):focus-within {
|
|
95
|
+
transition: 250ms transform ease-in-out;
|
|
96
|
+
box-shadow: $mobile-menu-boxshadow;
|
|
97
|
+
transform: none;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.menu {
|
|
101
|
+
flex-direction: column;
|
|
102
|
+
align-content: $mobile-menu-align-content;
|
|
103
|
+
margin-bottom: $global-margin;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.menu:not(.dropdown, .submenu) {
|
|
107
|
+
font-size: $mobile-menu-item-font-size;
|
|
108
|
+
line-height: $mobile-menu-item-line-height;
|
|
109
|
+
font-weight: $mobile-menu-item-font-weight;
|
|
110
|
+
|
|
111
|
+
a {
|
|
112
|
+
color: $mobile-menu-item-color;
|
|
113
|
+
|
|
114
|
+
&:hover {
|
|
115
|
+
color: $mobile-menu-item-color-hover;
|
|
116
|
+
text-decoration: $mobile-menu-item-decoration-hover;
|
|
117
|
+
text-decoration-thickness: $menu-item-decoration-thickness;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.is-active > a {
|
|
122
|
+
text-decoration: $menu-item-decoration-active;
|
|
123
|
+
text-decoration-thickness: $menu-item-decoration-thickness;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.menu-text {
|
|
127
|
+
color: $mobile-menu-text-color;
|
|
128
|
+
font-weight: $mobile-menu-text-font-weight;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
// Align language switcher with menu items.
|
|
133
|
+
@if (type-of($dropdown-menu-parent-border-width) == number) and
|
|
134
|
+
($dropdown-menu-parent-border-width > 0)
|
|
135
|
+
{
|
|
136
|
+
.dropdown.menu {
|
|
137
|
+
&.vertical,
|
|
138
|
+
&:not(.vertical) {
|
|
139
|
+
.is-dropdown-submenu-parent {
|
|
140
|
+
margin-#{$global-left}: get-side($menu-items-padding, $global-left);
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.close-button {
|
|
147
|
+
display: block;
|
|
148
|
+
top: $global-padding;
|
|
149
|
+
#{$global-right}: $global-padding;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
}
|
|
@@ -9,31 +9,34 @@ $blockquote-section-line-height: grid-lineheight($blockquote-section-font-size)
|
|
|
9
9
|
$blockquote-source-font-weight: $global-weight-bold !default;
|
|
10
10
|
|
|
11
11
|
// Basic blockquote layout.
|
|
12
|
-
blockquote
|
|
13
|
-
|
|
14
|
-
padding: 0;
|
|
15
|
-
}
|
|
12
|
+
blockquote {
|
|
13
|
+
text-wrap: balance;
|
|
16
14
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
15
|
+
p {
|
|
16
|
+
padding: 0;
|
|
17
|
+
}
|
|
21
18
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
19
|
+
footer {
|
|
20
|
+
@extend .cite-block;
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.blockquote-source {
|
|
26
|
+
font-weight: $blockquote-source-font-weight;
|
|
27
|
+
display: block;
|
|
28
|
+
}
|
|
27
29
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
30
|
+
// Give images in content quotes some breathing space.
|
|
31
|
+
img {
|
|
32
|
+
margin-#{$global-right}: $global-margin;
|
|
33
|
+
max-width: $blockquote-image-max-width;
|
|
34
|
+
}
|
|
31
35
|
}
|
|
32
36
|
|
|
33
|
-
|
|
34
|
-
blockquote img {
|
|
35
|
-
|
|
36
|
-
max-width: $blockquote-image-max-width;
|
|
37
|
+
blockquote img,
|
|
38
|
+
.blockquote-image img {
|
|
39
|
+
border-radius: $blockquote-image-border-radius;
|
|
37
40
|
}
|
|
38
41
|
|
|
39
42
|
// Quote sections.
|
|
@@ -84,8 +84,10 @@ $menu-item-font-weight: $global-weight-normal !default;
|
|
|
84
84
|
$menu-item-color: inherit !default;
|
|
85
85
|
$menu-item-color-hover: $menu-item-color !default;
|
|
86
86
|
$menu-item-decoration-hover: underline !default;
|
|
87
|
+
$menu-item-background-active: rgba($header-background, 0) !default;
|
|
87
88
|
$menu-text-color: $menu-item-color !default;
|
|
88
89
|
$menu-text-font-weight: $menu-item-font-weight !default;
|
|
90
|
+
$menu-items-padding: rem-calc($base-line-height * 0.5 $base-line-height * 0.75) !default;
|
|
89
91
|
$menu-state-back-compat: false !default;
|
|
90
92
|
|
|
91
93
|
// Dropdown menu
|
|
@@ -2,8 +2,43 @@
|
|
|
2
2
|
// - - - - - - - - - - - - - - -
|
|
3
3
|
// Custom overrides for the top-bar component
|
|
4
4
|
|
|
5
|
+
$topbar-inner-justify: space-between !default;
|
|
6
|
+
|
|
5
7
|
// Display multiple items next to each other.
|
|
6
8
|
.top-bar-left,
|
|
7
9
|
.top-bar-right {
|
|
8
10
|
display: flex;
|
|
11
|
+
column-gap: get-side($menu-items-padding, $global-left);
|
|
12
|
+
justify-content: $topbar-inner-justify;
|
|
13
|
+
align-items: center;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
// Make sure a single menu aligns right with space-between.
|
|
17
|
+
@if $topbar-inner-justify == space-between {
|
|
18
|
+
.top-bar-right > nav:first-of-type:last-of-type {
|
|
19
|
+
margin-#{$global-left}: auto;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.top-bar {
|
|
24
|
+
// Switch sides for flex grow.
|
|
25
|
+
.top-bar-left {
|
|
26
|
+
flex-grow: 0;
|
|
27
|
+
}
|
|
28
|
+
.top-bar-right {
|
|
29
|
+
flex-grow: 1;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
// Fixes for mobile menu.
|
|
33
|
+
.mobile-menu-toggle {
|
|
34
|
+
flex: 1 1 auto;
|
|
35
|
+
}
|
|
36
|
+
.mobile-menu {
|
|
37
|
+
@extend .top-bar-right;
|
|
38
|
+
|
|
39
|
+
@include breakpoint($mobile-menu-breakpoint) {
|
|
40
|
+
display: block;
|
|
41
|
+
max-width: $mobile-menu-max-width;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
9
44
|
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
@use "sass:color";
|
|
2
|
+
|
|
3
|
+
@supports (-webkit-appearance: -apple-pay-button) {
|
|
4
|
+
.button.apple-pay {
|
|
5
|
+
-webkit-appearance: -apple-pay-button;
|
|
6
|
+
|
|
7
|
+
@if (color.lightness($form-background) < 40%) {
|
|
8
|
+
-apple-pay-button-style: white;
|
|
9
|
+
} @else {
|
|
10
|
+
-apple-pay-button-style: black;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
}
|
package/src/scss/main.scss
CHANGED
|
@@ -111,9 +111,10 @@
|
|
|
111
111
|
@import "form/form-steps";
|
|
112
112
|
|
|
113
113
|
@import "components/accordion";
|
|
114
|
-
@import "components/top-bar";
|
|
115
114
|
@import "components/footer";
|
|
116
115
|
@import "components/menu";
|
|
116
|
+
@import "components/mobile-menu";
|
|
117
|
+
@import "components/top-bar";
|
|
117
118
|
@import "components/callout";
|
|
118
119
|
@import "components/headline";
|
|
119
120
|
@import "components/share-button";
|