Pesterchum

Tags: homestuck, pesterchum

Description:

Makes your page look like Pesterchum, the fictional chat client from Homestuck :o)

If you find anything that looks wrong, just let me know in the comments and I'll patch it in an update.

!!please credit if used!!

Current Version: 1.1

Patch note: added support for different blood colors

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by hubert breast (https://layouts.spacehey.com/layout?id=21441) -->

<!-- (c) Layout created by hubert breast (https://layouts.spacehey.com/layout?id=21441) -->

<style>
  /*
    PESTERCHUM THEME
    LAYOUT MADE BY https://spacehey.com/sigmundfreud
    V1.0 May 1 2022
  */
  @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
  @font-face {
      font-family: 'header';
      src: url('https://external-media.spacehey.net/media/smPo_RcgKw6ohoWFs5gvUAFyiNe_1fW3lSRa0eldvH40=/https://file.garden/X1htvgJ0DEp_tp-Z/MSPFA%20other/fontstuck.ttf');
  }
  /*HEMOSPECTRUM COLOR GUIDE
    RED:#FF0000, RUST: #a00103, BRONZE: #a25203, GOLD: #a1a100, LIME: #678900, OLIVE: #416600, JADE: #078446, TEAL: #008282, CERULEAN: #004182, INDIGO:#0021bc, PURPLE: #440a7f, VIIOLET:#6a006a, FUSCHIIA: #99004a
  */
  :root{--blood-color: grey;}

  :root {
      --logo-blue: #F4B840;
      --lighter-blue: black;
      --darker-blue: #BB8B2E;
      --light-orange: var(--logo-blue);
      --dark-orange: black;
  }

  /*changes spacehey logo with pesterchum logo*/
  img.logo{
      content: url("https://64.media.tumblr.com/60dd3f38dc8001e311d9d2ce492e7e2a/f4c16ad79c503265-9c/s2048x3072/4930b5bc4aae0b7f40d4b40460c646b92d45804a.png");
      width: 103px !important;
      height: 63px !important;
  }
  .top{ padding-bottom: 5px !important; padding-top: 8px !important;}

  /*general shennanigans*/
  .container{ width: 100%; }
  main{ padding-left: 10px;padding-right: 10px;}
  body, main, footer{background-color: black !important;}

  /*left side*/
  .blurbs p{color: var(--blood-color) !important;}

  h1{
      font-family: header, monospace !important;
      font-size: 2em !important;
      color: white
  }

  .col.left, .links, .top{
      font-family: 'VT323', monospace;
      font-size: 1.25em;
  }

  .links{text-align: center;}

  nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
      content: " ▪ ";
      color: white;
  }

  .col.left{
      width: 30%;
      border: 3px solid yellow;
      background-color: var(--logo-blue);
  }

  .col.left a{color: white;}

  .details{padding-bottom: 60px;}

  .details, .mood, .contact, .url-info, .table-section{
      margin-bottom: 10px;
      border: 3px solid yellow !important;
      background-color: black;
      color: white;
  }

  .profile-pic img{
      margin: 20px;
  }

  .online img{
      max-width: 15px;
      max-height: 15px;
      content: url("https://external-preview.redd.it/857aq6Jb7SnQv5v0QcTPsJ5UlkXC9JaPF9xoI2rzje8.jpg?auto=webp&s=86be4c4a49af01bf51a4dfc3b7c006fc1ee5a591")
  }

  .online{color: var(--logo-blue);}

  .links{
      background-color: var(--darker-blue)!important;
  }

  .details-table {background-color: var(--darker-blue);}
  .details-table td, .details-table td:first-child, .details-table a, .details-table p{
      background-color: yellow;
      color: black !important;
  }
  .details-table td:first-child{
      text-transform: uppercase;
      text-align: center;
  }

  /*right side*/
  .col.right{
      border: 3px solid yellow;
      background-color: var(--logo-blue);
      font-family: Courier, monospace;
      font-size: 1.25em;
  }

  .right .inner, .blog-preview{
      background-color: white;
      border: 3px solid var(--darker-blue);
  }

  .blog-preview{padding-left: 10px;}

  .right .heading{
      font-family: 'VT323', monospace;
      font-size: 1.25em;
  }

  .right .inner, .count{
      color: gray !important;
  }
  /*THIS WAS MADE BY https://spacehey.com/sigmundfreud*/
  .profile-info{
      padding: 0px;
      border: none;
  }

  .profile-info .inner{
      padding-right: 35%;
      padding-left: 35%;
  }

  /*comments*/
  .comments-table td, .comments-table td:first-child{background-color:white;}
  .comments-table td:first-child {width: 90px;}
  #comments{margin-top: 30px;}
  .comment-replies{
      border: none;
      padding-top: 0;
      margin-left: 20px;
      margin-top: 0;
    }
  small, .comment-reply b{font-size: 10px !important;}
  table.comments-table{
      display: block;
      height: 400px!important;
      overflow-y: scroll;
  }

  button {
    border: none;
    background-color: rgba(0,0,0, .25);
  }
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 354 comments ( View all | Add Comment )

Harmony/Rapture	1769298147 using. tysm! :) Report Comment
ody	1769086866 using :] Report Comment
Jen	1768581909 Using Report Comment
telekineticGodhead	1767857307 using Report Comment
Krem	1767815928 using... Report Comment
wilbutt	1767581142 using 4 blog... , Report Comment
steffi	1766983982 using this, its so peak!!!! :B Report Comment
tous_Tous	1766630263 this is legendary thx (:B Report Comment
Caprisun	1766103990 Using this because holy shit this is peak brotato Report Comment
Caprisun	1766103990 Using this because holy shit this is peak brotato Report Comment
Caprisun	1766103984 Using this because holy shit this is peak brotato Report Comment
VsC-	1765857482 (I am using this thank You) Report Comment
rachel ^0^	1765646954 using :3 Report Comment
owen	1765330568 :33 woahh!! this is so meowsome im gonna use it!! Report Comment
ectoBiologist [EB]	1764979218 using! Report Comment
elliot !!	1764724747 USING TYSMMM Report Comment
﹕ 　fizz !	1764609990 wait this is awesome im using this Report Comment
Oracle	1764553715 usingggg this is peak Report Comment
actuallyStylus	1764539256 VERY cool. will be using this. Report Comment
Fishy ♡	1763826231 ts so peak im using ok?.. Report Comment