Projet

Général

Profil

0001-theme-add-guerande-55457.patch

Paul Marillonnet, 31 août 2021 16:09

Télécharger (18,3 ko)

Voir les différences:

Subject: [PATCH] theme: add guerande (#55457)

 static/guerande/_custom.scss                  | 332 ++++++++++++++++++
 static/guerande/_vars.scss                    |  38 ++
 static/guerande/config.json                   |  21 ++
 static/guerande/img/favicon-16x16.png         | Bin 0 -> 1054 bytes
 static/guerande/img/moins.svg                 |  55 +++
 static/guerande/img/plus.svg                  |  54 +++
 static/guerande/style.scss                    |   5 +
 .../guerande/combo/page_template.html         |   7 +
 .../guerande/combo/page_template_3cols.html   |  13 +
 9 files changed, 525 insertions(+)
 create mode 100644 static/guerande/_custom.scss
 create mode 100644 static/guerande/_vars.scss
 create mode 100644 static/guerande/config.json
 create mode 100644 static/guerande/img/favicon-16x16.png
 create mode 100644 static/guerande/img/moins.svg
 create mode 100644 static/guerande/img/plus.svg
 create mode 100644 static/guerande/style.scss
 create mode 100644 templates/variants/guerande/combo/page_template.html
 create mode 100644 templates/variants/guerande/combo/page_template_3cols.html
static/guerande/_custom.scss
1
@import '../includes/fonts/montserrat';
2

  
3
@mixin form-icon($content) {
4
	content: $content;
5
	font-family: FontAwesome;
6
}
7

  
8
html {
9
	background: white;
10
}
11

  
12
#header {
13
	padding-top: 10px;
14
	padding-left: 0;
15
	position: relative;
16
	h1 {
17
		position: absolute;
18
		top: 20px;
19
		left: 20px;
20
		@media screen and (max-width: $nav-mobile-limit) {
21
			padding-left: 0px;
22
			top: 50px;
23
		}
24
	}
25
}
26

  
27
div#header h1#logo {
28
	@media screen and (max-width: $nav-mobile-limit) {
29
		margin-left: calc(55% - 160px);
30
	}
31
	a {
32
		background-position: top left;
33
		padding-left: 400px;
34
		@media screen and (max-width: $nav-mobile-limit) {
35
			background-size: 80%;
36
			margin-top: 30px;
37
			padding-left: 300px;
38
		}
39
		display: block;
40
		min-height: 130px;
41
		line-height: 120px;
42
	}
43
}
44

  
45
nav.site-nav {
46
	@media screen and (max-width: $nav-mobile-limit) {
47
		margin-top: 75px;
48
	}
49
	margin-bottom: 50px;
50
}
51

  
52
div#nav {
53
	background-color: white;
54
	> ul {
55
		margin-top: 120px;
56
		@media (min-width: $nav-mobile-limit + 1) {
57
			margin-left: 440px;
58
			margin-top: 65px;
59
		}
60
		a {
61
			font-size: 1.3em;
62
			color:black;
63
			&:hover {
64
				color: $primary-color;
65
				background-color: white;
66
			}
67
			&::before {
68
				@include form-icon("\f105");
69
				color: $primary-color;
70
				padding-right: 8px;
71
				font-size: 1.2rem;
72
			}
73
		}
74
		li a {
75
			padding: 0.5em 20px;
76
		}
77
		li:last-child {
78
			a {
79
				border: 1px solid $primary-color;
80
				color: white;
81
				background-color: $primary-color;
82
				&::before {
83
				content: none;}
84
				&:hover {
85
					color: black;
86
					background-color: white;
87
				}
88
			}
89
		}
90
	}
91
	@media screen and (max-width: $nav-mobile-limit) {
92
		margin-left: 0;
93
	}
94
}
95

  
96
div#toplinks {
97
	a { color: black; }
98
	@media (min-width: $mobile-limit) {
99
		right: 9em;
100
	}
