projects / labelle.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 86ac22c)
New theme.
authorJoe Wreschnig <joe.wreschnig@gmail.com>
Sun, 31 Aug 2014 18:57:07 +0000 (20:57 +0200)
committerJoe Wreschnig <joe.wreschnig@gmail.com>
Sun, 31 Aug 2014 18:57:07 +0000 (20:57 +0200)
VarelaRound-Regular.woff [new file with mode: 0644] patch | blob
acnl-outfit.js patch | blob | history
bg.png [new file with mode: 0644] patch | blob
index.html patch | blob | history
labelle-2.png [new file with mode: 0644] patch | blob
twitter.png patch | blob | history

diff --git a/VarelaRound-Regular.woff b/VarelaRound-Regular.woff
new file mode 100644 (file)
index 0000000..b86936e
Binary files /dev/null and b/VarelaRound-Regular.woff differ
diff --git a/acnl-outfit.js b/acnl-outfit.js
index 018fe03..d9ef316 100644 (file)
--- a/acnl-outfit.js
+++ b/acnl-outfit.js
@@ -124,17 +124,24 @@ function litanize (names, link) {
     return names.join(names.length == 2 ? " " : ", ");        
 }
 
     return names.join(names.length == 2 ? " " : ", ");        
 }
 
-function litanizeElement (eid, tid, ev) {
+function update () {
     var o = outfit();
     var o = outfit();
-    document.getElementById(eid).innerHTML = litanize(o, true) + "?";
+    var wearing = document.getElementById('wearing');
+    wearing.innerHTML = litanize(o, true) + "?";
     // TODO: This often generates > 140 characters. Do I care?
     // Maybe pick shorter prefixes if it would help.
     // TODO: This often generates > 140 characters. Do I care?
     // Maybe pick shorter prefixes if it would help.
-    var t = document.getElementById(tid);
-    t.href = t.href.replace(
+    var twitter = document.getElementById('twitter');
+    twitter.href = twitter.href.replace(
             /&text=[^&]+/, "&text=" + encodeURIComponent(
                 choice(["Going out in ",
                         "Labelle suggested ",
                         "I'll wear "]) + litanize(o, false) + "."));
             /&text=[^&]+/, "&text=" + encodeURIComponent(
                 choice(["Going out in ",
                         "Labelle suggested ",
                         "I'll wear "]) + litanize(o, false) + "."));
-    if (ev)
-        ev.preventDefault();
+
+    buttons = document.getElementById("buttons");
+    buttons.className = "";
+    setTimeout(function () {
+        buttons.className = "open";
+    }, 300);
+    
+
 }
 }
diff --git a/bg.png b/bg.png
new file mode 100644 (file)
index 0000000..321109a
Binary files /dev/null and b/bg.png differ
diff --git a/index.html b/index.html
index 59d6270..45b4b9b 100644 (file)
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
 <!DOCTYPE html>
-<html lang="en" manifest="labelle.manifest">
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <meta name=viewport content="width=device-width, initial-scale=1">
   <head>
     <meta charset="utf-8">
     <meta name=viewport content="width=device-width, initial-scale=1">
@@ -17,11 +17,9 @@
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="apple-mobile-web-app-title" content="Labelle Litanizer">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="apple-mobile-web-app-title" content="Labelle Litanizer">
-    <link rel="stylesheet" href="/css/main.css" type="text/css">
     <title>
       Labelle Litanizer
       - Outfit-Oriented Ontology from Animal Crossing: New Leaf
     <title>
       Labelle Litanizer
       - Outfit-Oriented Ontology from Animal Crossing: New Leaf
-      ~ Yukkuri Games
     </title>
     <script type="text/javascript" src="acnl-wearables-list.js"></script>
     <script type="text/javascript" src="acnl-outfit.js"></script>
     </title>
     <script type="text/javascript" src="acnl-wearables-list.js"></script>
     <script type="text/javascript" src="acnl-outfit.js"></script>
