New thematic for starting or expanding a family.

wet-boew · Jan 17, 2025 · e783a40 · e783a40
1 parent b4005f8
commit e783a40
Show file tree

Hide file tree

Showing 7 changed files with 240 additions and 88 deletions.
diff --git a/méli-mélo/2024-04-stepsquiz/stepsquiz.css b/méli-mélo/2024-04-stepsquiz/stepsquiz.css
@@ -9,8 +9,7 @@
 }
 
 /* Customisation for the progress bar and text */
-.provisional.wb-steps.quiz progress.progressBar,
-.provisional.wb-steps.quiz label {
+.provisional.wb-steps.quiz progress.progressBar {
 	/*-webkit-appearance: progress-bar;*/
 	width: 100%;
 }

diff --git a/méli-mélo/th-empathy/style.css b/méli-mélo/th-empathy/style.css
diff --git a/méli-mélo/th-empathy/style.scss b/méli-mélo/th-empathy/style.scss
@@ -0,0 +1,13 @@
+//	Empathy thematic
+@use "../th-journeylab/journeylab.scss";
+
+$themeName: 'empathy';
+$themePrimaryColor: #5c2790;
+$themeSecondaryColor: #d6b9ec;
+
+@include journeyGeneric($themeName, $themePrimaryColor, $themeSecondaryColor);
+@include journeyButtons($themeName, $themePrimaryColor, $themeSecondaryColor);
+
+.#{$themeName} {
+	@include journeyComponents($themeName, #themePrimaryColor, #themeSecondaryColor);
+}
diff --git a/méli-mélo/th-journeylab/journeylab.scss b/méli-mélo/th-journeylab/journeylab.scss
@@ -0,0 +1,95 @@
+// Scss Document
+
+@mixin journeyGeneric($themeName, $primaryColor, $secondaryColor) {
+	h1#wb-cont.#{$themeName} {
+		border-bottom: .18em solid $primaryColor;
+		border-image: linear-gradient(to right,$primaryColor 71px,transparent 71px);
+		border-image-slice: 1
+	}
+
+	.text-#{$themeName} {
+    	color: $primaryColor;
+	}
+
+	.bg-#{$themeName} {
+		background-color: $primaryColor;
+		color: #fff;
+	}
+}
+
+@mixin journeyButtons($themeName, $primaryColor, $secondaryColor) {
+	.btn-#{$themeName}.btn-primary,.#{$themeName}.wb-steps.quiz .btn-primary {
+    	background-color: $primaryColor
+	}
+
+	.btn-#{$themeName}.btn-primary:active,.btn-#{$themeName}.btn-primary:focus,.btn-#{$themeName}.btn-primary:hover,.#{$themeName}.wb-steps.quiz .btn-primary:active,.#{$themeName}.wb-steps.quiz .btn-primary:focus,.#{$themeName}.wb-steps.quiz .btn-primary:hover {
+		background-color: $secondaryColor;
+		color: $primaryColor
+	}
+
+	.btn-#{$themeName}.btn-default,.#{$themeName}.wb-steps.quiz .btn-default {
+		background-color: #fff;
+		border-color: $primaryColor;
+		color: $primaryColor
+	}
+
+	.btn-#{$themeName}.btn-default:active,.btn-#{$themeName}.btn-default:focus,.btn-#{$themeName}.btn-default:hover,.#{$themeName}.wb-steps.quiz .btn-default:active,.#{$themeName}.wb-steps.quiz .btn-default:focus,.#{$themeName}.wb-steps.quiz .btn-default:hover {
+		background-color: $secondaryColor;
+		border-color: $primaryColor;
+		color: $primaryColor
+	}
+}
+
+@mixin journeyComponents($themeName, $primaryColor, $secondaryColor) {
+	&.wb-steps.quiz progress {
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+		border: $primaryColor solid 1px;
+		background-color: #777;
+		color: $secondaryColor
+	}
+
+	&.wb-steps.quiz progress::-webkit-progress-bar {
+		background-color: #777
+	}
+
+	&.wb-steps.quiz progress::-webkit-progress-value {
+		background-color: $secondaryColor
+	}
+
+	&.wb-steps.quiz progress::-moz-progress-bar {
+		background-color: $secondaryColor
+	}
+
+	&.wb-steps.quiz .gc-chckbxrdio input[type=radio]:checked+label::before {
+		background: $primaryColor
+	}
+
+	&.wb-steps.quiz .gc-chckbxrdio input[type=checkbox]:checked+label::after {
+		border-color: $primaryColor
+	}
+
+	&.provisional.wb-steps.quiz .wb-tggle-fildst>legend.wb-steps-active {
+		color: $primaryColor
+	}
+}
+
+@media screen {
+	.expandable-list details summary {
+		border: 0;
+		list-style-position: outside;
+		margin-left: 0px;
+		padding-left: 0px;
+	}
+	.expandable-list details[open] {
+		border: 0;
+	}
+}
+
+@media print {
+    .expandable-list details[open] > summary::marker {
+        content: "\2B1C\0020";
+        display: none;
+    }
+}
diff --git a/méli-mélo/th-vitality/meta.md b/méli-mélo/th-vitality/meta.md
@@ -0,0 +1,24 @@
+---
+feature: thématique
+lang: en
+title: Vitality theme
+description: Background colours used for vitality.
+componentName: th-vitality
+expiry: November 30, 2024
+mainPage: vitality.html
+cssClass:
+- vitality
+- btn-vitality
+a11yStatement: >
+  These colours meet the colour contrast requirements as outlined in WCAG 2.1 AA Success Criterion 1.4.3: Contrast (Minimum). After validation using webaim online contrast checker, I can certified that the color matches used in this thematic are meeting a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and also a contrast ratio of at least 3:1 for graphics and user interface components. I did my due diligence and to knowledge and from my understanding, all elements of this thematic are meeting WCAG 2.1 AA standrds.
+  Tested by Francis Snoddy, [email protected]. 2025-01-17.
+peNote:
+- The <code>btn-vitality</code> class must be accompagnied with a fall back button class such as <code>btn-default</code> or <code>btn-primary</code>.
+pages:
+  examples:
+    - title: Vitality theme
+      language: en
+      path: vitality.html
+sponsor: ESDC - Portfolio web
+output: false
+---
diff --git a/méli-mélo/th-vitality/style.scss b/méli-mélo/th-vitality/style.scss
@@ -0,0 +1,13 @@
+//	Vitality thematic
+@use "../th-journeylab/journeylab.scss";
+
+$themeName: 'vitality';
+$themePrimaryColor: #1b6c1c;
+$themeSecondaryColor: #d8eeca;
+
+@include journeyGeneric($themeName, $themePrimaryColor, $themeSecondaryColor);
+@include journeyButtons($themeName, $themePrimaryColor, $themeSecondaryColor);
+
+.#{$themeName} {
+	@include journeyComponents($themeName, #themePrimaryColor, #themeSecondaryColor);
+}
diff --git a/méli-mélo/th-vitality/vitality.html b/méli-mélo/th-vitality/vitality.html
@@ -0,0 +1,94 @@
+---
+title: Vitality theme
+dateModified: 2025-01-17
+description: Vitality CSS styles
+lang: en
+pageclass: cnt-wdth-lmtd
+css:
+- style.css
+- https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/méli-mélo/2025-04-nahanni.css
+script:
+- https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/méli-mélo/2025-04-nahanni.js
+layout: without-h1
+---
+<h1 property="name" id="wb-cont" class="vitality">{{ page.title }}</h1>
+<p>The colors offered by this theme aim to evoke a sense of vitality for the user during certain life events, such as the addition of a child to your family.</p>
+{% assign metadata = site.pages | where: "output", "false" | where: "componentName", "th-vitality" | first %}
+<p>Sponsor: {{ metadata.sponsor }}</p>
+<p>Accessibility statement: {{ metadata.a11yStatement }}</p>
+<p>Progressive enhancement note:</p>
+<ul>
+    {% for peNote in metadata.peNote %}
+    <li>{{ peNote }}</li>
+    {% endfor %}
+</ul>
+
+<h2>CSS classes</h2>
+<dl>
+    <dt><code>.vitality</code></dt>
+    <dd>When applied to the <code>&lt;h1&gt;</code> element it set a purple underline to the title element of the page.</dd>
+    <dd>When applied to the Steps Quiz along with the <code>wb-steps</code> and <code>quiz</code> it set the thematic colors to the navigation buttons, the progress bar and to the <code>&lt;legend&gt;</code> text.</dd>
+    <dt><code>.btn-vitality</code></dt>
+    <dd>Along with <code>.btn-primary</code> or <code>.btn-default</code>, set a purple colour thematic to buttons.</dd>
+</dl>
+
+<h2>Examples</h2>
+<h3>Purple Underline to the <code>&lt;h1&gt;</code> </h3>
+<p>The example has been applied to the <code>&lt;h1&gt;</code> element of this page.</p>
+<h4>Code</h4>
+<pre><code>&lt;h1 property="name" id="wb-cont" class="vitality"&gt;&lt;-- Page title --&gt;&lt;/h1&gt;</code></pre>
+
+<h3>Green Button</h3>
+<button class="btn btn-primary btn-vitality" type="button">Button</button>
+<h4>Code</h4>
+<pre><code>&lt;button class="btn btn-primary btn-vitality" type="button"&gt;Button&lt;/button&gt;</code></pre>
+
+<h3>Light Green Button</h3>
+<button class="btn btn-default btn-vitality" type="button">Button</button>
+<h4>Code</h4>
+<pre><code>&lt;button class="btn btn-default btn-vitality" type="button"&gt;Button&lt;/button&gt;</code></pre>
+
+<h3>Steps Progress</h3>
+<div class="panel panel-default stepsquiz">
+    <div class="wb-frmvld provisional wb-steps quiz vitality panel-body">
+        <form action="#" id="progress-example">
+            <fieldset>
+                <legend>Which is your favorite fruit?</legend>
+                <div>
+                    <p>My favorite fruit is:</p>
+                    <ul class="list-unstyled lst-spcd-2 gc-chckbxrdio">
+                        <li class="radio">
+                            <input type="radio" name="fruit" id="apple-1" value="apple">
+                            <label for="apple-1">Apple</label>
+                        </li>
+                        <li class="radio">
+                            <input type="radio" name="fruit" id="orange-1" value="orange">
+                            <label for="orange-1">Orange</label>
+                        </li>
+                    </ul>
+                </div>
+            </fieldset>
+            <fieldset>
+                <legend>Condiments</legend>
+                <div>
+                    <p>Choose your condiments:</p>
+                    <ul class="list-unstyled lst-spcd-2 gc-chckbxrdio">
+                        <li class="checkbox">
+                            <input type="checkbox" id="ketchup-1" value="ketchup" name="condiments">
+                            <label for="ketchup-1">Ketchup</label>
+                        </li>
+                        <li class="checkbox">
+                            <input type="checkbox" id="relish-1"  value="relish" name="condiments">
+                            <label for="relish-1">Relish</label>
+                        </li>
+                    </ul>
+                </div>
+            </fieldset>
+            <input type="submit" class="btn btn-primary" />
+        </form>
+    </div>
+</div>
+<h4>Code</h4>
+<pre><code>&lt;div class="wb-frmvld provisional wb-steps quiz vitality panel-body"&gt;
+    &lt;!-- Steps Quiz Form --&gt;
+&lt;/div&gt;</code></pre>