From b3d889c19bf15732f1f9f5221831915f543076d2 Mon Sep 17 00:00:00 2001 From: tobi Date: Tue, 20 Jun 2023 21:37:08 +0200 Subject: [PATCH] adding portrait mode warning message --- timetable/index.html | 9 +++++ timetable/styles.css | 78 ++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 85 insertions(+), 2 deletions(-) diff --git a/timetable/index.html b/timetable/index.html index d7b34cd..69d2912 100644 --- a/timetable/index.html +++ b/timetable/index.html @@ -7,6 +7,15 @@ +
+

+

FediCamp 2023 TimeTable

+ +

Please Rotate Your Device

+

For the best viewing experience, please switch to landscape mode.

+ +
+

FediCamp 2023

Time Table

diff --git a/timetable/styles.css b/timetable/styles.css index 102b262..fa21f31 100644 --- a/timetable/styles.css +++ b/timetable/styles.css @@ -1,6 +1,61 @@ body { background-color: #F6F6F6; font-family: Arial, sans-serif; + margin: 0; + padding: 0; +} + +#landscape-message { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; +} + +#logo { + max-width: 100%; + height: auto; + margin-bottom: 20px; +} + +#landscape-message h1 { + margin-top: 0; +} + +#landscape-message p { + margin: 10px 0; +} + +#timetable { + display: none; +} + +@media (orientation: landscape) { + #landscape-message { + display: none; + } + + #timetable { + display: block; + } +} + +@media (max-height: 600px) { + #headline { + margin-top: 40px; + } +} + +@media (max-height: 400px) { + #headline { + margin-top: 20px; + } } #timetable { @@ -8,9 +63,11 @@ body { margin: 0 auto; } -#headline, #subheadline { +#headline, +#subheadline { text-align: center; color: #444; + margin-top: 40px; } #slider-container { @@ -71,7 +128,8 @@ body { table-layout: fixed; } -.day-table th, .day-table td { +.day-table th, +.day-table td { border: 1px solid #FFFFFF; padding: 10px; text-align: center; @@ -131,3 +189,19 @@ body { border-radius: 5px; cursor: pointer; } + +@media (max-width: 600px) { + #slider-container { + width: 90%; + } + + .day-table, + .day-table th, + .day-table td { + font-size: 0.8em; + } + + .day-table td { + height: auto; + } +}