Permalink
Browse files

Click the question mark, YouTube.

  • Loading branch information...
AhoyLemon committed Apr 21, 2017
1 parent 195bee8 commit 73898c05fb1bf110a46e3947f88e46a2c322d2fa
Showing with 3,085 additions and 351 deletions.
  1. +606 −227 css/damn.css
  2. +111 −109 index.html
  3. +1 −1 prepros-6.config
  4. +2 −2 pug/index.pug
  5. +5 −3 pug/partials/_header.pug
  6. +2 −2 pug/partials/_sidebar.pug
  7. +0 −1 sass/partials/_defaults.scss
  8. +8 −6 sass/partials/_header.scss
  9. +2,350 −0 svg/Brand Wide.ai
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -5,10 +5,10 @@
<title>damn.dog</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab:100,400,300,700|Roboto:400,300,700,400italic">
- <link rel="stylesheet" href="css/damn.css?v=2017-03-18@14:34:26">
+ <link rel="stylesheet" href="css/damn.css?v=2017-03-21@11:13:56">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A guessing game for wikiHow illustrations.">
- <meta http-equiv="last-modified" content="2017-03-18@14:34:26">
+ <meta http-equiv="last-modified" content="2017-03-21@11:13:56">
<!-- favicons-->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
@@ -53,12 +53,14 @@
<div class="box percent-box"><span class="percent label">correct</span><span class="percent number" id="ScorePercent">0%</span></div>
<div class="box hamburger-holder">
<button class="hamburger">
- <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+ <circle class="fill" cx="50.6" cy="49.7" r="42"></circle>
+ <path class="outline" d="M50 96C24.6 96 4 75.4 4 50S24.6 4 50 4s46 20.6 46 46-20.6 46-46 46zm0-86.2C27.8 9.8 9.8 27.8 9.8 50s18 40.3 40.2 40.3S90.3 72.2 90.3 50 72.2 9.8 50 9.8z"></path>
<g class="open" id="HamburgerOpen">
- <path d="M28.8 6.9H3.2c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5h25.6c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5zM28.8 17.5H3.2c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5h25.6c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5zM28.8 28H3.2c-.8 0-1.5-.7-1.5-1.5S2.4 25 3.2 25h25.6c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5z"></path>
+ <path class="question-mark" d="M47.6 58.9c-.6-.7-.9-1.6-.9-2.8 0-2.4.4-4.3 1.3-5.9.9-1.6 2.1-3.3 3.8-5.2 1.2-1.4 2.2-2.6 2.7-3.6.6-.9.9-2 .9-3.2 0-1.3-.5-2.3-1.4-3.1-1-.7-2.3-1.1-3.9-1.1-1.5 0-2.9.3-4.1.9-1.3.6-3 1.5-5.1 2.8-1.3.7-2.4 1.1-3.3 1.1-1 0-1.8-.4-2.5-1.3s-1-1.9-1-3.1c0-.8.1-1.5.5-2.1.3-.6.8-1.1 1.4-1.6 2-1.6 4.4-2.9 7-3.8 2.7-.9 5.3-1.4 8-1.4 2.9 0 5.4.5 7.7 1.5s4.1 2.4 5.3 4.2c1.3 1.8 1.9 3.8 1.9 6 0 1.7-.3 3.3-1 4.7-.7 1.4-1.5 2.6-2.4 3.7-.9 1-2.2 2.3-3.7 3.8-1.8 1.6-3.1 3-4 4.1-.9 1.1-1.4 2.3-1.7 3.6-.2.9-.6 1.6-1.1 2-.6.5-1.3.7-2.1.7-1 .1-1.8-.2-2.3-.9zm-1.7 14.8c-1.1-1.1-1.7-2.6-1.7-4.3 0-1.7.6-3.1 1.7-4.3s2.5-1.7 4.2-1.7c1.7 0 3 .6 4.2 1.7 1.1 1.1 1.7 2.6 1.7 4.3 0 1.7-.6 3.1-1.7 4.3-1.1 1.1-2.5 1.7-4.2 1.7-1.7 0-3.1-.5-4.2-1.7z"></path>
</g>
<g class="close" id="HamburgerClose">
- <path d="M29.7 25.4L18.3 16l11.3-9.5c.6-.5.7-1.5.2-2.1-.5-.6-1.5-.7-2.1-.2L16 14 4.1 4.2c-.6-.5-1.5-.4-2.1.2-.5.7-.4 1.6.2 2.1L13.6 16 2.3 25.5c-.6.5-.7 1.5-.2 2.1.3.4.7.5 1.1.5.3 0 .7-.1 1-.4L16 17.9l11.8 9.8c.3.2.6.3 1 .3s.9-.2 1.2-.5c.5-.6.4-1.6-.3-2.1z"></path>
+ <path class="x" d="M70.3 69c0 1.3-.5 2.4-1.5 3.3-1 .9-2.1 1.4-3.4 1.4-1.3 0-2.4-.6-3.4-1.7L49.6 56.9 37 72.1c-1 1.1-2.1 1.7-3.4 1.7-1.2 0-2.3-.5-3.3-1.4-1-.9-1.5-2.1-1.5-3.3 0-1.1.4-2.1 1.2-3L43.5 50l-13-15.8c-.8-1-1.3-2-1.3-3 0-1.3.5-2.4 1.5-3.3 1-.9 2.1-1.4 3.3-1.4 1.3 0 2.5.6 3.4 1.7l12.1 14.6 12-14.6c1-1.1 2.1-1.7 3.4-1.7 1.2 0 2.3.5 3.3 1.4 1 .9 1.5 2.1 1.5 3.3 0 1.1-.4 2.1-1.2 3l-13 15.6L69 65.9c.9 1 1.3 2 1.3 3.1z"></path>
</g>
</svg>
</button>
@@ -70,7 +72,7 @@
<li><span class="label">Game by</span><span class="indent"><a href="http://ahoylemon.xyz" target="blank" onclick="sendGA('outside link', 'http://ahoylemon.xyz')">Lemon</a></span></li>
<li> <span class="label">Current round count</span><span class="indent"><span class="number-of-rounds"></span></span></li>
<li><span class="label">Global average</span><span class="indent">63% correct</span></li>
- <li> <span class="label">There's a</span><span class="indent"><a href="https://github.com/AhoyLemon/Damn-Dog" target="blank" onclick="sendGA('outside link', 'https://github.com/AhoyLemon/Damn-Dog')">GitHub repo</a></span></li>
+ <li> <span class="label">Learn more</span><span class="indent"><a href="https://github.com/AhoyLemon/Damn-Dog#readme" target="blank" onclick="sendGA('outside link', 'https://github.com/AhoyLemon/Damn-Dog')">here</a></span></li>
<li><span class="label">You can</span><span class="indent"><a id="OpenSharebox">share this round.</a></span></li>
<li id="AddToHomeScreen"><span class="label">or </span><span class="indent"> <a style="font-weight:bold;" id="HomescreenLink"></a></span></li>
<li class="smaller">Your progress will be saved if you close this browser.</li>
@@ -92,108 +94,6 @@
</div>
</div>
<main>
- <script type="application/ld+json">
- {
- "@context": "http://schema.org",
- "@type": "VideoGame",
- "name": "damn.dog",
- "url": "http://damn.dog",
- "sameAs": "https://thefpl.us/also-made/damn-dog",
- "alternateName": "The wikiHow Illustration Game",
- "image": "http://damn.dog/img/og-image.png",
- "playMode": "SinglePlayer",
- "applicationCategory": "browser game",
- "gamePlatform": "web browser",
- "operatingSystem": "web browser",
- "genre": "guessing game",
- "description": "A guessing game for wikiHow illustrations.",
- "inLanguage": "English",
- "author": {
- "@type": "Person",
- "name": "Lemon",
- "url": "http://ahoylemon.xyz",
- "sameAs": [
- "https://thefpl.us/meet/lemon",
- "https://twitter.com/AhoyLemon"
- ]
- },
- "publisher": {
- "@type": "PerformingGroup",
- "name": "The F Plus",
- "url": "https://thefpl.us"
- },
- "offers": {
- "@type": "Offer",
- "description": "free",
- "price": "0",
- "priceCurrency": "USD"
- },
- "screenshot": [
- {
- "@type": "ImageObject",
- "url": "http://damn.dog/img/screenshots/ss1.jpg",
- "width": "800",
- "height": "800"
- },
- {
- "@type": "ImageObject",
- "url": "http://damn.dog/img/screenshots/ss2.jpg",
- "width": "600",
- "height": "745"
- },
- {
- "@type": "ImageObject",
- "url": "http://damn.dog/img/screenshots/ss3.jpg",
- "width": "898",
- "height": "757"
- },
- {
- "@type": "ImageObject",
- "url": "http://damn.dog/img/screenshots/ss4.jpg",
- "width": "444",
- "height": "747"
- }
- ],
- "reviews": [
- {
- "name": "Tumblr",
- "url": "https://lunulata.tumblr.com/post/142591221607/this-is-a-good-game-because-these-are-all-real",
- "author": "lunulata"
- },
- {
- "name": "Rock Paper Shotgun",
- "url": "https://www.rockpapershotgun.com/2016/04/11/wikihow-game/",
- "author": "Adam Smith"
- },
- {
- "name": "Destructoid",
- "url": "http://www.destructoid.com/it-s-surprisingly-difficult-to-guess-wikihow-articles-based-on-header-images-354627.phtml",
- "author": "Darren Nakamura"
- },
- {
- "name": "Kotaku UK",
- "url": "http://www.kotaku.co.uk/2016/04/11/the-wikihow-illustration-game-made-me-spray-tea-through-my-nose",
- "author": "Julian Benson"
- },
- {
- "name": "Daily Dot",
- "url": "http://www.dailydot.com/lol/damn-dog-wikihow-illustration-guessing-game/",
- "author": "Jay Hathaway"
- },
- {
- "name": "Gizmodo",
- "url": "http://www.gizmodo.com.au/2016/04/the-best-game-on-the-internet-is-all-about-weird-wikihow-illustrations/",
- "author": "Hayley Williams"
- }
- ],
- "aggregateRating": {
- "@type": "AggregateRating",
- "ratingValue": "5",
- "reviewCount": "6"
- },
- "award": "The Best Game On The Internet -Gizmodo"
- }
- </script>
<!-- PAGE CONTENT-->
<section class="image-holder">
<div class="child">
@@ -242,7 +142,7 @@ <h2>GAME OVER</h2>
</div>
</section>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
- <script src="js/min/damn.min.js?v=2017-03-18@14:34:26"></script>
+ <script src="js/min/damn.min.js?v=2017-03-21@11:13:56"></script>
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
@@ -252,5 +152,107 @@ <h2>GAME OVER</h2>
ga('create', 'UA-15129990-16', 'auto');
ga('send', 'pageview');
</script>
+ <script type="application/ld+json">
+ {
+ "@context": "http://schema.org",
+ "@type": "VideoGame",
+ "name": "damn.dog",
+ "url": "http://damn.dog",
+ "sameAs": "https://thefpl.us/also-made/damn-dog",
+ "alternateName": "The wikiHow Illustration Game",
+ "image": "http://damn.dog/img/og-image.png",
+ "playMode": "SinglePlayer",
+ "applicationCategory": "browser game",
+ "gamePlatform": "web browser",
+ "operatingSystem": "web browser",
+ "genre": "guessing game",
+ "description": "A guessing game for wikiHow illustrations.",
+ "inLanguage": "English",
+ "author": {
+ "@type": "Person",
+ "name": "Lemon",
+ "url": "http://ahoylemon.xyz",
+ "sameAs": [
+ "https://thefpl.us/meet/lemon",
+ "https://twitter.com/AhoyLemon"
+ ]
+ },
+ "publisher": {
+ "@type": "PerformingGroup",
+ "name": "The F Plus",
+ "url": "https://thefpl.us"
+ },
+ "offers": {
+ "@type": "Offer",
+ "description": "free",
+ "price": "0",
+ "priceCurrency": "USD"
+ },
+ "screenshot": [
+ {
+ "@type": "ImageObject",
+ "url": "http://damn.dog/img/screenshots/ss1.jpg",
+ "width": "800",
+ "height": "800"
+ },
+ {
+ "@type": "ImageObject",
+ "url": "http://damn.dog/img/screenshots/ss2.jpg",
+ "width": "600",
+ "height": "745"
+ },
+ {
+ "@type": "ImageObject",
+ "url": "http://damn.dog/img/screenshots/ss3.jpg",
+ "width": "898",
+ "height": "757"
+ },
+ {
+ "@type": "ImageObject",
+ "url": "http://damn.dog/img/screenshots/ss4.jpg",
+ "width": "444",
+ "height": "747"
+ }
+ ],
+ "reviews": [
+ {
+ "name": "Tumblr",
+ "url": "https://lunulata.tumblr.com/post/142591221607/this-is-a-good-game-because-these-are-all-real",
+ "author": "lunulata"
+ },
+ {
+ "name": "Rock Paper Shotgun",
+ "url": "https://www.rockpapershotgun.com/2016/04/11/wikihow-game/",
+ "author": "Adam Smith"
+ },
+ {
+ "name": "Destructoid",
+ "url": "http://www.destructoid.com/it-s-surprisingly-difficult-to-guess-wikihow-articles-based-on-header-images-354627.phtml",
+ "author": "Darren Nakamura"
+ },
+ {
+ "name": "Kotaku UK",
+ "url": "http://www.kotaku.co.uk/2016/04/11/the-wikihow-illustration-game-made-me-spray-tea-through-my-nose",
+ "author": "Julian Benson"
+ },
+ {
+ "name": "Daily Dot",
+ "url": "http://www.dailydot.com/lol/damn-dog-wikihow-illustration-guessing-game/",
+ "author": "Jay Hathaway"
+ },
+ {
+ "name": "Gizmodo",
+ "url": "http://www.gizmodo.com.au/2016/04/the-best-game-on-the-internet-is-all-about-weird-wikihow-illustrations/",
+ "author": "Hayley Williams"
+ }
+ ],
+ "aggregateRating": {
+ "@type": "AggregateRating",
+ "ratingValue": "5",
+ "reviewCount": "6"
+ },
+ "award": "The Best Game On The Internet -Gizmodo"
+ }
+ </script>
</body>
</html>
View
@@ -1527,9 +1527,9 @@
"pug/partials/_head.pug",
"pug/partials/_header.pug",
"pug/partials/_sidebar.pug",
- "pug/partials/_schema.pug",
"pug/partials/_gameover.pug",
"pug/partials/_javascripts.pug",
+ "pug/partials/_schema.pug",
"pug/partials/_favicons.pug",
"pug/partials/_social.pug"
]
View
@@ -16,7 +16,6 @@ html(lang="en")
main
- include partials/_schema.pug
// PAGE CONTENT
section.image-holder
.child
@@ -37,4 +36,5 @@ html(lang="en")
button#PlayAgain Play Again
include partials/_gameover.pug
- include partials/_javascripts.pug
+ include partials/_javascripts.pug
+ include partials/_schema.pug
View
@@ -8,8 +8,10 @@ header#ScoreHeader
span.percent.number#ScorePercent 0%
.box.hamburger-holder
button.hamburger
- svg(xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32")
+ svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100")
+ circle.fill(cx="50.6" cy="49.7" r="42")
+ path.outline(d="M50 96C24.6 96 4 75.4 4 50S24.6 4 50 4s46 20.6 46 46-20.6 46-46 46zm0-86.2C27.8 9.8 9.8 27.8 9.8 50s18 40.3 40.2 40.3S90.3 72.2 90.3 50 72.2 9.8 50 9.8z")
g.open#HamburgerOpen
- path(d="M28.8 6.9H3.2c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5h25.6c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5zM28.8 17.5H3.2c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5h25.6c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5zM28.8 28H3.2c-.8 0-1.5-.7-1.5-1.5S2.4 25 3.2 25h25.6c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5z")
+ path.question-mark(d="M47.6 58.9c-.6-.7-.9-1.6-.9-2.8 0-2.4.4-4.3 1.3-5.9.9-1.6 2.1-3.3 3.8-5.2 1.2-1.4 2.2-2.6 2.7-3.6.6-.9.9-2 .9-3.2 0-1.3-.5-2.3-1.4-3.1-1-.7-2.3-1.1-3.9-1.1-1.5 0-2.9.3-4.1.9-1.3.6-3 1.5-5.1 2.8-1.3.7-2.4 1.1-3.3 1.1-1 0-1.8-.4-2.5-1.3s-1-1.9-1-3.1c0-.8.1-1.5.5-2.1.3-.6.8-1.1 1.4-1.6 2-1.6 4.4-2.9 7-3.8 2.7-.9 5.3-1.4 8-1.4 2.9 0 5.4.5 7.7 1.5s4.1 2.4 5.3 4.2c1.3 1.8 1.9 3.8 1.9 6 0 1.7-.3 3.3-1 4.7-.7 1.4-1.5 2.6-2.4 3.7-.9 1-2.2 2.3-3.7 3.8-1.8 1.6-3.1 3-4 4.1-.9 1.1-1.4 2.3-1.7 3.6-.2.9-.6 1.6-1.1 2-.6.5-1.3.7-2.1.7-1 .1-1.8-.2-2.3-.9zm-1.7 14.8c-1.1-1.1-1.7-2.6-1.7-4.3 0-1.7.6-3.1 1.7-4.3s2.5-1.7 4.2-1.7c1.7 0 3 .6 4.2 1.7 1.1 1.1 1.7 2.6 1.7 4.3 0 1.7-.6 3.1-1.7 4.3-1.1 1.1-2.5 1.7-4.2 1.7-1.7 0-3.1-.5-4.2-1.7z")
g.close#HamburgerClose
- path(d="M29.7 25.4L18.3 16l11.3-9.5c.6-.5.7-1.5.2-2.1-.5-.6-1.5-.7-2.1-.2L16 14 4.1 4.2c-.6-.5-1.5-.4-2.1.2-.5.7-.4 1.6.2 2.1L13.6 16 2.3 25.5c-.6.5-.7 1.5-.2 2.1.3.4.7.5 1.1.5.3 0 .7-.1 1-.4L16 17.9l11.8 9.8c.3.2.6.3 1 .3s.9-.2 1.2-.5c.5-.6.4-1.6-.3-2.1z")
+ path.x(d="M70.3 69c0 1.3-.5 2.4-1.5 3.3-1 .9-2.1 1.4-3.4 1.4-1.3 0-2.4-.6-3.4-1.7L49.6 56.9 37 72.1c-1 1.1-2.1 1.7-3.4 1.7-1.2 0-2.3-.5-3.3-1.4-1-.9-1.5-2.1-1.5-3.3 0-1.1.4-2.1 1.2-3L43.5 50l-13-15.8c-.8-1-1.3-2-1.3-3 0-1.3.5-2.4 1.5-3.3 1-.9 2.1-1.4 3.3-1.4 1.3 0 2.5.6 3.4 1.7l12.1 14.6 12-14.6c1-1.1 2.1-1.7 3.4-1.7 1.2 0 2.3.5 3.3 1.4 1 .9 1.5 2.1 1.5 3.3 0 1.1-.4 2.1-1.2 3l-13 15.6L69 65.9c.9 1 1.3 2 1.3 3.1z")
@@ -18,9 +18,9 @@
span.indent
| 63% correct
li
- span.label There's a
+ span.label Learn more
span.indent
- a(href="https://github.com/AhoyLemon/Damn-Dog" target="blank" onclick="sendGA('outside link', 'https://github.com/AhoyLemon/Damn-Dog')") GitHub repo
+ a(href="https://github.com/AhoyLemon/Damn-Dog#readme" target="blank" onclick="sendGA('outside link', 'https://github.com/AhoyLemon/Damn-Dog')") here
li
span.label You can
span.indent
@@ -1,5 +1,4 @@
body { font-family: $font; font-size:$font-size; background:$dark; }
h1, h2, h3, h4, h5 h6 { font-family: $headline; }
p { padding-bottom: 1em; }
-.button { @extend %button; }
svg * { fill:currentColor; }
View
@@ -11,13 +11,15 @@ header { background-color:$lessdark; @include position(fixed,0,0,null,0); paddin
.box { @include flex-item(50%); text-align: center; }
}
- .hamburger { background:transparent; border:none; cursor: pointer; color:$blue; outline:none; height: $header-height; width: $header-height; @include position(absolute,0,2rem);
- svg { }
- g { transform-origin: center; transition:all 0.3s linear; }
- .close { opacity: 0.2; transform: scale(0.2); }
+ .hamburger { background:transparent; padding:3px; border:none; cursor: pointer; color:$blue; outline:none; height: $header-height; width: $header-height; @include position(absolute,0,2rem);
+ .fill, .x { opacity: 0; }
+ &:hover {
+ .fill { opacity: 1; }
+ .question-mark, .x { fill:$dark; }
+ }
&.is-active {
- .close { opacity: 1; transform: scale(1);}
- .open { opacity: 0.2; transform: scale(0.2);}
+ .question-mark { opacity: 0; }
+ .x { opacity: 1; }
}
}
}
Oops, something went wrong.

0 comments on commit 73898c0

Please sign in to comment.