@moreonion/foundist 3.3.4 → 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.
Files changed (48) hide show
  1. package/package.json +17 -15
  2. package/src/html/basic-action-page-cover-1col-with-headline.html +4 -2
  3. package/src/html/basic-action-page-cover-1col.html +2 -2
  4. package/src/html/basic-action-page-cover-2col-reversed.html +2 -2
  5. package/src/html/basic-action-page-cover-2col-with-headline.html +3 -2
  6. package/src/html/basic-action-page-cover-2col.html +2 -2
  7. package/src/html/basic-action-page-cover-banner-with-headline.html +3 -2
  8. package/src/html/basic-action-page-cover-banner.html +2 -2
  9. package/src/html/basic-action-page-reversed.html +1 -1
  10. package/src/html/basic-action-page-with-banner-and-headline.html +3 -2
  11. package/src/html/basic-action-page-with-banner-reversed.html +2 -2
  12. package/src/html/basic-action-page-with-banner.html +2 -2
  13. package/src/html/basic-action-page-with-callouts.html +1 -1
  14. package/src/html/basic-action-page.html +1 -1
  15. package/src/html/donation-action-page.html +1 -1
  16. package/src/html/e2t-action-page.html +1 -1
  17. package/src/html/includes/language-switcher.html +1 -2
  18. package/src/html/includes/letter.html +1 -1
  19. package/src/html/includes/menu-responsive.html +17 -0
  20. package/src/html/includes/menu.html +7 -5
  21. package/src/html/includes/section-1col.html +1 -1
  22. package/src/html/includes/section-2col.html +1 -1
  23. package/src/html/includes/section-quote.html +18 -0
  24. package/src/html/includes/section-slideshow.html +3 -3
  25. package/src/html/includes/teasers.html +1 -1
  26. package/src/html/signup-action-page.html +1 -1
  27. package/src/html/snippets-demo.html +4 -0
  28. package/src/html/templates/page.html +3 -0
  29. package/src/html/thank-you-page-cover-1col-with-headline.html +2 -1
  30. package/src/html/thank-you-page-cover-1col.html +1 -1
  31. package/src/html/thank-you-page-cover-2col-with-headline.html +2 -1
  32. package/src/html/thank-you-page-cover-2col.html +1 -1
  33. package/src/html/thank-you-page-cover-banner-with-headline.html +2 -1
  34. package/src/html/thank-you-page-cover-banner.html +1 -1
  35. package/src/html/thank-you-page-with-banner-and-headline.html +2 -1
  36. package/src/html/thank-you-page-with-banner.html +1 -1
  37. package/src/html/thank-you-page.html +1 -1
  38. package/src/html/typography-static-page.html +15 -3
  39. package/src/scss/_util.scss +2 -1
  40. package/src/scss/components/_headline.scss +1 -0
  41. package/src/scss/components/_menu.scss +17 -2
  42. package/src/scss/components/_mobile-menu.scss +152 -0
  43. package/src/scss/components/_quote.scss +84 -0
  44. package/src/scss/components/_settings.scss +2 -0
  45. package/src/scss/components/_top-bar.scss +35 -0
  46. package/src/scss/main.scss +3 -1
  47. package/src/scss/typography/_elements.scss +1 -7
  48. package/src/scss/typography/_settings.scss +2 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@moreonion/foundist",
3
- "version": "3.3.4",
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.4",
30
- "autoprefixer": "^10.4.17",
31
- "eslint": "^8.57.0",
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": "^16.6.0",
35
- "eslint-plugin-promise": "^6.1.0",
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.33",
41
- "prettier": "^3.2.0",
42
- "sass": "npm:sass-embedded@^1.71.0",
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.1.0",
48
- "vite": "^5.1.0",
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": {
package/src/html/basic-action-page-cover-1col-with-headline.html CHANGED
@@ -7,7 +7,7 @@
7
7
  {% block page_title %}Take action now!{% endblock %}
