epfl-elements 5.0.2 → 5.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/assets/config/bootstrap-variables.scss +11 -7
  2. package/assets/config/colors.json +2 -1
  3. package/dist/components/atoms/button/button-tertiary-states.twig +4 -0
  4. package/dist/components/atoms/button/button-tertiary.twig +1 -0
  5. package/dist/components/atoms/button/button.yml +8 -0
  6. package/dist/components/atoms/picture/picture-avatar.twig +7 -6
  7. package/dist/components/atoms/picture/picture-cover.twig +6 -6
  8. package/dist/components/atoms/picture/picture-fullwidth-teaser.twig +7 -9
  9. package/dist/components/atoms/picture/picture-one-third-square.twig +7 -6
  10. package/dist/components/atoms/picture/picture-one-third.twig +7 -6
  11. package/dist/components/atoms/picture/picture-portrait.twig +7 -6
  12. package/dist/components/atoms/picture/picture-question.twig +7 -6
  13. package/dist/components/atoms/picture/picture-thumb-square.twig +17 -6
  14. package/dist/components/atoms/picture/picture.twig +7 -6
  15. package/dist/components/atoms/picture/picture.yml +3 -2
  16. package/dist/components/atoms/social-icon/social-icon-group.twig +3 -0
  17. package/dist/components/atoms/social-icon/social-icon-link-group.twig +17 -4
  18. package/dist/components/atoms/social-icon/social-icon.yml +4 -1
  19. package/dist/components/atoms/tag/tag.twig +6 -0
  20. package/dist/components/content-types/study-plan/study-plan-bachelor.twig +118 -229
  21. package/dist/components/content-types/study-plan/study-plan-master.twig +50 -100
  22. package/dist/components/molecules/breadcrumb/breadcrumb-tagged.twig +1 -1
  23. package/dist/components/molecules/carousel/carousel.yml +1 -1
  24. package/dist/components/molecules/key-number/key-number-hn-link.twig +0 -1
  25. package/dist/components/molecules/key-number/key-number-hn.twig +0 -1
  26. package/dist/components/molecules/key-number/key-number-large.twig +0 -1
  27. package/dist/components/molecules/key-number/key-number.twig +0 -1
  28. package/dist/components/molecules/social/social-follow.twig +1 -1
  29. package/dist/components/molecules/social/social.twig +9 -0
  30. package/dist/components/molecules/sponsor/sponsor-link.twig +8 -0
  31. package/dist/components/molecules/sponsor/sponsor.twig +1 -1
  32. package/dist/components/molecules/sponsor/sponsor.yml +3 -0
  33. package/dist/components/organisms/footer/footer-legal.twig +3 -3
  34. package/dist/components/organisms/hero/hero.yml +2 -0
  35. package/dist/components/organisms/sponsor-list/sponsor-list-link.twig +11 -0
  36. package/dist/components/organisms/sponsor-list/sponsor-list.twig +11 -0
  37. package/dist/components/organisms/sponsor-list/sponsor-list.yml +5 -0
  38. package/dist/css/elements.css +218 -2
  39. package/dist/css/elements.min.css +1 -1
  40. package/dist/css/elements.min.css.map +1 -1
  41. package/dist/css/reader.min.css +1 -1
  42. package/dist/css/reader.min.css.map +1 -1
  43. package/dist/css/vendors.min.css +2 -2
  44. package/dist/icons/icons.svg +1 -1
  45. package/dist/images/styleguide/homepage/7-science-question/science-question-1080x608.jpg +0 -0
  46. package/dist/images/styleguide/homepage/7-science-question/science-question-1440x810.jpg +0 -0
  47. package/dist/images/styleguide/homepage/7-science-question/science-question-540x304.jpg +0 -0
  48. package/dist/images/styleguide/homepage/7-science-question/science-question-720x405.jpg +0 -0
  49. package/dist/images/styleguide/homepage/7-science-question/science-question-960x540.jpg +0 -0
  50. package/dist/images/styleguide/news-thumbs/news_thumb-1080x1080.jpg +0 -0
  51. package/dist/images/styleguide/news-thumbs/news_thumb-120x120.jpg +0 -0
  52. package/dist/images/styleguide/news-thumbs/news_thumb-160x160.jpg +0 -0
  53. package/dist/images/styleguide/news-thumbs/news_thumb-240x240.jpg +0 -0
  54. package/dist/images/styleguide/news-thumbs/news_thumb-540x540.jpg +0 -0
  55. package/dist/images/styleguide/news-thumbs/news_thumb-80x80.jpg +0 -0
  56. package/dist/images/styleguide/people/avatar-120x120.jpg +0 -0
  57. package/dist/images/styleguide/people/avatar-160x160.jpg +0 -0
  58. package/dist/images/styleguide/people/avatar-180x180.jpg +0 -0
  59. package/dist/images/styleguide/people/avatar-256x256.jpg +0 -0
  60. package/dist/images/styleguide/people/avatar-60x60.jpg +0 -0
  61. package/dist/images/styleguide/people/avatar-80x80.jpg +0 -0
  62. package/dist/images/styleguide/people/avatar-95x95.jpg +0 -0
  63. package/dist/images/styleguide/people/portrait-211x300.jpg +0 -0
  64. package/dist/images/styleguide/people/portrait-253x360.jpg +0 -0
  65. package/dist/images/styleguide/people/portrait-422x600.jpg +0 -0
  66. package/dist/images/styleguide/people/portrait-506x720.jpg +0 -0
  67. package/dist/images/styleguide/teaser/news-teaser-1080x1080.jpg +0 -0
  68. package/dist/images/styleguide/teaser/news-teaser-1080x608.jpg +0 -0
  69. package/dist/images/styleguide/teaser/news-teaser-1140x1140.jpg +0 -0
  70. package/dist/images/styleguide/teaser/news-teaser-280x280.jpg +0 -0
  71. package/dist/images/styleguide/teaser/news-teaser-320x180.jpg +0 -0
  72. package/dist/images/styleguide/teaser/news-teaser-360x360.jpg +0 -0
  73. package/dist/images/styleguide/teaser/news-teaser-380x214.jpg +0 -0
  74. package/dist/images/styleguide/teaser/news-teaser-480x480.jpg +0 -0
  75. package/dist/images/styleguide/teaser/news-teaser-640x360.jpg +0 -0
  76. package/dist/images/styleguide/teaser/news-teaser-640x640.jpg +0 -0
  77. package/dist/images/styleguide/teaser/news-teaser-780x780.jpg +0 -0
  78. package/dist/images/styleguide/teaser/news-teaser-960x960.jpg +0 -0
  79. package/dist/js/reader.js +169 -101
  80. package/dist/js/reader.min.js +2 -2
  81. package/dist/js/reader.min.js.map +1 -1
  82. package/dist/package.json +2 -2
  83. package/package.json +2 -2
