Adapt visual paging for portrait screens

This commit is contained in:
Henri Bergius 2017-11-30 18:47:58 +01:00
parent 2b084d3f39
commit 57de3fb8a4

View file

@ -9,7 +9,7 @@
width: 100vw; width: 100vw;
text-align: center; text-align: center;
position: absolute; position: absolute;
font-size: 6vh; font-size: 6vmin;
top: 0px; top: 0px;
left: 0px; left: 0px;
} }
@ -30,21 +30,30 @@
p#announcement { p#announcement {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding-top: 7vh; padding-top: 7vmax;
padding-bottom: 7vh; padding-bottom: 7vmax;
color: #ffffff; color: #ffffff;
font-size: 7vh; font-size: 7vmin;
text-align: center; text-align: center;
width: 80vw; width: 80vw;
} }
p#announcement.tiny { p#announcement.tiny {
font-size: 15vh; font-size: 15vmin;
} }
p#announcement.short { p#announcement.short {
font-size: 10vh; font-size: 10vmin;
} }
p#announcement.long { p#announcement.long {
font-size: 5vh; font-size: 5vmin;
}
@media (orientation: portrait) {
p#announcement {
width: 95vw;
padding-bottom: 3vmax;
}
p#announcement.tiny {
font-size: 10vmin;
}
} }
</style> </style>
</head> </head>