8
8
 
9
9
  {% block background %}
10
- <img src="http://placekitten.com/1280/588" alt="test image with cats" crossorigin="">
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="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
40
+ <img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
41
41
  </div>
42
42
  {% endblock %}
43
43
 
@@ -52,6 +52,8 @@
52
52
  {% block bottom %}
53
53
  {% include "src/html/includes/section-2col.html" %}
54
54
  {% include "src/html/includes/section-2col.html" %}
55
+ {% include "src/html/includes/section-quote.html" %}
56
+ {% include "src/html/includes/section-quote.html" %}
55
57
  {% include "src/html/includes/section-1col.html" %}
56
58
  {% endblock %}
57
59
 
package/src/html/basic-action-page-cover-1col.html CHANGED
@@ -5,7 +5,7 @@
5
5
  {% block page_title %}Take action now!{% endblock %}
6
6
 
7
7
  {% block background %}
8
- <img src="http://placekitten.com/1280/588" alt="test image with cats" crossorigin="">
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="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
34
+ <img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
35
35
  </div>
36
36
  {% endblock %}
37
37
 
package/src/html/basic-action-page-cover-2col-reversed.html CHANGED
@@ -5,7 +5,7 @@
5
5
  {% block page_title %}Take action now!{% endblock %}
6
6
 
7
7
  {% block background %}
8
- <img src="http://placekitten.com/1600/1000" alt="test image with cats" crossorigin="">
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="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
34
+ <img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
35
35
  </div>
36
36
  {% endblock %}
37
37
 
package/src/html/basic-action-page-cover-2col-with-headline.html CHANGED
@@ -7,7 +7,7 @@
7
7
  {% block page_title %}Take action now!{% endblock %}
8
8
 
9
9
  {% block background %}
10
- <img src="http://placekitten.com/1600/1000" alt="test image with cats" crossorigin="">
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="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
40
+ <img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
41
41
  </div>
42
42
  {% endblock %}
43
43
 
@@ -52,6 +52,7 @@
52
52
  {% block bottom %}
53
53
  {% include "src/html/includes/section-2col.html" %}
54
54
  {% include "src/html/includes/section-2col.html" %}
55
+ {% include "src/html/includes/section-quote.html" %}
55
56
  {% include "src/html/includes/section-1col.html" %}
56
57
  {% endblock %}
57
58
 
package/src/html/basic-action-page-cover-2col.html CHANGED
@@ -5,7 +5,7 @@
5
5
  {% block page_title %}Take action now!{% endblock %}
6
6
 
7
7
  {% block background %}
8
- <img src="http://placekitten.com/1600/1000" alt="test image with cats" crossorigin="">
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="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
34
+ <img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
35
35
  </div>
36
36
  {% endblock %}
37
37
 
package/src/html/basic-action-page-cover-banner-with-headline.html CHANGED
@@ -7,7 +7,7 @@
7
7
  {% block page_title %}Take action now!{% endblock %}
8
8
 
9
9
  {% block background %}
10
- <img src="http://placekitten.com/1280/588" alt="test image with cats" crossorigin="">
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="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
40
+ <img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
41
41
  </div>
42
42
  {% endblock %}
43
43
 
@@ -52,6 +52,7 @@
52
52
  {% block bottom %}
53
53
  {% include "src/html/includes/section-2col.html" %}
54
54
  {% include "src/html/includes/section-2col.html" %}
55
+ {% include "src/html/includes/section-quote.html" %}
55
56
  {% include "src/html/includes/section-1col.html" %}
56
57
  {% endblock %}
57
58
 
package/src/html/basic-action-page-cover-banner.html CHANGED
@@ -5,7 +5,7 @@
5
5
  {% block page_title %}Take action now!{% endblock %}
6
6
 
7
7
  {% block background %}
8
- <img src="http://placekitten.com/1280/588" alt="test image with cats" crossorigin="">
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="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
34
+ <img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
35
35
  </div>