@@ -13,35 +13,15 @@
13
13
  </div>
14
14
  <div class="bachlor">
15
15
  <div class="titre_bachlor bold">Master 1&nbsp;</div>
16
- <div class="titre">
17
- <div class="cep"><abbr title="Cours">c</abbr></div>
18
- <div class="cep"><abbr title="Exercices">e</abbr></div>
19
- <div class="cep"><abbr title="Pratiques">p</abbr></div>
20
- </div>
21
16
  </div>
22
17
  <div class="bachlor">
23
18
  <div class="titre_bachlor bold">Master 2&nbsp;</div>
24
- <div class="titre">
25
- <div class="cep"><abbr title="Cours">c</abbr></div>
26
- <div class="cep"><abbr title="Exercices">e</abbr></div>
27
- <div class="cep"><abbr title="Pratiques">p</abbr></div>
28
- </div>
29
19
  </div>
30
20
  <div class="bachlor">
31
21
  <div class="titre_bachlor bold">PDM automne</div>
32
- <div class="titre">
33
- <div class="cep"><abbr title="Cours">c</abbr></div>
34
- <div class="cep"><abbr title="Exercices">e</abbr></div>
35
- <div class="cep"><abbr title="Pratiques">p</abbr></div>
36
- </div>
37
22
  </div>
38
23
  <div class="bachlor">
39
24
  <div class="titre_bachlor bold">PDM printemps</div>
