Produits Entr'ouvert » Intégrations graphiques Publik

//

//	TYPO

//

%title {

	position: relative;

	margin-left: 1rem;

	&::before {

		content: "";

		position: absolute;

		bottom: 0;

		left: 0;

		width: 50px;

		height: 0.2em;

		background-color: currentColor;

	}

	@media ($max-mobile-viewport) {

		font-size: $fz-3;

	}

}

h1 {

	@extend %title;

	font-size: $fz-1;

	@media ($max-mobile-viewport) {

		font-size: $fz-2;

	}

}

h2 {

	@extend %title;

}

%button {

	text-transform: uppercase;

	font-weight: bold;

}

%cancel-button {

	background-color: $gray;

	border-color: $gray;

	&:hover {

		color: $gray-dark;

	}

}

//

//	SITE HEADER

//

$header-desktop-height: 100px;

$logo-width: 310px;

div#header {

	max-width: $header-width;

	#top {

		display: flex;

		align-items: center;

		@media ($min-desktop-viewport) {

			height: $header-desktop-height;

		}

		@media ($max-mobile-viewport) {

			flex-wrap: wrap;

			padding: calc(10px + 0.7rem) 10px;

			.site-nav {

				order: 1;

				flex: 1 1 100%;

			}

		}

	}

	// Logo

	#logo {

		flex: 1 1 $logo-width;

		@media ($max-mobile-viewport) {

			flex-basis: 100%;

		}

		padding: 0;

		font-size: 1em;

		&::before {

			content: none;

		}

		a {

			display: block;

			width: $logo-width;

			height: 40px;

			@media ($min-desktop-viewport) {

				margin-top: 10px;

			}

			@media ($max-mobile-viewport) {

				margin-bottom: 10px;

			}

		}

	}

}

// User links

#toplinks {

	$icon-size: 38px;

	position: static;

	z-index: 1;

	box-shadow: none;

	border: none;

	border-radius: 0;

	padding: 0.33em;

	padding: $fz-small 1rem;

	padding-left: calc(#{$icon-size} + (#{$fz-small} * 2));

	background: url(img/account.svg) left $fz-small center no-repeat $green;

	background-size: $icon-size;

	@media ($max-mobile-viewport) {

		margin-right: $nav-menu-side;

	}

	.sep {

		display: none;

	}

	a {

		color: $violet-dark;

		display: block;

		font-weight: bold;

		&:last-child {

			font-size: $fz-small;

			font-weight: normal;

		}

	}

}

//

//	NAV

//	inside header-content

//

