KABI/fedi.camp_Website
2
0
Fork 3
Code Issues Pull requests Projects Releases Packages Wiki Activity

adding portrait mode warning message

Browse source
This commit is contained in:
Tobi 2023-06-20 21:37:08 +02:00
parent 9c54796c2e
commit b3d889c19b
2 changed files with 85 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
timetable/index.html
View file

@ -7,6 +7,15 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="landscape-message">
<br><br>
<h1>FediCamp 2023 TimeTable</h1>
<img src="https://fedi.camp/images/logo2023_1.png" alt="FediCamp Logo" id="logo" />
<h2>Please Rotate Your Device</h2>
<p>For the best viewing experience, please switch to landscape mode.</p>
</div>
<div id="timetable">
<h1 id="headline">FediCamp 2023</h1>
<h2 id="subheadline">Time Table</h2>

78
timetable/styles.css
View file

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