-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
126 lines (101 loc) · 14.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>The Hobsnobs - Biscuit Leaderboard, Ratings & Reviews</title>
<meta name="description" content="On a mission to find the best biscuit in the world.">
<style type="text/css">
*{margin:0;padding:0}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%}body{background:#f4f8f9;color:#627289;font:16px/1.5 Source Sans Pro, serif;min-height:100vh;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}body.fixed{overflow:hidden}button{-webkit-appearance:none;-moz-appearance:none;border:none;font-family:inherit}button:active,button:focus{outline:none}a{color:#fa7500}img{max-width:100%}.icon{display:inline-block;width:1em;height:1em;stroke-width:0;stroke:currentColor;fill:currentColor}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.lazyload,.lazyloading{opacity:0}.lazyloaded{opacity:1;transition:opacity 300ms}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:300;font-display:swap;src:local("Source Sans Pro Light"), local("SourceSansPro-Light"), url("/fonts/source-sans-pro-300.woff2") format("woff2"), url("/fonts/source-sans-pro-300.woff") format("woff")}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:local("Source Sans Pro Regular"), local("SourceSansPro-Regular"), url("/fonts/source-sans-pro-400.woff2") format("woff2"), url("/fonts/source-sans-pro-400.woff") format("woff")}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:600;font-display:swap;src:local("Source Sans Pro SemiBold"), local("SourceSansPro-SemiBold"), url("/fonts/source-sans-pro-600.woff2") format("woff2"), url("/fonts/source-sans-pro-600.woff") format("woff")}@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:700;font-display:swap;src:local("Source Sans Pro Bold"), local("SourceSansPro-Bold"), url("/fonts/source-sans-pro-700.woff2") format("woff2"), url("/fonts/source-sans-pro-700.woff") format("woff")}header{background:#fff;padding:15px;height:80px;text-align:center}@media (min-width:750px){header{text-align:left}}.site-logo img{max-width:130px}.intro-section{text-align:center;padding:100px 20px 60px;max-width:380px;margin:0 auto}@media (min-width:750px){.intro-section{padding-top:70px;max-width:500px}}.intro-section h3{font-weight:600;margin-top:40px;margin-bottom:10px;padding:5px 10px;background:#eaf2f4;display:inline-block;font-size:1.5rem}.intro-section ul{list-style:none}.intro-section a{color:#fa7500}.intro-section a:hover{background:#f5efe9}.hero-headline{font-size:2.8rem;line-height:1.1;margin-bottom:10px;font-weight:900}@media (min-width:750px){.hero-headline{font-size:4rem}}.hero-tagline{font-size:1.7rem;font-weight:300}@media (min-width:750px){.hero-tagline{font-size:2.2rem}}.scores-key li{font-size:2rem;padding:2px 0;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-align:center;-webkit-align-items:center;align-items:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center}.scores-key span{font-size:3rem;margin-right:10px}.scores-key strong{margin-left:6px;font-weight:600}.leaderboard-section{display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin-bottom:100px;position:relative;min-height:350px}.leaderboard-section .loader{top:60%}.leaderboard-section>div{background:#fff;padding:0;width:100%}@media (min-width:750px){.leaderboard-section>div{padding:30px;box-shadow:0 0 20px #e8f0f3;width:auto}}.leaderboard-section h1{text-align:center;width:100%;font-weight:300;font-size:3rem;margin-bottom:25px}.leaderboard-section h1 span{font-size:1.4rem;display:block}.leaderboard-section tr{border-top:1px solid #e8ebf2;transition:.3s;background:#fff;cursor:pointer}@media (min-width:750px){.leaderboard-section tr{border:1px solid #e8ebf2}}@media (min-width:750px){.leaderboard-section tbody tr:hover{transform:scale(1.03);box-shadow:0 2px 15px #e0e4e4;z-index:100}.leaderboard-section tbody tr:hover td.bl-num{background:#b5d3da;color:#fff}.leaderboard-section tbody tr:hover .bl-review{opacity:1}}.biscuit-leaderboard{width:100%}@media (min-width:750px){.biscuit-leaderboard{width:auto}}.orderby-text{padding:15px 15px 5px;font-size:1.2rem;text-align:center;display:block;text-transform:uppercase}@media (min-width:750px){.orderby-text{display:none}}.bl-thead tr{display:-ms-flexbox;display:-webkit-flex;display:flex;width:100%;margin-bottom:20px;border:none;padding:0 20px}@media (min-width:750px){.bl-thead tr{border:1px solid #e8ebf2;display:table-row;margin-bottom:0;padding:0}}.bl-thead th{background:#eaf2f4;transition:.3s;text-align:center;font-weight:600;line-height:1.3;display:inline-block;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-align:center;-webkit-align-items:center;align-items:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-ms-flex:1;-webkit-flex:1;flex:1;padding:20px 10px;border-right:1px solid rgba(0, 0, 0, 0.05)}.bl-thead th:last-child{border:none}.bl-thead th.order-active,.bl-thead th.order-active.order-active:hover{background:#e0ebee;box-shadow:inset 2px 2px 10px rgba(0, 0, 0, 0.04)}@media (min-width:600px){.bl-thead th{-ms-flex:auto;-webkit-flex:auto;flex:auto}}@media (min-width:750px){.bl-thead th{background:#f4f8f9;display:table-cell;padding:18px 25px;border:none}.bl-thead th.order-active,.bl-thead th.order-active.order-active:hover{background:#e4eef0}}@media (min-width:1000px){.bl-thead th{text-align:left}}.bl-thead th:not(:nth-of-type(-n+2)){cursor:pointer}.bl-thead th:not(:nth-of-type(-n+2)):hover{background:#eaf2f4}.bl-thead .th-num{display:none}@media (min-width:750px){.bl-thead .th-num{display:table-cell}}.bl-thead .th-biscuits{display:none}@media (min-width:750px){.bl-thead .th-biscuits{display:table-cell}}.bl-tbody tr{display:-ms-flexbox;display:-webkit-flex;display:flex}@media (min-width:750px){.bl-tbody tr{display:table-row}}.bl-tbody td{width:auto;display:inline-block;padding:15px 10px;text-align:center;-ms-flex:1;-webkit-flex:1;flex:1}@media (min-width:750px){.bl-tbody td{display:table-cell;padding:18px 25px;border-top:1px solid #e8ebf2}}@media (min-width:1000px){.bl-tbody td{text-align:left}}.bl-tbody .bl-num{display:none}@media (min-width:375px){.bl-tbody .bl-num{display:table-cell;background:#e0ebee;max-width:24px;padding:12px 0px;text-align:center;color:#83a4ad}}@media (min-width:750px){.bl-tbody .bl-num{padding:18px 0px;max-width:none;background:#f9fcfd;color:#b7bfc1}}.bl-tbody .bl-biscuit{-ms-flex:5;-webkit-flex:5;flex:5;padding:15px 10px;line-height:1.3;text-align:left}@media (min-width:750px){.bl-tbody .bl-biscuit{padding:18px 25px}}.bl-tbody .bl-brand{display:block;font-size:1.5rem;line-height:1.2;color:#a1acbc}.bl-tbody .bl-biscuit-name{font-size:1.65rem;line-height:1.2;font-weight:600}@media (min-width:1000px){.bl-tbody .bl-biscuit-name{margin-right:10px}}.bl-tbody .bl-review{font-size:1rem;padding:0 3px 1px;border:1px solid #bbb;color:#444;opacity:.5;display:block;width:36px;margin-top:7px}@media (min-width:1000px){.bl-tbody .bl-review{display:inline-block;margin-top:0}}.bl-tbody .bl-total{font-weight:600}@media (min-width:750px){.bl-tbody .bl-total{font-size:1.8rem}}.bl-tbody .bl-emoji{display:block}@media (min-width:1000px){.bl-tbody .bl-emoji{display:inline}}.insta-modal{position:fixed;top:0;left:50%;opacity:0;visibility:hidden;transition:.4s;width:100%;height:100%;transform:translateX(-50%);z-index:100;background:rgba(0, 0, 0, 0.8);display:-ms-flexbox;display:-webkit-flex;display:flex}@media (min-width:600px){.insta-modal{padding:30px}}.insta-modal.active{opacity:1;visibility:visible;-webkit-overflow-scrolling:touch;overflow-y:scroll}.insta-modal>div{width:100%;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:10px;margin:auto;min-height:600px}.insta-modal .ins-post{width:100%;max-width:450px;background:#fff}.insta-modal iframe{border-left:none!important;width:100%!important;border-radius:0!important;margin:0!important}.insta-modal .ins-review{width:100%;max-width:450px;background:#fff;padding:15px 15px 80px;white-space:pre-wrap}.insta-modal .ins-review:first-line{font-weight:600}@media (min-width:600px){.insta-modal .ins-review{padding:30px}}.loader{width:10px;height:60px;border-top:3px solid #888;border-bottom:3px solid #888;animation:loader .8s linear infinite;position:absolute;top:50%;left:50%;margin-left:-5px;margin-top:-30px;z-index:10;display:none}.loader.active{display:inline-block}.modal-close{position:fixed;bottom:0;right:0;display:inline-block;background:#fff;cursor:pointer;transition:.3s;z-index:150;display:none;width:100%;padding:15px;background:#000;opacity:.88}@media (min-width:600px){.modal-close{width:auto;top:3px;right:3px;bottom:auto;border-radius:50%;border:2px solid #fff;padding:0;background:#fff;opacity:1}.modal-close:hover{background:#fa7500;border-color:#fa7500}}@media (min-width:1200px){.modal-close{top:20px;right:20px}}.modal-close.active{display:block;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}@media (min-width:600px){.modal-close.active{display:block}}.modal-close img{width:30px;height:30px;display:block;border-radius:50%;border:2px solid #fff;background:#fff}@media (min-width:600px){.modal-close img{width:50px;height:50px;border:none;background:transparent}}.modal-close span{font-size:1.8rem;color:#fff;margin-left:10px}@media (min-width:600px){.modal-close span{display:none}}@keyframes loader{to{transform:rotate(360deg)}}footer{text-align:center;padding-bottom:30px}
</style>
<script>
function loadCSS(e,t,n){"use strict";function o(){var t;for(var i=0;i<s.length;i++){if(s[i].href&&s[i].href.indexOf(e)>-1){t=true}}if(t){r.media=n||"all"}else{setTimeout(o)}}var r=window.document.createElement("link");var i=t||window.document.getElementsByTagName("script")[0];var s=window.document.styleSheets;r.rel="stylesheet";r.href=e;r.media="only x";i.parentNode.insertBefore(r,i);o();return r}
loadCSS( "/css/main.css" );
</script>
<noscript>
<link rel="stylesheet" href="/css/main.css">
</noscript>
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="Hobsnobs">
<meta name="apple-mobile-web-app-title" content="Hobsnobs">
<meta name="msapplication-navbutton-color" content="#fa7500">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="msapplication-starturl" content="https://www.thehobsnobs.com">
<link rel="apple-touch-icon" sizes="152x152" href="/images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#fa7500">
<meta name="theme-color" content="#fa7500">
<meta property="og:image" content="/images/og-image.jpg">
<meta property="og:image:secure_url" content="https://www.thehobsnobs.com/images/og-image.jpg" />
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="On a mission to find the best biscuit in the world.">
<meta property="og:title" content="The Hobsnobs - Biscuit Leaderboard, Ratings & Reviews">
<meta property="og:url" content="https://www.thehobsnobs.com">
<meta property="og:locale" content="en_GB" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="The Hobsnobs - Biscuit Leaderboard, Ratings & Reviews">
<meta name="twitter:description" content="On a mission to find the best biscuit in the world.">
<meta name="twitter:image" content="https://www.thehobsnobs.com/images/og-image.jpg" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-137709330-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-137709330-1');
</script>
</head>
<body>
<header>
<a class="site-logo" href="/"><img src="/images/logo-hobsnobs.png" alt="The Hobsnobs logo"></a>
</header>
<section class="intro-section">
<h1 class="hero-headline">On a mission to find the best biscuit in the world.</h1>
<p class="hero-tagline">Follow the journey on Instagram <a target="_blank" href="https://www.instagram.com/thehobsnobs/">@thehobsnobs</a></p>
<h3>Scores weighted as follows:</h3>
<ul class="scores-key">
<li><span>🤤</span> Taste: <strong>50%</strong></li>
<li><span>🍪</span> Texture: <strong>30%</strong></li>
<li><span>🚑</span> Relative Healthiness: <strong>20%</strong></li>
</ul>
</section>
<section class="leaderboard-section">
<div>
<span class="orderby-text">Order by:</span>
<table class="biscuit-leaderboard">
<thead class="bl-thead">
<tr>
<th class="th-num">#</th>
<th class="th-biscuits">Biscuits rated so far</th>
<th class="th-taste" data-orderby="taste"> Taste</th>
<th class="th-texture" data-orderby="texture">Texture</th>
<th class="th-health" data-orderby="health">Relative Healthiness</th>
<th class="th-overall order-active" data-orderby="overall_perc">Total Score</th>
</tr>
</thead>
<tbody class="bl-tbody">
</tbody>
</table>
<div class="loader active"></div>
</div>
</section>
<div class="insta-modal">
<div>
<div class="ins-post"><div class="loader"></div></div>
<div class="ins-review"></div>
</div>
</div>
<button class="modal-close"><img src="/images/close.svg" alt="Close"> <span>Close</span></button>
<footer>
<p>Follow the journey on Instagram <a target="_blank" href="https://www.instagram.com/thehobsnobs/">@thehobsnobs</a></p>
</footer>
<script async src="https://www.instagram.com/embed.js"></script>
<script src="/app-dist.js"></script>
</body>
</html>