40
- <div class="titre">
41
- <div class="cep"><abbr title="Cours">c</abbr></div>
42
- <div class="cep"><abbr title="Exercices">e</abbr></div>
43
- <div class="cep"><abbr title="Pratiques">p</abbr></div>
44
- </div>
45
25
  </div>
46
26
  <div class="examen">
47
27
  <div class="titre_bachlor bold">Examens</div>
@@ -73,34 +53,26 @@
73
53
  </div>
74
54
 
75
55
  <div class="bachlor local-color-light bachlor-color" data-title="Master 1">
76
- <div class="bachlor-text">
77
- <div class="cep">–&nbsp;</div>
78
- <div class="cep">–&nbsp;</div>
79
- <div class="cep">–&nbsp;</div>
80
- </div>
56
+ <div class="schedule-text no-course" aria-hidden="true"><span>–</span></div>
81
57
  </div>
82
58
 
83
59
  <div class="bachlor local-color bachlor-color" data-title="Master 2">
84
- <div class="bachlor-text">
85
- <div class="cep">–&nbsp;</div>
86
- <div class="cep">–&nbsp;</div>
87
- <div class="cep">–&nbsp;</div>
88
- </div>
60
+ <div class="schedule-text no-course" aria-hidden="true"><span>–</span></div>
89
61
  </div>
90
62
 
91
63
  <div class="bachlor local-color bachlor-color" data-title="PDM automne">
92
- <div class="bachlor-text">
93
- <div class="cep">–&nbsp;</div>
94
- <div class="cep">–&nbsp;</div>
95
- <div class="cep"><span class="label sr-only">Pratique: </span>900h&nbsp;</div>
64
+ <div class="schedule-text">
65
+ <ul>
66
+ <li>Pratique: 900h</li>
67
+ </ul>
96
68
  </div>
97
69
  </div>
98
70
 
99
71
  <div class="bachlor local-color bachlor-color" data-title="PDM printemps">
100
- <div class="bachlor-text">
101
- <div class="cep">–&nbsp;</div>
102
- <div class="cep">–&nbsp;</div>
103
- <div class="cep"><span class="label sr-only">Pratique: </span>900h&nbsp;</div>
72
+ <div class="schedule-text">
73
+ <ul>
74
+ <li>Pratique: 900h</li>
75
+ </ul>
104
76
  </div>
105
77
  </div>
106
78
 
@@ -142,34 +114,34 @@
142
114
  </div>
143
115
 
144
116
  <div class="bachlor local-color-light bachlor-color" data-title="Master 1">
145
- <div class="bachlor-text">
146
- <div class="cep">–&nbsp;</div>
147
- <div class="cep">–&nbsp;</div>
148
- <div class="cep"><span class="label sr-only">Pratique: </span>320h&nbsp;&nbsp;</div>
117
+ <div class="schedule-text">
118
+ <ul>
119
+ <li>Pratique: 320h</li>
120
+ </ul>
149
121
  </div>
150
122
  </div>
151
123
 
152
124
  <div class="bachlor local-color bachlor-color" data-title="Master 2">
153
- <div class="bachlor-text">
154
- <div class="cep">–&nbsp;</div>
155
- <div class="cep">–&nbsp;</div>
156
- <div class="cep"><span class="label sr-only">Pratique: </span>320h&nbsp;</div>
125
+ <div class="schedule-text">
126
+ <ul>
127
+ <li>Pratique: 320h</li>
128
+ </ul>
157
129
  </div>
158
130
  </div>
159
131
 
160
132
  <div class="bachlor local-color bachlor-color" data-title="PDM automne">
161
- <div class="bachlor-text">
162
- <div class="cep">–&nbsp;</div>
163
- <div class="cep">–&nbsp;</div>
164
- <div class="cep"><span class="label sr-only">Pratique: </span>320h&nbsp;</div>
133
+ <div class="schedule-text">
134
+ <ul>
135
+ <li>Pratique: 320h</li>
136
+ </ul>
165
137
  </div>
166
138
  </div>
167
139
 
168
140
  <div class="bachlor local-color bachlor-color" data-title="PDM printemps">
169
- <div class="bachlor-text">
170
- <div class="cep">–&nbsp;</div>
171
- <div class="cep">–&nbsp;</div>
172
- <div class="cep"><span class="label sr-only">Pratique: </span>320h&nbsp;</div>
141
+ <div class="schedule-text">
142
+ <ul>
143
+ <li>Pratique: 320h</li>
144
+ </ul>
173
145
  </div>
