Chapter Text
Papyrus textboxes
* Let's get going then, human!
Sans.
O-of course...
It seems that they were far too intimidated by my unrelenting greatness!
What?!?!?!!!
It was unfortunate.
What an annoying creature!
HTML:
<div class="textbox papyrus sprite">
<span class="img"><img src="[img url here]"></img></span>
<p>[text here]</p>
</div>
CSS:
#workskin .textbox {
font-family: '8bitoperator JVE', 'determination mono', 'determination sans', '8bitoperator', 'Press Start 2P', 'Lucida Console', monospace; min-height: 100px; font-size: 18px;
text-align: left;
color: white;
margin: 0 auto;
display: block;
background-color: black;
border: 6px solid white;
padding: 15px;
margin-top: 35px;
margin-bottom: 35px;
max-width: 580px;
hyphens: manual;
}#workskin .img {
width: 100px;
float: left;
}#workskin .papyrus {
font-family: 'Papyrus', 'Fantasy';
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.3em;
}#workskin .sprite {
min-height: 150px;
padding: 8px;
}#workskin .sprite p {
padding-left: 120px;
}#workskin .sprite p:first-of-type {
float: left;
padding-left: 10px;
}
IMAGES:
URL: https://i.postimg.cc/3NzNQPHF/pap-normal.jpg
URL: https://i.postimg.cc/XqF1QbHM/pap-dissapointed.jpg
URL: https://i.postimg.cc/3xg0jJgj/pap-nervous.jpg
URL: https://i.postimg.cc/HWhMdNYM/pap-cool.jpg
URL: https://i.postimg.cc/3J0vRZNc/pap-crazy.jpg
URL: https://i.postimg.cc/Nj1YXm8D/pap-cry.jpg
URL: https://i.postimg.cc/C5zcP6Yg/pap-sad.jpg
URL: https://i.postimg.cc/MGp68XRY/pap-sadx2.jpg
URL: https://i.postimg.cc/BQRVysXw/pap-mad.jpg
Sans textboxes
* say, have you ever heard of a talking flower?
* cool, right?
* sure, if it means i don't get to do any work
* zzzzz...
* ligma balls
* ... what?
* no, i didn't say anything
* ...
* you sure it wasn't just a hallucination?
CODE:
HTML:
<div class="textbox sans sprite">
<span class="img"><img src="[img url here]"></img></span>
<p>[text here]</p>
</div>
CSS:
#workskin .textbox {
font-family: '8bitoperator JVE', 'determination mono', 'determination sans', '8bitoperator', 'Press Start 2P', 'Lucida Console', monospace; min-height: 100px; font-size: 19px;
text-align: left;
color: white;
margin: 0 auto;
display: block;
background-color: black;
border: 6px solid white;
padding: 18px;
margin-top: 35px;
margin-bottom: 35px;
max-width: 580px;
hyphens: manual;
}#workskin .img {
width: 100px;
float: left;
}#workskin .sans {
font-family: 'Comic sans MS', 'Comic sans', 'Chalkboard SE', 'Sans Serif';
text-transform: lowercase;
letter-spacing: 0.15em;
}#workskin .sprite {
min-height: 150px;
padding: 8px;
}#workskin .sprite p {
padding-left: 120px;
}#workskin .sprite p:first-of-type {
float: left;
padding-left: 10px;
}
IMAGES:
URL: https://i.postimg.cc/4yrFKKFt/sans-normal.jpg
URL: https://i.postimg.cc/x1q3rjxV/sans-wink.jpg
URL: https://i.postimg.cc/h4xYwsJ1/sans-happy.jpg
URL: https://i.postimg.cc/0j2JpZh1/sans-joking.jpg
URL: https://i.postimg.cc/vTqxXfdg/sans-sleep.jpg
URL: https://i.postimg.cc/wBGPKbc0/sans-deadpan.jpg
URL: https://i.postimg.cc/zXFcDfFL/sans-serious.jpg
URL: https://i.postimg.cc/Twnckkky/sans-serious-sweat.jpg
URL: https://i.postimg.cc/3JtFb0ZZ/sans-joking-sweat.jpg
URL: https://i.postimg.cc/SKMLsTbZ/sans-sweat.jpg
URL: https://i.postimg.cc/5yx8sfYG/sans-wink-sweat.jpg
URL: https://i.postimg.cc/c4LQY4Nt/sans-kill.jpg
URL: https://i.postimg.cc/7PFkJbzm/sans-pleading.jpg
URL: https://i.postimg.cc/6pBFCZpL/sans-pleading-sweat.jpg
URL: https://i.postimg.cc/9fJ8dgnc/sans-blue.jpg
Gaster textbox
I was afraid of this outcome.
CODE:
HTML:
<div class="textbox">
<p class="gaster">
[text here]
</p>
</div>
CSS:
#workskin .textbox {
font-family: '8bitoperator JVE', 'determination mono', 'determination sans', '8bitoperator', 'Press Start 2P', 'Lucida Console', monospace; min-height: 100px; font-size: 19px;
text-align: left;
color: white;
margin: 0 auto;
display: block;
background-color: black;
border: 6px solid white;
padding: 18px;
margin-top: 35px;
margin-bottom: 35px;
max-width: 580px;
hyphens: manual;
}#workskin .gaster {
font-family: 'Wingdings', 'Baskerville';
}
Narrator textbox
* This outcome was inevitable anyways.
CODE:
HTML:
<div class="textbox">
<p class="narrator">
[text here]
</p>
</div>
CSS:
#workskin .textbox {
font-family: '8bitoperator JVE', 'determination mono', 'determination sans', '8bitoperator', 'Press Start 2P', 'Lucida Console', monospace; min-height: 100px; font-size: 19px;
text-align: left;
color: white;
margin: 0 auto;
display: block;
background-color: black;
border: 6px solid white;
padding: 18px;
margin-top: 35px;
margin-bottom: 35px;
max-width: 580px;
hyphens: manual;
}#workskin .narrator {
font-family: '8-bit Operator JVE', 'determination mono', 'determination sans', '8bitoperator', 'Press Start 2P', 'fixedsys', 'Monaco', 'monospace';
letter-spacing: 0.062em;
font-weight: bold;
}