.gru-nav-wrapper {

	@media ($max-mobile-viewport) {

		margin-top: calc(-1 * #{$nav-menu-side});

	}

}

div.gru-nav {

	text-transform: uppercase;

	> ul {

		margin: 0;

		> li {

			a {

				font-weight: normal;

			}

			&.selected > a,

			a:hover, a:focus {

				font-weight: bolder;

			}

		}

	}

	@media ($max-mobile-viewport) {

		$header-gutter: '(10px + 0.7em)';

		text-align: right;

		.gru-nav-button {

			display: inline-block;

			border: 5px solid transparent;

			.icon-bar {

				border-width: 3px;

			}

			+ ul {

				position: relative;

				text-align: left;

				border-top: 0;

				margin-left: calc(-1 * #{$header-gutter});

				margin-right: calc(-1 * #{$header-gutter});

			}

			&.toggled + ul {

				border-top: 10px solid white;

				overflow: visible;

				&::before {

					content: "";

					display: block;

					width: 20px;

					height: 20px;

					border: 10px solid transparent;

					border-bottom-color: $green;

					position: absolute;

					top: -20px;

					right: calc(#{$nav-menu-side / 2} - 10px + #{$header-gutter});

				}

			}

		}

	}

}

//

//	PAGE HEADER

//

%page-title {

	background-color: $violet-dark;

	background-image: var(--page-picture);

	background-position: center center;

	background-repeat: no-repeat;

	background-size: cover;

	padding : 4em 0;	

	color: white;

	> div, > h1 {

		max-width: $width;

		margin-left: auto;

		margin-right: auto;

	}

	* {

		color: inherit;

	}

}

.theme-page-header {

	max-width: $header-width;

	margin: 0 auto 2rem;

	.text-cell {

		@extend %page-title;

		display: flex;

		align-items: flex-end;

		min-height: calc(360em / 15);

		@media ($max-mobile-viewport) {

			min-height: calc(240em / 15);

		}

		> div {

			flex: 0 0 100%;

		}

	}

	div.carrousel-content {

		min-height: calc(360em / 15);

		@media ($max-mobile-viewport) {

			min-height: calc(240em / 15);

		}

		input + div div.carrousel-item {

			padding-bottom: $carrousel-navigation-bullet-size + 20;

			div.carrousel-item-content{

				flex: 0 1 $width;

				margin-left: auto;

				margin-right: auto;

				> a {

					max-width: 40rem;

					strong {

						@extend h1;

						margin-left: 0;

						color: white;

						display: block;

						line-height: normal;

					}

				}

			}

		}

		div.carrousel-nav {

			max-width: $width;

			left: 0;

			right: 0;

			margin-left: auto;

			margin-right: auto;

			text-align: left;

			label {

				background-color: black;

			}

		}

	}

}

//

//	MAIN

//

div#main-content-wrapper {

	position: static;

}

// home page template

.page-template-homepage {

	.gru-content { 

		flex-wrap: wrap;

	}

	#theme-top-section {

		flex: 0 0 100%;

		margin-top: 1rem;

		margin-bottom: 1rem;

		@media ($max-mobile-viewport) {

			padding-left: 0.7rem;

			padding-right: 0.7rem;

		}

	}

	// 3 cols layout

	@media ($min-desktop-viewport) {

		#columns {

			display: flex;

			.column {

				flex: 1 1 0;

				.cell {

					margin-left: #{$columns-gutter / 2};

					margin-right: #{$columns-gutter / 2};

				}

			}

		}

	}

}

//

//	CELLS

//

.gru-content div.cell {

	margin-bottom: $columns-gutter;

}

// cells custom style

.shadowed-cell {

	overflow: hidden;

	padding-top: 2rem;

	padding-bottom: 2rem;

	> div {

		box-shadow: 0 0 1.9em -0.8em #000;

		padding-top: 1rem;

		padding-bottom: 0.5rem;

	}

}

.shadowed-cell-top {

	@extend .shadowed-cell;

	padding-bottom: 0;

	> div {

		padding-bottom: 0;

	}

}

.shadowed-cell-bottom {

	@extend .shadowed-cell;

	padding-top: 0;

	> div {

		padding-top: 0;

	}

}

.list-of-forms-cell {

	$image-size: 2.5rem;

	.gru-content &.cell {

		color: white;

		background-color: $red-dark;

		h2:first-child {

			color: inherit;

			font-size: $fz-5;

			text-align: left;

			min-height: 5em;

			display: flex !important;

			align-items: center;

			padding-right: 3rem;

			padding-bottom: 0;

			padding-left: 1rem;

			margin-left: 0;

			background-color: $red;

			&::before {

				content: none;

			}

		}

		&.foldable.folded {

			h2:first-child {

				background-color: $violet-dark;

			}

		}

		// Picture position

		&.has-asset-picture {

			h2:first-child {

				padding-left: $image-size + 2;

			}

			> div {

				display: flex;

				flex-wrap: wrap;

				align-items: center;

				> * {

					flex: 0 0 100%;

				}

				> h2:first-child {

					flex: 1 0 50%;

					margin-left: -1 * ($image-size + 1);

				}

				> picture {

					display: block;

					order: -1;

					flex: 0 0 $image-size;

					align-self: center;

					margin-left: 1rem;

					position: relative;

					z-index: 1;

					img {

						padding: 0;

						height: $image-size;

						width: $image-size;

						object-fit: contain;

					}

				}

			}

		}

		ul > li {

			border-bottom: none;

			color: inherit;

			> *, a::after {

				color: inherit !important;

			}

			> a:hover {

				background-color: $red-xdark;

			}

		}

	}

}

#theme-top-section {

	.tracking-code-input-cell {

		@extend .shadowed-cell-bottom;

		.wcs-tracking-code-input {

			@media ($min-desktop-viewport) {

				&, & form {

					display: flex;

					align-items: flex-start;

				}

				h2 {

					flex: 1 0 auto;

					& + div {

						padding-top: 0;

						padding-left: 1.5rem;

					}

				}

				form {

					p {

						flex: 1 1 50%;

						margin-right: 0.5rem;

					}

					input {

						margin-right: 1rem;

					}

					button {

						margin-right: 0;

					}

				}

			}

		}

	}

}

