Verified Commit 78570916 authored by Sebastian Endres's avatar Sebastian Endres
Browse files

Fix intro text font size on mobile devices

parent 45dccfff
......@@ -60,15 +60,15 @@
<header id="intro-1" class="container">
<div class="row">
<div class="col d-flex flex-column justify-content-around py-5" style="height: 100vh; background-image: url('./img/enjoy_cat.svg'); background-position: center; background-repeat: no-repeat; background-size: contain;">
<p class="text-light" style="font-size: 200%">
<p class="text-light intro-text">
Enter a place of depression, authoritarianism and hopelessness – the reality of the chasers.
Bring in your light, happiness and enthusiasm – the optimism of runners – and do not get "contaminated".
</p>
<p class="text-light" style="font-size: 200%">
<p class="text-light intro-text-lg">
Welcome to the Journey to the End of the Night 2019. Enjoy!
</p>
<p>
<a href="#" class="btn btn-circle btn-next-section"></a>
<p class="w-100">
<a href="#" class="btn btn-circle btn-next-section my-1"></a>
</p>
</div>
</div>
......@@ -77,12 +77,12 @@
<header id="intro-2" class="container">
<div class="row">
<div class="col d-flex flex-column justify-content-around" style="height: 100vh">
<img src="./img/journey.svg" alt="Journey to the End of the Night" class="img-fluid" style="max-height:50vh">
<p class="display-4 text-light">
<img src="./img/journey.svg" alt="Journey to the End of the Night" class="img-fluid" style="max-height:30vh">
<p class="text-light intro-text-lg">
<strong>Friday, June 14 2019, 18:15 at Omega Erlangen</strong>
</p>
<p>
<a href="#" class="btn btn-circle btn-next-section" onClick="playAndScroll();"></a>
<p class="w-100">
<a href="#" class="btn btn-circle btn-next-section my-3" onClick="playAndScroll();"></a>
</p>
</div>
</div>
......
......@@ -46,7 +46,13 @@ $(() => {
$('header,section').find('.btn-next-section').each((index, element) => {
element = $(element)
element.html('<i class="fa animated"></i>');
element.addClass('text-light my-5 page-scroll');
const noMarginClass = $(element[0].classList).filter(
(i, cls) => (cls.startsWith('my-'))
).length === 0;
if (noMarginClass) {
element.addClass('my-5');
}
element.addClass('text-light page-scroll');
var next_section = element.parents('header,section').last().nextAll('header,section').first();
if (next_section.length === 1) {
element.attr('href', `#${next_section.attr('id')}`);
......
......@@ -169,3 +169,21 @@ h3 {
iframe {
background: #000;
}
@media (orientation: portrait) {
.intro-text-lg {
font-size: 7vw;
}
.intro-text {
font-size: 5vw;
}
}
@media (orientation: landscape) {
.intro-text-lg {
font-size: 7vh;
}
.intro-text {
font-size: 5vh;
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment