From d990c4d291a35d22ec150786df1d7cf827da06ea Mon Sep 17 00:00:00 2001 From: Kévin Le Gouguec Date: Thu, 11 Mar 2021 20:49:29 +0100 Subject: Rename "actualités/news" to "concerts" MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "stylesheets/actualit\303\251s.css" | 179 ------------------------------------ stylesheets/concerts.css | 179 ++++++++++++++++++++++++++++++++++++ 2 files changed, 179 insertions(+), 179 deletions(-) delete mode 100644 "stylesheets/actualit\303\251s.css" create mode 100644 stylesheets/concerts.css (limited to 'stylesheets') diff --git "a/stylesheets/actualit\303\251s.css" "b/stylesheets/actualit\303\251s.css" deleted file mode 100644 index 9df1ed9..0000000 --- "a/stylesheets/actualit\303\251s.css" +++ /dev/null @@ -1,179 +0,0 @@ -main h1 { - color: var(--gold); -} - -#event-list { - max-height: 60vh; - overflow: auto; - scrollbar-width: thin; - scrollbar-color: black #ddd; -} - -#event-list::-webkit-scrollbar { - width: 0.25em; - height: 0.25em; -} - -#event-list::-webkit-scrollbar-track { - background: #ddd; -} - -#event-list::-webkit-scrollbar-thumb { - background: black; -} - -.events { - display: grid; - grid-auto-rows: var(--cell-height); - grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 0.5fr)); - grid-gap: 0.8em; -} - -a.event { - position: relative; - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 100%; - text-decoration: none; -} - -.event img { - position: absolute; - object-position: center; - object-fit: cover; - height: 100%; - width: 100%; -} - -.event .summary { - font-weight: bold; - color: white; - text-align: center; - z-index: 1; -} - -.event.canceled { - opacity: 50%; - transition: 0.5s; -} -.event.canceled .summary::before { - display: block; - content: "ANNULÉ"; - color: red; -} -.event.canceled:hover, -.event.canceled.active { - opacity: 1; -} - -.details > .detail { - display: grid; - grid-template-columns: 2em 1fr; -} - -.detail.date::before { - content: "📅"; -} -.detail.time::before { - content: "🕗"; -} -.detail.place::before { - content: "📌"; -} -.detail.program::before { - content: "🎼"; -} - -.details > .detail::before { - grid-column: 1; -} -.details > .detail > * { - grid-column: 2; -} - -.detail.program { - padding-left: 0; - list-style: none; -} - -.photo-credits { - font-size: x-small; -} - -.details.canceled::before { - display: block; - content: "ANNULÉ"; - color: red; -} - -.details.canceled .detail, -.details.canceled .more { - opacity: 50%; -} - -@media (min-width: 40em) { - main { - display: grid; - grid-template-columns: 60% 40%; - } - - main > div { - padding-left: 1em; - padding-right: 1em; - } - - .events { - --cell-width: 14em; - --cell-height: 12em; - } - - .event .summary { - opacity: 0; - transition: 0.5s; - } - - .event img { - transition: 0.5s; - } - - .event:not(.active):hover img, - .event:not(.active):focus-within img, - .event.active img { - filter: grayscale(0.8) brightness(0.4); - } - - .event:not(.active):hover .summary, - .event:not(.active):focus-within .summary, - .event.active .summary { - opacity: 1; - } -} - -@media (max-width: 40em) { - .events { - --cell-width: 10em; - --cell-height: 8em; - } - - a.event { - align-items: flex-end; - } - a.event.active { - align-items: stretch; - } - - .event .summary { - margin: 0; - background: #0008; - width: 100%; - } - a.event.active .summary { - display: flex; - align-content: center; - justify-content: center; - /* Make sure CANCELED block goes above summary. */ - flex-direction: column; - } -} diff --git a/stylesheets/concerts.css b/stylesheets/concerts.css new file mode 100644 index 0000000..9df1ed9 --- /dev/null +++ b/stylesheets/concerts.css @@ -0,0 +1,179 @@ +main h1 { + color: var(--gold); +} + +#event-list { + max-height: 60vh; + overflow: auto; + scrollbar-width: thin; + scrollbar-color: black #ddd; +} + +#event-list::-webkit-scrollbar { + width: 0.25em; + height: 0.25em; +} + +#event-list::-webkit-scrollbar-track { + background: #ddd; +} + +#event-list::-webkit-scrollbar-thumb { + background: black; +} + +.events { + display: grid; + grid-auto-rows: var(--cell-height); + grid-template-columns: repeat(auto-fit, minmax(var(--cell-width), 0.5fr)); + grid-gap: 0.8em; +} + +a.event { + position: relative; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + text-decoration: none; +} + +.event img { + position: absolute; + object-position: center; + object-fit: cover; + height: 100%; + width: 100%; +} + +.event .summary { + font-weight: bold; + color: white; + text-align: center; + z-index: 1; +} + +.event.canceled { + opacity: 50%; + transition: 0.5s; +} +.event.canceled .summary::before { + display: block; + content: "ANNULÉ"; + color: red; +} +.event.canceled:hover, +.event.canceled.active { + opacity: 1; +} + +.details > .detail { + display: grid; + grid-template-columns: 2em 1fr; +} + +.detail.date::before { + content: "📅"; +} +.detail.time::before { + content: "🕗"; +} +.detail.place::before { + content: "📌"; +} +.detail.program::before { + content: "🎼"; +} + +.details > .detail::before { + grid-column: 1; +} +.details > .detail > * { + grid-column: 2; +} + +.detail.program { + padding-left: 0; + list-style: none; +} + +.photo-credits { + font-size: x-small; +} + +.details.canceled::before { + display: block; + content: "ANNULÉ"; + color: red; +} + +.details.canceled .detail, +.details.canceled .more { + opacity: 50%; +} + +@media (min-width: 40em) { + main { + display: grid; + grid-template-columns: 60% 40%; + } + + main > div { + padding-left: 1em; + padding-right: 1em; + } + + .events { + --cell-width: 14em; + --cell-height: 12em; + } + + .event .summary { + opacity: 0; + transition: 0.5s; + } + + .event img { + transition: 0.5s; + } + + .event:not(.active):hover img, + .event:not(.active):focus-within img, + .event.active img { + filter: grayscale(0.8) brightness(0.4); + } + + .event:not(.active):hover .summary, + .event:not(.active):focus-within .summary, + .event.active .summary { + opacity: 1; + } +} + +@media (max-width: 40em) { + .events { + --cell-width: 10em; + --cell-height: 8em; + } + + a.event { + align-items: flex-end; + } + a.event.active { + align-items: stretch; + } + + .event .summary { + margin: 0; + background: #0008; + width: 100%; + } + a.event.active .summary { + display: flex; + align-content: center; + justify-content: center; + /* Make sure CANCELED block goes above summary. */ + flex-direction: column; + } +} -- cgit v1.2.3