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