diff --git a/css/style.css b/css/style.css index e9acf52..935b95f 100644 --- a/css/style.css +++ b/css/style.css @@ -17,9 +17,6 @@ color: rgba(255, 255, 255, 0.3); .hidden.menu { display: none; } -.masthead.segment { - min-height: 300px; -} .masthead a h1 { color: #fff; font-weight: bold; @@ -42,11 +39,11 @@ color: rgba(255, 255, 255, 0.3); } .masthead h3 { background-color: black; - padding: 5em 0; + padding: 42.5vh 0; font-size: 5rem; } -.masthead .divider { +.masthead .ui.horizontal.divider { padding: 3em; margin: 0; } @@ -87,7 +84,6 @@ color: rgba(255, 255, 255, 0.3); .ui.vertical.stripe .horizontal.divider { margin: 3em 0em; } - .quote.stripe.segment { padding: 0em; } @@ -109,20 +105,23 @@ color: rgba(255, 255, 255, 0.3); } @media only screen and (max-width: 700px) { -.ui.fixed.menu { - display: none !important; -} -.secondary.pointing.menu .item, -.secondary.pointing.menu .menu { - display: none; -} -.secondary.pointing.menu .toc.item { - display: block; -} -#demo-result > .row > .column, -#showcase .ui.stackable.grid > .row > .column { - width: 33.3% !important; -} + .ui.fixed.menu { + display: none !important; + } + .secondary.pointing.menu .item, + .secondary.pointing.menu .menu { + display: none; + } + .secondary.pointing.menu .toc.item { + display: block; + } + #demo-result > .row > .column, + #showcase .ui.stackable.grid > .row > .column { + width: 33.3% !important; + } + .masthead h3 { + font-size: 2em; + } } .what-provides { diff --git a/index.html b/index.html index d674a22..1885f37 100644 --- a/index.html +++ b/index.html @@ -36,14 +36,14 @@
- What your browser provides = 😱😵💫❓ + What your browser provides = 😱😵💫❌
- What {UAParser.js} provides = 🙂👍🎉 + What {UAParser.js} provides = 🙂💰✅
diff --git a/js/script.js b/js/script.js
index b0ecfcb..4925a0d 100644
--- a/js/script.js
+++ b/js/script.js
@@ -6,12 +6,13 @@ $(document)
$('.masthead h3 .label').transition('fly down', function () {
$(this).text(labels[counter++]).transition('fade up', 100, function (){
if(counter>=labels.length)counter=0;
- $(this).transition('jiggle');
+ $(this).transition('tada');
});
});
- }
+ };
+ $('.masthead h3').transition({animation: 'slide up', interval: 9000});
rotateLabel();
- setInterval(rotateLabel, 3000);
+ setInterval(rotateLabel, 1000);
var updateDemo = function (result) {
if(!result) return;
@@ -107,8 +108,8 @@ $(document)
qs = new URLSearchParams(window.location.search).get('ua');
}
if (qs) {
- $('#ua-txt-info').text('What the browser provides = 😱😵💫❓');
- $('#ua-txt').get(0).scrollIntoView();
+ $('#ua-txt-info').text('What the browser provides = 😱😵💫❌');
+ $('#demo-result').get(0).scrollIntoView();
updateDemo(UAParser(qs));
} else {
UAParser().withClientHints().then(function(result) {