101
}
102

  
103
div#services > ul > li,
104
div.a2-block,
105
div.block {
106
	box-shadow: 0 0 36px rgba(0,0,0,0.2);
107
}
108

  
109
.three-cols-column {
110
	flex: 1 1 0;
111
}
112

  
113
#center-content div.empty-cell {
114
	display: none;
115
}
116

  
117
.page-header {
118
	margin-left: 7%;
119
	margin-right: 7%;
120
	text-align: center;
121
	h1, h2 {
122
		font-weight: 300;
123
	}
124
}
125

  
126
#content div.cell {
127
	@media ($max-mobile-viewport) {
128
		max-width: 600px;
129
		margin-left: auto !important;
130
		margin-right: auto !important;
131
	}
132
}
133

  
134
#content div.wcsformsofcategorycell,
135
#content div.link-list-cell {
136
	padding-bottom: 50px;
137
	padding-top: 50px;
138
	h2 {
139
		background: white;
140
		text-align: left;
141
		color: black;
142
		font-weight: normal;
143
	}
144
	&.foldable h2::after {
145
		width: 25px;
146
		height: 25px;
147
	}
148
	li a {
149
		padding-left: 40px;
150
	}
151
	picture {
152
		height: 220px;
153
		overflow: hidden;
154
		margin: 0;
155
	}
156
	img {
157
		padding: 0;
158
		width: 100%;
159
		height: 100%;
160
		object-fit: cover;
161
	}
162
}
163

  
164
div#footer-wrapper {
165
	padding: 0;
166
}
167

  
168
div#footer {
169
	@media screen and (max-width: $nav-mobile-limit) {
170
		div[class^="grid-"],
171
		div[class*=" grid-"] {
172
			// discard grid properties in mobile mode
173
			width: 100%;
174
			padding-right: 0;
175
		}
176
	}
177
	.text-cell {
178
		padding-top: 66px;
179
		padding-bottom: 36px;
180
	}
181
	.contact {
182
		div {
183
			display: flex;
184
			justify-content: space-around;
185
		}
186
	}
187
	.site-infos__main {
188
		display: flex;
189
		padding-left: 50px;
190
		@media (min-width: $nav-mobile-limit + 1) {
191
			padding-left: 20%;
192
		}
193
		.site-infos__address {
194
			width: 100%;
195
		}
196
		.site-infos__image {
197
			background: url(/assets/footer:logo) top left no-repeat;
198
			background-size: contain;
199
			display: block;
200
			min-width: 165px;
201
			min-height: 124px;
202
		}
203
	}
204
	.menu-cross {
205
		@media (min-width: $nav-mobile-limit + 1) {
206
			background: $primary-color;
207
			padding-bottom: 120px;
208
			div {
209
				margin: 0 20% auto 15%;
210
			}
211
			* a {
212
				color: black;
213
			}
214
		}
215
		nav.menu-cross__nav {
216
			padding-left: 20px;
217
			ul {
218
				margin: 0;
219
				padding: 0;
220
				li {
221
					a {
222
						font-size: 0.7rem;
223
						text-transform: uppercase;
224
					}
225
				}
226
			}
227
		}
228
		.menu-cross__item::before, .menu-cross__link::before {
229
			@include form-icon("\f105");
230
			@media (min-width: $nav-mobile-limit + 1) {
231
				color: black;
232
			}
233
			padding-right: 5px;
234
			font-size: 0.8rem;
235
			font-weight: 800;
236
		}
237
	}
238
	* {
239
		box-sizing: content-box;
240
	}
241
	img {
242
		width: 165px;
243
		height: 124px;
244
		@media (min-width: $nav-mobile-limit + 1) {
245
			margin: 0 20px 60px 20px;
246
		}
247
	}
248
	border-color: #fff;
249
	width: 100%;
250
	max-width: unset;
251
	li {
252
		list-style: none;
253
	}
254
	a {
255
		color: #fff;
256
	}
257
	.ghost {
258
		display: none;
259
	}
260
	.btn:focus, .btn:hover {
261
		background-color: #0f183b;
262
		border-color: transparent !important;
263
		text-decoration: none;
264
	}