@@ -36,143 +34,243 @@
       });
     </script>
     <style>
       });
     </script>
     <style>
-      #statusbar {
-          background-color: rgb(206, 132, 242);
-          height: 20px;
-          position: fixed;
-          top: 0;
-          left: 0;
-          right: 0;
-          transition: background-color 0.5s;
-          z-index: 1;
-          display: none;
+      @font-face {
+          font-family: Varela;
+          font-style: normal;
+          font-weight: 400;
+          src: url('VarelaRound-Regular.woff') format('woff');
+      }
+
+      * {
+          margin: 0;
+          padding: 0;
+          text-decoration: none;
+      }
+
+      [onclick] {
+          cursor: pointer;
+          -moz-user-select: none;
+          -webkit-user-select: none;
+          user-select: none;
       }
 
       }
 
-      header:hover #statusbar {
-          background-color: rgb(244, 126, 126);
+      html {
+          font-family: Varela;
+          font-size: 18px;
+          background: url(bg.png);
       }
 
       }
 
-      header.statusbar {
-          border-top-left-radius: 0;
-          border-top-right-radius: 0;
-          border-top-width: 20px;
+      main {
+          width: 80%;
+          min-width: 280px;
+          margin: auto;
+          position: relative;
+          background-color: rgba(239, 243, 216, 0.9);
+          border: 0.3333em solid #f0f3dc;
+          border-radius: 4em;
+          top: 2em;
+          margin-top: 0;
+          height: 10em;
+          margin-bottom: 6em;
+          display: block;
       }
       
       #labelle {
       }
       
       #labelle {
-          min-height: 180px;
-          margin-top: 1em;
+          position: absolute;
+          top: 1em;
+          left: -10%;
+          max-width: 28%;
+      }
+
+      #text {
+          position: absolute;
+          top: 8%;
+          left: 20%;
+          bottom: 1em;
+          right: 0.25em;
+          font-size: 1.25em;
       }
 
       #haveyou {
       }
 
       #haveyou {
-          font-size: 1.5em;
           font-style: italic;
           font-style: italic;
-          margin-bottom: 0.25em;
+          font-size: 0.75em;
       }
 
       #wearing {
       }
 
       #wearing {
-          font-size: 2em;
+          width: 100%;
+      }
+
+      #wearing a {
+          color: #0A96AA;
+      }
+
+      #wearing a:hover {
+          text-decoration: underline;
       }
 
       #buttons {
       }
 
       #buttons {
-          text-align: center;
+          position: absolute;
+          top: 85%;
+          right: 1em;
+          width: 12em;
+          border: 0.2em solid #4cc2d2;
+          padding: 0.25em 0;
+          border-radius: 1em;
+          background-color: #fff6c1;
+          box-shadow: 0 0 0 0.1em #fff6c1;
+          transition: transform 0.1s;
+          transform: scale(0);
+          -webkit-transition: -webkit-transform 0.1s;
+          -webkit-transform: scale(0);
       }
 
       }
 
-      .button {
-          font-size: 2em;
-          text-decoration: none;
-          background-color: #eee;
-          color: #333 !important;
-          padding: 3px 6px 3px 6px;
-          border-top: 1px solid #ccc;
-          border-right: 1px solid #333;
-          border-bottom: 1px solid #333;
-          border-left: 1px solid #ccc;
-          margin: 0.25em 0.5em;
+      #buttons.open {
+          transition: transform 0.3s;
+          transform: scale(1);
+          -webkit-transition: -webkit-transform 0.3s;
+          -webkit-transform: scale(1);
+      }
+
+      #buttons a {
           display: inline-block;
           display: inline-block;
+          font-size: 1.25em;
+          color: black;
+          margin: 0.25em 0.5em;
+          margin-left: 2em;
+          border-bottom: 0.075em solid #f45c0a;
           white-space: nowrap;
       }
 
           white-space: nowrap;
       }
 