174
146
  </div>
175
147
 
@@ -207,19 +179,9 @@
207
179
  </div>
208
180
  <div class="bachlor">
209
181
  <div class="titre_bachlor bold">Master 1&nbsp;</div>
210
- <div class="titre">
211
- <div class="cep"><abbr title="Cours">c</abbr></div>
212
- <div class="cep"><abbr title="Exercices">e</abbr></div>
213
- <div class="cep"><abbr title="Pratiques">p</abbr></div>
214
- </div>
215
182
  </div>
216
183
  <div class="bachlor">
217
184
  <div class="titre_bachlor bold">Master 2&nbsp;</div>
218
- <div class="titre">
219
- <div class="cep"><abbr title="Cours">c</abbr></div>
220
- <div class="cep"><abbr title="Exercices">e</abbr></div>
221
- <div class="cep"><abbr title="Pratiques">p</abbr></div>
222
- </div>
223
185
  </div>
224
186
  <div class="specialisation">
225
187
  <div class="titre_bachlor bold">Spécialisation</div>
@@ -254,18 +216,15 @@
254
216
  </div>
255
217
 
256
218
  <div class="bachlor local-color-light bachlor-color" data-title="Master 1">
257
- <div class="bachlor-text">
258
- <div class="cep">–&nbsp;</div>
259
- <div class="cep">–&nbsp;</div>
260
- <div class="cep">–&nbsp;</div>
261
- </div>
219
+ <div class="schedule-text no-course" aria-hidden="true"><span>–</span></div>
262
220
  </div>
263
221
 
264
222
  <div class="bachlor local-color bachlor-color" data-title="Master 2">
265
- <div class="bachlor-text">
266
- <div class="cep"><span class="label sr-only">Cours: </span>4h&nbsp;</div>
267
- <div class="cep"><span class="label sr-only">Exercices: </span>3h&nbsp;</div>
268
- <div class="cep">–&nbsp;</div>
223
+ <div class="schedule-text">
224
+ <ul>
225
+ <li>Cours: 4h</li>
226
+ <li>Exercices: 3h</li>
227
+ </ul>
269
228
  </div>
270
229
  </div>
271
230
 
@@ -319,18 +278,15 @@
319
278
  </div>
320
279
 
321
280
  <div class="bachlor local-color-light bachlor-color" data-title="Master 1">
322
- <div class="bachlor-text">
323
- <div class="cep">–&nbsp;</div>
324
- <div class="cep">–&nbsp;</div>
325
- <div class="cep">–&nbsp;</div>
326
- </div>
281
+ <div class="schedule-text no-course" aria-hidden="true"><span>–</span></div>
327
282
  </div>
328
283
 
329
284
  <div class="bachlor local-color bachlor-color" data-title="Master 2">
330
- <div class="bachlor-text">
331
- <div class="cep"><span class="label sr-only">Cours: </span>2h&nbsp;</div>
332
- <div class="cep">–&nbsp;</div>
333
- <div class="cep"><span class="label sr-only">Pratique: </span>2h&nbsp;</div>
285
+ <div class="schedule-text">
286
+ <ul>
287
+ <li>Cours: 2h</li>
288
+ <li><abbr title="Travaux pratiques">TP</abbr>: 2h</li>
289
+ </ul>
334
290
  </div>
335
291
  </div>
336
292
 
@@ -382,18 +338,15 @@
382
338
  </div>
383
339
 
384
340
  <div class="bachlor local-color-light bachlor-color" data-title="Master 1">
385
- <div class="bachlor-text">
386
- <div class="cep">–&nbsp;</div>
387
- <div class="cep">–&nbsp;</div>
388
- <div class="cep">–&nbsp;</div>
389
- </div>
341
+ <div class="schedule-text no-course" aria-hidden="true"><span>–</span></div>
390
342
  </div>
391
343
 
392
344
  <div class="bachlor local-color bachlor-color" data-title="Master 2">
