makyo/makyo.ink
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

YG

Browse Source
This commit is contained in:
Madison Scott-Clary
2018-01-26 15:44:17 -08:00
parent b76ec801e8
commit 554e561ebc
10 changed files with 2525 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/css/sass/parts/_donate.scss
View File

@ -1,9 +1,6 @@
.donate-box {
width: 100%;
text-align: center;
.donate {
display: inline-block;
}
h4 {
text-transform: uppercase;
font-size: 12px;

BIN
assets/posts/youre-gone/dust_scratches.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

36
assets/posts/youre-gone/index.html Normal file
View File

@ -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>

1029
assets/posts/youre-gone/script.md Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
assets/posts/youre-gone/send-icon.s.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

273
assets/posts/youre-gone/vis.css Normal file
View File

@ -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;
}
}

132
assets/posts/youre-gone/vis.js Normal file
View File

@ -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);
};
})();

1011
assets/posts/youre-gone/vis.json Normal file
View File

File diff suppressed because it is too large Load Diff