36
36
  {% endblock %}
37
37
 
package/src/html/basic-action-page-reversed.html CHANGED
@@ -27,7 +27,7 @@
27
27
 
28
28
  {% block content_top %}
29
29
  <div class="media-stretch">
30
- <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
30
+ <img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
31
31
  </div>
32
32
  {% endblock %}
33
33
 
package/src/html/basic-action-page-with-banner-and-headline.html CHANGED
@@ -7,7 +7,7 @@
7
7
  {% block page_title %}Take action now!{% endblock %}
8
8
 
9
9
  {% block banner %}
10
- <img src="http://placekitten.com/1280/588" alt="test image with cats" crossorigin="">
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="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
40
+ <img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
41
41
  </div>
42
42
  {% endblock %}
43
43
 
@@ -52,6 +52,7 @@
52
52
  {% block bottom %}
53
53
  {% include "src/html/includes/section-2col.html" %}
54
54
  {% include "src/html/includes/section-2col.html" %}
55
+ {% include "src/html/includes/section-quote.html" %}
55
56
  {% include "src/html/includes/section-1col.html" %}
56
57
  {% endblock %}
57
58
 
package/src/html/basic-action-page-with-banner-reversed.html CHANGED
@@ -5,7 +5,7 @@
5
5
  {% block page_title %}Take action now!{% endblock %}
6
6
 
7
7
  {% block banner %}
8
- <img src="http://placekitten.com/1280/588" alt="test image with cats" crossorigin="">
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="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
34
+ <img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
35
35
  </div>
36
36
  {% endblock %}
37
37
 
package/src/html/basic-action-page-with-banner.html CHANGED
@@ -5,7 +5,7 @@
5
5
  {% block page_title %}Take action now!{% endblock %}
6
6
 
7
7
  {% block banner %}
8
- <img src="http://placekitten.com/1280/588" alt="test image with cats" crossorigin="">
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="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
34
+ <img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
35
35
  </div>
36
36
  {% endblock %}
37
37
 
package/src/html/basic-action-page-with-callouts.html CHANGED
@@ -35,7 +35,7 @@
35
35
 
36
36
  {% block content_top %}
37
37
  <div class="media-stretch">
38
- <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
38
+ <img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
39
39
  </div>
40
40
  {% endblock %}
41
41
 
package/src/html/basic-action-page.html CHANGED
@@ -27,7 +27,7 @@
27
27
 
28
28
  {% block content_top %}
29
29
  <div class="media-stretch">
30
- <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
30
+ <img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
31
31
  </div>
32
32
  {% endblock %}
33
33
 
package/src/html/donation-action-page.html CHANGED
@@ -23,7 +23,7 @@
23
23
 
24
24
  {% block content_top %}
25
25
  <div class="media-stretch">
26
- <img src="http://placekitten.com/860/460" alt="test image with cats" crossorigin="">
26
+ <img src="https://loremflickr.com/860/460/cat" alt="test image with cats" crossorigin="">
27
27
  </div>
28
28
  {% endblock %}
29
29
 
package/src/html/e2t-action-page.html CHANGED
@@ -23,7 +23,7 @@
23
23
 
24
24
  {% block content_top %}
25
25
  <div class="media-stretch">
26
- <img src="http://placekitten.com/860/460" alt="test image with cats" crossorigin="">
26
+ <img src="https://loremflickr.com/860/460/cat" alt="test image with cats" crossorigin="">
27
27
  </div>
28
28
  {% endblock %}
29
29
 
package/src/html/includes/language-switcher.html CHANGED
@@ -1,5 +1,4 @@
1
- <!-- linthtml-configure attr-req-value="false" -->
2
- <nav>
1
+ <nav aria-label="Switch locales">
3
2
  <ul class="dropdown menu" data-dropdown-menu="true" data-disable-hover="true" data-click-open="true">
4
3
  <li>
5
4
  <a href="#">English</a>
