Projet

Général

Profil

0001-theme-add-guerande-55457.patch

Paul Marillonnet, 30 août 2021 16:24

Télécharger (18,2 ko)

Voir les différences:

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

 static/guerande/_custom.scss                  | 327 ++++++++++++++++++
 static/guerande/_vars.scss                    |  37 ++
 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, 519 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
		a {
31
		background-position: top left;
32
		padding-left: 400px;
33
		@media screen and (max-width: $nav-mobile-limit) {
34
			background-size: 80%;
35
			margin-top: 30px;
36
			padding-left: 300px;
37
		}
38
		display: block;
39
		min-height: 130px;
40
		line-height: 120px;
41
	}
42
}
43

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

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

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

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

  
107
.three-cols-column {
108
	flex: 1 1 0;
109
}
110

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

  
115
.page-header {
116
	margin-left: 7%;
117
	margin-right: 7%;
118
	text-align: center;
119

  
120
	h1, h2 {
121
		font-weight: 300;
122
	}
123
}
124

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

  
133
#content div.wcsformsofcategorycell,
134
#content div.link-list-cell
135
 {
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: 250px;
153
		overflow: hidden;
154
		margin: 0;
155
	}
156
	img {
157
		padding: 0;
158
	}
159
}
160

  
161
div#footer-wrapper {
162
	padding: 0;
163
}
164

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

  
32
$wcs-steps-spacing: 1rem;
33
$wcs-step-border-bottom: none;
34
$wcs-step-color: #000;
35
$wcs-step-background-color: #fff;
36
$wcs-step-current-marker-background: $primary-color;
37
$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
-