393
- <div class="bachlor-text">
394
- <div class="cep"><span class="label sr-only">Cours: </span>2h&nbsp;</div>
395
- <div class="cep"><span class="label sr-only">Exercices: </span>1h&nbsp;</div>
396
- <div class="cep">–&nbsp;</div>
345
+ <div class="schedule-text">
346
+ <ul>
347
+ <li>Cours: 2h</li>
348
+ <li>Exercices: 2h</li>
349
+ </ul>
397
350
  </div>
398
351
  </div>
399
352
 
@@ -443,19 +396,16 @@
443
396
  </div>
444
397
 
445
398
  <div class="bachlor local-color-light bachlor-color" data-title="Master 1">
446
- <div class="bachlor-text">
447
- <div class="cep"><span class="label sr-only">Cours: </span>4h&nbsp;</div>
448
- <div class="cep"><span class="label sr-only">Exercices: </span>2h&nbsp;</div>
449
- <div class="cep">–&nbsp;</div>
399
+ <div class="schedule-text">
400
+ <ul>
401
+ <li>Cours: 2h</li>
402
+ <li>Exercices: 2h</li>
403
+ </ul>
450
404
  </div>
451
405
  </div>
452
406
 
453
407
  <div class="bachlor local-color bachlor-color" data-title="Master 2">
454
- <div class="bachlor-text">
455
- <div class="cep">–&nbsp;</div>
456
- <div class="cep">–&nbsp;</div>
457
- <div class="cep">–&nbsp;</div>
458
- </div>
408
+ <div class="schedule-text no-course" aria-hidden="true"><span>–</span></div>
459
409
  </div>
460
410
 
461
411
  <div class="specialisation" data-title="Spécialisation">
@@ -6,7 +6,7 @@
6
6
  </a>
7
7
  </li>
8
8
  <li class="breadcrumb-item breadcrumb-tags-wrapper">
9
- <a href="#" class="tag tag-primary">School</a>
9
+ <a href="#" class="tag tag-tertiary">School</a>
10
10
  <a href="#" class="tag tag-primary">Innovation</a>
11
11
  <a href="#" class="tag tag-primary">W3C</a>
12
12
  </li>
@@ -1,7 +1,7 @@
1
1
  name: carousel
2
2
  title: Carousel
3
3
  notes: |
4
- Basic carousel using Bootstrap functionality: https://getbootstrap.com/docs/4.6/components/carousel/.
4
+ Basic carousel using Bootstrap's [Carousel](https://getbootstrap.com/docs/4.6/components/carousel/) functionality.
5
5
 
6
6
  Use the 'data-interval' attribute to change the automatic slide delay.
7
7
 
@@ -1,4 +1,3 @@
1
- {% set icon = icon|default("https://via.placeholder.com/") %}
2
1
  <a class="card link-trapeze-horizontal" href="#">
3
2
  <div class="card border-0 bg-white m-0 h-100">
4
3
  <div class="card-header border-0">
@@ -1,4 +1,3 @@
1
- {% set icon = icon|default("https://via.placeholder.com/") %}
2
1
  <div class="card">
3
2
  <div class="card border-0 bg-white m-0 h-100">
4
3
  <div class="card-header border-0">
@@ -1,4 +1,3 @@
1
- {% set icon = icon|default("https://via.placeholder.com/") %}
2
1
  <div class="key-number-large">
3
2
  <div class="card border-0 bg-white m-0 h-100">
4
3
  <div class="card-header border-0">
@@ -1,4 +1,3 @@
1
- {% set icon = icon|default("https://via.placeholder.com/") %}
2
1
  <div class="key-number">
3
2
  <div class="card border-0 bg-white m-0 h-100">
4
3
  <div class="card-header border-0">
@@ -5,7 +5,7 @@
5
5
  <p class="social-share-text">
6
6
  Suivez nous sur <span class="sr-only">les réseaux sociaux</span>
7
7
  </p>
8
- {% include '@atoms/social-icon/social-icon-link-group.twig' with { discrete: true, social_mastodon: true, social_tiktok: true } %}
8
+ {% include '@atoms/social-icon/social-icon-link-group.twig' with { discrete: true, social_mastodon: true, social_bluesky: true, social_tiktok: true, social_github: true, social_gitlab: true } %}
9
9
  </div>
10
10
 
11
11
  </div>
@@ -43,6 +43,15 @@
43
43
  url: '#'
