</head>
<body>
-<div id="background">
+<div id="background" data-section="home">
<div id="projector"></div>
</div>
<div id="container" data-section="home">
-
-
<div class="active section " data-page="1" data-homepage="">
- <section class="home">
+ <section class="home" >
<h1>The Bona 100‑year</h1>
<h2>anniversary quiz</h2>
<h3>Think you know Bona?<br>Put it to the test by taking part in our short quiz.</h3>
for ($z = 0; $z < $question[$i]['imagesnb']; $z++) {
$numb = $z;
$num = $numb + 65;
- if ($z % 2 == 0) // pair
- {
- echo '<span>';
- }
+// if ($z % 2 == 0) // pair
+// {
+// echo '<span>';
+// }
$score = 0;
$correct = $question[$i]['correct'];
if ($correct === $imgCorrect) {
$score = 1;
}
- echo '<a class="btn-next value" href="#" data-score="' . $score . '">';
- echo '
- <li class="questionsCircle " style="background-image: url(\'images/' . $question[$i]['id'] . '-' . $imgCorrect . '.jpg\')">
- <div class="questionsCircle__container">
- <span class="questionsCircle__container--letter">' . chr($num) . '</span>
- </div>
- </li>
- </a>';
+ echo '<li data-score="' . $score . '" class="questionsCircle btn-next value" style="background-image: url(\'images/' . $question[$i]['id'] . '-' . $imgCorrect . '.jpg\')">
+ <div class="questionsCircle__container">
+ <span class="questionsCircle__container--letter">' . chr($num) . '</span>
+ </div>
+ </li>';
- if ($z % 2 == 1) // impair
- {
- echo '</span>';
- }
+// if ($z % 2 == 1) // impair
+// {
+// echo '</span>';
+// }
}
echo '</ul>
<!--<div class="progressbar"></div>-->
<a href="#" class="button btn-next next end">Try again</a>
</section>
</div>
-
- <div class="progressbar">
- <div class="progressbar-value"></div>
- </div>
</div>
-
+<div class="progressbar">
+ <div class="progressbar-value"></div>
+</div>
<div id="orientationWarning"></div>
<script type="text/javascript" src="js/jquery.min.js"></script>
$(window).on('orientationchange', function () {
console.log('orientation');
+
setTimeout(function () {
resize()
}, 3000);
TweenMax.to($(this).closest('div.section'), delay, {x: '-=350px', opacity: 0});
$(this).closest('div.section').delay(delay * 1000).queue(function () {
- $(this).closest('div.section').removeClass('active')
+ $(this).closest('div.section').removeClass('active');
+ $(this).closest('div.section').next().addClass('active');
});
TweenMax.from($(this).closest('div.section').next(), delay, {
x: '+=350px', opacity: 0, delay: delay,
onComplete: AfterTransition
});
- $(this).closest('div.section').next().addClass('active');
+
let width = ($('.section:visible').attr("data-question") / nbquestions) * 100;
$('.progressbar-value').css('width', width + '%');
}
}
+// FUNCTION RESIZE CONTENT
-let breakpoint = 640, // Stop scaling the height below this width (let it scroll)
+let breakpoint = 750, // Stop scaling the height below this width (let it scroll)
scaler = $('#container');
-
function resize() {
scaler.attr('style', ''); // Reset scaling so we can measure base size
var ww = $(window).width(),
wh = $(window).height(),
- // TODO: measure all content screens to find the optimal overall scale
- baseWidth = scaler.outerWidth(),
- baseHeight = scaler.outerHeight(),
+ sections = $('.section'),
+ baseWidth, // = scaler.outerWidth(),
+ baseHeight, // = scaler.outerHeight(),
scale,
translateAmount;
+ // Measure all content screens to find the optimal overall scale
+ baseWidth = Math.max.apply(Math, sections.map(function(x) { return $(sections[x]).outerWidth(); }));
+ baseHeight = Math.max.apply(Math, sections.map(function(x) { return $(sections[x]).outerHeight(); }));
+
+ console.log(baseWidth, baseHeight);
+
+ //// background resize
+ // $("#background,#projector").css({width: ww, maxWidth: ww, minWidth: ww, height: wh, maxHeight: wh, minHeight: wh});
+ //
+ // var vs = $("section:visible");
+ // var home = vs.hasClass('home');
+ //
+ // var sh = vs.outerHeight();
+ // sh *= 1.1; // Margins
+ // if (home) {
+ // sh *= 1.1;
+ // }
+ // var cssSection = {};
+ // cssSection.top = Math.max((wh - sh) / 2, wh * 0.05);
+ // if (home) {
+ // $("#projector").css('bottom', Math.max(cssSection.top, wh * 0.05));
+ // }
+ /**************************************************************************/
// Work out how much content needs to be scaled down, if at all
scale = Math.min(1, ww / baseWidth, wh / baseHeight);
// Once we're below the breakpoint, only scale based on the width, not height
- if (ww < breakpoint) {
- scale = Math.min(1, ww / baseWidth);
- }
+ // if (ww < breakpoint) {
+ // scale = Math.min(1, ww / baseWidth);
+ // }
// When translating a scaled element, the translate value needs to be scaled (-50% / scale)
translateAmount = (-50 / scale) + '%';
// Different translation needed when only scaling for width
- if (ww < breakpoint) {
- scaler.css('transform', 'scale('+ scale +') translateX('+ translateAmount +')');
- scaler.css('transform-origin', 'top');
- scaler.css('top', 0);
- } else {
+ // if (ww < breakpoint) {
+ // scaler.css('transform', 'scale('+ scale +') translateX('+ translateAmount +')');
+ // scaler.css('transform-origin', 'top');
+ // scaler.css('top', 0);
+ // } else {
scaler.css('transform', 'scale('+ scale +') translate('+ translateAmount +', '+ translateAmount +')');
- }
+ // }
}
-
-/*
-function resize() {
- var ww = $(window).outerWidth();
- var hh = $(window).outerHeight();
-
- $("#background,#projector").css({width: ww, maxWidth: ww, minWidth: ww, height: hh, maxHeight: hh, minHeight: hh});
-
- var vs = $("section:visible");
- var home = vs.hasClass('home');
- $("section:visible").css('font-size', 10);
- var sh = vs.outerHeight();
- sh *= 1.1; // Margins
- if (home) {
- sh *= 1.1;
- }
- console.log('resize', sh, hh);
- var cssSection = {};
- if (sh > hh) {
- var scale = hh / sh;
- console.log('scale', scale);
- $("section:visible").css('font-size', 10 * scale);
- sh = vs.outerHeight();
- if (home) {
- sh *= 1.1;
- }
- }
- cssSection.top = Math.max((hh - sh) / 2, hh * 0.05);
-
- $("section:visible").css(cssSection);
-
- if (home) {
- $("#projector").css('bottom', Math.max(cssSection.top, hh * 0.05));
- }
-}
-*/
+//
+//
+// function resize() {
+// var ww = $(window).outerWidth();
+// var hh = $(window).outerHeight();
+//
+// $("#background,#projector").css({width: ww, maxWidth: ww, minWidth: ww, height: hh, maxHeight: hh, minHeight: hh});
+//
+// var vs = $("section:visible");
+// var home = vs.hasClass('home');
+// $("section:visible").css('font-size', 10);
+// var sh = vs.outerHeight();
+// sh *= 1.1; // Margins
+// if (home) {
+// sh *= 1.1;
+// }
+// console.log('resize', sh, hh);
+// var cssSection = {};
+// if (sh > hh) {
+// var scale = hh / sh;
+// console.log('scale', scale);
+// $("section:visible").css('font-size', 10 * scale);
+// sh = vs.outerHeight();
+// if (home) {
+// sh *= 1.1;
+// }
+// }
+// cssSection.top = Math.max((hh - sh) / 2, hh * 0.05);
+//
+// $("section:visible").css(cssSection);
+//
+// if (home) {
+// $("#projector").css('bottom', Math.max(cssSection.top, hh * 0.05));
+// }
+// }
+//
$green: #669933
$darkblue: #18264f
+$base-font-size: 16 // Default
+
+@function rem($pixels, $context: $base-font-size)
+ @return #{$pixels/$context}rem
*
margin: 0
font-family: Helvetica, sans-serif
height: 100%
max-height: 100%
+ font-size: 16px
body
font-family: Helvetica, sans-serif
+ font-size: rem(30)
height: 100%
max-height: 100%
background-color: #0a246e
max-width: 100%
opacity: 0
transition: opacity 500ms
-
&.loaded
opacity: 1
-
#container
//min-height: 100%
//height: 100%
//min-width: 100%
//overflow-x: hidden
//overflow-y: auto
+ padding: 80px
position: absolute
z-index: 2
top: 50%
left: 50%
- //transform: translate(-50%, -50%)
+ transform: translate(-50%, -50%)
+ //width: 100%
.active
display: block !important
.section
display: none
- height: 100%
+ //height: 100%
+ width: 1500px
+
+ @media (max-width: 750px)
+ width: 750px
a.btn-next
text-decoration: none
section
z-index: 1
position: relative
- max-width: 1200px
- padding: 0 2em
+ //max-width: 1200px
margin: 0 auto
- font-size: 10px
+ //font-size: 10px
text-align: center
h1
- font-size: 9em
+ font-size: rem(90)
h2
- font-size: 6em
+ font-size: rem(60)
h3
- font-size: 3.7em
+ font-size: rem(37)
margin-top: 1.62em
- line-height: 1.5em
+ line-height: 1.5
h4
- font-size: 2.45em
- line-height: 1.5em
+ line-height: 1.5
a.button
display: inline-block
- font-size: 5.6em
+ font-size: rem(55)
color: #fff
background-color: $green
border-radius: 1.25em
#background
position: absolute
top: 0
+ right: 0
+ bottom: 0
left: 0
#projector
position: absolute
- bottom: 0
- width: 100%
- height: 100%
+ top: 0
+ right: 0
+ bottom: 5%
left: 0
background-image: url("../images/projector.svg")
background-repeat: no-repeat
.questions
position: static
- padding-top: 3em
-
#questionNumber
- margin-top: 1em
text-transform: uppercase
margin-bottom: 20px
-
&::after
content: ''
display: block
#questionAsk
margin: 4em auto 2em auto
- max-width: 31em
+ max-width: 800px
+ @media (max-width: 750px)
+ max-width: 1200px
ul
list-style: none
position: relative
max-width: 40em
min-width: 30em
- height: 9em
+ height: 3.33em
background: white
margin: 0 auto
border-radius: 5.25em
margin-bottom: 2em
cursor: pointer
transition: 400ms all ease
+ font-size: rem(30)
&--text
- font-size: 1.9em
color: $darkblue
padding-left: 1.6em
padding-right: 0.5em
&--letter
color: white
left: 1.8em
- font-size: 2.2em
+ font-size: rem(25)
&--circle
- width: 5em
- height: 5em
+ width: 2em
+ height: 2em
background: #669933
border-radius: 50%
position: relative
left: 0
.correctInfo
- font-size: 2em
+ font-size: rem(30)
.correctAnswer
margin-top: 2em
color: white
.response
- font-size: 2.2em
+ font-size: rem(30)
max-width: 27em
margin: 2em auto 0 auto
-section.questions a.button.next
- font-size: 3.6em
- z-index: 5
- position: relative
- margin-top: 1.14em
- margin-bottom: 2em
+//section.questions a.button.next
+// font-size: rem(44)
+// z-index: 5
+// position: relative
+// margin-top: 1.14em
+// margin-bottom: 2em
.circleContainer
- span
- display: inline-flex
- justify-content: center
- align-items: center
+ //span
+ // display: inline-flex
+ // justify-content: center
+ // align-items: center
+ display: flex !important
+ align-items: center
+ justify-content: space-around
+ flex-wrap: wrap
+ margin-bottom: -50px
- .questionsCircle
+ .questionsCircle
+ width: 320px
+ height: 320px
+ background: white
+ //display: inline-block
+ cursor: pointer
+ //padding: 10em
+ margin-bottom: 50px
+ border-radius: 50%
+ position: relative
+ background-size: cover
+ border: 3px solid white
+
+ &__container
+ display: flex
+ justify-content: center
+ align-items: center
width: 2em
height: 2em
- background: white
- display: inline-block
- cursor: pointer
- padding: 10em
- margin: 2em
+ //padding: 2em
+ background: $green
border-radius: 50%
- position: relative
- background-size: cover
- border: 3px solid white
-
- &__container
- display: flex
- justify-content: center
- align-items: center
- width: 2em
- height: 2em
- padding: 2em
- background: $green
- border-radius: 50%
- position: absolute
- left: 1em
- top: 1em
- color: white
-
- &--letter
- font-size: 1.5em
+ position: absolute
+ left: 1em
+ top: 1em
+ color: white
+ &--letter
+ font-size: rem(25)
.answerCircle
border: solid 3px $green !important
left: 50% !important
transform: translateX(-50%)
-
.borderScore
border-radius: 50%
width: 10em
.inner
color: $darkblue
- font-size: 8em
+ font-size: rem(30)
@media only screen and (max-width: 529px)
projects / bonaquiz.git / commitdiff