hugo site

assets/css/main.scss

@@ -1,6 +1,3 @@
----
----
-
 @import "variables";
 @import "syntax";
 @import "tools/normalize";

assets/css/parts/_pagination.scss

@@ -0,0 +1,35 @@
+ul.pagination {
+    list-style-type: none;
+    display: inline-block;
+    margin: 1rem auto !important;
+}
+
+ul.pagination li {
+    display: inline-block;
+    border: 1px solid $light-gray;
+    min-width: 2rem;
+    text-align: center;
+    margin-right: -5px;
+}
+
+ul.pagination li:last-of-type {
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+}
+
+ul.pagination li:first-of-type {
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+}
+
+ul.pagination .page-item.disabled a {
+    color: #666;
+    border: none;
+    cursor: text;
+}
+
+ul.pagination .page-item.active a {
+    text-decoration: none;
+    border: none;
+    cursor: text;
+}

assets/css/sass/parts/_pagination.scss

@@ -1,27 +0,0 @@
-.pagination {
-  margin-bottom: 30px;
-  .previous {
-    float: left;
-  }
-  .next {
-    float: right;
-  }
-  .previous, .next {
-    text-decoration: none;
-    text-transform: uppercase;
-    font-size: 14px;
-    color: $dark-gray;
-    &:hover {
-      opacity: .8;
-      color: $dark-pink;
-    }
-
-    .invert & {
-        color: $light-gray;
-
-        &:hover {
-            color: $light-pink;
-        }
-    }
-  }
-}

assets/img/flag.svg

@@ -1,8 +0,0 @@
-<svg width="500" height="300" viewbox="0 0 500 300"  xmlns="http://www.w3.org/2000/svg">
-    <!-- The blue symbolizes the sky -->
-    <path fill="blue" d="M 0,0 l 0,175 l 100,-50 l 0,50 l 100,-50 l 0,50 l 100,-50 l 0,50 l 100,-50 l 0,50 l 100,-50 l 0,50 l 0,-175 Z" />
-    <!-- The green symbolizes the earth as well as the fertility of the soil, which grows so many of Sawtooth's crops -->
-    <path fill="green" d="M 0,175 l 100,-50 l 0,50 l 100,-50 l 0,50 l 100,-50 l 0,50 l 100,-50 l 0,50 l 100,-50 l 0,50 l 0,175 l -500,0 Z" />
-    <!-- The yellow symbolizes both the sun rising over the Sawtooth range as well as the stone of the range itself -->
-    <path fill="yellow" d="M 0,150 l 100,-50 l 0,50 l 100,-50 l 0,50 l 100,-50 l 0,50 l 100,-50 l 0,50 l 100,-50 l 0,50 l -100,50 l 0,-50 l -100,50 l 0,-50 l -100,50 l 0,-50 l -100,50 l 0,-50 l -100,50 l 0,-50 Z" />
-</svg>

assets/img/gallery-exhibition.svg

