0001-publik-famille-demo-create-theme-61994.patch

Corentin Séchet, 29 juillet 2022 11:27

Voir les différences: en ligne côte à côte

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

     .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;
+    	}
+    }

     :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;
+    			}
+    		}
+    	}
+    }

     .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';
+    }

     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%;
+    		}
+    	}
+    }

     // 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;

+    {
       "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"}
+          }
+        }
+      }
+    }

static/publik-famille-demo/img/bubble.svg
	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>

static/publik-famille-demo/img/cloud.svg

<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>

static/publik-famille-demo/img/icon_baby.svg

<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>

static/publik-famille-demo/img/icon_backpack.svg

<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>

static/publik-famille-demo/img/icon_children.svg

<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>

static/publik-famille-demo/img/icon_family.svg

<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>

static/publik-famille-demo/img/icon_forms.svg

<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>

     @charset "UTF-8";
     @import '../includes/fonts/source-sans-pro';
     @import 'vars';
     @import '../includes/publik';
     @import 'cells';
     @import 'custom';
     @import 'custom_classes';
     @import 'header';

     {% extends "combo/cells/carrousel/menu-cell.html" %}
     {% block carrousel-item-content %}
     {% for cell in menuitem.page.get_cells %}
     {{cell.text|safe}}
     {% endfor %}
     {% endblock %}

     {% 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 %}

     {% 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 %}

     {% 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 %}

     {% 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 %}

templates/variants/publik-famille-demo/includes/nav.html
	1	{% extends "includes/nav.html" %}
	2
	3	{% block menu %}
	4	{% show_menu depth=1 ignore_visibility=True %}
	5	{% endblock %}
0		-

Projet

Général

Profil

Produits Entr'ouvert » Intégrations graphiques Publik

0001-publik-famille-demo-create-theme-61994.patch