.search-cell {

	.combo-search--button::before {

		content: "\f002"; // search icon

		font-family: FontAwesome;

		font-size: $fz-5;

	}

	.combo-search--button-label {

		display: none;

	}

}

.wcs-forms-of-category-cell {

	@extend .list-of-forms-cell;

}

//

//	Forms

//

label {

	font-style: italic;

	font-weight: 300;

}

//

//	WCS

//

.wcs-steps {

	text-transform: uppercase;

	font-weight: bold;

	font-size: $fz-5;

	@media ($min-desktop-viewport) {

		font-size: $fz-4;

	}

}

div#gauche {

	padding: 0.5rem;

	div#tracking-code {

		@extend .shadowed-cell;

		h3 {

			margin-left: 0;

		}

		a {

			font-weight: bold;

			color: $red;

			@media ($min-desktop-viewport) {

				padding-left: 0;

			}

			@media ($max-mobile-viewport) {

				padding-left: 1em;

			}

		}

	}

}

.theme-form-title {

	@extend %page-title;

	padding-left: calc(0.7rem + 0.5rem);

	@media ($min-desktop-viewport) {

		padding-left: 0.5rem;

	}

}

div#rub_service {

	h3 {

		@extend h2;

		margin-left: 0;

	}

	h4 {

		font-size: $fz-3;

	}

}

//

//	FOOTER

//

#theme-gray-footer-wrapper {

	background-color: $gray-light;

}

#theme-gray-footer {

	max-width: $width;

	margin-left: auto;

	margin-right: auto;

}

#footer-wrapper {

	margin-top: 0;

	padding: 0;

}

#theme-gray-footer,

#footer {

	padding: 3rem 0.7rem 2rem;

	@media ($min-desktop-viewport) {

		padding-top: 4.5rem;

		padding-bottom: 3.5rem;

	}

	.cell {

		margin-bottom: 1rem;

	}

}

// colors

$violet-dark: #22104b;

$red: #ec234f;

$red-dark: #ac1a3a;

$red-xdark: #84142d;

$green: #bcf157;

$gray-light: #e3e3e3;

$gray: #ccc;

$gray-dark: #999;

// font-size

$fz-1: 55em / 15;

$fz-2: 35em / 15;

$fz-3: 30em / 15;

$fz-4: 25em / 15;

$fz-5: 19em / 15;

$fz-small: 13em / 15;

$header-width: 1440em / 15;

// Core vars

$primary-color: $violet-dark;

$font-family: Roboto, sans-serif !default;

$font-color: $violet-dark;

$font-size: 15px;

$link-color: $red;

$width: 1220rem / 15;

$mobile-limit: 64em;

$very-small-limit: 35em;

$columns-gutter: 2rem;

$sidebar-width: 20rem;

$nav-background: transparent;

$nav-active-color: transparent;

$nav-color: $font-color;

$nav-menu-color: $nav-color;

$nav-submenu-background: $green;

$nav-mobile-menu-background: $green;

$nav-after-image: false;

$nav-menu-side: 4rem;

$title-background: transparent;

$title-color: $violet-dark;

$title-font-size: $fz-2;

$title-weight: 800;

$title-transform: uppercase;

$title-padding: 0 0 0.33em 0;

$cell-background: transparent;

$cell-border: none;

$cell-title-cover-border: false;

$carrousel-arrows: none;

$carrousel-text-position: middle left;

$carrousel-item-mask-color: false;

$button-background: $red;

$button-border: 1px solid $red;

$button-color: white;