265
	address.site-infos__listitems {
266
		font-size: 0.75rem;
267
		font-weight: 400;
268
		font-style: normal;
269
		@media screen and (max-width: $nav-mobile-limit) {
270
			text-align: end;
271
		}
272
	}
273
	a.contact-social__link, a.contact-cityhall__link {
274
		display: flex;
275
		font-size: 1rem;
276
		font-weight: 700;
277
		text-transform: uppercase;
278
		padding: 25px 25px 25px 25px;
279
		@media (min-width: $nav-mobile-limit + 1) {
280
			margin-top: 80px;}
281
		&:hover {
282
			color: $primary-color;
283
			background-color: black;
284
		}
285
	}
286
	* a.menu-cross__link {
287
		display: block;
288
		font-size: 1rem;
289
		font-weight: 700;
290
		border: solid 1px;
291
		border-radius: 0;
292
		padding: 10px 0px 10px 10px;
293
		&:hover {
294
			color: white;
295
			background-color: black;
296
		}
297
	}
298
	.social-networks {
299
		display: flex;
300
		justify-content: start;
301
		margin-left: 120px;
302
		@media screen and (max-width: $nav-mobile-limit) {
303
			margin-left: 30px;}
304
	}
305
	.social-networks li a::after {
306
		padding-left: 6px;
307
	}
308
	.social-networks {
309
		li:nth-child(1) a::after {
310
			@include form-icon("\f09a");
311
		}
312
		li:nth-child(2) a::after {
313
			@include form-icon("\f099");
314
		}
315
		li:nth-child(3) a::after {
316
			@include form-icon("\f16a");
317
		}
318
		li:nth-child(4) a::after {
319
			@include form-icon("\f16d");
320
		}
321
	}
322
	.social-networks__item a {
323
		height: 27px;
324
		width: 24px;
325
		border: 1px solid #fff;
326
		border-radius: 50%;
327
		display: grid;
328
		text-decoration: none;
329
		padding-top: 4px;
330
		padding-right: 7px;
331
	}
332
}
static/guerande/_vars.scss
1
$primary-color: #A99A6f;
2

  
3
$width: 1260px;
4
$font-color: black;
5
$font-family: Montserrat, sans-serif;
6
$nav-background: $primary-color;
7
$nav-submenu-background: $primary-color;
8
$nav-submenu-color: white;
9
$nav-color: white;
10
$nav-active-color: darken($primary-color, 5%);
11
$nav-item-selected-color: white;
12
$nav-item-hover-color: white;
13
$mobile-limit: 1024px;
14
$border-radius: 0;
15
$button-background: lighten($primary-color, 10%);
16
$title-background: $primary-color;
17
$title-weight: bold;
18
$title-color: white;
19
$title-font-size: 1.2em;
20
$footer-background: black;
21
$footer-color: white;
22
$cell-title-cover-border: false;
23
$cell-entry-color: darken($primary-color, 20%);
24
$cell-entry-hover-color: black;
25
$cell-entry-hover-background: lighten($primary-color, 10%);
26
$cell-image-position: top;
27
$cell-open-foldable-icon: url(img/plus.svg);
28
$cell-close-foldable-icon: url(img/moins.svg);
29
$cell-border-radius: 4px;
30
$cell-border: 1px solid #d3d3d3;
31
$link-color: darken($primary-color, 20%);
32

  
33
$wcs-steps-spacing: 1rem;
34
$wcs-step-border-bottom: none;
35
$wcs-step-color: #000;
36
$wcs-step-background-color: #fff;
37
$wcs-step-current-marker-background: $primary-color;
38
$wcs-step-current-marker-color: #fff;
static/guerande/config.json
1
{
2
  "label": "Guérande",
3
  "variables": {
4
    "favicon": "guerande/img/favicon-16x16.png",
5
    "theme_color": "#A99A6F"
6
  },
7
  "settings": {
8
    "combo": {
9
      "COMBO_PUBLIC_TEMPLATES.update": {
10
        "three_columns": {
11
          "name": "Trois colonnes",
12
          "template": "combo/page_template_3cols.html"
13
        }
14
      },
15
      "COMBO_ASSET_SLOTS.update": {
16
        "header:logo": { "label": "Têtière : logo" },
17
        "footer:logo": { "label": "Pied de page : logo" }
18
      }
19
    }
20
  }
21
}
static/guerande/img/moins.svg
1
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
<svg
3
   xmlns:dc="http://purl.org/dc/elements/1.1/"