44
44
  } %}
45
45
  </li>
46
+ <li>
47
+ {% include '@atoms/social-icon/social-icon-single-link.twig' with {
48
+ pretty_name: 'Share on Bluesky',
49
+ icon: 'icon-bluesky',
50
+ round: round,
51
+ discrete: true,
52
+ url: '#'
53
+ } %}
54
+ </li>
46
55
  </ul>
47
56
  </div>
48
57
 
@@ -0,0 +1,8 @@
1
+ <figure>
2
+ <a href="#">
3
+ <img class="img-fluid d-block mx-auto" src="./images/styleguide/illustrations/brand-identity-teaser.png" alt="EPFL">
4
+ </a>
5
+ <hr>
6
+ <figcaption><a href="#">Lorem ipsum dolor sit amet.</a></figcaption>
7
+ <hr class="bold">
8
+ </figure>
@@ -1,5 +1,5 @@
1
1
  <figure>
2
- <img class="img-fluid d-block mx-auto" src="https://via.placeholder.com/300x150.jpg" alt="Sponsor">
2
+ <img class="img-fluid d-block mx-auto" src="./images/styleguide/illustrations/brand-identity-teaser.png" alt="EPFL">
3
3
  <hr>
4
4
  <figcaption>Lorem ipsum dolor sit amet.</figcaption>
5
5
  <hr class="bold">
@@ -1,2 +1,5 @@
1
1
  title: Sponsor
2
2
  name: sponsor
3
+ variants:
4
+ - name: link
5
+ title: Sponsor with link
@@ -11,7 +11,7 @@
11
11
  {% endif %}
12
12
  </div>
13
13
  <div>
14
- <p>&copy; 2024 EPFL, tous droits réservés</p>
14
+ <p>&copy; 2025 EPFL, tous droits réservés</p>
15
15
  </div>
16
16
  </div>
17
17
  {% endif %}
@@ -26,7 +26,7 @@
26
26
  {% endif %}
27
27
  </div>
28
28
  <div>
29
- <p>&copy; 2024 EPFL, all rights reserved</p>
29
+ <p>&copy; 2025 EPFL, all rights reserved</p>
30
30
  </div>
31
31
  </div>
32
32
  {% endif %}
@@ -41,7 +41,7 @@
41
41
  {% endif %}
42
42
  </div>
43
43
  <div>
44
- <p>&copy; 2024 EPFL, alle Rechte vorbehalten</p>
44
+ <p>&copy; 2025 EPFL, alle Rechte vorbehalten</p>
45
45
  </div>
46
46
  </div>
47
47
  {% endif %}
@@ -3,6 +3,8 @@ title: Hero
3
3
  notes: |
4
4
  The hero component is used as intro to basic pages.
5
5
 
6
+ You can add the `.top-center` class to the `<img>` tag if you want the background picture to be centred from the top of the image, or the `bottom-center` class to the `<img>` tag if you want the background picture to be centred from the bottom of the image.
7
+
6
8
  variants:
7
9
  - name: legend
8
10
  title: Hero with image legend
@@ -0,0 +1,11 @@
1
+ <div class="row justify-content-center">
2
+ <div class="col-md-4">
3
+ {% include '@molecules/sponsor/sponsor-link.twig' %}
4
+ </div>
5
+ <div class="col-md-4">
6
+ {% include '@molecules/sponsor/sponsor-link.twig' %}
7
+ </div>
8
+ <div class="col-md-4">
9
+ {% include '@molecules/sponsor/sponsor-link.twig' %}
10
+ </div>
11
+ </div>
@@ -0,0 +1,11 @@
1
+ <div class="row justify-content-center">
2
+ <div class="col-md-4">
3
+ {% include '@molecules/sponsor/sponsor.twig' %}
4
+ </div>
5
+ <div class="col-md-4">
6
+ {% include '@molecules/sponsor/sponsor.twig' %}
7
+ </div>
8
+ <div class="col-md-4">
9
+ {% include '@molecules/sponsor/sponsor.twig' %}
10
+ </div>
11
+ </div>
@@ -0,0 +1,5 @@
1
+ title: Sponsor List
2
+ name: sponsor-list
3
+ variants:
4
+ - name: link
5
+ title: Sponsor List with link