-      @media (max-width: 600px) {
-          #wearing { font-size: 1.25em; }
-          #haveyou, .button { font-size: 1.125em; }
+      #buttons a:hover {
+          color: #f45c0a;
+      }
+
+      #buttons a:hover:before {
+          position: absolute;
+          left: 0;
+          display: inline-block;
+          width: 1em;
+          margin-left: 0.6667em;
+          content: "►";
+          color: #f45c0a;
+      }
+
+      #buttons a img {
+          vertical-align: middle;
+          width: 0.8em;
+          height: 0.65;
+      }
+
+      .day {
+          background-image: linear-gradient(#1e03e9, #185cfa 70%, transparent 71%);
+      }
+
+      .night {
+          background-image: linear-gradient(#070b5c, #002675 70%, rgba(0, 38, 117, 0.4) 71%);
+      }
+
+      @media (max-width: 799px) {
+          html { font-size: 14px; }
+      }
+
+      @media (max-width: 639px) {
+          html { font-size: 12px; }
+          main { height: 12em; }
       }
 
       }
 
-      .button.twitter {
-          padding: 2px 5px 2px 32px;
-          background: url('twitter.png') 8px center no-repeat #eee;
+      @media (max-width: 479px) {
+          main { height: 15em; }
+      }
+
+      dt {
+          border: #fafbe5 solid 0.1em;
+          border-radius: 1em;
+          padding-left: 2em;
+          background-color: #4ada48;
+          z-index: 1;
+          color: black;
+          padding: 0 1em;
+          display: inline-block;
+      }
+
+      dd {
+          border: 0.2em solid #ebd684;
+          background-color: rgba(0, 0, 0, 0.7);
+          border-radius: 1em 3em 2em 2em;
+          color: white;
+          text-shadow: 1px 1px black;
+          padding: 1em;
+          margin-top: -0.75em;
+          margin-bottom: 1em;
+      }
+
+      dl {
+          width: 60%;
+          min-width: 250px;
+          max-width: 500px;
+          padding: 1em;
+          margin: auto;
+      }
+
+      .person {
+          color: #4ada48;
+      }
+
+      .nonperson {
+          color: #00b6cf;
       }
     </style>
   </head>
       }
     </style>
   </head>
-  <body onload='litanizeElement("wearing", "share-button");'>
-    <header>
-      <div id='statusbar'></div>
-      <a href="http://yukkurigames.com" id="header-logo">
-        <img src="/logotype_horizontal_1.png" class="logo"
-             data-large
-             alt="(◕ ヮ ◕)"
-        ><img src="/logotype_horizontal_2.png"
-              data-optional
-              alt="Yukkuri Games"
-        ><img src="/logotype_horizontal_3.png" class="logo"
-             data-small
-             alt="(◕ ヮ ◕)">
-      </a>
-      <h1>Labelle Litanizer</h1>
-    </header>
+  <body onload='update();' class=day>
     <main>
     <main>
-      <div id="labelle" style="float: left; width: 100%;">
-        <div style="float: left; width: 30%">
-          <img src="labelle.jpg" style="max-width: 100%;"/>
+      <img src="labelle-2.png" id=labelle>
+      <div id="text">
+        <div id="haveyou">Have you considered...</div>
+        <div id="wearing">...</div>
+        <div id="buttons">
+          <a onclick='update();'>How gauche.</a>
+          <a id=twitter target=_blank
+             href="https://twitter.com/share?url=http%3A%2F%2Fyukkurigames.com%2Flabelle%2F&hashtags=ACNL&text=Loading...">
+            <img src='twitter.png'>
+            Great idea!</a>
         </div>
         </div>
-        <div style="float: right; width: 66%; margin-top: 0.5em">
-          <div id="haveyou">Have you considered...</div>
-          <div id="wearing">...</div>
-        </div>
-      </div>
-      <div id="buttons">
-        <a onclick='litanizeElement("wearing", "share-button", event);'
-           class="button" href="">How gauche.</a>
-        <a id="share-button" target="_blank" class="twitter button"
-           href="https://twitter.com/share?url=http%3A%2F%2Fyukkurigames.com%2Flabelle%2F&hashtags=ACNL&text=Loading...">Great idea!</a>
       </div>
       </div>
-      <hr>
-      <dl class="downplay">
-        <dt>What is this?</dt>
-        <dd>
-          The Labelle Litanizer generates random <em>Animal Crossing:
-          New Leaf</em> outfits. Ignoring the realities of the period
-          and distribution of your random number generator, all
-          possible outfits should have some chance of appearing.
-        </dd>
-        <dt>What's with the name?</dt>
-        <dd>
-          It's inspired by Ian Bogost's
-          <a href="http://www.bogost.com/blog/latour_litanizer.shtml">Latour
-          Litanizer</a>, and his writings about objects and carpentry
-          more generally.
-        </dd>
-        <dt>Why?</dt>
-        <dd>
-          Latour litanies confront us with objects in a way that defies
-          our usual methods of grouping or reduction. In a similar way
-          the Labelle Litanizer asks us to consider the possible rather
-          than merely the desirable or expected. <em>New Leaf</em>
-          contains a huge number of objects you can wear (or otherwise
-          visibly present with, if you are uncomfortable saying you
-          are "wearing" an ice cream cone). But that scale and
-          diversity is obscured due to its grouping algorithms, the
-          small number presented at any one time, and our cultural
-          norms about dress.
-        </dd>
-        <dt>
-          Can I restrict it to my / catalogable / easily-accessible
-          items (no DLC / region-exclusives)?
-        </dt>
-        <dd>
-          No. Instead, consider how the true <em>Daseine</em> of the
-          objects you think you have are also inaccessible to you.
-        </dd>
-      </dl>
     </main>
     </main>
+    <dl>
+      <dt>What is this?</dt>
+      <dd>
+        The Labelle Litanizer generates random <em>Animal Crossing:
+        New Leaf</em> outfits. Ignoring the realities of the period
+        and distribution of your random number generator, all
+        possible outfits should have some chance of appearing.
+      </dd>
+      <dt>What's with the name?</dt>
+      <dd>
+        It's inspired by 
+        <a target=_blank href="http://www.bogost.com/blog/latour_litanizer.shtml"><span class=person>Ian's</span> <span class=nonperson>
+          Latour Litanizer</span></a>, and his writings about objects and carpentry
+        more generally.
+      </dd>
+      <dt>Why?</dt>
+      <dd>
+        Latour litanies confront us with objects in a way that defies
+        our usual methods of grouping or reduction. In a similar way
+        the Labelle Litanizer asks us to consider the possible rather
+        than merely the desirable or expected. <em>New Leaf</em>
+        contains a huge number of objects you can wear (or otherwise
+        visibly present with, if you are uncomfortable saying you
+        are "wearing" an ice cream cone). But that scale and
+        diversity is obscured due to its grouping algorithms, the
+        small number presented at any one time, and our cultural
+        norms about dress.
+      </dd>
+      <dt>
+        Can I restrict it to my items?
+      </dt>
+      <dd>
+        No. Instead, consider how the true <em>Daseine</em> of the
+        objects you think you have are also inaccessible to you.
+      </dd>
+    </dl>
   </body>
 </html>
   </body>
 </html>
diff --git a/labelle-2.png b/labelle-2.png
new file mode 100644 (file)
index 0000000..f7cf3b0
Binary files /dev/null and b/labelle-2.png differ
diff --git a/twitter.png b/twitter.png
index 057ab00..db5195e 100644 (file)
Binary files a/twitter.png and b/twitter.png differ
The Labelle Litanizer generates random Animal Crossing: New Leaf outfits.