hugo site

static/assets/posts/gf/figures.js

@@ -0,0 +1,188 @@
+(function() {
+
+  var commission_sex = [
+    { key: "Male", color: '#aaa', values: [
+      [2010, 4],
+      [2011, 7],
+      [2012, 2],
+      [2013, 2],
+      [2014, 3],
+      [2015, 1],
+      [2016, 0]
+    ] },
+    { key: "Altersex", color: '#ccc', values: [
+      [2010, 0],
+      [2011, 3],
+      [2012, 4],
+      [2013, 0],
+      [2014, 0],
+      [2015, 0],
+      [2016, 0]
+    ] },
+    { key: "Genderless", color: '#fff', values: [
+      [2010, 0],
+      [2011, 0],
+      [2012, 4],
+      [2013, 14],
+      [2014, 18],
+      [2015, 6],
+      [2016, 1]
+    ] },
+    { key: "MtF", color: '#666', values: [
+      [2010, 0],
+      [2011, 0],
+      [2012, 0],
+      [2013, 0],
+      [2014, 0],
+      [2015, 36],
+      [2016, 24]
+    ] },
+    { key: "Female", color: '#44', values: [
+      [2010, 0],
+      [2011, 1],
+      [2012, 0],
+      [2013, 1],
+      [2014, 1],
+      [2015, 17],
+      [2016, 14]
+    ] }
+  ];
+
+  var commission_sex_chart;
+  nv.addGraph(function() {
+    commission_sex_chart = nv.models.stackedAreaChart()
+      .useInteractiveGuideline(true)
+      .x(function(d) { return d[0] })
+      .y(function(d) { return d[1] })
+      .showControls(false)
+      .style('expand')
+      .interpolate('monotone')
+      .pointActive(function() { return false; })
+      .duration(300);
+    commission_sex_chart.yAxis.tickFormat(d3.format(',.4f'));
+    d3.select('#commission_sex_chart')
+      .datum(commission_sex.reverse())
+      .transition().duration(1000)
+      .call(commission_sex_chart)
+      .each('start', function() {
+        setTimeout(function() {
+          d3.selectAll('#commission_sex_chart *').each(function() {
+            if(this.__transition__)
+            this.__transition__.duration = 1;
+          })
+        }, 0)
+      });
+    nv.utils.windowResize(commission_sex_chart.update);
+    d3.select('#commission_sex_chart .nv-area-2')
+      .style("fill", "url(#diagonal-stripe-1)")
+      .attr("x", 0)
+      .attr("y", 0)
+      .attr("height", 150)
+      .attr("width", 150);
+    return commission_sex_chart;
+  });
+
+  var raw_alignments = [
+    //Cisgender	Non-cisgender	It's complicated
+    { key: "Masculine", values: [
+      ["Cisgender", 2290],
+      ["Non-cisgender", 94],
+      ["It's complicated", 68]
+    ] },
+    { key: "Feminine", values: [
+      ["Cisgender", 366],
+      ["Non-cisgender", 94],
+      ["It's complicated", 28]
+    ] },
+    { key: "Other", values: [
+      ["Cisgender", 24],
+      ["Non-cisgender", 116],
+      ["It's complicated", 114]
+    ] }
+  ];
+  var n = 0;
+  var sexes = [{
+    key: "Sexes",
+    values: raw_alignments.map(function(d, i) {
+      var total = d.values[0][1] + d.values[1][1] + d.values[2][1];
+      n += total;
+      return {
+          label: d.key,
+          color: ['#444', '#666', '#888'][i],
+          value: total
+        }
+      })
+    }];
+  var alignments = [
+    {
+      key: "Cisgender",
+      values: raw_alignments.map(function(sex, i) {
+        return {
+          x: sex.key,
+          y: sex.values[0][1] /
+            (sex.values[0][1] + sex.values[1][1] + sex.values[2][1]) * 100
+        };
+      })
+    },
+    {
+      key: "Non-cisgender",
+      values: raw_alignments.map(function(sex, i) {
+        return {
+          x: sex.key,
+          y: sex.values[1][1] /
+            (sex.values[0][1] + sex.values[1][1] + sex.values[2][1]) * 100
+        };
+      })
+    },
+    {
+      key: "It's complicated",
+      values: raw_alignments.map(function(sex, i) {
+        return {
+          x: sex.key,
+          y: sex.values[2][1] /
+            (sex.values[0][1] + sex.values[1][1] + sex.values[2][1]) * 100
+        };
+      })
+    },
+  ];
+
+
+  var alignments_chart_sexes, alignments_chart_alignments;
+  nv.addGraph(function() {
+    var alignments_chart_sexes = nv.models.discreteBarChart()
+        .x(function(d) { return d.label })
+        .y(function(d) { return d.value })
+        .showYAxis(false)
+        .showValues(true)
+        .valueFormat(function(d) {
+          return (d / n * 100).toFixed(1) + '%';
+        })
+        .duration(250);
+    d3.select('#alignments_chart_sexes')
+        .datum(sexes)
+        .call(alignments_chart_sexes);
+    nv.utils.windowResize(alignments_chart_sexes.update);
+    return alignments_chart_sexes;
+  });
+
+  nv.addGraph(function() {
+      var alignments_chart_alignments = nv.models.multiBarChart()
+        .duration(350)
+        .reduceXTicks(true)
+        .showYAxis(false)
+        .rotateLabels(0)
+        .stacked(true)
+        .showControls(false)
+        .color(['#444', '#888', '#ccc'])
+        .groupSpacing(0.1);
+
+      d3.select('#alignments_chart_alignments')
+          .datum(alignments)
+          .call(alignments_chart_alignments);
+
+      nv.utils.windowResize(alignments_chart_alignments.update);
+
+      return alignments_chart_alignments;
+  });
+
+})();