package/src/html/includes/letter.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <p>Yours,</p>
7
7
  <ul class="signatures">
8
8
  <li>
9
- <span class="signature-image"><img src="http://placekitten.com/100/100" alt="portrait of a cat" crossorigin=""></span>
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>
package/src/html/includes/menu-responsive.html ADDED
@@ -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>
package/src/html/includes/menu.html CHANGED
@@ -1,5 +1,7 @@
1
- <ul class="menu">
2
- <li><a href="#">About cats</a></li>
3
- <li><a href="#">Meouw</a></li>
4
- <li><a href="#">Another link</a></li>
5
- </ul>
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>
package/src/html/includes/section-1col.html CHANGED
@@ -1,6 +1,6 @@
1
1
  <section>
2
2
  <div class="background">
3
- <img src="http://placekitten.com/1600/1000" alt="test image with cats" crossorigin="">
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>
package/src/html/includes/section-2col.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <section>
2
2
  <div class="grid-container">
3
3
  <div class="column media-stretch">
4
- <img src="http://placekitten.com/600/400" alt="test image with cats" crossorigin="">
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>
package/src/html/includes/section-quote.html ADDED
@@ -0,0 +1,18 @@
1
+ <section class="blockquote-section">
2
+ <div class="grid-container">
3
+ <div class="column blockquote-image">
4
+ <img src="https://loremflickr.com/500/500/cat" alt="test image with cats" crossorigin="">
5
+ </div>
6
+ <div class="column">
7
+ <blockquote>
8
+ <p>Get my claw stuck in the dog's ear. Reward the chosen human with a slow blink. Roll on the floor purring your whiskers off cat dog hate mouse eat string barf pillow no baths hate everything.</p>
9
+ <footer>
10
+ <div>
11
+ <span class="blockquote-source">Famous cat</span>
12
+ <span>CEO of Caturday International</span>
13
+ </div>
14
+ </footer>
15
+ </blockquote>
16
+ </div>
17
+ </div>
18
+ </section>
package/src/html/includes/section-slideshow.html CHANGED
@@ -1,8 +1,8 @@
1
1
  {% macro img_slide(width, height) %}
2
2
  <li>
3
3
  <img
4
- src="http://placekitten.com/{{ width|default([480, 640, 880, 1280]|random) }}/{{ height|default([480, 640, 880]|random) }}"
5
- alt="test image with cats"
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="http://placekitten.com/480/270" alt="test image with cats" crossorigin="">
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>
package/src/html/includes/teasers.html CHANGED
@@ -1,7 +1,7 @@
1
1
  {% macro teaser(title) %}
2
2
  <article class="card">
3
3
  <div class="card-image">
4
- <img src="http://placekitten.com/480/270" alt="test image with cats" crossorigin="">
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">
package/src/html/signup-action-page.html CHANGED
@@ -23,7 +23,7 @@
23
23
 
24
24
  {% block content_top %}
25
25
  <div class="media-stretch">
26
- <img src="http://placekitten.com/860/455" alt="test image with cats" crossorigin="">
26
+ <img src="https://loremflickr.com/860/455/cat" alt="test image with cats" crossorigin="">
27
27
  </div>
28
28
  {% endblock %}
29
29
 
package/src/html/snippets-demo.html CHANGED
@@ -2,6 +2,10 @@
2
2
 
3
3
  {% block page_title %}Snippets demo{% endblock %}
4
4
 
5
+ {% block header %}
6
+ {% include "src/html/includes/menu-responsive.html" %}
7
+ {% endblock %}
8
+
5
9
  {% block content %}
6
10
  <h2>Accordion</h2>
7
11
  {% include "src/html/includes/accordion.html" %}
package/src/html/templates/page.html CHANGED
@@ -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 %}
package/src/html/thank-you-page-cover-1col-with-headline.html CHANGED
@@ -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="http://placekitten.com/1600/735" alt="test image with cats" crossorigin="">
10
+ <img src="https://loremflickr.com/1600/735/cat" alt="test image with cats" crossorigin="">
11
11
  {% endblock %}
