Projet

Général

Profil

0001-themes-add-la-baule-55534.patch

Thomas Jund, 19 juillet 2021 09:58

Télécharger (8,74 ko)

Voir les différences:

Subject: [PATCH] themes: add la-baule (#55534)

 static/la-baule/_custom.scss                  | 305 ++++++++++++++++++
 static/la-baule/_vars.scss                    |  59 ++++
 static/la-baule/config.json                   |  16 +
 static/la-baule/style.scss                    |   6 +
 .../la-baule/combo/page_template.html         |  17 +
 templates/variants/la-baule/wcs/base.html     |   5 +
 6 files changed, 408 insertions(+)
 create mode 100644 static/la-baule/_custom.scss
 create mode 100644 static/la-baule/_vars.scss
 create mode 100644 static/la-baule/config.json
 create mode 100644 static/la-baule/style.scss
 create mode 100644 templates/variants/la-baule/combo/page_template.html
 create mode 100644 templates/variants/la-baule/wcs/base.html
static/la-baule/_custom.scss
1

  
2

  
3
//
4
//	Components
5
//
6

  
7
%title {
8
	line-height: 1;
9
}
10

  
11
%button {
12
	font-weight: bold;
13
}
14

  
15
h1 {
16
	font-size: $fz-h2;
17
	font-weight: 900;
18
	line-height: 1.1;
19
	margin-top: 0;
20
	margin-bottom: 0.5em;
21
	@media ($min-desktop-viewport) {
22
		font-size: $fz-h1;
23
	}
24
}
25

  
26
//
27
//	HEADER
28
//
29
h1#logo {
30
	@media ($max-mobile-viewport) {
31
		padding-top: 0.7em;
32
		padding-bottom: 0.7em;
33
		padding-left: 0;
34
	}
35
	@media ($min-desktop-viewport) {
36
		padding-top: 30px;
37
		padding-bottom: 30px;
38
	}
39
	&.has-logo a {
40
		height: 100px;
41
		display: block;
42
		@media ($min-desktop-viewport) {
43
			height: 150px;
44
		}
45
	}
46
}
47

  
48

  
49
// 
50
//	NAV
51
//	user-infos block is child of #nav-wrapper
52
//
53
$skew-value: 15deg;
54

  
55
#page {
56
	overflow-x: hidden;
57
}
58

  
59
#nav-wrapper {
60
	position: relative;
61
	display: flex;
62
	margin-top: 0;
63
}
64
div#nav {
65
	margin-left: 0;
66
	flex-grow: 1;
67
	@media ($min-desktop-viewport) {
68
		margin-right: $columns-gutter;
69
	}
70
	@media (min-width: $width) {
71
		margin-left: calc(50vw - #{$width / 2});
72
	}
73
	> ul {
74
		margin: 0;
75
		border-top: none;
76

  
77
		@media (max-width: $mobile-limit) {
78
			position: absolute;
79
			z-index: 1;
80
			width: 100vw;
81
		}
82
	}
83
	// skew in desktop
84
	@media ($min-desktop-viewport) {
85
		> ul > li > a {
86
			transform: skewX(#{ -1 * $skew-value});
87
			border-right: 1px solid $nav-active-color;
88
			transform-origin: top left;
89
			> span {
90
				transform: skewX($skew-value);
91
				display: block;
92
			}
93
		}
94
	}
95
}
96
#toplinks {
97
	// reset
98
	background: none;
99
	box-shadow: none;
100
	border: none;
101
	border-radius: 0;
102
	position: static;
103
	padding: 0;
104
	
105
	background-color: $orange;
106

  
107
	@media ($max-mobile-viewport) {
108
		font-size: $fz-small;
109
	}
110

  
111
	> span::before {
112
		content: "\f007";
113
		font-family: fontawesome, sans-serif;
114
		align-self: center;
115
		color: $blue;
116
		padding-left: .66em;
117
	}
118

  
119
	&, & > span {
120
		display: flex;
121
		align-items: center;
122
	}
123
	& > span {
124
		flex-wrap: wrap;
125
	}
126
	a {
127
		align-items: center;
128
		padding: .33em .66em;
129
		color: white;
130
		font-weight: bold;
131

  
132
		&:hover {
133
			color: $blue;
134
		}
135

  
136
		&.logout {
137
			font-weight: normal;
138
		}
139
	}
140
	.sep {
141
		color: $blue;
142
	}
143

  
144
	// skew
145
	& {
146
		transform: skewX(#{ -1 * $skew-value});
147
		transform-origin: bottom right;
148
		> span {
149
			transform: skewX($skew-value);
150
		}	
151
	}
152
}
153

  
154
//
155
//	MAIN
156
//
157

  
158
.page-header, .gru-content {
159
	padding-top: $columns-gutter;
160
}
161

  
162
// Page header
163
.page-header {
164
	h1, h2, h3 {
165
		color: $blue;
166
	}
167
	div.text-cell {
168
		font-size: $fz-h4;
169
		color: $orange-dark;
170
		font-weight: 500;
171

  
172
		p {
173
			line-height: 1.3;
174
		}
175
	}
176

  
177
	div.searchcell form {
178
		input {
179
			margin-right: 0;
180
		}
181
		button {
182
			@extend input;
183
			flex: 0 0 auto;
184
			color: white;
185
			background-color: $orange;
186
			font-weight: bold;
187
			&:focus {
188
				background-color: $blue !important;
189
				color: white !important;
190
			}
191
		}
192
		@media ($min-desktop-viewport) {
193
			&::before {
194
				content: "Rechercher";
195
				font-size: $fz-h4;
196
				color: $blue;
197
				font-weight: bold;
198
				padding-right: .33em;
199
			}
200
		}
201
	}
202
}
203

  
204
//
205
//	CELLS
206
//
207
.right-icon {
208
	// $image-width: #{$title-font-size + 1.4};
209
	$image-width: 3.15rem;
210
	@debug($image-width);
211
	.gru-content &.cell {
212
		// Picture position
213
		&.has-asset-picture {
214
			> div {
215
				display: flex;
216
				flex-wrap: wrap;
217
				align-items: baseline;
218

  
219
				> * {
220
					flex: 0 0 100%;
221
				}
222

  
223
				> h2:first-child {
224
					flex: 1 0 50%;
225
					margin-left: calc(-1 * #{$image-width});
226
					padding-left: #{$image-width + 1};
227
					line-height: 1;
228
				}
229
				> picture {
230
					display: block;
231
					order: -1;
232
					flex: 0 0 $image-width;
233
					height: $image-width;
234
					align-self: center;
235
					position: relative;
236
					z-index: 1;
237

  
238
					background-color: $cyan;
239
					border: 2px solid white;
240
					border-radius: 50%;
241
					padding: .66em;
242

  
243

  
244
					img {
245
						padding: 0;
246
						object-fit: contain;
247
						width: 100%;
248
						height: 100%;
249
					}
250
				}
251
			}
252
		}
253
		&.foldable.folded {
254
			> div {
255
				h2:first-child {
256
					background-color: $gray;
257
					color: $blue;
258
				}
259

  
260
			}
261
		}
262
	}
263
}
264

  
265
#columns {
266
	.wcs-forms-of-category-cell,
267
	.link-list-cell {
268
		@extend .right-icon;
269
	}
270
}
271

  
272
#main-content div.text-cell > div {
273
	> * {
274
		margin-right: 1rem;
275
		margin-left: 1rem;
276
	}
277
	h1, h2:not(:first-child), h3 {
278
		color: $blue;
279
	}
280
}
281

  
282
//
283
//	WCS
284
//
285

  
286

  
287
.wcs-page {
288
	.page-header h1 {
289
		font-size: $fz-h2;
290
		@media ($max-mobile-viewport) {
291
			padding: 0 0.7rem;
292
		}
293
	}
294
	#content {
295
		padding-top: 0;
296
	}
