diff options
Diffstat (limited to 'stylesheets/actualités.css')
| -rw-r--r-- | stylesheets/actualités.css | 179 |
1 files changed, 0 insertions, 179 deletions
diff --git a/stylesheets/actualités.css b/stylesheets/actualités.css deleted file mode 100644 index 9df1ed9..0000000 --- a/stylesheets/actualités.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; - } -} |