4
   xmlns:cc="http://creativecommons.org/ns#"
5
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
6
   xmlns:svg="http://www.w3.org/2000/svg"
7
   xmlns="http://www.w3.org/2000/svg"
8
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
9
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
10
   version="1.1"
11
   id="Calque_1"
12
   x="0px"
13
   y="0px"
14
   viewBox="0 0 25.02 25.02"
15
   style="enable-background:new 0 0 25.02 25.02;"
16
   xml:space="preserve"
17
   sodipodi:docname="moins.svg"
18
   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"><metadata
19
   id="metadata11"><rdf:RDF><cc:Work
20
       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
21
         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
22
   id="defs9" /><sodipodi:namedview
23
   pagecolor="#ffffff"
24
   bordercolor="#666666"
25
   borderopacity="1"
26
   objecttolerance="10"
27
   gridtolerance="10"
28
   guidetolerance="10"
29
   inkscape:pageopacity="0"
30
   inkscape:pageshadow="2"
31
   inkscape:window-width="1920"
32
   inkscape:window-height="1016"
33
   id="namedview7"
34
   showgrid="false"
35
   inkscape:zoom="29.376498"
36
   inkscape:cx="12.51"
37
   inkscape:cy="12.51"
38
   inkscape:window-x="0"
39
   inkscape:window-y="27"
40
   inkscape:window-maximized="1"
41
   inkscape:current-layer="Calque_1" />
42
<style
43
   type="text/css"
44
   id="style2">