$button-hover-background: white;

$button-hover-color: $red;

$buttons-order: cancel, previous, submit;

$widget-border: 1px solid $gray;

$widget-focus-border: 1px solid $font-color;

$widget-unique-checkbox-position: left;

$form-sidebar-position: right;

$form-sidebar-width: $sidebar-width;

$form-sidebar-gutter: $columns-gutter;

$wcs-steps-spacing: 0.7em;

$wcs-step-color: $gray;

$wcs-step-border-bottom: none;

$wcs-step-marker-background: $wcs-step-color;

$wcs-step-marker-color: white;

$wcs-step-current-marker-background: $red;

$wcs-step-current-marker-color: white;

$footer-background: $violet-dark;

$footer-link-color: $green;

{

  "label": "Meudon 2021",

  "variables": {

    "pwa_display": "standalone",

    "theme_color": "#22104b",

    "email_header_asset": "emails:logo"

  },

  "settings": {

    "combo": {

      "COMBO_ASSET_SLOTS.update": {

        "header:logo": { "label": "Têtière : logo" },

        "emails:logo": {"label": "Emails : logo"}

      }

    }

  }

}

<?xml version="1.0" encoding="utf-8"?>

<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">

<style type="text/css">

	.st0{fill:#22104B;}

</style>

<path class="st0" d="M256,0C114.5,0,0,114.5,0,256c0,140.2,113.5,256,256,256c141.9,0,256-115.1,256-256C512,114.5,397.5,0,256,0z

	 M87.4,406.5c89.8-100.7,247.4-100.7,337.2,0C334.5,507.3,177.5,507.3,87.4,406.5z M196,234v-30c0-33.1,26.9-60,60-60s60,26.9,60,60

	v30c0,33.1-26.9,60-60,60S196,267.1,196,234z M309.2,306.6c22.3-16.4,36.8-42.8,36.8-72.5v-30c0-49.6-40.4-90-90-90s-90,40.4-90,90

	v30c0,29.7,14.5,56.1,36.8,72.5c-49.6,10.5-96.7,35.8-134.1,76C43.6,345.4,30,301.6,30,256C30,131.4,131.4,30,256,30

	s226,101.4,226,226c0,45.6-13.6,89.4-38.7,126.5C406,342.4,358.9,317.1,309.2,306.6z"/>

</svg>

@charset "UTF-8";

@import '../includes/fonts/roboto';

@import 'vars';

@import '../includes/publik';

@import 'custom';

{% extends "combo/page_template.html" %}

{% load combo i18n %}

{% block content-top %}

  <div id="theme-top-section">

    {% placeholder "top-section" name="Haut de page" %}

  </div>

{% endblock %}

{% block columns %}

  <div class="column">

  {% trans "Left column" as name %}

  {% placeholder "content" name=name %}

  </div>

  <div class="column">

  {% placeholder "center" name="Colonne du milieu" %}

  </div>

  <div class="column">

  {% trans "Right column" as name %}

  {% placeholder "right" name=name %}

  </div>

{% endblock %}

{% extends "theme.html" %}

{% load combo %}

{# Move nav block into header-content block #}

{% block header-content %}

  {% block nav %}{% endblock %}

  {{ block.super }}

{% endblock %}

{% block after-header %}{% endblock %}

{# add Page title #}

{% block before-main-content %}

<div class="theme-page-header--wrapper">

  <header class="theme-page-header">

    {% placeholder "page-header" name="Entête de la page" %}

  </header>

</div>

{% endblock %}

{% block footer-pre %}

<div id="theme-gray-footer-wrapper">

  <div id="theme-gray-footer" class="clearfix">

    {% placeholder "gray-footer" name="Pied de page gris" %}

  </div>

</div>

{% endblock %}

{% extends "wcs/base.html" %}

{% load static %}

{% block page-header %}

  {% if title %}

  <div class="theme-form-title">

    <h1>{{ title }}</h1>

  </div>

  {% endif %}

{% endblock %}

{# remove default title #}

{% block content %}

  {% with title=false %}

      {{ block.super }}

  {% endwith %}

{% endblock %}