12
12
 
13
13
  {% block headline %}
@@ -25,6 +25,7 @@
25
25
  {% block bottom %}
26
26
  {% include "src/html/includes/section-2col.html" %}
27
27
  {% include "src/html/includes/section-2col.html" %}
28
+ {% include "src/html/includes/section-quote.html" %}
28
29
  {% include "src/html/includes/section-1col.html" %}
29
30
  {% endblock %}
30
31
 
package/src/html/thank-you-page-cover-1col.html CHANGED
@@ -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="http://placekitten.com/1600/735" alt="test image with cats" crossorigin="">
8
+ <img src="https://loremflickr.com/1600/735/cat" alt="test image with cats" crossorigin="">
9
9
  {% endblock %}
10
10
 
11
11
  {% block content %}
package/src/html/thank-you-page-cover-2col-with-headline.html CHANGED
@@ -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="http://placekitten.com/1600/800" alt="test image with cats" crossorigin="">
10
+ <img src="https://loremflickr.com/1600/800/cat" alt="test image with cats" crossorigin="">
11
11
  {% endblock %}
12
12
 
13
13
  {% block headline %}
@@ -29,6 +29,7 @@
29
29
  {% block bottom %}
30
30
  {% include "src/html/includes/section-2col.html" %}
31
31
  {% include "src/html/includes/section-2col.html" %}
32
+ {% include "src/html/includes/section-quote.html" %}
32
33
  {% include "src/html/includes/section-1col.html" %}
33
34
  {% endblock %}
34
35
 
package/src/html/thank-you-page-cover-2col.html CHANGED
@@ -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="http://placekitten.com/1600/800" alt="test image with cats" crossorigin="">
8
+ <img src="https://loremflickr.com/1600/800/cat" alt="test image with cats" crossorigin="">
9
9
  {% endblock %}
10
10
 
11
11
  {% block content %}
package/src/html/thank-you-page-cover-banner-with-headline.html CHANGED
@@ -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="http://placekitten.com/1600/735" alt="test image with cats" crossorigin="">
10
+ <img src="https://loremflickr.com/1600/735/cat" alt="test image with cats" crossorigin="">
11
11
  {% endblock %}
12
12
 
13
13
  {% block headline %}
@@ -25,6 +25,7 @@
25
25
  {% block bottom %}
26
26
  {% include "src/html/includes/section-2col.html" %}
27
27
  {% include "src/html/includes/section-2col.html" %}
28
+ {% include "src/html/includes/section-quote.html" %}
28
29
  {% include "src/html/includes/section-1col.html" %}
29
30
  {% endblock %}
30
31
 
package/src/html/thank-you-page-cover-banner.html CHANGED
@@ -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="http://placekitten.com/1600/735" alt="test image with cats" crossorigin="">
8
+ <img src="https://loremflickr.com/1600/735/cat" alt="test image with cats" crossorigin="">
9
9
  {% endblock %}
10
10
 
11
11
  {% block content %}
package/src/html/thank-you-page-with-banner-and-headline.html CHANGED
@@ -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="http://placekitten.com/1600/735" alt="test image with cats" crossorigin="">
10
+ <img src="https://loremflickr.com/1600/735/cat" alt="test image with cats" crossorigin="">
11
11
  {% endblock %}
12
12
 
13
13
  {% block headline %}
@@ -25,6 +25,7 @@
25
25
  {% block bottom %}
26
26
  {% include "src/html/includes/section-2col.html" %}
27
27
  {% include "src/html/includes/section-2col.html" %}
28
+ {% include "src/html/includes/section-quote.html" %}
28
29
  {% include "src/html/includes/section-1col.html" %}
29
30
  {% endblock %}
30
31
 