@@ -1,178 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1710" height="1310" viewbox="0 0 1710 1310">
-  <!-- Genereated with twine2svg 0.0.2 -->
-  <style>  .twine .passage rect {
-    fill: transparent;
-    stroke: currentColor;
-    stroke-width: 2px;
-  }
-  .twine .passage.start rect {
-    stroke-width: 4px;
-  }
-  .twine .link {
-    stroke: currentColor;
-    stroke-width: 2px;
-  }
-  .twine text {
-    fill: currentColor;
-  }
-</style>
-  <g class="twine">
-    <path class="link" d="M304 254 L 404 254 M504 254 L 604 254 M454 304 L 454 404 M454 504 L 454 604 M704 254 L 804 254 M654 304 L 654 404 M504 654 L 604 654 M406 702 L 352 806 M854 304 L 854 404 M704 454 L 804 454 M904 454 L 1004 454 M854 504 L 854 604 M304 904 L 304 1204 M352 902 L 406 1006 M702 606 L 806 502 M504 1054 L 604 1054 M904 654 L 1004 654 M854 704 L 854 804 M1102 902 L 1206 1006 M1304 1054 L 1404 1054 M704 1054 L 804 1054 M904 1054 L 1004 1054 M1054 1004 L 1054 904 M1104 1054 L 1204 1054 M1454 1104 L 1454 1204 M1504 1054 L 1604 1054 M1404 654 L 1104 854 M1404 654 L 1254 1004 M1454 704 L 1454 804 M1454 904 L 1454 1004 M354 1254 L 606 1102 M102 102 L 206 206 M1054 704 L 1054 804 M1254 504 L 1254 604 M1304 454 L 1404 454 M1104 454 L 1204 454 M904 854 L 1004 854 M1206 702 L 1102 806 M1454 504 L 1454 604"/>
-    <g class="passage">
-      <title>A night out</title>
-      <rect x="204" y="204" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>An Introduction To and By The Artist</title>
-      <rect x="404" y="204" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>through the right door</title>
-      <rect x="404" y="404" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>through the left-hand door</title>
-      <rect x="604" y="204" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>an animal attempting to escape</title>
-      <rect x="404" y="604" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>forking</title>
-      <rect x="804" y="204" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>stay intact</title>
-      <rect x="604" y="404" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>Fight room</title>
-      <rect x="804" y="404" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>Follow the fennec</title>
-      <rect x="254" y="804" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>Escape to fight room</title>
-      <rect x="604" y="604" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>Wide open spaces</title>
-      <rect x="404" y="1004" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>Unwind room</title>
-      <rect x="804" y="604" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>Small exhibits</title>
-      <rect x="1004" y="804" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>out into the night once more</title>
-      <rect x="1204" y="1004" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>Cave</title>
-      <rect x="604" y="1004" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>Cramped spaces</title>
-      <rect x="804" y="1004" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>Up and through</title>
-      <rect x="1004" y="1004" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>About</title>
-      <rect x="1404" y="1004" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>knocked out</title>
-      <rect x="1404" y="604" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>Dying is quite painful, you find</title>
-      <rect x="1404" y="804" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>Return</title>
-      <rect x="1404" y="1204" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>All alone</title>
-      <rect x="254" y="1204" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage start">
-      <title>Dear, Also, The Tree That Was Felled - Gallery Exhibition</title>
-      <rect x="4" y="4" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>Startup: Variable initialization</title>
-      <rect x="204" y="4" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>/dev/null</title>
-      <rect x="1604" y="1004" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>Header: Life check</title>
-      <rect x="404" y="4" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>Debug-header: Variables</title>
-      <rect x="804" y="4" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>Seduction</title>
-      <rect x="1004" y="604" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>Fight</title>
-      <rect x="1204" y="404" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>Intro to fight</title>
-      <rect x="1004" y="404" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>To the small exhibits</title>
-      <rect x="804" y="804" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>You win</title>
-      <rect x="1204" y="604" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>You lose</title>
-      <rect x="1404" y="404" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>Include: The Wanderer</title>
-      <rect x="1004" y="4" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>Include: The Rebel</title>
-      <rect x="1154" y="4" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>Include: The Fighter</title>
-      <rect x="1304" y="4" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>Include: The Lover</title>
-      <rect x="1454" y="4" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>Include: The Medium</title>
-      <rect x="1604" y="4" rx="5" ry="5" width="100" height="100"/>
-    </g>
-    <g class="passage">
-      <title>Debug-startup: Variable initialization</title>
-      <rect x="604" y="4" rx="5" ry="5" width="100" height="100"/>
-    </g>
-  </g>
-</svg>

assets/js/main.js

@@ -1,37 +0,0 @@
-function invert() {
-  if (document.body.classList.contains('invert')) {
-    document.body.classList.remove('invert');
-    document.cookie = "inverse=false;path=/";
-  } else {
-    document.body.classList.add('invert');
-    document.cookie = "inverse=true;path=/";
-  }
-}
-
-$(document).ready(function() {
-
-  // Menu Settings
-  $('.menu-icon, .menu-icon-close').click(function(e) {
-    e.preventDefault();
-    $('.flex-container').toggleClass('active');
-  });
-
-  // Search Settings
-  $('.search-icon').on('click', function(e){
-    e.preventDefault();
-    $('.search-box').toggleClass('search-active');
-
-    if ($('.search-box').hasClass('search-active')) {
-      $('.search-icon-close').on('click', function(e){
-  		e.preventDefault();
-  		$('.search-box').removeClass('search-active');
-  	});
-  }
-  });
-
-
-
-  if (document.cookie.indexOf('inverse=true') >= 0) {
-    invert();
-  }
-});

assets/posts/gf/figures.js

@@ -1,188 +0,0 @@
-(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;
-  });
-
-})();

assets/posts/youre-gone/index.html

@@ -1,36 +0,0 @@
-<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>

assets/posts/youre-gone/vis.css

@@ -1,273 +0,0 @@
-@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;
-    }
-}

assets/posts/youre-gone/vis.js

@@ -1,132 +0,0 @@
-(() => {
-  // 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);
-  };
-})();