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;
+ }
+}