45
	.st0{fill:#FBD764;}
46
</style>
47
<path
48
   class="st0"
49
   d="M12.51,0C5.6,0,0,5.6,0,12.51s5.6,12.51,12.51,12.51s12.51-5.6,12.51-12.51S19.42,0,12.51,0z M21.14,13.81H13.8  v7.34h-2.59v-7.34H3.87v-2.59h7.34V3.88h2.59v7.34h7.34V13.81z"
50
   id="path4" />
51
<path
52
   style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.167256;stroke-linecap:square;paint-order:markers stroke fill"
53
   d="M 11.454735,24.966882 C 8.3886618,24.68634 5.6546076,23.382956 3.5232246,21.185757 0.30401969,17.867146 -0.80631979,13.037768 0.63424809,8.6202667 1.4337138,6.1687056 2.9600474,4.0520646 5.0639708,2.4773547 7.2977786,0.80543089 10.008266,-0.04927732 12.833388,0.02739482 c 1.370208,0.03718663 2.483077,0.23409695 3.717802,0.65782497 1.900089,0.65206561 3.517027,1.67961281 4.928565,3.13205311 1.991423,2.0491261 3.18001,4.6251145 3.476882,7.5353391 0.05141,0.503981 0.05141,1.810796 0,2.314776 -0.295568,2.897442 -1.483302,5.47941 -3.456868,7.514751 -2.061408,2.125932 -4.63262,3.393802 -7.611116,3.753058 -0.422581,0.05097 -1.99888,0.07149 -2.433918,0.03168 z m 6.025225,-11.12929 h 3.659387 V 12.527021 11.216449 H 17.47996 7.5226161 3.8458032 l 0.00891,1.302061 0.00891,1.302062 3.6678981,0.0087 c 13.6078257,0.0083 -3.6678981,-0.0087 9.9484387,0.0083 z"
54
   id="path838"
55
   sodipodi:nodetypes="cssssssssssccccccccccccc" /></svg>
static/guerande/img/plus.svg
1
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
<svg
3
   xmlns:dc="http://purl.org/dc/elements/1.1/"
4
   xmlns:cc="http://creativecommons.org/ns#"
5
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
6
   xmlns:svg="http://www.w3.org/2000/svg"
7
   xmlns="http://www.w3.org/2000/svg"
8
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
9
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
10
   version="1.1"
11
   id="Calque_1"
12
   x="0px"
13
   y="0px"
14
   viewBox="0 0 25.02 25.02"
15
   style="enable-background:new 0 0 25.02 25.02;"
16
   xml:space="preserve"
17
   sodipodi:docname="plus.svg"
18
   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"><metadata
19
   id="metadata11"><rdf:RDF><cc:Work
20
       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
21
         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
22
   id="defs9" /><sodipodi:namedview
23
   pagecolor="#ffffff"
24
   bordercolor="#666666"
25
   borderopacity="1"
26
   objecttolerance="10"
27
   gridtolerance="10"
28
   guidetolerance="10"
29
   inkscape:pageopacity="0"
30
   inkscape:pageshadow="2"
31
   inkscape:window-width="1920"
32
   inkscape:window-height="1016"
33
   id="namedview7"
34
   showgrid="false"
35
   inkscape:zoom="29.376498"
36
   inkscape:cx="12.51"
37
   inkscape:cy="12.475959"
38
   inkscape:window-x="0"
39
   inkscape:window-y="27"
40
   inkscape:window-maximized="1"
41
   inkscape:current-layer="Calque_1" />
42
<style
43
   type="text/css"
44
   id="style2">
45
	.st0{fill:#FBD764;}
46
</style>
47
<path
48
   class="st0"
49
   d="M12.51,0C5.6,0,0,5.6,0,12.51s5.6,12.51,12.51,12.51s12.51-5.6,12.51-12.51S19.42,0,12.51,0z M21.14,13.81H13.8  v7.34h-2.59v-7.34H3.87v-2.59h7.34V3.88h2.59v7.34h7.34V13.81z"
50
   id="path4" />
51
<path
52
   style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.167256;stroke-linecap:square;paint-order:markers stroke fill"
53
   d="M 11.454735,24.966882 C 8.3886618,24.68634 5.6546076,23.382956 3.5232246,21.185757 0.30401969,17.867146 -0.80631979,13.037768 0.63424809,8.6202667 1.4337138,6.1687056 2.9600474,4.0520646 5.0639708,2.4773547 7.2977786,0.80543089 10.008266,-0.04927732 12.833388,0.02739482 c 1.370208,0.03718663 2.483077,0.23409695 3.717802,0.65782497 1.900089,0.65206561 3.517027,1.67961281 4.928565,3.13205311 1.991423,2.0491261 3.18001,4.6251145 3.476882,7.5353391 0.05141,0.503981 0.05141,1.810796 0,2.314776 -0.295568,2.897442 -1.483302,5.47941 -3.456868,7.514751 -2.061408,2.125932 -4.63262,3.393802 -7.611116,3.753058 -0.422581,0.05097 -1.99888,0.07149 -2.433918,0.03168 z m 2.365837,-7.469902 v -3.659388 h 3.659388 3.659387 V 12.527021 11.216449 H 17.47996 13.820572 V 7.540041 3.8636327 H 12.51 11.199429 V 7.540041 11.216449 H 7.5226161 3.8458032 l 0.00891,1.302061 0.00891,1.302062 3.6678981,0.0087 3.6678987,0.0087 v 3.659235 3.659236 H 12.51 13.820572 Z"
54
   id="path838" /></svg>
static/guerande/style.scss
1
@charset "UTF-8";
2

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

  
3
{% block content-pre %}
4
  <div class="page-header">
5
    {% placeholder "header" name="Entête" %}
6
  </div>
7
{% endblock %}
templates/variants/guerande/combo/page_template_3cols.html
1
{% extends "combo/page_template.html" %}
2

  
3
{% block combo-content %}
4
  <div id="left-content" class="three-cols-column">
5
    {% placeholder "left" name="Colonne gauche" %}
6
  </div>
7
  <div id="center-content" class="three-cols-column">
8
    {% placeholder "content" name="Colonne centrale" %}
9
  </div>
10
  <div id="right-content" class="three-cols-column">
11
    {% placeholder "right" name="Colonne droite" %}
12
  </div>
13
{% endblock %}
0
-