From e4fb5fdc49cd93dd1e6c1619f176b8582b0ee5b1 Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Tue, 15 Feb 2022 15:54:25 +0100
Subject: [PATCH] publik-famille-demo: create theme (#61994)

---
 static/publik-famille-demo/_cells.scss        | 142 +++++++++++
 static/publik-famille-demo/_custom.scss       |  65 +++++
 .../publik-famille-demo/_custom_classes.scss  | 152 +++++++++++
 static/publik-famille-demo/_header.scss       | 240 ++++++++++++++++++
 static/publik-famille-demo/_vars.scss         | 114 +++++++++
 static/publik-famille-demo/config.json        |  17 ++
 static/publik-famille-demo/img/bubble.svg     |   1 +
 .../img/carrousel-banner.png                  | Bin 0 -> 16194 bytes
 static/publik-famille-demo/img/cloud.svg      |   1 +
 static/publik-famille-demo/img/icon_baby.svg  |   1 +
 .../publik-famille-demo/img/icon_backpack.svg |   1 +
 .../publik-famille-demo/img/icon_children.svg |   1 +
 .../publik-famille-demo/img/icon_family.svg   |   1 +
 static/publik-famille-demo/img/icon_forms.svg |   1 +
 static/publik-famille-demo/style.scss         |   9 +
 .../combo/cells/carrousel/menu-cell.html      |   8 +
 .../combo/link-list-cell.html                 |  55 ++++
 .../publik-famille-demo/combo/menu.html       |  23 ++
 .../combo/page_template.html                  |  18 ++
 .../combo/page_template_homepage.html         |  10 +
 .../publik-famille-demo/includes/nav.html     |   5 +
 21 files changed, 865 insertions(+)
 create mode 100644 static/publik-famille-demo/_cells.scss
 create mode 100644 static/publik-famille-demo/_custom.scss
 create mode 100644 static/publik-famille-demo/_custom_classes.scss
 create mode 100644 static/publik-famille-demo/_header.scss
 create mode 100644 static/publik-famille-demo/_vars.scss
 create mode 100644 static/publik-famille-demo/config.json
 create mode 100644 static/publik-famille-demo/img/bubble.svg
 create mode 100644 static/publik-famille-demo/img/carrousel-banner.png
 create mode 100644 static/publik-famille-demo/img/cloud.svg
 create mode 100644 static/publik-famille-demo/img/icon_baby.svg
 create mode 100644 static/publik-famille-demo/img/icon_backpack.svg
 create mode 100644 static/publik-famille-demo/img/icon_children.svg
 create mode 100644 static/publik-famille-demo/img/icon_family.svg
 create mode 100644 static/publik-famille-demo/img/icon_forms.svg
 create mode 100644 static/publik-famille-demo/style.scss
 create mode 100644 templates/variants/publik-famille-demo/combo/cells/carrousel/menu-cell.html
 create mode 100644 templates/variants/publik-famille-demo/combo/link-list-cell.html
 create mode 100644 templates/variants/publik-famille-demo/combo/menu.html
 create mode 100644 templates/variants/publik-famille-demo/combo/page_template.html
 create mode 100644 templates/variants/publik-famille-demo/combo/page_template_homepage.html
 create mode 100644 templates/variants/publik-famille-demo/includes/nav.html

diff --git a/static/publik-famille-demo/_cells.scss b/static/publik-famille-demo/_cells.scss
new file mode 100644
index 00000000..7e859fb4
--- /dev/null
+++ b/static/publik-famille-demo/_cells.scss
@@ -0,0 +1,142 @@
+.cell + .pf-page-header--default {
+	display: none;
+}
+
+.page-template-homepage .gru-content div.cell {
+	margin-top: 2rem;
+	padding-bottom: 2rem;
+	border-radius: 0;
+
+	&:not(:last-child) {
+		border-bottom: 3px solid $orange;
+	}
+}
+
+// Links
+%cell-links-list {
+	& > li:not(.add-more-items) > a {
+		font-size: $fz-3;
+		padding: 0;
+		margin: 0.5rem 0rem;
+		display: flex;
+		align-items: center;
+	}
+}
+
+.add-more-items--button {
+	font-size: $fz-2;
+	color: $orange;
+}
+
+// Notifications
+div.cell.notifications-cell {
+	h2:first-child {
+		color: $orange;
+		font-size: $fz-3;
+		&:before {
+			content: '\f0f3';
+			font-family: FontAwesome;
+			margin-right: 2rem;
+		}
+	}
+
+	.links-list {
+		background: $orange;
+		border-radius: $border-radius;
+
+		ul {
+			padding: 2rem 4rem;
+			> li {
+				border: none;
+				padding: 0.3rem 0;
+
+				&:not(:last-child) {
+					border-bottom: 1px solid white;
+				}
+
+				> a {
+					font-size: $font-size;
+					text-decoration: underline;
+					color: white;
+				}
+
+				> div.description {
+					color: white;
+				}
+			}
+		}
+	}
+}
+
+// Tracking code
+div.cell.tracking-code-input-cell {
+	h2:first-child {
+		font-size: $font-size;
+		text-transform: uppercase;
+		border-bottom: 1px solid $gray-dark;
+		border-radius: 0;
+	}
+}
+
+// Carrousel
+div.carrousel-content {
+	background: $green-light;
+	overflow: visible;
+	margin-top:150px;
+
+	@media($min-desktop-viewport) {
+		&::before {
+			background-image: url('img/carrousel-banner.png');
+			background-position:center;
+			background-repeat: no-repeat;
+			content: "";
+			position: absolute;
+			height: 150px;
+			width: 100%;
+			top:-110px;
+		}
+	}
+
+	@media($max-mobile-viewport) {
+		.carrousel-item-content {
+			text-align: center;
+			background: $green-light;
+		}
+	}
+
+	input + div {
+		padding: 3rem;
+		div.carrousel-item {
+			&:after {
+				background-color: transparent;
+			}
+			color: black;
+			background-repeat: no-repeat;
+			background-size: 30%;
+			background-position-x: 10%;
+			padding: 1rem;
+			text-align: left;
+
+			.carrousel-item-content {
+				@media($min-desktop-viewport) {
+					margin-right: 2rem;
+				}
+			}
+		}
+	}
+}
+
+// Custom classes
+.errornotice,
+.warningnotice,
+.successnotice,
+.infonotice {
+	border-radius: $border-radius;
+	padding-top: 1rem;
+	padding-bottom: 1rem;
+	padding-right: 1rem;
+	min-height: calc(#{$notification-icon-size} + 2rem);
+	&::before {
+		top: 1rem;
+	}
+}
diff --git a/static/publik-famille-demo/_custom.scss b/static/publik-famille-demo/_custom.scss
new file mode 100644
index 00000000..a8a36cd0
--- /dev/null
+++ b/static/publik-famille-demo/_custom.scss
@@ -0,0 +1,65 @@
+:root {
+	--pf-icon-content: "";
+}
+
+h1 {
+	font-size: $fz-1;
+	font-weight: 800;
+}
+
+h2 {
+	font-size: $fz-2;
+	font-weight: 700;
+}
+
+h3 {
+	font-size: $fz-3;
+	font-weight: 600;
+}
+
+div#main-content {
+	margin-top: 6rem;
+	@media($max-mobile-viewport) {
+		margin-top: 1rem;
+	}
+}
+
+%pf-field {
+	padding: 0.5rem;
+	font-size: $font-size;
+	background-color: $gray-light;
+	border-radius: $border-radius;
+}
+
+.wcs-step {
+	&.current & {
+		&--marker {
+			background-size: contain;
+			background-repeat: no-repeat;
+		}
+	}
+}
+
+.form-content {
+	&--sidebox {
+		background: $gray-light;
+		padding: 1rem;
+		border-radius: $border-radius;
+	}
+}
+
+div.cell.wcs-cards-cell {
+	h2:first-child {
+		font-size: $fz-3;
+	}
+
+	div.list-of-cards {
+		ul > li {
+			border: none;
+			padding: 0.3rem 0;
+			> a {
+				@extend %pf-field;
+			}
+		}
+	}
+}
diff --git a/static/publik-famille-demo/_custom_classes.scss b/static/publik-famille-demo/_custom_classes.scss
new file mode 100644
index 00000000..31122e9e
--- /dev/null
+++ b/static/publik-famille-demo/_custom_classes.scss
@@ -0,0 +1,152 @@
+.pf-cloud {
+	position: relative;
+	&::before {
+		background: url('img/cloud.svg');
+		bottom: -120px;
+		content: "";
+		height: 264px;
+		position: absolute;
+		right: 50px;
+		width: 342px;
+		z-index: -1;
+	}
+}
+
+.pf-gray-cell {
+	.gru-content &.cell {
+		background-color: $gray-light;
+		padding-bottom: 1rem;
+	}
+}
+
+.pf-green-cell {
+	.gru-content &.cell {
+		background-color: $green-light;
+		padding-bottom: 1rem;
+	}
+}
+
+%pf-icon {
+	background: var(--pf-icon-picture) no-repeat bottom left;
+	background-size: contain;
+	content: var(--pf-icon-content);
+	display: flex;
+	align-items: start;
+	color: $orange;
+	font-family: 'FontAwesome';
+}
+
+div.pf-icon-list {
+	ul > li:not(.add-more-items) > a {
+		background: url(img/bubble.svg);
+		background-position: bottom left;
+		background-repeat: no-repeat;
+		transition: background-position 0.2s ease-out;
+
+		&::before {
+			@extend %pf-icon;
+			width: 35px;
+			height: 35px;
+			font-size: 35px;
+			margin-right: 1rem;
+		}
+
+		&:hover {
+			background-position-x: 10px;
+			background-size: contain;
+		}
+	}
+}
+
+div.card.pf-card-detail {
+	h2:first-child {
+		border-bottom: 2px solid $gray;
+		padding: 1rem 0;
+		border-radius: 0;
+	}
+	.label {
+		color: $gray-dark;
+		font-size: $fz-3;
+		font-weight: 700;
+		margin-bottom: 0.3rem;
+		margin-top: 0.3rem;
+		text-align: right;
+	}
+	.value {
+		@extend %pf-field;
+		margin-bottom: 0.3rem;
+		margin-top: 0.3rem;
+	}
+}
+
+%icon-button {
+	&:not(.pf-big-button) {
+		div.links-list {
+			ul > li > a {
+				&::before {
+					@extend %pf-icon;
+					padding-right: 1rem;
+				}
+			}
+		}
+	}
+
+	&.pf-big-button {
+		div.links-list {
+			ul > li > a {
+				border: 2px solid $orange;
+				padding: 0.3rem 1.5rem;
+				width: max-content;
+				color: $orange;
+				&::after {
+					@extend %pf-icon;
+					margin-left: 1rem;
+					font-size: 35px;
+					width: 35px;
+					height: 35px;
+					margin-bottom: 3px;
+				}
+			}
+		}
+	}
+}
+
+.pf-icon-baby {
+	@extend %icon-button;
+	--pf-icon-picture: url('img/icon_baby.svg');
+}
+
+.pf-icon-backpack {
+	@extend %icon-button;
+	--pf-icon-picture: url('img/icon_backpack.svg');
+}
+
+.pf-icon-children {
+	@extend %icon-button;
+	--pf-icon-picture: url('img/icon_children.svg');
+}
+
+.pf-icon-family {
+	@extend %icon-button;
+	--pf-icon-picture: url('img/icon_family.svg');
+}
+
+.pf-icon-forms {
+	@extend %icon-button;
+	--pf-icon-picture: url('img/icon_forms.svg');
+}
+
+.pf-icon-add {
+	@extend %icon-button;
+	--pf-icon-content: '\f055';
+}
+
+.pf-icon-remove {
+	@extend %icon-button;
+	--pf-icon-content: '\f2ed';
+}
+
+.pf-icon-question {
+	@extend %icon-button;
+	--pf-icon-content: '\f059';
+}
diff --git a/static/publik-famille-demo/_header.scss b/static/publik-famille-demo/_header.scss
new file mode 100644
index 00000000..2840300e
--- /dev/null
+++ b/static/publik-famille-demo/_header.scss
@@ -0,0 +1,240 @@
+div#header-wrapper {
+	background: $gray-light;
+	display: flex;
+	@media($max-mobile-viewport) {
+		height: 80px;
+	}
+}
+
+body.has-header-background #header{
+	background-size: contain;
+	background-position-x: 30%;
+}
+
+body.has-header-background #header {
+	display: flex;
+	padding: 10px 0;
+	@media($max-mobile-viewport) {
+		background-image: none;
+	}
+}
+
+div#top {
+	display: flex;
+	flex-grow: 1;
+	align-items: start;
+}
+
+h1#logo.has-logo {
+	flex-grow: 1;
+	padding: 0;
+
+	a {
+		height: 60px;
+	}
+
+	@media($max-mobile-viewport) {
+		display: none;
+	}
+}
+
+#toplinks {
+	border-bottom-right-radius: $border-radius;
+	background: white;
+	margin-top: 2px;
+
+	@media($min-desktop-viewport) {
+		position: static;
+		margin-right: 8rem;
+	}
+
+	@media($max-mobile-viewport) {
+		position: absolute;
+		right: 80px;
+		top: 11px;
+	}
+
+	.sep {
+		display: none;
+	}
+
+	a {
+		margin: 0 0.5em;
+		color: $orange-dark;
+
+		&:first-child {
+			font-weight: bold;
+		}
+	}
+}
+
+.site-nav {
+	position: fixed;
+	width: 100%;
+	z-index: 102;
+}
+
+.gru-nav-wrapper {
+	width: 100%
+}
+
+div.gru-nav {
+	position: relative;
+
+	.gru-nav-button {
+		position: absolute;
+		top: 15px;
+		right: 20px;
+		left: auto;
+		border-radius: 100%;
+
+		.icon-bar {
+			left: 25%;
+			width: 50%;
+		}
+
+		+ ul {
+			&::before {
+				content: none;
+			}
+
+			display: flex;
+			flex-wrap: wrap;
+			left: auto;
+			right: 0;
+			transform: translateX(100%);
+			min-width: calc((100% - #{$width}) / 2 + 420px);
+			padding-top: 50px;
+		}
+	}
+}
+
+.pf-menu-item {
+	&--image {
+		width: 160px;
+		height: 160px;
+		background: white;
+		border-radius: $border-radius;
+		padding: 1rem;
+	}
+
+	&--title {
+		text-align: center;
+	}
+
+	&:hover &--title {
+		text-decoration: underline;
+	}
+}
+
+.pf-page-header {
+	&--default {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: end;
+
+		&::before {
+			background: url('img/cloud.svg');
+			content: "";
+			position: absolute;
+			height: 264px;
+			width: 342px;
+			top: -10px;
+			left: 50px;
+			z-index: -1;
+
+			@media($max-mobile-viewport) {
+				top: 0;
+				left: 10px;
+			}
+		}
+	}
+
+	&--title {
+		margin: 0;
+		@media($max-mobile-viewport) {
+			font-size: $fz-3;
+		}
+	}
+
+	&--picture {
+		width: 100px;
+		margin-right: 1rem;
+		@media($max-mobile-viewport) {
+			width: 35px;
+		}
+	}
+
+	&--description {
+		margin-top: 0.5rem;
+		flex-basis: 100%;
+	}
+}
+
+body.page-template-homepage {
+	div#header-wrapper {
+		background: transparent;
+		@media($max-mobile-viewport) {
+			height: auto;
+		}
+	}
+
+	#header {
+		background: var(--page-picture);
+		background-repeat: no-repeat;
+		background-position-y: 50px;
+
+		@media($min-desktop-viewport) {
+			height: 550px;
+			margin-bottom: -180px;
+		}
+
+		@media($max-mobile-viewport) {
+			background: none;
+			flex-direction: column;
+		}
+	}
+
+	h1#logo.has-logo {
+		display: block;
+		@media($max-mobile-viewport) {
+			text-align: center;
+			margin-top: 50px;
+		}
+
+		a {
+			width: 260px;
+			height: 150px;
+			margin-top: 10px;
+			@media($max-mobile-viewport) {
+				width: 200px;
+				height: 114px;
+			}
+		}
+	}
+
+	#toplinks {
+		background: $gray-light;
+		@media($max-mobile-viewport) {
+			top: 15px;
+		}
+	}
+
+	.pf-header-description {
+		font-weight: bold;
+		text-align: center;
+		font-size: $fz-1;
+
+		@media($max-mobile-viewport) {
+			padding: 1rem;
+			font-size: $fz-3;
+		}
+
+		@media($min-desktop-viewport) {
+			position: absolute;
+			top: 70px;
+			right: 8rem;
+			width: 50%;
+		}
+	}
+}
diff --git a/static/publik-famille-demo/_vars.scss b/static/publik-famille-demo/_vars.scss
new file mode 100644
index 00000000..5d000718
--- /dev/null
+++ b/static/publik-famille-demo/_vars.scss
@@ -0,0 +1,114 @@
+// colors
+$gray: #BFBFBF;
+$gray-dark: #575757;
+$gray-light: #F1F1F1;
+$orange: #EC671F;
+$orange-dark: #df5a13;
+$orange-gray: #A88B7D;
+$green: #6BD3AA;
+$green-dark: #31a679;
+$green-light: #A6E5CC;
+$blue: #91D5FF;
+$blue-dark: #183c88;
+$red: #df1313;
+
+// typo
+$base-font: 16;
+$font-ratio: 1.333;
+$fz-3: 1em * $font-ratio;
+$fz-2: $fz-3 * $font-ratio;
+$fz-1: $fz-2 * $font-ratio;
+$fz-small: 1em / $font-ratio;
+
+// Core vars
+$width: 1280em / $base-font;
+$mobile-limit: 64em;
+$very-small-limit: 35em;
+$columns-gutter: 2rem;
+
+$font-size: 100% / ( 16 / $base-font );
+$font-color: $gray-dark;
+$font-family: "source sans pro", sans-serif;
+
+$primary-color: $orange-dark;
+$border-radius: 1rem;
+$link-color: $primary-color;
+
+$header-full-width-background: false;
+$header-background: $gray;
+$header-height: 500px;
+
+$toplinks-style: none;
+$toplinks-padding: .75em 0.5em;
+$toplinks-background: $gray-light;
+$toplinks-border-radius: $border-radius;
+
+$nav-after-image: false;
+$nav-mobile-limit: 20000px;
+$pwa-nav-limit: 960px;
+$nav-background: $orange;
+$nav-color: white;
+$nav-border-radius: 0;
+$nav-active-color: white;
+
+$nav-button-background: $orange;
+$nav-button-color: white;
+
+$nav-mobile-menu-background: $orange;
+$nav-border-radius: 100%;
+$nav-mobile-menu-item-color: white;
+$nav-mobile-menu-item-hover-background: $orange;
+$nav-mobile-menu-item-hover-color: white;
+
+$responsive-menu: left-to-right;
+
+$title-background: transparent;
+$title-color: $font-color;
+$title-font-size: $fz-2;
+$title-weight: 900;
+$title-padding: 0 0 0.5rem 0;
+
+$cell-background: transparent;
+$cell-border: none;
+$cell-title-cover-border: false;
+$cell-entry-border: 2px solid $gray;
+$cell-entry-hover-color: $orange;
+$cell-entry-hover-background: $cell-background;
+
+$cell-entry-color: $gray-dark;
+$cell-entry-font-weight: 600;
+
+$carrousel-height: 40rem;
+$carrousel-text-position: middle right;
+$carrousel-navigation-color: black;
+$carrousel-navigation-bullet-border: black;
+
+$button-background: $orange-dark;
+$button-color: white;
+$button-hover-background: $orange;
+$cancel-button-style: "%inverted-button";
+
+$error-color: $red;
+$widget-unique-checkbox-position: left;
+
+$widget-background: $gray-light;
+$widget-border: 1px solid $gray-light;
+$widget-border-radius: $border-radius;
+$widget-focus-border: 1px solid $orange;
+$widget-padding: 0.625rem 1rem !default;
+$widget-focus-box-shadow: none !default;
+
+$notification_error_color: $red;
+$notification_warning_color: $orange_dark;
+$notification_success_color: $green-light;
+$notification_info_color: $gray-light;
+
+$wcs-step-color: $gray-dark;
+$wcs-step-background: transparent !default;
+$wcs-step-current-marker-background: url(img/bubble.svg);
+$wcs-step-border-bottom: none;
+$wcs-step-current-border-bottom: none;
+
+$footer-background: $gray-light;
+$footer-full-width-background: false;
+$footer-color: gray-dark;
diff --git a/static/publik-famille-demo/config.json b/static/publik-famille-demo/config.json
new file mode 100644
index 00000000..f4bca541
--- /dev/null
+++ b/static/publik-famille-demo/config.json
@@ -0,0 +1,17 @@
+{
+  "label": "Publik Famille demo",
+  "variables": {
+    "pwa_display": "standalone",
+    "theme_color": "#EC671F",
+    "email_header_asset": "emails:logo"
+  },
+  "settings": {
+    "combo": {
+      "COMBO_ASSET_SLOTS.update": {
+        "header:logo": { "label": "Têtière : logo" },
+        "header:background": { "label": "Têtière : fond" },
+        "emails:logo": {"label": "Emails : logo"}
+      }
+    }
+  }
+}
diff --git a/static/publik-famille-demo/img/bubble.svg b/static/publik-famille-demo/img/bubble.svg
new file mode 100644
index 00000000..d2ca209b
--- /dev/null
+++ b/static/publik-famille-demo/img/bubble.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="29" height="28" viewBox="0 0 29 28"><defs><style>.a{fill:#d9f1ff;}</style></defs><ellipse class="a" cx="14.5" cy="14" rx="14.5" ry="14"/></svg>
\ No newline at end of file
diff --git a/static/publik-famille-demo/img/carrousel-banner.png b/static/publik-famille-demo/img/carrousel-banner.png
new file mode 100644
index 0000000000000000000000000000000000000000..0b3c40b52a6c133d73379e1f754f54112a9bfa36
GIT binary patch
diff --git a/static/publik-famille-demo/img/cloud.svg b/static/publik-famille-demo/img/cloud.svg
new file mode 100644
index 00000000..f07be217
--- /dev/null
+++ b/static/publik-famille-demo/img/cloud.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="342.068" height="264.118" viewBox="0 0 342.068 264.118"><defs><style>.a{fill:#91d5ff;opacity:0.34;}</style></defs><path class="a" d="M1182.574,262.261c-3.436,4.7-8.6,6.818-13.549,8.658a238.914,238.914,0,0,1-32.165,9.838c-.095.024-.192.044-.29.065a126.025,126.025,0,0,1-24.334,3,92.313,92.313,0,0,1-22.782-2.347h0c-.314-.074-.624-.148-.935-.227a76.656,76.656,0,0,1-31.369-15.775c-.858-.728-1.717-1.48-2.589-2.2q-.088-.069-.168-.137a16.341,16.341,0,0,0-5.4-3.176c-5.41-1.638-10.839,1.833-15.918,4.6-31.386,17.117-71.208,7.961-95.431-21.945-2.966-3.659-5.786-7.661-9.495-10.114-5.514-3.642-12.135-3.337-18.24-5.057-18.209-5.133-30.286-31.4-24.345-52.947,3.29-11.94,10.926-21.363,19.216-28.881,20.451-18.548,46.4-27.906,71.894-25.922l.765.063c11.892,1.022,23.95,4.214,35.545.949,10.054-2.831,18.732-10.251,27.945-15.9q2.58-1.582,5.226-2.981c.169-.093.342-.183.512-.27a88.23,88.23,0,0,1,34.921-9.955c9.618-.645,21.393,1.2,28.645,9.791,7.47,8.852,7.756,24.48,17.991,30.3,8.474,4.817,19.13,3.389,27.972,8.8,8.642,5.286,16.152,14.6,17.982,26.159,1.777,11.229-1.922,22.8-.763,34.148a50.346,50.346,0,0,0,2.33,10.516q.3.932.629,1.857c2.147,6.075,4.975,11.919,7.142,18C1187.1,241.246,1188.545,254.086,1182.574,262.261Z" transform="matrix(-0.966, -0.259, 0.259, -0.966, 1122.521, 581.285)"/></svg>
\ No newline at end of file
diff --git a/static/publik-famille-demo/img/icon_baby.svg b/static/publik-famille-demo/img/icon_baby.svg
new file mode 100644
index 00000000..7e3c4234
--- /dev/null
+++ b/static/publik-famille-demo/img/icon_baby.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20.609" height="17.362" viewBox="0 0 20.609 17.362"><defs><style>.a{fill:#ec671f;fill-rule:evenodd;}</style></defs><g transform="translate(-0.905 -0.113)"><g transform="translate(0.905 0.113)"><path class="a" d="M22.117,8a3.165,3.165,0,1,0,3.165,3.165A3.169,3.169,0,0,0,22.117,8" transform="translate(-11.812 -4.88)"/><path class="a" d="M20.182,13.222l-.723-.375.152.8c.013.072.025.145.032.221a2.251,2.251,0,0,1,.011.226,2.355,2.355,0,0,1-.017.269l-.006.04a2.385,2.385,0,0,1-.045.243,2.24,2.24,0,0,1-.069.233,2.175,2.175,0,0,1-.1.232l-.144.3.274.192a3.956,3.956,0,1,1-4.542,0l.274-.192-.144-.3a2.305,2.305,0,0,1-.1-.241c-.025-.073-.047-.148-.073-.255-.016-.07-.028-.141-.037-.21l-.008-.049a2.367,2.367,0,0,1-.015-.261c0-.076,0-.152.011-.227s.019-.148.032-.22l.152-.8-.723.375a6.33,6.33,0,1,0,5.8,0" transform="translate(-6.977 -7.809)"/><path class="a" d="M21.508,4.62c0-.1-.009-.169-.013-.2A4.124,4.124,0,0,0,19.5.86,4.861,4.861,0,0,0,14.345.844a5.638,5.638,0,0,1-3.094.826l-.042,0-.04,0a5.622,5.622,0,0,1-3.1-.825A4.861,4.861,0,0,0,2.919.86a4.125,4.125,0,0,0-2,3.558c0,.032-.008.1-.013.2a6.291,6.291,0,0,0,3.227,5.734A7.093,7.093,0,0,1,7.473,5.11a3.95,3.95,0,0,1,7.472,0,7.093,7.093,0,0,1,3.335,5.245A6.29,6.29,0,0,0,21.508,4.62" transform="translate(-0.905 -0.113)"/></g></g></svg>
\ No newline at end of file
diff --git a/static/publik-famille-demo/img/icon_backpack.svg b/static/publik-famille-demo/img/icon_backpack.svg
new file mode 100644
index 00000000..8104f73a
--- /dev/null
+++ b/static/publik-famille-demo/img/icon_backpack.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20.539" height="20.539" viewBox="0 0 20.539 20.539"><defs><style>.a{fill:#ec671f;}</style></defs><g transform="translate(-3 -3)"><path class="a" d="M21.959,19.133h-.79V15.87a14.551,14.551,0,0,1-1.77.1h-2.97v.79a.79.79,0,1,1-1.58,0v-.79H11.69v.79a.79.79,0,1,1-1.58,0v-.79H7.139a14.551,14.551,0,0,1-1.77-.1v3.263H4.58A1.579,1.579,0,0,0,3,20.712v3.16a1.579,1.579,0,0,0,1.58,1.58h.79a.79.79,0,0,0,.79.79H20.379a.79.79,0,0,0,.79-.79h.79a1.579,1.579,0,0,0,1.58-1.58v-3.16A1.579,1.579,0,0,0,21.959,19.133ZM4.58,23.872v-3.16h.79v3.16Zm12.639-.79a.79.79,0,0,1-.79.79H10.11a.79.79,0,0,1-.79-.79v-3.16a.79.79,0,0,1,.79-.79h6.32a.79.79,0,0,1,.79.79Zm4.74.79h-.79v-3.16h.79Z" transform="translate(0 -2.703)"/><path class="a" d="M10.74,11.69V10.9a.79.79,0,0,1,1.58,0v.79h3.16V10.9a.79.79,0,0,1,1.58,0v.79h2.97a12.748,12.748,0,0,0,1.77-.118V10.9a5.53,5.53,0,0,0-5.53-5.53h0a2.37,2.37,0,1,0-4.74,0h0A5.53,5.53,0,0,0,6,10.9v.656a12.878,12.878,0,0,0,1.77.134ZM13.9,4.58a.79.79,0,0,1,.79.79H13.11A.79.79,0,0,1,13.9,4.58Z" transform="translate(-0.63)"/></g></svg>
\ No newline at end of file
diff --git a/static/publik-famille-demo/img/icon_children.svg b/static/publik-famille-demo/img/icon_children.svg
new file mode 100644
index 00000000..2fb404ef
--- /dev/null
+++ b/static/publik-famille-demo/img/icon_children.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.571" height="21.702" viewBox="0 0 21.571 21.702"><defs><style>.a{fill:#ec671f;}</style></defs><g transform="translate(0 0)"><path class="a" d="M623.556,350.341l-2.161-8.5a3.67,3.67,0,0,0-.668-1.388h0c-1.429-1.782-3.69-.606-3.956,2.057h0c-.391,3.926,1.424,7.617,4.169,8.477l1.849.579C623.3,351.727,623.732,351.033,623.556,350.341Z" transform="translate(-616.718 -338.547)"/><path class="a" d="M641.293,349.861l.369-9.108a3.848,3.848,0,0,1,.375-1.553h0c1.053-2.112,3.562-1.38,4.389,1.279h0c1.219,3.921.182,8.057-2.382,9.5l-1.726.972C641.844,351.22,641.263,350.6,641.293,349.861Z" transform="translate(-625.365 -337.972)"/><path class="a" d="M635.074,356.214h-7.6a2.7,2.7,0,0,0-2.059,4.449l3.8,4.477a2.7,2.7,0,0,0,4.118,0l3.8-4.477A2.7,2.7,0,0,0,635.074,356.214Zm-5.735,6.037a.739.739,0,1,1,.738-.739A.738.738,0,0,1,629.34,362.251Zm3.867,0a.739.739,0,1,1,.738-.739A.738.738,0,0,1,633.207,362.251Z" transform="translate(-619.55 -344.391)"/></g></svg>
\ No newline at end of file
diff --git a/static/publik-famille-demo/img/icon_family.svg b/static/publik-famille-demo/img/icon_family.svg
new file mode 100644
index 00000000..72b5c6cf
--- /dev/null
+++ b/static/publik-famille-demo/img/icon_family.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25.531" height="27.705" viewBox="0 0 25.531 27.705"><defs><style>.a{fill:#ec671f;}.b{fill:#fff;}</style></defs><g transform="translate(0 0)"><path class="a" d="M3847.376-287.878l1.379-5.422a2.338,2.338,0,0,1,.426-.886h0c.912-1.137,2.355-.387,2.525,1.313h0c.25,2.505-.909,4.86-2.661,5.409l-1.179.369C3847.541-286.993,3847.264-287.436,3847.376-287.878Z" transform="translate(-3828.315 295.404)"/><path class="a" d="M3895-290.069l-.236-5.812a2.456,2.456,0,0,0-.239-.991h0c-.672-1.347-2.273-.881-2.8.816h0c-.778,2.5-.116,5.142,1.52,6.063l1.1.62C3894.652-289.2,3895.022-289.6,3895-290.069Z" transform="translate(-3881.743 297.656)"/><path class="a" d="M3863.5-264.955h4.851a1.724,1.724,0,0,1,1.314,2.839l-2.425,2.857a1.724,1.724,0,0,1-2.628,0l-2.425-2.857A1.724,1.724,0,0,1,3863.5-264.955Zm3.659,3.852a.471.471,0,0,0,.471-.471.471.471,0,0,0-.471-.471.471.471,0,0,0-.471.471A.471.471,0,0,0,3867.164-261.1Zm-2.468,0a.471.471,0,0,0,.471-.471.471.471,0,0,0-.471-.471.471.471,0,0,0-.471.471A.471.471,0,0,0,3864.7-261.1Z" transform="translate(-3849.987 272.499)"/><path class="a" d="M3872.09-229.692a.244.244,0,0,0,.242-.263,3.964,3.964,0,0,0-3.955-3.7,3.964,3.964,0,0,0-3.955,3.7.245.245,0,0,0,.242.263Z" transform="translate(-3852.847 248.422)"/><path class="a" d="M3857.941-214.717h1.162a.191.191,0,0,1,.177.119.632.632,0,0,0,.585.394.632.632,0,0,0,.585-.394.191.191,0,0,1,.177-.119h3.9a.19.19,0,0,1,.177.119.633.633,0,0,0,.585.394.632.632,0,0,0,.585-.394.191.191,0,0,1,.177-.119h1.432a.864.864,0,0,1,.851,1.015,5.712,5.712,0,0,1-5.621,4.7,5.713,5.713,0,0,1-5.621-4.7A.864.864,0,0,1,3857.941-214.717Z" transform="translate(-3847.165 233.852)"/><path class="a" d="M3860.185-233.671a.174.174,0,0,0-.171.205.977.977,0,0,0,.953.779.978.978,0,0,0,.954-.779.174.174,0,0,0-.172-.205Z" transform="translate(-3841.42 248.433)"/><path class="a" d="M3895-233.671a.174.174,0,0,0-.171.205.977.977,0,0,0,.953.779.978.978,0,0,0,.954-.779.174.174,0,0,0-.171-.205Z" transform="translate(-3884.272 248.433)"/><path class="a" d="M3893.483-184.19a.346.346,0,0,0,.342-.409,1.947,1.947,0,0,0-1.9-1.552,1.948,1.948,0,0,0-1.9,1.552.346.346,0,0,0,.342.409Z" transform="translate(-3880.252 211.877)"/><path class="a" d="M3864.115-184.19a.346.346,0,0,0,.342-.409,1.947,1.947,0,0,0-1.9-1.552,1.947,1.947,0,0,0-1.9,1.552.346.346,0,0,0,.342.409Z" transform="translate(-3844.109 211.877)"/><path class="a" d="M3838.22-215.22h4.958a4.826,4.826,0,0,0,4.825-4.825v-2.211a.537.537,0,0,0-1.049-.163l-.658,2.061a3.09,3.09,0,0,1-2.944,2.151h-4.924Z" transform="translate(-3822.473 240.066)"/><path class="a" d="M3936.83-242.664l-.836-3.289a1.417,1.417,0,0,0-.258-.537h0c-.553-.69-1.428-.235-1.531.8h0c-.152,1.519.551,2.948,1.614,3.281l.715.224C3936.73-242.127,3936.9-242.4,3936.83-242.664Z" transform="translate(-3933.456 258.548)"/><path class="a" d="M3909.536-243.993l.143-3.525a1.483,1.483,0,0,1,.145-.6h0c.407-.817,1.378-.534,1.7.495h0c.472,1.517.07,3.119-.922,3.678l-.668.376C3909.749-243.466,3909.524-243.705,3909.536-243.993Z" transform="translate(-3902.643 259.913)"/><path class="a" d="M3919.926-227.039l-1.471,1.732a1.045,1.045,0,0,1-1.594,0l-1.471-1.732a1.045,1.045,0,0,1,.8-1.722h2.942A1.046,1.046,0,0,1,3919.926-227.039Zm-2.73.328a.286.286,0,0,0-.286-.286.286.286,0,0,0-.286.286.286.286,0,0,0,.286.286A.286.286,0,0,0,3917.2-226.71Zm1.5,0a.286.286,0,0,0-.286-.286.286.286,0,0,0-.286.286.286.286,0,0,0,.286.286A.285.285,0,0,0,3918.692-226.71Z" transform="translate(-3912.392 244.656)"/><path class="a" d="M3918.011-197.57a.354.354,0,0,1,.352.4,3.02,3.02,0,0,1-2.993,2.621,3.02,3.02,0,0,1-2.993-2.621.354.354,0,0,1,.352-.4Z" transform="translate(-3909.944 220.661)"/><path class="a" d="M3914.41-207.341a2.436,2.436,0,0,1,2.436-2.436,2.436,2.436,0,0,1,2.436,2.436Z" transform="translate(-3911.33 230.052)"/><path class="a" d="M3934.067-209.787a.105.105,0,0,1,.1.125.593.593,0,0,1-.578.472.593.593,0,0,1-.578-.472.105.105,0,0,1,.1-.125Z" transform="translate(-3930.512 230.06)"/><path class="a" d="M3912.949-209.787a.105.105,0,0,1,.1.125.592.592,0,0,1-.578.472.592.592,0,0,1-.578-.472.105.105,0,0,1,.1-.125Z" transform="translate(-3904.522 230.06)"/><path class="a" d="M3912.328-181.537a.21.21,0,0,1-.207-.248,1.182,1.182,0,0,1,1.153-.941,1.181,1.181,0,0,1,1.152.941.21.21,0,0,1-.207.248Z" transform="translate(-3905.949 209.242)"/><path class="a" d="M3930.14-181.537a.21.21,0,0,1-.207-.248,1.181,1.181,0,0,1,1.152-.941,1.181,1.181,0,0,1,1.153.941.21.21,0,0,1-.207.248Z" transform="translate(-3927.87 209.242)"/><path class="a" d="M3931.63-197.836h-2.622a2.551,2.551,0,0,1-2.551-2.551v-1.169a.284.284,0,0,1,.554-.086l.348,1.089a1.634,1.634,0,0,0,1.557,1.137h2.6Z" transform="translate(-3926.457 223.947)"/><path class="b" d="M3867.444-229.241l.625-2.457a1.061,1.061,0,0,1,.193-.4h0c.413-.515,1.067-.175,1.144.595h0a2.269,2.269,0,0,1-1.205,2.451l-.534.167C3867.519-228.84,3867.393-229.041,3867.444-229.241Z" transform="translate(-3850.63 247.413)"/><path class="b" d="M3889.022-230.233l-.107-2.633a1.115,1.115,0,0,0-.108-.449h0c-.3-.61-1.03-.4-1.269.37h0a2.374,2.374,0,0,0,.689,2.747l.5.281C3888.863-229.841,3889.031-230.019,3889.022-230.233Z" transform="translate(-3874.836 248.433)"/><path class="b" d="M3874.751-218.855h2.2a.781.781,0,0,1,.6,1.286l-1.1,1.294a.781.781,0,0,1-1.19,0l-1.1-1.294A.781.781,0,0,1,3874.751-218.855Zm1.658,1.745a.213.213,0,0,0,.213-.213.214.214,0,0,0-.213-.214.214.214,0,0,0-.214.214A.214.214,0,0,0,3876.409-217.11Zm-1.118,0a.213.213,0,0,0,.214-.213.214.214,0,0,0-.214-.214.213.213,0,0,0-.213.214A.213.213,0,0,0,3875.291-217.11Z" transform="translate(-3860.449 237.035)"/></g></svg>
\ No newline at end of file
diff --git a/static/publik-famille-demo/img/icon_forms.svg b/static/publik-famille-demo/img/icon_forms.svg
new file mode 100644
index 00000000..73d4ff76
--- /dev/null
+++ b/static/publik-famille-demo/img/icon_forms.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20.247" height="18.155" viewBox="0 0 20.247 18.155"><defs><style>.a{fill:#ec671f;}</style></defs><path class="a" d="M3880,308.909a9.087,9.087,0,0,0-17.966-2.742,8.947,8.947,0,0,0,1.481,6.454l-3.659,2.421,9.821,1.467A9.032,9.032,0,0,0,3880,308.909Z" transform="translate(-3859.854 -298.467)"/></svg>
\ No newline at end of file
diff --git a/static/publik-famille-demo/style.scss b/static/publik-famille-demo/style.scss
new file mode 100644
index 00000000..91843aa7
--- /dev/null
+++ b/static/publik-famille-demo/style.scss
@@ -0,0 +1,9 @@
+@charset "UTF-8";
+@import '../includes/fonts/source-sans-pro';
+
+@import 'vars';
+@import '../includes/publik';
+@import 'cells';
+@import 'custom';
+@import 'custom_classes';
+@import 'header';
diff --git a/templates/variants/publik-famille-demo/combo/cells/carrousel/menu-cell.html b/templates/variants/publik-famille-demo/combo/cells/carrousel/menu-cell.html
new file mode 100644
index 00000000..412c69b8
--- /dev/null
+++ b/templates/variants/publik-famille-demo/combo/cells/carrousel/menu-cell.html
@@ -0,0 +1,8 @@
+{% extends "combo/cells/carrousel/menu-cell.html" %}
+
+{% block carrousel-item-content %}
+{% for cell in menuitem.page.get_cells %}
+{{cell.text|safe}}
+{% endfor %}
+{% endblock %}
+
diff --git a/templates/variants/publik-famille-demo/combo/link-list-cell.html b/templates/variants/publik-famille-demo/combo/link-list-cell.html
new file mode 100644
index 00000000..3ab29891
--- /dev/null
+++ b/templates/variants/publik-famille-demo/combo/link-list-cell.html
@@ -0,0 +1,55 @@
+{% load i18n %}
+{% block cell-content %}
+{% load assets %}
+{% spaceless %}
+  {% block cell-header %}
+  {% if title %}<h2>{{ title }}</h2>{% endif %}
+  {% include "combo/asset_picture_fragment.html" %}
+  {% endblock cell-header %}
+  <div class="links-list">
+    {% block cell-top-content %}{% endblock cell-top-content %}
+    <ul>
+      {% for link in links %}
+        <li class="{{ link.css_classes|default:""|join:" " }}{% if link.cell.extra_css_class %} {{ link.cell.extra_css_class }}{% endif %}"
+            {% if link.cell.link_page.picture %}
+              style="--pf-icon-picture: url({{ link.cell.link_page.picture.url }})"
+            {% endif %}
+          >
+          <a href="{{ link.url }}">
+            {{ link.title }}
+          </a>
+        </li>
+      {% endfor %}
+      {% if more_links %}
+        <li class="add-more-items">
+          <a role="button"
+             tabindex="0"
+             aria-expanded="false"
+             aria-controls="more-items-{{ cell.get_reference }}"
+             aria-label="{% trans 'More items' %}"
+             id="btn-more-items-{{ cell.get_reference }}"
+             class="add-more-items--button">
+            {% block cell-more-items-btn-label %}+{% endblock %}
+          </a>
+        </li>
+      {% endif %}
+    </ul>
+
+    {% if more_links %}
+      <ul style="display: none" class="more-items" id="more-items-{{ cell.get_reference }}" aria-labelledby="btn-more-items-{{ cell.get_reference }}">
+      {% for link in more_links %}
+        <li class="{{ link.css_classes|default:""|join:" " }}{% if link.cell.extra_css_class %} {{ link.cell.extra_css_class }}{% endif %}"
+            {% if link.cell.link_page.picture %}
+              style="--pf-icon-picture: url({{ link.cell.link_page.picture.url }})"
+            {% endif %}
+          >
+          <a href="{{ link.url }}">
+            {{ link.title }}
+          </a>
+        </li>
+      {% endfor %}
+    {% endif %}
+    </ul>
+  </div>
+  {% endspaceless %}
+{% endblock %}
diff --git a/templates/variants/publik-famille-demo/combo/menu.html b/templates/variants/publik-famille-demo/combo/menu.html
new file mode 100644
index 00000000..5f44150e
--- /dev/null
+++ b/templates/variants/publik-famille-demo/combo/menu.html
@@ -0,0 +1,23 @@
+{% load i18n %}
+{% load assets %}
+
+{% if menuitems %}
+  <ul class="pf-menu--items">
+    {% spaceless %}
+      {% for item in menuitems %}
+        <li data-menu-page-id="{{ item.page.id }}" class="menu-{{ item.page.slug }} {% if item.selected %}selected{% endif %}">
+          <a {% if item.selected %}title="{{ item.page.title }} - {% trans "active page" %}"{% endif %} href="{% page_absolute_url item.page %}">
+            <span class="pf-menu-item">
+              {% if item.page.picture %}
+                  <img class="pf-menu-item--image" src="{{item.page.picture.url}}"></img>
+              {% endif %}
+              <div class="pf-menu-item--title">
+                {{ item.page.title }}
+              </div>
+            </span>
+          </a>
+        </li>
+      {% endfor %}
+    {% endspaceless %}
+  </ul>
+{% endif %}
diff --git a/templates/variants/publik-famille-demo/combo/page_template.html b/templates/variants/publik-famille-demo/combo/page_template.html
new file mode 100644
index 00000000..60117e4f
--- /dev/null
+++ b/templates/variants/publik-famille-demo/combo/page_template.html
@@ -0,0 +1,18 @@
+{% extends "combo/page_template.html" %}
+
+{% block content-pre %}
+	<header class="pf-page-header">
+		<div class="pf-page-header--content">
+			{% placeholder "page-header" name="Entête de la page"%}
+			{% if page.title %}
+			<div class="pf-page-header--default">
+				{% if page.picture %}
+					<img src="{{site_base}}{{page.picture.url}}" alt="" class="pf-page-header--picture"></img>
+				{% endif %}
+				<h1 class="pf-page-header--title">{{ page.title }}</h1>
+				<div class="pf-page-header--description">{{ page.description }}</div>
+			</div>
+			{% endif %}
+		</div>
+	</header>
+{% endblock %}
diff --git a/templates/variants/publik-famille-demo/combo/page_template_homepage.html b/templates/variants/publik-famille-demo/combo/page_template_homepage.html
new file mode 100644
index 00000000..63d005e6
--- /dev/null
+++ b/templates/variants/publik-famille-demo/combo/page_template_homepage.html
@@ -0,0 +1,10 @@
+{% extends "combo/page_template_2cols.html" %}
+{% load combo i18n %}
+
+{% block content-pre %}
+{% endblock %}
+
+{% block header-bottom %}
+  <div class="pf-header-description">{{ page.description }}</div>
+{% endblock %}
+
diff --git a/templates/variants/publik-famille-demo/includes/nav.html b/templates/variants/publik-famille-demo/includes/nav.html
new file mode 100644
index 00000000..f5ecaae7
--- /dev/null
+++ b/templates/variants/publik-famille-demo/includes/nav.html
@@ -0,0 +1,5 @@
+{% extends "includes/nav.html" %}
+
+{% block menu %}
+  {% show_menu depth=1 ignore_visibility=True %}
+{% endblock %}
-- 
2.35.1

