even in death

[attr="class","abc-selk-jc-rules"]

[attr="class","abc-selk-jc-body"]

[attr="class","abc-selk-jc-text"] there are a million more homestuck songs that are, like, objectively better than even in death, but i've always been partial to this one & at the price of oblivion. no idea why tbfh.

[attr="class","abc-selk-jc-hash"] [HASH]jcink [HASH]jcinkplotterreply [HASH]jcinkmisccode [HASH]dohtml

[attr="class","abc-selk-jc-colorpickers"]

[attr="class","abc-selk-jc-color"]

#912C7D

[attr="class","abc-selk-jc-color"]

#BB48A4

[attr="class","abc-selk-jc-var"] this template uses css variables for easier editing and is therefore incompatible with internet explorer. if you need this cross-compatibility, use a search and replace to change var(--oblivAccent) and var(--oblivBorder) (var(--oblivLightAccent) and var(--oblivLightBorder) in the light version) to the desired hex code.

[attr="class","selk-code"]

edit as much as you want! don't touch the credits! i'd love to see how you use it!

[dohtml]
<style>
.oblivReply { --oblivAccent: #BB48A4; }
.oblivReply { --oblivBorder: #912C7D; }
</style>

<div align="center">
<div class="oblivReply">
<div class="oblivSidebar">
<img src="https://image.ibb.co/c2FnPp/image.png">
</div>
<div class="oblivBody">
<h1>relationship idea here</h1>
<h2>@tagged</h2>
<div>
you have basically gone completely off the deep end in every way. <br><br>

you have officially gone <b>grimdark</b>.
</div>
</div>
</div>
<div class="oblivCredit"><a href="http://pixel-perfect.boards.net/user/15">SELKIE</a></div>

<style>
.oblivReply { width:500px; border-radius:10px; background-color:#fafafa; display:flex; flex-flow:row wrap; overflow:hidden; }
.oblivSidebar { width:200px; min-height:200px; background-color:var(--oblivAccent); display:flex; flex-flow:column wrap; align-items:center; justify-content:center; }
.oblivSidebar img { width:100px; height:100px; position:absolute; border-radius:100%; border:10px solid var(--oblivBorder); background-color:#fafafa; padding:7px; }
.oblivBody { width:280px; display:flex; flex-flow:column wrap; align-items:flex-end; padding:10px; background-color:#444; }
.oblivBody h1 { width:300px; font:800 32px/32px Maven Pro; color:#2a2a2a; text-transform:uppercase; text-align:right; margin:0px; }
.oblivBody h2 { position:absolute; margin-top:22px; margin-left:-5px; padding:2px 5px; font:900 12px Open Sans; text-transform:uppercase; background-color:var(--oblivAccent); color:#2a2a2a; }
.oblivBody div { width:200px; font:400 12px open sans; padding:25px; margin:21px 0px 15px 0px; align-self:center; color:#aaa; text-align:justify; background-color:#545454; border-radius:10px; }
.oblivBody b { font:700 12px open sans; color:var(--oblivAccent); }
.oblivCredit { font:800 7px roboto; margin-left:450px; }
.oblivCredit a { font:800 7px roboto; }
</style>[/dohtml]

[attr="class","abc-selk-jc-link"] [attr="class","lnr lnr-link"]

[newclass=.selk-jc-evenindeath .abc-selk-jc-contain h1, .selk-jc-evenindeath .abc-selk-jc-hash a, .selk-jc-evenindeath .abc-selk-jc-rules h2]color:#912C7D!important;[/newclass] [newclass=.selk-jc-evenindeath .abc-selk-jc-link]background-color:#912C7D!important;[/newclass] [newclass=.abc-selk-jc-contain, .selk-code] --abc-selk-jc-accent:#CCCCCC; [/newclass] [newclass=.abc-selk-jc-contain] width:500px; padding:25px; -webkit-border-top-left-radius: 5px;-webkit-border-top-right-radius: 5px;border-top-left-radius: 5px;border-top-right-radius: 5px; background-color:#eee; display:flex; flex-flow:row-reverse wrap; justify-content:space-between; position:relative; overflow:hidden; [/newclass] [newclass=.abc-selk-jc-contain h1] margin:0px; width:100%; display:flex; flex-flow:row wrap; align-items:center; font:200 32px/32px Raleway; color:var(--abc-selk-jc-accent); [/newclass] [newclass=.abc-selk-jc-contain h1:before] content:''; width:10px; height:1px; background-color:#ccc; flex-grow:2; margin-right:25px; [/newclass] [newclass=.abc-selk-jc-contain h1:after] content:'-Y-Z'; color:#ccc; [/newclass] [newclass=.abc-selk-jc-body] width:350px; border-radius:5px; color:#aaa; font:400 11px roboto; text-align:justify; margin-top:25px; [/newclass] [newclass=.abc-selk-jc-text] background-color:#fafafa; padding:25px; border-radius:5px; [/newclass] [newclass=.abc-selk-jc-hash] margin:25px 0px; text-align:left; [/newclass] [newclass=.abc-selk-jc-hash a] display:inline-block; height:10px; padding:5px 7px; margin:0px 3px 5px 0px; color:var(--abc-selk-jc-accent); background-color:#ddd; border-radius:2px; text-transform:uppercase; font:600 10px/10px roboto; [/newclass] [newclass=.abc-selk-jc-colorpickers] width:350px; display:flex; flex-flow:row-reverse wrap; align-items:flex-start; [/newclass] [newclass=.abc-selk-jc-color] display:flex; flex-flow:row-reverse nowrap; width:350px; [/newclass] [newclass=.abc-selk-jc-color div] height:10px; display:inline-block; margin-left:41px; background-color:#ccc; [/newclass] [newclass=.abc-selk-jc-color span] height:10px; width:0px; display:flex; font:600 9px/10px Roboto; color:#ccc; [/newclass] [newclass=.abc-selk-jc-var] width:340px; font:400 10px/13px roboto; margin-top:25px; padding-right:10px; height:25px; overflow:auto; [/newclass] [newclass=.abc-selk-jc-var::-webkit-scrollbar] width:5px; border:0px; [/newclass] [newclass=.abc-selk-jc-var::-webkit-scrollbar-thumb] background-color:#999; border:0px; [/newclass] [newclass=.abc-selk-jc-var::-webkit-scrollbar-track] background-color:#ddd; border:0px; [/newclass] [newclass=.abc-selk-jc-rules] margin:25px 0px 0px 0px; text-align:left; width:125px; display:flex; justify-content:flex-start; align-self:stretch; align-items:flex-end; flex-flow:column nowrap; border-left:1px solid #ddd; [/newclass] [newclass=.abc-selk-jc-rules h2] margin:0px; display:block; width:50px; height:50px; background-color:var(--abc-selk-jc-accent); border-radius:5px; [/newclass] [newclass=.abc-selk-jc-rules img] width:100px; height:100px; border-radius:5px; [/newclass] [newclass=.selk-code] background-color:#eee; width:500px; padding:25px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; margin-top:-25px; position:relative; overflow:hidden; [/newclass] [newclass=.selk-code div] margin:0px!important; display:flex; flex-flow:row wrap; align-items:center; justify-content:center; [/newclass] [newclass=.selk-code div span] display:inline-block; font:700 9px roboto; color:#333; text-transform:uppercase; background-color:#ddd; margin:0px 5px 25px 0px; padding:5px 8px; border-radius:3px; [/newclass] [newclass=.selk-code code] display:block; width:400px!important; height:100px!important;overflow:auto!important; padding:25px!important; text-align:justify; border-radius:5px; font:11px roboto; color:#aaa; background-color:#f7f7f7; border:0px!important; [/newclass] [newclass=.selk-code .code_tag_toggle]margin-top:25px; border:0px!important; color:#333!important; font:700 9px/9px roboto!important; padding:5px 10px!important; border-radius:3px!important;[/newclass] [newclass=.abc-selk-jc-link] position:absolute; bottom:0px; left:0px; height:45px; width:45px!important; background-color:var(--abc-selk-jc-accent); display:flex!important; align-items:center!important; justify-content:center!important; border-radius:0px; [/newclass] [newclass=.abc-selk-jc-link i] font-size:20px; color:#fafafa; [/newclass]

[googlefont=Maven+Pro:900|Open+Sans:400,700]

[newclass=.oblivReply] --oblivAccent: #BB48A4; --oblivBorder: #912C7D;[/newclass]

[attr="class","oblivReply"]

[attr="class","oblivSidebar"]

[attr="class","oblivBody"]

relationship idea here

@tagged

you have basically gone completely off the deep end in every way.

you have officially gone grimdark.

[attr="class","oblivCredit"]SELKIE

[newclass=.oblivReply] width:500px; border-radius:10px; background-color:#fafafa; display:flex; flex-flow:row wrap; overflow:hidden; [/newclass] [newclass=.oblivSidebar] width:200px; min-height:200px; background-color:var(--oblivAccent); display:flex; flex-flow:column wrap; align-items:center; justify-content:center; [/newclass] [newclass=.oblivSidebar img] width:100px; height:100px; position:absolute; border-radius:100%; border:10px solid var(--oblivBorder); background-color:#fafafa; padding:7px; [/newclass] [newclass=.oblivBody] width:280px; display:flex; flex-flow:column wrap; align-items:flex-end; padding:10px; background-color:#444; [/newclass] [newclass=.oblivBody h1] width:300px; font:800 32px/32px Maven Pro; color:#2a2a2a; text-transform:uppercase; text-align:right; margin:0px; [/newclass] [newclass=.oblivBody h2] position:absolute; margin-top:22px; margin-left:-5px; padding:2px 5px; font:900 12px Open Sans; text-transform:uppercase; background-color:var(--oblivAccent); color:#2a2a2a; [/newclass] [newclass=.oblivBody div] width:200px; font:400 12px open sans; padding:25px; margin:21px 0px 15px 0px; align-self:center; color:#aaa; text-align:justify; background-color:#545454; border-radius:10px; [/newclass] [newclass=.oblivBody b] font:700 12px open sans; color:var(--oblivAccent); [/newclass] [newclass=.oblivCredit] font:800 7px roboto; margin-left:450px; [/newclass] [newclass=.oblivCredit a] font:800 7px roboto; [/newclass]

posted Dec 1, 2018 17:46:09 GMT -6 in [JCINK] even in death

[googlefont=Roboto:400,600,700|Raleway:200|Roboto+Condensed:400,700]

[attr="class","selk-code"]

edit as much as you want! don't touch the credits! i'd love to see how you use it!

[dohtml]
<style>
.oblivLightReply { --oblivLightAccent: #B483CD; }
.oblivLightReply { --oblivLightBorder: #84449C; }
</style>

<div align="center">
<div class="oblivLightReply">
<div class="oblivLightSidebar">
<img src="https://image.ibb.co/cYjxPp/image.png">
</div>
<div class="oblivLightBody">
<h1>relationship idea here</h1>
<h2>@tagged</h2>
<div>
you have basically gone completely off the deep end in every way. <break><break>

you have officially gone <b>grimdark</b>.
</div>
</div>
</div>
<div class="oblivLightCredit"><a href="http://pixel-perfect.boards.net/user/15">SELKIE</a></div>
</div>


<link href="https://fonts.googleapis.com/css?family=Maven+Pro:900|Open+Sans:400,700" rel="stylesheet">
<style>
.oblivLightReply { width:500px; border-radius:10px; background-color:#fafafa; display:flex; flex-flow:row wrap; overflow:hidden; }
.oblivLightSidebar { width:200px; min-height:200px; background-color:var(--oblivLightAccent); display:flex; flex-flow:column wrap; align-items:center; justify-content:center; }
.oblivLightSidebar img { width:100px; height:100px; position:absolute; border-radius:100%; border:10px solid var(--oblivLightBorder); background-color:#fafafa; padding:7px; }
.oblivLightBody { width:280px; display:flex; flex-flow:column wrap; align-items:flex-end; padding:10px; background-color:#eee; }
.oblivLightBody h1 { width:300px; font:800 32px/32px Maven Pro; color:#ccc; text-transform:uppercase; text-align:right; margin:0px; }
.oblivLightBody h2 { position:absolute; margin-top:22px; margin-left:-5px; padding:2px 5px; font:900 12px Open Sans; text-transform:uppercase; background-color:var(--oblivLightAccent); color:#121212; }
.oblivLightBody div { width:200px; font:400 12px open sans; padding:25px; margin:21px 0px 15px 0px; align-self:center; color:#7a7a7a; text-align:justify; background-color:#f8f8f8; border-radius:10px; }
.oblivLightBody b { font:700 12px open sans; color:var(--oblivLightAccent); }
.oblivLightCredit { font:800 7px roboto; margin-left:450px; }
.oblivLightCredit a { font:800 7px roboto; }
</style>[/dohtml]

[newclass=.selk-code] background-color:#eee; width:500px; padding:25px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; margin-top:-25px; position:relative; overflow:hidden; [/newclass] [newclass=.selk-code div] margin:0px!important; display:flex; flex-flow:row wrap; align-items:center; justify-content:center; [/newclass] [newclass=.selk-code div span] display:inline-block; font:700 9px roboto; color:#333; text-transform:uppercase; background-color:#ddd; margin:0px 5px 25px 0px; padding:5px 8px; border-radius:3px; [/newclass] [newclass=.selk-code code] display:block; width:400px!important; height:100px!important;overflow:auto!important; padding:25px!important; text-align:justify; border-radius:5px; font:11px roboto; color:#aaa; background-color:#f7f7f7; border:0px!important; [/newclass] [newclass=.selk-code .code_tag_toggle]margin-top:25px; border:0px!important; color:#333!important; font:700 9px/9px roboto!important; padding:5px 10px!important; border-radius:3px!important;[/newclass] [newclass=.abc-selk-link] position:absolute; bottom:0px; right:0px; height:45px; width:45px!important; background-color:var(--abc-selk-accent); display:flex!important; align-items:center!important; justify-content:center!important; border-radius:0px; [/newclass] [newclass=.abc-selk-link i] font-size:20px; color:#fafafa; [/newclass]

[googlefont=Maven+Pro:900|Open+Sans:400,700]

[attr="class","oblivLightReply"]

[attr="class","oblivLightSidebar"]

[attr="class","oblivLightBody"]

relationship idea here

@tagged

you have basically gone completely off the deep end in every way.

you have officially gone grimdark.

[attr="class","oblivLightCredit"]SELKIE

[newclass=.oblivLightReply] --oblivLightAccent: #B483CD; --oblivLightBorder: #84449C;[/newclass] [newclass=.oblivLightReply] width:500px; border-radius:10px; background-color:#fafafa; display:flex; flex-flow:row wrap; overflow:hidden; [/newclass] [newclass=.oblivLightSidebar] width:200px; min-height:200px; background-color:var(--oblivLightAccent); display:flex; flex-flow:column wrap; align-items:center; justify-content:center; [/newclass] [newclass=.oblivLightSidebar img] width:100px; height:100px; position:absolute; border-radius:100%; border:10px solid var(--oblivLightBorder); background-color:#fafafa; padding:7px; [/newclass] [newclass=.oblivLightBody] width:280px; display:flex; flex-flow:column wrap; align-items:flex-end; padding:10px; background-color:#eee; [/newclass] [newclass=.oblivLightBody h1] width:300px; font:800 32px/32px Maven Pro; color:#ccc; text-transform:uppercase; text-align:right; margin:0px; [/newclass] [newclass=.oblivLightBody h2] position:absolute; margin-top:22px; margin-left:-5px; padding:2px 5px; font:900 12px Open Sans; text-transform:uppercase; background-color:var(--oblivLightAccent); color:#121212; [/newclass] [newclass=.oblivLightBody div] width:200px; font:400 12px open sans; padding:25px; margin:21px 0px 15px 0px; align-self:center; color:#7a7a7a; text-align:justify; background-color:#f8f8f8; border-radius:10px; [/newclass] [newclass=.oblivLightBody b] font:700 12px open sans; color:var(--oblivLightAccent); [/newclass] [newclass=.oblivLightCredit] font:800 7px roboto; margin-left:450px; [/newclass] [newclass=.oblivLightCredit a] font:800 7px roboto; [/newclass]