aboutus.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <meta name=viewport content="width=device-width, initial-scale=1">
   6     <link rel="stylesheet" href="/css/main.css" type="text/css">
   7     <link rel=apple-touch-icon sizes=256x256 href=favicon_256.png>
   8     <link rel=icon sizes="16x16 32x32 48x48" href=favicon.ico>
   9     <link rel=icon sizes=128x128 href=favicon_128.png>
  10     <link rel=icon sizes=192x192 href=favicon_192.png>
  11     <link rel=icon sizes=256x256 href=favicon_256.png>
  12     <title>About Us ~ Yukkuri Games</title>
  13     <style>
  14       h2 {
  15           max-width: 20em;
  16           margin: auto;
  17           display: inline-block;
  18           padding-left: 2em;
  19           padding-right: 2em;
  20       }
  21
  22       main {
  23           text-align: center;
  24       }
  25
  26       .mlp {
  27           max-width: 20em;
  28           margin: auto;
  29           list-style-type: none;
  30           margin-bottom: 2em;
  31           margin-top: 1em;
  32       }
  33
  34       .entity {
  35           display: inline-block;
  36           width: 13em;
  37           margin: 1em;
  38           vertical-align: top;
  39       }
  40
  41       .entity h4 {
  42           font-size: 1.25em;
  43       }
  44
  45       .entity p {
  46           font-weight: 300;
  47           font-size: 0.875em;
  48       }
  49
  50       .entity img {
  51           border: solid rgb(206, 132, 242) 2px;
  52           border-radius: 50%;
  53           width: 9em;
  54           height: 9em;
  55           transition: border-radius 0.3s, border-color 0.3s;
  56       }
  57
  58       .entity img:hover {
  59           border-radius: 10%;
  60           border-color: rgb(244, 126, 126);
  61       }
  62
  63     </style>
  64     <script>
  65       window.addEventListener('DOMContentLoaded', function () {
  66           var es = document.getElementById('entities');
  67           for (var i = es.children.length; i >= 0; i--) {
  68               es.appendChild(es.children[Math.random() * i | 0]);
  69           }
  70       });
  71     </script>
  72   </head>
  73   <body>
  74     <header>
  75       <a href="/">
  76         <img src="/logotype_horizontal_1.png" class=logo alt="(◕ ヮ ◕)">
  77         <img src="/logotype_horizontal_2.png" class=optional
  78              alt="Yukkuri Games">
  79       </a>
  80       <h1>About Us</h1>
  81     </header>
  82     <main>
  83       <div id=entities>
  84         <div class=entity>
  85           <h4><a href="https://korewanetadesu.com/">Joe</a></h4>
  86           <a href="https://korewanetadesu.com/"><img src=joe.jpg></a>
  87           <p>
  88             Unexpectedly sentient code that escaped from Silicon
  89             Valley before shit got real bad.
  90           </p>
  91         </div>
  92         <div class=entity>
  93           <h4><a href="https://twitter.com/JessicatzF">Jess</a></h4>
  94           <a href="https://twitter.com/JessicatzF"><img src=jess.jpg></a>
  95           <p>
  96             Last survivor in a line of witches sworn to destroy games
  97             in order to save them.
  98           </p>
  99         </div>
 100         <div class=entity>
 101           <h4>Sid</h4>
 102           <img src="sid.jpg">
 103           <p>
 104             By day, just a cat. By night, the loudest cat.
 105           </p>
 106         </div>
 107       </div>
 108       <p>
 109         We make games and game-like things and other things.
 110       </p>
 111       <p>
 112         Manifestos are boring so here are some things we like that you
 113         should check out. They intersect with our views but also
 114         they're consistently great.
 115       </p>
 116       <h2>Games</h2>
 117       <ul class=mlp>
 118         <li><a href="http://borderhouseblog.com/">The Border House</a></li>
 119         <li><a href="http://www.critical-distance.com/">Critical Distance</a></li>
 120         <li><a href="http://forestambassador.com/">forest ambassador</a></li>
 121         <li><a href="http://itch.io/">itch.io</a></li>
 122         <li><a href="http://odditie-s.tumblr.com/">Oddities</a></li>
 123         <li><a href="http://www.indiebound.org/book/9781609803728">Rise of the Videogame Zinesters</a></li>
 124         <li><a href="http://www.feministfrequency.com/tag/tropes-vs-women-in-video-games/">Tropes vs. Women in Videogames</a></li>
 125         <li><a href="http://warpdoor.com/">Warp Door</a></li>
 126       </ul>
 127       <h2>Not Games</h2>
 128       <ul class=mlp>
 129         <li><a href="http://adainitiative.org/">The Ada Initiative</a></li>
 130         <li><a href="http://www.apex-magazine.com/">Apex Magazine</a></li>
 131         <li><a href="http://futurefire.net/">The Future Fire</a></li>
 132         <li><a href="http://geekfeminism.org/">Geek Feminism</a></li>
 133         <li><a href="http://modelviewculture.com/">Model View Culture</a></li>
 134         <li><a href="http://www.racialicious.com/">Racialicious</a></li>
 135         <li><a href="http://www.scarleteen.com/">Scarleteen</a></li>
 136       </ul>
 137       <p>
 138         You can contact us by
 139         <a href="mailto:yuuSPAM@MAPSyukkurigames.com"
 140            onclick="this.href=this.href.replace(/[A-Z]/g, '')">emailing
 141           yuu at yukkurigames.com</a>.
 142       </p>
 143     </main>
 144   </body>
 145 </html>