From c63562b8dc6ff47099cc1fd6523b6209ff073bd5 Mon Sep 17 00:00:00 2001 From: Daru13 Date: Sun, 28 Apr 2019 23:59:43 +0200 Subject: [PATCH] Add an events.html page which lists all events. A new button pointing to this new page was added to index.html. --- css/style.css | 182 ++++++++++++++++++++++++++++++++++++++++++--- events.html | 66 ++++++++++++++++ img/icons/info.svg | 8 ++ index.html | 18 ++++- 4 files changed, 261 insertions(+), 13 deletions(-) create mode 100644 events.html create mode 100644 img/icons/info.svg diff --git a/css/style.css b/css/style.css index 50fc7af..d419ac9 100644 --- a/css/style.css +++ b/css/style.css @@ -62,7 +62,6 @@ a, a:hover, a:active, a:visited { - color: #FFAAAA; text-decoration: none; } @@ -158,6 +157,28 @@ section h2 { hyphens: none; } +section p { + padding: 0 0 20px 0; + font-size: 1rem; +} + +section strong { + font-weight: 600; +} + +section p.stand-out { + font-style: italic; + text-align: center; +} + +section .underline-links a:hover, +section .underline-links a:active { + text-decoration: underline; +} + + +/* Colors */ + section.red h2 { color: #EA6C61; border-bottom-color: #f7cbc0; @@ -188,18 +209,46 @@ section.pink h2 { border-bottom-color: #f3cad2; } -section p { - padding: 0 0 20px 0; - font-size: 1rem; +section.red a, +section.red a:hover, +section.red a:active, +section.red a:visited { + color: #EA6C61; } -section strong { - font-weight: 600; +section.orange a, +section.orange a:hover, +section.orange a:active, +section.orange a:visited { + color: #e6a04f; } -section p.stand-out { - font-style: italic; - text-align: center; +section.green a, +section.green a:hover, +section.green a:active, +section.green a:visited { + color: #5fb574; +} + +section.blue a, +section.blue a:hover, +section.blue a:active, +section.blue a:visited { + color: #2896ce; +} + +section.purple a, +section.purple a:hover, +section.purple a:active, +section.purple a:visited { + color: #9e60ce; +} + +section.pink a, +section.pink a:hover, +section.pink a:active, +section.pink a:visited { + color: #e4678c; } @@ -611,3 +660,118 @@ section.orange .button:hover { color: #6B6666; } + + + + + + +/*--------------------------------------------------------*/ +/* DESCRIPTION DES EVENEMENTS +/*--------------------------------------------------------*/ + +#events-toc { + margin: 0; + padding: 0; + + list-style-type: none; +} + +.event { + display: grid; + grid-template-columns: 1fr 4fr; + grid-template-rows: 1.5rem 1rem 1fr; +} + +.event-title { + grid-row: 1; + grid-column: 2; + + font-size: 1.3rem; +} + +.event-time { + grid-row: 1; + grid-column: 1; + justify-self: end; + + margin: 0 20px 0 0; + + font-size: 1.3rem; +} + +.event-time .start, +.event-time .end { + float: left; +} + +.event-time .start::after { + content: "–"; +} + +.event-location { + grid-row: 2; + grid-column: 2; + + font-style: italic; +} + +.event-description { + grid-row: 3; + grid-column: 2; + + margin: 0 0 10px 0; + padding: 20px 0; + line-height: 150%; +} + +/*--------------------------------------------------------*/ + +@media only screen and (max-width: 750px) { + .event { + grid-template-columns: 1fr 3fr; + } +} + +@media only screen and (max-width: 650px) { + .event { + grid-template-columns: 2fr 5fr; + } + + #events-toc { + line-height: 250%; + } +} + +@media only screen and (max-width: 550px) { + .event { + grid-template-columns: 1fr 2fr; + } +} + +@media only screen and (max-width: 480px) { + .event { + grid-template-rows: 2rem 1.5rem 1rem 1fr; + grid-template-columns: 1fr; + } + + .event-time { + grid-row: 1; + justify-self: start; + } + + .event-title { + grid-row: 2; + grid-column: 1; + } + + .event-location { + grid-row: 3; + grid-column: 1; + } + + .event-description { + grid-row: 4; + grid-column: 1; + } +} \ No newline at end of file diff --git a/events.html b/events.html new file mode 100644 index 0000000..c9007a5 --- /dev/null +++ b/events.html @@ -0,0 +1,66 @@ + + + + + + + + + + Programme · Les 48h des Arts 2019 + + + + + +
+ + Les 48h des Arts +
+ +
+

Cette page répertorie tous les événements qui auront lieu au cours des 48h des Arts 2019. Si vous souhaitez retourner sur la page principale, cliquez ici.

+ +

+
+ +
+

En continu

+ +
+

+
+ + +
+ +

+ +

+
+ +
+ +
+

Vendredi 3

+ +
+ +
+

Samedi 4

+ +
+ +
+

Dimanche 5

+ +
+ + + + \ No newline at end of file diff --git a/img/icons/info.svg b/img/icons/info.svg new file mode 100644 index 0000000..898f23e --- /dev/null +++ b/img/icons/info.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/index.html b/index.html index a7cc54d..a5a6e90 100644 --- a/index.html +++ b/index.html @@ -42,20 +42,30 @@

Programme

Les activités débutent le vendredi 3 mai à 18h et se terminent le dimanche 5 mai à 18h.

- + +
- Calendrier - Afficher le planning + Calendrier + Détails des événements
+ +
+ Calendrier + Planning du week-end +
+ + +
+ +

Attention : certains spectacles requierent de réserver vos places en avance !

Ticket Réserver vos places
-

Attention : certains spectacles requierent de réserver vos places en avance !