@moreonion/foundist 3.0.1 → 3.0.2
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 +1 -1
- package/src/html/basic-action-page-cover-1col-with-headline.html +6 -0
- package/src/html/basic-action-page-cover-2col-with-headline.html +6 -0
- package/src/html/basic-action-page-cover-banner-with-headline.html +6 -0
- package/src/html/basic-action-page-with-banner-and-headline.html +6 -0
- package/src/html/dev-index.html +8 -8
- package/src/html/includes/section-1col.html +11 -0
- package/src/html/includes/section-2col.html +12 -0
- package/src/html/templates/page.html +7 -6
- package/src/html/thank-you-page-cover-1col-with-headline.html +6 -0
- package/src/html/thank-you-page-cover-2col-with-headline.html +6 -0
- package/src/html/thank-you-page-cover-banner-with-headline.html +6 -0
- package/src/html/thank-you-page-with-banner-and-headline.html +6 -0
- package/src/scss/_util.scss +16 -6
- package/src/scss/components/_bottom-section.scss +117 -0
- package/src/scss/main.scss +1 -0
package/package.json
CHANGED
|
@@ -49,6 +49,12 @@
|
|
|
49
49
|
<p>Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human.</p>
|
|
50
50
|
{% endblock %}
|
|
51
51
|
|
|
52
|
+
{% block bottom %}
|
|
53
|
+
{% include "src/html/includes/section-2col.html" %}
|
|
54
|
+
{% include "src/html/includes/section-2col.html" %}
|
|
55
|
+
{% include "src/html/includes/section-1col.html" %}
|
|
56
|
+
{% endblock %}
|
|
57
|
+
|
|
52
58
|
{% block footer %}
|
|
53
59
|
{% include "src/html/includes/menu.html" %}
|
|
54
60
|
{% endblock %}
|
|
@@ -49,6 +49,12 @@
|
|
|
49
49
|
<p>Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human.</p>
|
|
50
50
|
{% endblock %}
|
|
51
51
|
|
|
52
|
+
{% block bottom %}
|
|
53
|
+
{% include "src/html/includes/section-2col.html" %}
|
|
54
|
+
{% include "src/html/includes/section-2col.html" %}
|
|
55
|
+
{% include "src/html/includes/section-1col.html" %}
|
|
56
|
+
{% endblock %}
|
|
57
|
+
|
|
52
58
|
{% block footer %}
|
|
53
59
|
{% include "src/html/includes/menu.html" %}
|
|
54
60
|
{% endblock %}
|
|
@@ -49,6 +49,12 @@
|
|
|
49
49
|
<p>Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human.</p>
|
|
50
50
|
{% endblock %}
|
|
51
51
|
|
|
52
|
+
{% block bottom %}
|
|
53
|
+
{% include "src/html/includes/section-2col.html" %}
|
|
54
|
+
{% include "src/html/includes/section-2col.html" %}
|
|
55
|
+
{% include "src/html/includes/section-1col.html" %}
|
|
56
|
+
{% endblock %}
|
|
57
|
+
|
|
52
58
|
{% block footer %}
|
|
53
59
|
{% include "src/html/includes/menu.html" %}
|
|
54
60
|
{% endblock %}
|
|
@@ -49,6 +49,12 @@
|
|
|
49
49
|
<p>Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human.</p>
|
|
50
50
|
{% endblock %}
|
|
51
51
|
|
|
52
|
+
{% block bottom %}
|
|
53
|
+
{% include "src/html/includes/section-2col.html" %}
|
|
54
|
+
{% include "src/html/includes/section-2col.html" %}
|
|
55
|
+
{% include "src/html/includes/section-1col.html" %}
|
|
56
|
+
{% endblock %}
|
|
57
|
+
|
|
52
58
|
{% block footer %}
|
|
53
59
|
{% include "src/html/includes/menu.html" %}
|
|
54
60
|
{% endblock %}
|
package/src/html/dev-index.html
CHANGED
|
@@ -27,31 +27,31 @@
|
|
|
27
27
|
<h4 class="h6">B: Banner image (2 columns)  <small>banner</small></h4>
|
|
28
28
|
<ul class="no-bullet">
|
|
29
29
|
<li><a href="src/html/basic-action-page-with-banner.html">Basic action page</a></li>
|
|
30
|
-
<li><a href="src/html/basic-action-page-with-banner-and-headline.html">Basic action page with headline</a></li>
|
|
30
|
+
<li><a href="src/html/basic-action-page-with-banner-and-headline.html">Basic action page with headline and bottom sections</a></li>
|
|
31
31
|
<li><a href="src/html/basic-action-page-with-banner-reversed.html">Basic action page reversed</a></li>
|
|
32
32
|
<li><a href="src/html/thank-you-page-with-banner.html">Thank you page</a></li>
|
|
33
|
-
<li><a href="src/html/thank-you-page-with-banner-and-headline.html">Thank you page with headline</a></li>
|
|
33
|
+
<li><a href="src/html/thank-you-page-with-banner-and-headline.html">Thank you page with headline and bottom sections</a></li>
|
|
34
34
|
</ul>
|
|
35
35
|
<h4 class="h6">C: Fixed background image (2 columns)  <small>cover-2col</small></h4>
|
|
36
36
|
<ul class="no-bullet">
|
|
37
37
|
<li><a href="src/html/basic-action-page-cover-2col.html">Basic action page</a></li>
|
|
38
|
-
<li><a href="src/html/basic-action-page-cover-2col-with-headline.html">Basic action page with headline</a></li>
|
|
38
|
+
<li><a href="src/html/basic-action-page-cover-2col-with-headline.html">Basic action page with headline and bottom sections</a></li>
|
|
39
39
|
<li><a href="src/html/basic-action-page-cover-2col-reversed.html">Basic action page reversed</a></li>
|
|
40
40
|
<li><a href="src/html/thank-you-page-cover-2col.html">Thank you page</a></li>
|
|
41
|
-
<li><a href="src/html/thank-you-page-cover-2col-with-headline.html">Thank you page with headline</a></li>
|
|
41
|
+
<li><a href="src/html/thank-you-page-cover-2col-with-headline.html">Thank you page with headline and bottom sections</a></li>
|
|
42
42
|
</ul>
|
|
43
43
|
<h4 class="h6">D: Fixed banner image (2 columns)  <small>cover-banner</small></h4>
|
|
44
44
|
<ul class="no-bullet">
|
|
45
45
|
<li><a href="src/html/basic-action-page-cover-banner.html">Basic action page</a></li>
|
|
46
|
-
<li><a href="src/html/basic-action-page-cover-banner-with-headline.html">Basic action page with headline</a></li>
|
|
46
|
+
<li><a href="src/html/basic-action-page-cover-banner-with-headline.html">Basic action page with headline and bottom sections</a></li>
|
|
47
47
|
<li><a href="src/html/thank-you-page-cover-banner.html">Thank you page</a></li>
|
|
48
|
-
<li><a href="src/html/thank-you-page-cover-banner-with-headline.html">Thank you page with headline</a></li>
|
|
48
|
+
<li><a href="src/html/thank-you-page-cover-banner-with-headline.html">Thank you page with headline and bottom sections</a></li>
|
|
49
49
|
</ul>
|
|
50
50
|
<h4 class="h6">E: Fixed background image (1 column)  <small>cover-1col</small></h4>
|
|
51
51
|
<ul class="no-bullet">
|
|
52
52
|
<li><a href="src/html/basic-action-page-cover-1col.html">Basic action page</a></li>
|
|
53
|
-
<li><a href="src/html/basic-action-page-cover-1col-with-headline.html">Basic action page with headline</a></li>
|
|
53
|
+
<li><a href="src/html/basic-action-page-cover-1col-with-headline.html">Basic action page with headline and bottom sections</a></li>
|
|
54
54
|
<li><a href="src/html/thank-you-page-cover-1col.html">Thank you page</a></li>
|
|
55
|
-
<li><a href="src/html/thank-you-page-cover-1col-with-headline.html">Thank you page with headline</a></li>
|
|
55
|
+
<li><a href="src/html/thank-you-page-cover-1col-with-headline.html">Thank you page with headline and bottom sections</a></li>
|
|
56
56
|
</ul>
|
|
57
57
|
{% endblock %}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<section>
|
|
2
|
+
<div class="background">
|
|
3
|
+
<img src="http://placekitten.com/1600/1000" alt="test image with cats" crossorigin="">
|
|
4
|
+
</div>
|
|
5
|
+
<div class="grid-container narrow">
|
|
6
|
+
<blockquote>
|
|
7
|
+
<p>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>
|
|
8
|
+
<cite>Famous Cat</cite>
|
|
9
|
+
</blockquote>
|
|
10
|
+
</div>
|
|
11
|
+
</section>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<section>
|
|
2
|
+
<div class="grid-container">
|
|
3
|
+
<div class="column media-stretch">
|
|
4
|
+
<img src="http://placekitten.com/600/400" alt="test image with cats" crossorigin="">
|
|
5
|
+
</div>
|
|
6
|
+
<div class="column">
|
|
7
|
+
<h2>What's your problem?</h2>
|
|
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
|
+
<p><a href="#form" class="primary button">Take action now!</a></p>
|
|
10
|
+
</div>
|
|
11
|
+
</div>
|
|
12
|
+
</section>
|
|
@@ -89,11 +89,12 @@
|
|
|
89
89
|
{% block bottom %}{% endblock %}
|
|
90
90
|
</section>
|
|
91
91
|
|
|
92
|
-
<section id="footer">
|
|
93
|
-
<div class="grid-container">
|
|
94
|
-
{% block footer %}{% endblock %}
|
|
95
|
-
</div>
|
|
96
|
-
</section>
|
|
97
|
-
|
|
98
92
|
</div>
|
|
93
|
+
|
|
94
|
+
<section id="footer">
|
|
95
|
+
<div class="grid-container">
|
|
96
|
+
{% block footer %}{% endblock %}
|
|
97
|
+
</div>
|
|
98
|
+
</section>
|
|
99
|
+
|
|
99
100
|
{% endblock %}
|
|
@@ -22,6 +22,12 @@
|
|
|
22
22
|
{% include "src/html/includes/share-buttons.html" %}
|
|
23
23
|
{% endblock %}
|
|
24
24
|
|
|
25
|
+
{% block bottom %}
|
|
26
|
+
{% include "src/html/includes/section-2col.html" %}
|
|
27
|
+
{% include "src/html/includes/section-2col.html" %}
|
|
28
|
+
{% include "src/html/includes/section-1col.html" %}
|
|
29
|
+
{% endblock %}
|
|
30
|
+
|
|
25
31
|
{% block footer %}
|
|
26
32
|
{% include "src/html/includes/menu.html" %}
|
|
27
33
|
{% endblock %}
|
|
@@ -26,6 +26,12 @@
|
|
|
26
26
|
{% include "src/html/includes/recent-supporters.html" %}
|
|
27
27
|
{% endblock %}
|
|
28
28
|
|
|
29
|
+
{% block bottom %}
|
|
30
|
+
{% include "src/html/includes/section-2col.html" %}
|
|
31
|
+
{% include "src/html/includes/section-2col.html" %}
|
|
32
|
+
{% include "src/html/includes/section-1col.html" %}
|
|
33
|
+
{% endblock %}
|
|
34
|
+
|
|
29
35
|
{% block footer %}
|
|
30
36
|
{% include "src/html/includes/menu.html" %}
|
|
31
37
|
{% endblock %}
|
|
@@ -22,6 +22,12 @@
|
|
|
22
22
|
{% include "src/html/includes/share-buttons.html" %}
|
|
23
23
|
{% endblock %}
|
|
24
24
|
|
|
25
|
+
{% block bottom %}
|
|
26
|
+
{% include "src/html/includes/section-2col.html" %}
|
|
27
|
+
{% include "src/html/includes/section-2col.html" %}
|
|
28
|
+
{% include "src/html/includes/section-1col.html" %}
|
|
29
|
+
{% endblock %}
|
|
30
|
+
|
|
25
31
|
{% block footer %}
|
|
26
32
|
{% include "src/html/includes/menu.html" %}
|
|
27
33
|
{% endblock %}
|
|
@@ -22,6 +22,12 @@
|
|
|
22
22
|
{% include "src/html/includes/share-buttons.html" %}
|
|
23
23
|
{% endblock %}
|
|
24
24
|
|
|
25
|
+
{% block bottom %}
|
|
26
|
+
{% include "src/html/includes/section-2col.html" %}
|
|
27
|
+
{% include "src/html/includes/section-2col.html" %}
|
|
28
|
+
{% include "src/html/includes/section-1col.html" %}
|
|
29
|
+
{% endblock %}
|
|
30
|
+
|
|
25
31
|
{% block footer %}
|
|
26
32
|
{% include "src/html/includes/menu.html" %}
|
|
27
33
|
{% endblock %}
|
package/src/scss/_util.scss
CHANGED
|
@@ -16,14 +16,16 @@
|
|
|
16
16
|
/// @require $header-color-alt
|
|
17
17
|
///
|
|
18
18
|
/// @param {String} $background - Background color
|
|
19
|
-
@
|
|
19
|
+
/// @param {Bool} $force - If true, all text colors will be overridden regardless of the value
|
|
20
|
+
@mixin match-colors($background, $force: false) {
|
|
20
21
|
$background: get-background-color($background);
|
|
21
22
|
@if $background != transparent {
|
|
22
23
|
color: color-pick-contrast($background, ($body-font-color, $body-font-color-alt));
|
|
23
24
|
|
|
24
25
|
// Replace heading colors only if the contrast of the original color is < 3
|
|
25
26
|
// or they should be the same as the body font color.
|
|
26
|
-
@if
|
|
27
|
+
@if $force or
|
|
28
|
+
(color-contrast($background, $header-color-odd) < 3) or
|
|
27
29
|
($header-color-odd == $body-font-color and $header-color-alt == $body-font-color-alt)
|
|
28
30
|
{
|
|
29
31
|
h1,
|
|
@@ -35,7 +37,8 @@
|
|
|
35
37
|
color: color-pick-contrast($background, ($header-color-odd, $header-color-alt));
|
|
36
38
|
}
|
|
37
39
|
}
|
|
38
|
-
@if
|
|
40
|
+
@if $force or
|
|
41
|
+
(color-contrast($background, $header-color-even) < 3) or
|
|
39
42
|
($header-color-even == $body-font-color and $header-color-alt == $body-font-color-alt)
|
|
40
43
|
{
|
|
41
44
|
h2,
|
|
@@ -53,7 +56,7 @@
|
|
|
53
56
|
@if color-contrast($background, $anchor-color) < 4.5 or $anchor-color == $body-font-color {
|
|
54
57
|
$this-anchor-color: color-pick-contrast($background, ($anchor-color, $body-font-color-alt));
|
|
55
58
|
}
|
|
56
|
-
@if $this-anchor-color != $anchor-color {
|
|
59
|
+
@if $force or $this-anchor-color != $anchor-color {
|
|
57
60
|
a:not(.button) {
|
|
58
61
|
color: $this-anchor-color;
|
|
59
62
|
|
|
@@ -74,11 +77,18 @@
|
|
|
74
77
|
}
|
|
75
78
|
// Replace blockquote colors only if the contrast of the original color is < 4.5
|
|
76
79
|
// or they should be the same as the body font color.
|
|
77
|
-
@if
|
|
80
|
+
@if $force or
|
|
81
|
+
(color-contrast($background, $blockquote-color) < 4.5) or
|
|
78
82
|
($blockquote-color == $body-font-color)
|
|
79
83
|
{
|
|
80
84
|
blockquote {
|
|
81
|
-
|
|
85
|
+
&,
|
|
86
|
+
p {
|
|
87
|
+
color: color-pick-contrast($background, ($blockquote-color, $body-font-color-alt));
|
|
88
|
+
}
|
|
89
|
+
cite {
|
|
90
|
+
color: color-pick-contrast($background, ($cite-color, $body-font-color-alt));
|
|
91
|
+
}
|
|
82
92
|
}
|
|
83
93
|
}
|
|
84
94
|
}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
// Bottom section
|
|
2
|
+
// - - - - - - - - - - - - - - -
|
|
3
|
+
// Styles for the bottom section component.
|
|
4
|
+
|
|
5
|
+
@use "sass:meta";
|
|
6
|
+
|
|
7
|
+
$bottom-section-background-odd: if(
|
|
8
|
+
meta.variable-exists("bottom-section-background"),
|
|
9
|
+
$bottom-section-background,
|
|
10
|
+
$form-background
|
|
11
|
+
) !default;
|
|
12
|
+
$bottom-section-background-even: if(
|
|
13
|
+
meta.variable-exists("bottom-section-background"),
|
|
14
|
+
$bottom-section-background,
|
|
15
|
+
$body-background
|
|
16
|
+
) !default;
|
|
17
|
+
$bottom-section-background-image-overlay: rgba($black, 0.3);
|
|
18
|
+
|
|
19
|
+
#bottom section {
|
|
20
|
+
// Generic section styles
|
|
21
|
+
position: relative;
|
|
22
|
+
|
|
23
|
+
&:nth-child(odd) {
|
|
24
|
+
background: $bottom-section-background-odd;
|
|
25
|
+
@include match-colors($bottom-section-background-odd);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&:nth-child(even) {
|
|
29
|
+
background: $bottom-section-background-even;
|
|
30
|
+
@include match-colors($bottom-section-background-even);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
> .grid-container {
|
|
34
|
+
margin-top: 1.5 * $global-margin;
|
|
35
|
+
margin-bottom: 0.5 * $global-margin;
|
|
36
|
+
|
|
37
|
+
@include breakpoint(small down) {
|
|
38
|
+
.media-stretch:first-child {
|
|
39
|
+
margin-top: -1.5 * $global-margin;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@include breakpoint(large) {
|
|
44
|
+
margin-top: 2.5 * $global-margin;
|
|
45
|
+
margin-bottom: 1.5 * $global-margin;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// Section with background image
|
|
50
|
+
.background {
|
|
51
|
+
&,
|
|
52
|
+
&:after {
|
|
53
|
+
position: absolute;
|
|
54
|
+
top: 0;
|
|
55
|
+
right: 0;
|
|
56
|
+
bottom: 0;
|
|
57
|
+
left: 0;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
img {
|
|
61
|
+
object-fit: cover;
|
|
62
|
+
width: 100%;
|
|
63
|
+
height: 100%;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&:after {
|
|
67
|
+
content: "";
|
|
68
|
+
background: $bottom-section-background-image-overlay;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
~ .grid-container {
|
|
72
|
+
position: relative;
|
|
73
|
+
margin-top: 4.5 * $global-margin;
|
|
74
|
+
margin-bottom: 3.5 * $global-margin;
|
|
75
|
+
@include match-colors($bottom-section-background-image-overlay);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// Section with 2 columns
|
|
80
|
+
@include breakpoint(large) {
|
|
81
|
+
&:nth-child(even) {
|
|
82
|
+
.column:first-child {
|
|
83
|
+
grid-column: 1 / 5;
|
|
84
|
+
// Cover grid-gap to empty column in the middle.
|
|
85
|
+
margin-right: -1 * $global-margin;
|
|
86
|
+
}
|
|
87
|
+
.column:last-child {
|
|
88
|
+
grid-column: 6 / -1;
|
|
89
|
+
align-self: center;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
// Every other section switches items.
|
|
94
|
+
&:nth-child(odd) {
|
|
95
|
+
.column:first-child {
|
|
96
|
+
order: 2;
|
|
97
|
+
grid-column: 6 / -1;
|
|
98
|
+
// Cover grid-gap to empty column in the middle.
|
|
99
|
+
margin-left: -1 * $global-margin;
|
|
100
|
+
}
|
|
101
|
+
.column:last-child {
|
|
102
|
+
order: 1;
|
|
103
|
+
grid-column: 1 / 5;
|
|
104
|
+
align-self: center;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
@include breakpoint(xxlarge) {
|
|
110
|
+
&:nth-child(odd) .column:first-child {
|
|
111
|
+
margin-left: -2 * $global-margin;
|
|
112
|
+
}
|
|
113
|
+
&:nth-child(even) .column:first-child {
|
|
114
|
+
margin-right: -2 * $global-margin;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
package/src/scss/main.scss
CHANGED