0004-header-refactorisation.patch

Thomas Jund, 04 août 2022 18:14

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

Subject: [PATCH 4/6] header refactorisation

 static/publik-famille-demo/_header.scss       | 145 +++++++++---------
 static/publik-famille-demo/_vars.scss         |   8 +-
 .../combo/page_template_homepage.html         |   3 +-
 3 files changed, 81 insertions(+), 75 deletions(-)

     div#header-wrapper {
     	display: flex;
     	@media($max-mobile-viewport) {
     		height: 80px;
+    	}
+    }
     body.has-header-background #header{
     	background-size: contain;
     	background-position-x: 30%;
+    }
     $desktop-gray-header-height: 90px;
     $mobile-top-links-height: 2rem;
     body.has-header-background #header {
     	display: flex;
     	padding: 10px 0;
     	background-position-x: 30%;
     	background-size: contain;
     	@media($max-mobile-viewport) {
     		background-image: none;
+    	}
-...
     div#top {
     	display: flex;
     	flex-grow: 1;
     	align-items: start;
     	flex-wrap: wrap;
     	align-items: center;
     	@media ($min-desktop-viewport) {
     		padding-right: $nav-menu-side * 1.5;
+    	}
     	@media ($min-desktop-viewport) {
     		height: $desktop-gray-header-height;
+    	}
+    }
     h1#logo.has-logo {
     	padding: 10px 0;
     	flex-grow: 1;
     	padding: 0;
     	a {
     		height: 60px;
+    	}
     	@media($max-mobile-viewport) {
     		display: none;
+    	}
+    }
     #toplinks {
     	border-bottom-right-radius: $border-radius;
     	background: white;
     	margin-right: 8rem;
     	margin-top: 18px;
     	position: static;
     	display: flex;
     	align-items: center;
     	word-spacing: 1em;
     	@media($min-desktop-viewport) {
     		position: static;
     		margin-top: 8px;
     	@media ($max-mobile-viewport) {
     		order: -1;
     		min-height: 2em;
     		flex: 1 0 100%;
     		max-width: none;
     		margin: 0 -0.7rem;
     		padding: 0 0.7rem;
+    	}
     	.sep {
     		display: none;
     	@media($min-desktop-viewport) {
     		height: $nav-menu-side;
     		padding: 0.5em 1.5em;
     		border-radius: $nav-menu-side / 2;
+    	}
     	a {
     		margin: 0 0.5em;
     		color: $orange-dark;
     		&:first-child {
     			font-weight: bold;
+    		}
-...
+    }
     .gru-nav-wrapper {
     	width: 100%
     	@extend .page-width;
     	position: relative;
     	@media ($max-mobile-viewport) {
     		max-width: none;
+    	}
+    }
     #nav {
     	margin: 0;
     	position: absolute;
     	width: $nav-menu-side;
     	height: $desktop-gray-header-height;
     	top: 0;
     	right: 0.7rem;
     	display: flex;
     	align-items: center;
     	justify-content: center;
     	transition: top 400ms;
     	@media ($max-mobile-viewport) {
     		body:not(.scrolled) & {
     			top: $mobile-top-links-height;
+    		}
+    	}
+    }
     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%;
+    		}
     		position: relative;
     		display: block;
     		line-height: 0;
     		top: 0;
     		left: 0;
     		border-radius: 50%;
     		+ ul {
     			&::before {
-...
+    }
     body.page-template-homepage {
     	div#header-wrapper {
     	.site-header {
     		background: transparent;
+    	}
     	#header {
     		background: var(--page-picture);
     		background-repeat: no-repeat;
     		background-position-y: 50px;
     		background-size: 100%;
     		@media ($min-desktop-viewport) {
     			background: var(--page-picture);
     			background-repeat: no-repeat;
     			background-position-y: 50px;
     			background-size: 100%;
+    		}
     		@media($min-desktop-viewport) {
     			height: 550px;
     			margin-bottom: -180px;
+    		}
+    	}
     		@media($max-mobile-viewport) {
     			background: none;
     			flex-direction: column;
     	#top {
     		align-items: flex-end;
     		@media ($min-desktop-viewport) {
     			height: auto;
     			flex-wrap: nowrap;
+    		}
+    	}
     	h1#logo.has-logo {
     		display: block;
     		@media($max-mobile-viewport) {
     			text-align: center;
     			margin-top: 50px;
+    		}
     		a {
     		a::before {
     			width: 260px;
     			height: 150px;
     			margin-top: 10px;
     			@media($max-mobile-viewport) {
     				width: 200px;
     				height: 114px;
-...
     	#toplinks {
     		background: $gray-light;
     		@media($max-mobile-viewport) {
     		@media ($min-desktop-viewport) {
     			position: absolute;
     			right: $nav-menu-side * 1.5;
     			top: ($desktop-gray-header-height - $nav-menu-side) / 2;
+    		}
+    	}
-...
     		font-weight: bold;
     		text-align: center;
     		font-size: $fz-1;
     		flex: 1 1 auto;
     		@media($max-mobile-viewport) {
     			padding: 1rem;
-...
+    		}
     		@media($min-desktop-viewport) {
     			position: absolute;
     			top: 70px;
     			right: 8rem;
     			width: 50%;
     			flex: 1 1 50%;
     			padding-bottom: 10px;
+    		}
+    	}
+    }

     $border-radius: 1rem;
     $link-color: $primary-color;
     $header-full-width-background: false;
     $header-full-width-background: true;
     $header-background-color: $gray-light;
     $header-height: 500px;
     $header-logo-size: 105px 60px;
     $toplinks-style: none;
     $toplinks-padding: .75em 0.5em;
     $toplinks-background: $gray-light;
     $toplinks-border-radius: $border-radius;
     $toplinks-background: white;
     $nav-after-image: false;
     $nav-mobile-limit: 20000px;

     {% block content-pre %}
     {% endblock %}
     {% block header-bottom %}
     {% block header-content %}
       <div class="pf-header-description">{{ page.description }}</div>
       {{ block.super }}
     {% endblock %}
+    -

Projet

Général

Profil

Produits Entr'ouvert » Intégrations graphiques Publik

0004-header-refactorisation.patch