static/assets/posts/youre-gone/index.html

@@ -0,0 +1,36 @@
+<html>
+<head>
+    <title>PostFast Conversation with Lee &hearts;</title>
+    <link rel="stylesheet" type="text/css" href="vis.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+    <div id="credits">
+        <h1>You're Gone</h1>
+        <h2>A story by Madison Scott-Clary</h2>
+        <p>This is a story from the Sawtooth universe. If you'd like to read more, you can find the stories <a target="_blank" href="http://writing.drab-makyo.com/fiction/sawtooth">here</a>.</p>
+        <ul>
+            <li><a target="_blank" href="https://twitter.com/makyo_writes">@makyo_writes</a></li>
+            <li><a target="_blank" href="https://mastodon.social/@makyo">@makyo@mastodon.social</a></li>
+            <li><a target="_blank" href="http://makyo.ink">Writing portfolio</a></li>
+            <li><a target="_blank" href="http://writing.drab-makyo.com">Writing and blog</a></li>
+        </ul>
+        <p>Copyright &copy; Madision Scott-Clary, 2017</p>
+        <p><a target="_blank" rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br />This work is licensed under a <a target="_blank" rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.</p>
+        <p>Help support my writing and creations like this!</p>
+        <ul>
+            <li><a target="_blank" href="https://patreon.com/makyo">Patreon</a></li>
+            <li><a target="_blank" href="https://ko-fi.com/drabmakyo">Ko-fi</a></li>
+            <li><a target="_blank" href="https://liberapay.com/makyo">Liberapay</a></li>
+            <li><a target="_blank" href="https://makyo.itch.io">itch.io</a></li>
+        </ul>
+        <p><small id="dismiss">Dismiss credits</small></p>
+    </div>
+    <div id="device">
+        <h3 id="with">Conversation with <em>Lee &hearts;</em></h3>
+        <div id="log"></div>
+        <div id="entry"><div id="entryText"></div><div id="send"><img src="send-icon.s.png"</div></div>
+    </div>
+    <script type="text/javascript" src="vis.js"></script>
+</body>
+</html>

static/assets/posts/youre-gone/vis.css