package/src/html/thank-you-page-with-banner.html CHANGED
@@ -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="http://placekitten.com/1600/735" alt="test image with cats" crossorigin="">
8
+ <img src="https://loremflickr.com/1600/735/cat" alt="test image with cats" crossorigin="">
9
9
  {% endblock %}
10
10
 
11
11
  {% block content %}
package/src/html/thank-you-page.html CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  {% block content_top %}
8
8
  <div class="media-stretch">
9
- <img src="http://placekitten.com/625/400" alt="test image with cats" crossorigin="">
9
+ <img src="https://loremflickr.com/625/400/cat" alt="test image with cats" crossorigin="">
10
10
  </div>
11
11
  {% endblock %}
12
12
 
package/src/html/typography-static-page.html CHANGED
@@ -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="http://placekitten.com/">placekitten</a>.</p>
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="http://placekitten.com/800/400" alt="test image with cats" crossorigin="">
11
+ <img src="https://loremflickr.com/800/400/cat" alt="test image with cats" crossorigin="">
12
12
  </div>
13
13
  {% endblock %}
14
14
 
@@ -16,11 +16,23 @@
16
16
  <h2>Meow meow mama hell is other people but i love cuddles</h2>
17
17
  <p>Cat fur is the new black burrow under covers, so push your water glass on the floor bathe private parts with tongue then lick owner's face sugar, my siamese, stalks me (in a good way), day and night and hiss at vacuum cleaner flee in terror at cucumber discovered on floor. Make meme, make cute face freak human out make funny noise mow mow mow mow mow mow success now attack human.</p>
18
18
  <blockquote>
19
- <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. Nap all day eat and than sleep on your face so catto munch salmono so find a way to fit in tiny box cats making all the muffins my left donut is missing, as is my right.</p>
19
+ <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>
20
20
  <cite>Famous Cat</cite>
21
21
  </blockquote>
22
22
  <p>I want to go outside let me go outside nevermind inside is better pee in the shoe but eat a rug and furry furry hairs everywhere oh no human coming lie on counter don't get off counter. Plays league of legends kitty loves pigs intrigued by the shower, or play with twist ties.
23
23
  </p>
24
+ <blockquote>
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
+ <footer>
27
+ <img src="https://loremflickr.com/150/150/cat" alt="test image with cats" crossorigin="">
28
+ <div>
29
+ <span class="blockquote-source">Famous Cat</span>
30
+ <span>CEO of mysterious cat organisation</span>
31
+ </div>
32
+ </footer>
33
+ </blockquote>
34
+ <p>I want to go outside let me go outside nevermind inside is better pee in the shoe but eat a rug and furry furry hairs everywhere oh no human coming lie on counter don't get off counter. Plays league of legends kitty loves pigs intrigued by the shower, or play with twist ties.
35
+ </p>
24
36
 
25
37
  <h3>I will ruin the couch with my claws refuse to come home when humans are going to bed stay out all night then yowl like i am dying</h3>
26
38
  <p>Scratch me there, elevator butt poop on couch and instead of drinking water from the cat bowl, make sure to steal water from the toilet cats woo. Stuff and things man running from cops stops to pet cats, goes to jail, loves cheeseburgers so pet me pet me don't pet me and jump off balcony, onto stranger's head. As lick i the shoes.</p>
package/src/scss/_util.scss CHANGED
@@ -87,7 +87,8 @@
87
87
  p {
88
88
  color: color-pick-contrast($background, ($blockquote-color, $body-font-color-alt));
89
89
  }
90
- cite {
90
+ cite,
91
+ footer {
91
92
  color: color-pick-contrast($background, ($cite-color, $body-font-color-alt));
92
93
  }
93
94
  }