297
	#rub_service {
298
		h2 {
299
			display: none;
300
		}
301
		:first-child {
302
			margin-top: 0;
303
		}
304
	}
305
}
static/la-baule/_vars.scss
1
// Colors
2
$blue: #15357b;
3
$blue-bright: #00308c;
4
$cyan: #70b8b9;
5
$orange: #ec6539;
6
$orange-light: #fab441;
7
$orange-dark: #6a605e;
8
$gray: #e1e1e6;
9

  
10
// fonts size
11
$fz-h1: 72px;
12
$fz-h2: 42px;
13
$fz-h3: 36px;
14
$fz-h4: 1.75em;
15
$fz-small: 0.85em;
16

  
17
$header-width: 1680px;
18

  
19
// Core vars
20
$font-family: ubuntu, sans-serif;
21
$font-color: #222;
22

  
23
$primary-color: $blue;
24
$link-color: $orange;
25

  
26
$width: 1340px;
27
$mobile-limit: 1280px;
28
$columns-gutter: 40px;
29

  
30
$nav-background: $blue !important;
31
$nav-mobile-menu-background: $blue;
32
$nav-full-width-background: true;
33
$nav-color: white;
34
$nav-mobile-menu-item-color: white;
35
$nav-active-color: $cyan;
36
$nav-button-background: $blue;
37

  
38
$title-background: $blue;
39
$title-color: white;
40
$title-weight: bold;
41
$title-font-size: $fz-h4;
42

  
43
$cell-border: none;
44
$cell-title-cover-border: false;
45
$cell-entry-color: $font-color;
46
$cell-entry-hover-background:$orange-light;
47

  
48
$widget-background: $gray;
49
$widget-border: 1px solid transparent;
50

  
51
$button-background: $cyan;
52
$button-color: white;
53

  
54

  
55
$widget-unique-checkbox-position: left;
56

  
57
$footer-background: $blue-bright;
58
$footer-color: white;
59
$footer-link-color: white;
static/la-baule/config.json
1
{
2
  "label": "La Baule",
3
  "variables": {
4
    "pwa_display": "standalone",
5
    "theme_color": "#15357b",
6
    "email_header_asset": "emails:logo"
7
  },
8
  "settings": {
9
    "combo": {
10
      "COMBO_ASSET_SLOTS.update": {
11
        "header:logo": { "label": "Têtière : logo" },
12
        "emails:logo": {"label": "Emails : logo"}
13
      }
14
    }
15
  }
16
}
static/la-baule/style.scss
1
@charset "UTF-8";
2
@import '../includes/fonts/ubuntu';
3

  
4
@import 'vars';
5
@import '../includes/publik';
6
@import 'custom';
templates/variants/la-baule/combo/page_template.html
1
{% extends "combo/page_template.html" %}
2

  
3
{# move user infos block #}
4
{% block top-links %}
5
{% endblock %}
6
{% block nav-post %}
7
  {% include 'includes/user-info.html' %}
8
{% endblock %}
9

  
10

  
11
{# add page header placeholder #}
12

  
13
{% block content-pre %}
14
	<div class="page-header">
15
      {% placeholder "page-header" name="Entête de la page" %}
16
	</div>
17
{% endblock %}
templates/variants/la-baule/wcs/base.html
1
{% extends "wcs/base.html" %}
2

  
3
{% block placeholder-page-header %}
4
    {% if title %}<h1>{{ title }}</h1>{% endif %}
5
{% endblock %} 
0
-