@@ -0,0 +1,273 @@
+@import url('https://fonts.googleapis.com/css?family=Titillium+Web:300,400');
+
+* {
+    margin: 0;
+    padding: 0;
+    color: #222;
+    font-family: "Titillium Web", sans-serif;
+    font-weight: 300;
+}
+
+#credits {
+    z-index: 1000;
+    background-color: rgba(0, 0, 50, 0.8);
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    text-align: center;
+    padding-top: 10rem;
+    display: none;
+}
+
+#credits ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+#credits ul li {
+    display: inline-block;
+}
+
+#credits ul li:not(:last-of-type)::after {
+    content: " ◦ "
+}
+
+#credits.visible {
+    display: block;
+}
+
+#credits a, #credits small {
+    color: #fff;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+#credits * {
+    color: #eef;
+    margin-bottom: 1rem;
+}
+
+#device {
+    width: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    min-height: 100%;
+    overflow: hidden;
+    background-image: url(dust_scratches.png);
+}
+
+#with {
+    height: 2rem;
+    width: 100%;
+    text-align: center;
+    padding-top: 1rem;
+    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(190, 200, 200, 0.5));
+    box-shadow: 2px 0 2px #888;
+    color: #588;
+}
+
+#with em {
+    color: #366;
+}
+
+#log {
+    width: 100%;
+    height: calc(100% - 30pt - 3.2rem);
+    position: absolute;
+    top: 3.1rem;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background: linear-gradient(150deg, rgba(150, 127, 200, 0.1), rgba(255, 255, 255, 0.2));
+}
+
+#entry {
+    width: 100%;
+    margin-top: -30pt;
+    position: absolute;
+    top: 100%;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 30pt;
+    overflow: hidden;
+    border-top: 1px solid rgba(0, 0, 127, 0.3);
+    box-shadow: 1px -1px 1px rgba(127, 127, 255, 0.2);
+}
+
+#entryText {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: calc(100% - 30pt - 2rem + 2px);
+    height: calc(30pt - 13px);
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 5px;
+    border: 2px solid rgba(127, 127, 255, 0.2);
+    border-right: none;
+}
+
+#send {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 30pt;
+    height: 30pt;
+    padding: 0 0.5rem;
+    border: 2px solid rgba(127, 127, 255, 0.2);
+    border-left: none;
+    text-align: center;
+    cursor: pointer;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-color: rgba(255, 255, 255, 0);
+    animation-name: flash;
+    animation-duration: 0.5s;
+    animation-iteration-count: 10;
+    animation-direction: alternate;
+}
+
+@keyframes flash {
+    from {
+        background-color: rgba(255, 255, 255, 0);
+    }
+
+    to {
+        background-color: rgba(255, 0, 0, 0.5);
+    }
+}
+
+#send img {
+    vertical-align: bottom;
+    height: calc(30pt - 4px);
+}
+
+.msg::after, .date::after, .retime::after {
+    content: "";
+    display: table;
+    visibility: hidden;
+    clear: both;
+}
+
+.date {
+    width: calc(100% - 2rem);
+    text-align: center;
+    font-size: 9pt;
+    color: #888;
+    border-bottom: 1px solid #aaa;
+    margin: 5px 1rem 1rem 1rem;
+    float: right;
+    font-weight: 400;
+}
+
+.retime {
+    width: 100%;
+    text-align: center;
+    font-size: 9pt;
+    margin: 5px;
+    float: left;
+}
+
+.retime span {
+    border: 1px solid transparent;
+    border-radius: 3px;
+    background-color: rgba(0, 0, 0, 0.1);
+    color: #666;
+    padding: 0 5px;
+    font-weight: 400;
+}
+
+.msg {
+    float: right;
+    max-width: 50%;
+    border: 1px solid rgba(0, 127, 0, 0.3);
+    border-radius: 10px;
+    border-bottom-right-radius: 0;
+    padding: 10px;
+    margin: 0 0.5rem 5px 20%;
+    background: linear-gradient(80deg, rgba(200, 255, 200, 0.2), #fff);
+    box-shadow: 0px 1px 1px rgba(127, 255, 127, 0.2);
+    clear: both;
+}
+
+.msg + .msg {
+    border-top-right-radius: 0;
+}
+
+.date + .msg::before, .file + .msg::before, .retime + .msg::before {
+    content: "Markus";
+    display: block;
+    font-size: 9pt;
+    font-style: italic;
+    color: rgba(0, 127, 0, 0.5);
+    padding-bottom: 5px;
+}
+
+.file {
+    background: linear-gradient(80deg, rgba(255, 255, 127, 0.2), #fff);
+    box-shadow: 1px 1px 1px rgba(255, 255, 127, 0.2);
+    float: left;
+    border-radius: 10px;
+    border-bottom-left-radius: 0px;
+    margin-left: 5px;
+}
+
+.date + .file::before {
+    content: "Lee ♥";
+    display: block;
+    font-size: 9pt;
+    font-style: italic;
+    color: rgba(0, 127, 0, 0.5);
+    padding-bottom: 5px;
+}
+
+.msgTime {
+    font-size: 8pt;
+    color: #aaa;
+    text-align: right;
+}
+
+@media only screen and (max-width: 960px) {
+    * {
+        font-weight: 300;
+    }
+
+    #log {
+        height: calc(100% - 40pt - 3.2rem);
+    }
+
+    #entry {
+        margin-top: -40pt;
+        height: 40pt;
+    }
+
+    #entryText {
+        height: calc(40pt - 13px);
+    }
+
+    #send {
+        height: 40pt;
+    }
+
+    #send img {
+        height: calc(40pt - 4px);
+        margin-left: -5px;
+    }
+
+    .msg {
+        max-width: none;
+    }
+}