package/src/scss/components/_headline.scss CHANGED
@@ -36,6 +36,7 @@ $headline-color: color-pick-contrast(
36
36
 
37
37
  #headline {
38
38
  color: $headline-color;
39
+ text-wrap: balance;
39
40
  align-self: end;
40
41
 
41
42
  #{$text-tags} {
package/src/scss/components/_menu.scss CHANGED
@@ -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;
package/src/scss/components/_mobile-menu.scss ADDED
@@ -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
+ }
package/src/scss/components/_quote.scss ADDED
@@ -0,0 +1,84 @@
1
+ // Quotes
2
+ // - - - - - - - - - - - - - - -
3
+ // Custom overrides for the quote component
4
+
5
+ $blockquote-image-border-radius: 50% !default;
6
+ $blockquote-image-max-width: 7rem !default;
7
+ $blockquote-section-font-size: $blockquote-font-size * 1.5 !default;
8
+ $blockquote-section-line-height: grid-lineheight($blockquote-section-font-size) !default;
9
+ $blockquote-source-font-weight: $global-weight-bold !default;
10
+
11
+ // Basic blockquote layout.
12
+ blockquote {
13
+ text-wrap: balance;
14
+
15
+ p {
16
+ padding: 0;
17
+ }
18
+
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
+ }
29
+
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
+ }
35
+ }
36
+
37
+ blockquote img,
38
+ .blockquote-image img {
39
+ border-radius: $blockquote-image-border-radius;
40
+ }
41
+
42
+ // Quote sections.
43
+ .blockquote-section {
44
+ .grid-container {
45
+ margin-bottom: $global-margin * 2;
46
+ }
47
+
48
+ blockquote,
49
+ blockquote p {
50
+ font-size: $blockquote-section-font-size;
51
+ line-height: $blockquote-section-line-height;
52
+ }
53
+
54
+ // Center & space images on mobile.
55
+ @include breakpoint(medium down) {
56
+ div.blockquote-image {
57
+ justify-self: center;
58
+ max-width: 20rem;
59
+ margin-bottom: $global-margin * 2;
60
+ }
61
+ }
62
+ }
63
+
64
+ // Adapt two-col section layout to give text more space.
65
+ #bottom section.blockquote-section {
66
+ @include breakpoint(xlarge) {
67
+ &:nth-child(even) {
68
+ .column:first-child {
69
+ grid-column: 1 / 4;
70
+ }
71
+ .column:last-child {
72
+ grid-column: 5 / -1;
73
+ }
74
+ }
75
+ &:nth-child(odd) {
76
+ .column:first-child {
77
+ grid-column: 7 / -1;
78
+ }
79
+ .column:last-child {
80
+ grid-column: 1 / 6;
81
+ }
82
+ }
83
+ }
84
+ }
package/src/scss/components/_settings.scss CHANGED
@@ -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
package/src/scss/components/_top-bar.scss CHANGED
@@ -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
  }
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";
@@ -126,6 +127,7 @@
126
127
  @import "components/cookiebar";
127
128
  @import "components/slideshow";
128
129
  @import "components/bottom-section";
130
+ @import "components/quote";
129
131
 
130
132
  // --------------------------------------------------------------------------
131
133
  // 7. Utilities
package/src/scss/typography/_elements.scss CHANGED
@@ -41,11 +41,5 @@ h6,
41
41
  #page-title {
42
42
  color: $title-color;
43
43
  padding-top: 0.75 * $global-padding;
44
- }
45
-
46
- // Quotes
47
-
48
- blockquote p {
49
- margin-bottom: $global-margin * 0.5;
50
- padding: 0;
44
+ text-wrap: balance;
51
45
  }
package/src/scss/typography/_settings.scss CHANGED
@@ -108,6 +108,8 @@ $cite-line-height: if(
108
108
  $blockquote-line-height,
109
109
  grid-lineheight($cite-font-size)
110
110
  ) !default;
111
+ $cite-font-style: normal !default;
112
+ $cite-pseudo-content: "" !default;
111
113
 
112
114
  // Tags that usually make up text sections
113
115
  $text-tags: p, h1, h2, h3, h4, h5, h6, dl, ul, ol, blockquote !default;