static/assets/posts/youre-gone/vis.js

@@ -0,0 +1,132 @@
+(() => {
+  // Array to contain our messages.
+  let messages, loaded = false;
+
+  // Elements we'll be referring to.
+  const log = document.getElementById('log');
+  const entry = document.getElementById('entryText');
+  const send = document.getElementById('send');
+  const credits = document.getElementById('credits');
+  const anchors = document.getElementsByTagName('a');
+
+  // Fetch the data.
+  fetch('vis.json').then(response => {
+    return response.json();
+  }).then(result => {
+    messages = result;
+    entry.innerHTML = messages[1].message;
+    entry.scrollTo(0, entry.scrollHeight);
+    loaded = true;
+  })
+
+  // Event forr clicking Send
+  document.getElementById('send').onclick = () => {
+    // Bail if we don't have messages (before we start, after we end)
+    if (!messages) {
+      return;
+    }
+
+    // Make the credits visible and bail, removing the event, once we're done.
+    if (loaded && messages.length === 0) {
+      credits.classList.add('visible');
+      document.getElementById('dismiss').onclick = (aEvt) => {
+        aEvt.stopPropagation();
+        credits.classList.remove('visible');
+      };
+      for (let i = 0; i < anchors.length; i++) {
+        anchors[i].onclick = (aEvt) => {
+          aEvt.stopPropagation();
+        }
+      };
+      send.onclick = null;
+      return;
+    }
+
+    // Get the most recent message.
+    let message = messages.shift();
+
+    // If it's a date, add the date node, then get the followinug message.
+    if (message.dateChange) {
+      // Create a date div.
+      const dateNode = document.createElement('div');
+      dateNode.classList.add('date');
+      const dateText = document.createTextNode(message.dateChange);
+      dateNode.appendChild(dateText);
+      log.appendChild(dateNode);
+      message = messages.shift();
+    }
+
+    // If it's a retime, add the retime node.
+    if (message.retime) {
+      // Create a retime div.
+      const retimeNode = document.createElement('div');
+      retimeNode.classList.add('retime');
+      const retimeInner = document.createElement('span');
+      const retimeText = document.createTextNode(message.time);
+      retimeInner.appendChild(retimeText);
+      retimeNode.appendChild(retimeInner);
+      log.appendChild(retimeNode);
+    }
+
+    if (message.file) {
+      // Create the div for the message text.
+      const msgTextNode = document.createElement('div');
+      msgTextNode.classList.add('msgText')
+      const msgText = document.createTextNode(`Lee ♥ sent you: ${message.file}`);
+      msgTextNode.appendChild(msgText);
+
+      // Create the div for the message time.
+      const timeNode = document.createElement('div');
+      timeNode.classList.add('msgTime')
+      const timeText = document.createTextNode(message.time);
+      timeNode.appendChild(timeText)
+
+      // Create the div for the full message and append to the log.
+      const msgNode = document.createElement('div');
+      msgNode.classList.add('msg')
+      msgNode.classList.add('file')
+      msgNode.appendChild(msgTextNode);
+      msgNode.appendChild(timeNode);
+      log.appendChild(msgNode);
+      return;
+    }
+
+    // Create the div for the message text.
+    const msgTextNode = document.createElement('div');
+    msgTextNode.classList.add('msgText')
+    const msgText = document.createTextNode(message.message);
+    msgTextNode.appendChild(msgText);
+
+    // Create the div for the message time.
+    const timeNode = document.createElement('div');
+    timeNode.classList.add('msgTime')
+    const timeText = document.createTextNode(message.time);
+    timeNode.appendChild(timeText)
+
+    // Create the div for the full message and append to the log.
+    const msgNode = document.createElement('div');
+    msgNode.classList.add('msg')
+    msgNode.appendChild(msgTextNode);
+    msgNode.appendChild(timeNode);
+    log.appendChild(msgNode);
+
+    // If we stil have messages, attempt to get the next one to display in the
+    // entry box.
+    if (messages.length > 1) {
+      let next = messages[0];
+      if (next.dateChange) {
+        next = messages[1];
+      }
+      if (next.file) {
+        next = messages[2];
+      }
+      entry.innerHTML = next.message;
+      entry.scrollTo(0, entry.scrollHeight);
+    } else {
+      entry.innerHTML = '';
+    }
+
+    // Scroll the log to the bottom.
+    log.scrollTo(0, log.scrollHeight);
+  };
+})();