Actions

Work Header

Rating:
Archive Warning:
Category:
Fandom:
Relationships:
Characters:
Additional Tags:
Language:
English
Stats:
Published:
2020-11-22
Completed:
2021-02-25
Words:
871
Chapters:
2/2
Comments:
17
Kudos:
15
Hits:
1,274

Sonic Typing Quirks and Coding Workshop (Not a fic)

Summary:

Sonic, but with typing quirks and colors.

I've also began using this fic as a testing ground for my code.

Notes:

This Fic is mostly for me to test code before I add it to a fic. And is not intended to be it's own story.

Chapter 1

Chapter Text

[I DELETED THIS ON ACCIDENT I AM SO FUCKIG MAD AHHHHHHHHHHHHHHHHHHHHHHHHHHHHH]

Miles: "HA HA HA! I'm so evilly horny!"
Tails: "What NO! Stop that!"
Tails BO:"What does my text look like now?"
Grey Outline: "What does my text look like now?"
Bold: "What does my text look like now?"
Grey: How does the text look?
Black: How does the text look?
Black Outline: "What does my text look like now?"
Black BO: "What does my text look like now?"
Red: How does the text look?
Amy: How does the text look?
Ash: How does the text look?
Barby: How does the text look?
Blaze: How does the text look?
Burning Blaze: How does the text look?
Cream: How does the text look?
Cheese: How does the text look?
Cosmo: How does the text look?
Espio: How does the text look?
Fiona: How does the text look?
Geoffery: How does the text look?
Hershey: How does the text look?
Honey: How does the text look?
Julie-sue: How does the text look?
Knuckles: How does the text look?
Lien-Da: How does the text look?
Lupe: How does the text look?
Mighty: How does the text look?
Mina: How does the text look?
Nicole: How does the text look?
Ray: How does the text look?
Rouge: How does the text look?
Sally: How does the text look?
Shadow: How does the text look?
Silver: How does the text look?
Sticks: How does the text look?
Sonic: How does the text look?
Topaz: How does the text look?
Vanilla: How does the text look?
Vector: How does the text look?
Zooey: How does the text look?
Black: How does the text look?
BO: How does the text look?
Miles: How does the text look?
MC: How does the text look?
mcbg: How does the text look?
Nicole-Outline: How does the text look?
Thought: How does the text look?
Royal: How does the text look?
Metal: How does the text look?
White: How does the text look?
Spoiler: How does the text look?
Double: How does the text look?
DoubleClear: How does this text look

Chapter 2: CSS Code

Notes:

My Sonic CSS workskin as of 2021/02/24

Will update in future.

Chapter Text


#workskin .amy {
color: #FD95C6;
}

#workskin .barby {
color: #ffffff;
text-shadow: -1px 0 #dc4750, 0 1px #dc4750, 1px 0 #dc4750, 0 -1px #dc4750;
}

#workskin .blaze {
color: #8F64CD;
}

#workskin .burningblazeTEMP {
color: #000000;
}

#workskin .cream {
color: #FF5A00;
}

#workskin .charmy {
color: #FF8601;
}

#workskin .chaos {
color: #00d0f0;
}

#workskin .espio {
color: #C9008C;
}

#workskin .fiona {
color: #DE381B;
}

#workskin .geoffrey {
color: #FFFFFF;
text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
}

#workskin .hershey {
color: #ffffff;
text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
}

#workskin .julie,
#workskin .julie-sue {
color: #ed98df;
}

#workskin .knuckles,
#workskin .lien-da {
color: #FF1400;
}

#workskin .lupe {
color: #a399f2;
}

#workskin .mina {
color: #e0d865;
}

#workskin .nicole {
color: #6a0dad;
}

#workskin .rouge {
color: #FA82BA;
}

#workskin .sally {
color: #24cef0;
}

#workskin .scourge {
color: #2bde1b;
}

#workskin .shadow {
color: #000000;
text-shadow: 2px 2px 3px #DC0000;
}

#workskin .silver {
color: #E7EDE9;
text-shadow: -1px 0 #009896, 0 1px #009896, 1px 0 #009896, 0 -1px #009896;
}

#workskin .sonic,
#workskin .metal {
color: #1A50BC;
}

#workskin .tails {
color: #f1b000;
}

#workskin .tikal {
color: #ffa500;
}

#workskin .topaz {
color: #964B00;
}

#workskin .vanilla {
color: #A77DDB;
}

#workskin .vector {
color: #39A400;
}

#workskin .black {
color: #000000;
}

#workskin .bo,
#workskin .blackoutline {
text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
}

#workskin .mc,
#workskin .mindcontrol {
text-shadow: -1px 0 #00FF00, 0 1px #00FF00, 1px 0 #00FF00, 0 -1px #00FF00;
}

#workskin .mcbg {
background: #00FF00;
}

#workskin .no,
#workskin .nicole-outline {
text-shadow: -1px 0 #6a0dad, 0 1px #6a0dad, 1px 0 #6a0dad, 0 -1px #6a0dad;
}

#workskin .royal {
font-variant: small-caps;
}

#workskin .log {
text-align: left;
font-size: 14px;
margin-left: auto;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 35px;
}

#workskin .log .nicole,
#workskin .log .metal,
#workskin .log .shard,
#workskin .robo,
#workskin .monospace {
font-family: "Lucida Console", "Courier", "monospace";
}

#workskin .log.shadow {
font-family: "Times New Roman", "Times", "serif";
}

#workskin .phone {
word-break: break-word;
max-width: 300px;
font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
display: table;
margin: auto;
}

#workskin .header {
min-width: 300px;
background-color: #f6f6f6;
border-bottom: 1px solid #b2b2b2;
color: #000000;
font-weight: bold;
padding-bottom: .5em;
padding-top: .5em;
margin-left: -.5em;
margin-right: -.5em;
margin-bottom: -2em;
text-align: center;
text-transform: capitalize;
display: table;
}

#workskin .messagebody {
background-color: #424242;
display: table;
padding-left: .5em;
padding-right: .5em;
border-radius: .5em;
}

#workskin .text,
#workskin .tailstext {
float: left;
margin: 0 0 0.5em;
border-radius: 1em;
padding: 0.5em 1em;
max-width: 75%;
clear: both;
position: relative;
color: #000000;
background: #e5e5ea;
}

#workskin .tailstext {
color: #ffffff;
background: #f1b000;
}

#workskin .text::after,
#workskin .tailstext:after {
content: "";
position: absolute;
left: -.5em;
bottom: 0;
width: 0.5em;
height: 1em;
border-right: 0.5em solid #e5e5ea;
border-bottom-right-radius: 1em 0.5em;
}

#workskin .tailstext:after {
border-right: 0.5em solid #f1b000;
}

#workskin .breply,
#workskin .barbytext {
float: right;
color: #FFFFFF;
margin: 0 0 0.5em;
border-radius: 1em;
padding: 0.5em 1em;
background: #1289fe;
max-width: 75%;
clear: both;
position: relative;
}

#workskin .barbytext {
color: #FFFFFF;
background: #dc4750;
}

#workskin .breply::after,
#workskin .barbytext::after {
content: "";
position: absolute;
right: -0.5em;
bottom: 0;
width: 0.5em;
height: 1em;
border-bottom-left-radius: 1em 0.5em;
border-left: 0.5em solid #1289fe;
}

#workskin .barbytext::after {
border-left: 0.5em solid #dc4750;
}

#workskin .hide {
display: none;
}

#workskin .time {
min-width: 295px;
color: #f7f7f7;
font-size: .75em;
padding-bottom: .5em;
padding-top: .5em;
margin-left: -.5em;
margin-right: -.5em;
margin-bottom: -.5em;
text-align: center;
display: table;
}

#workskin .paragraph p {
line-height: 1.35;
margin: 0;
padding: 0;
text-indent: 25px;
}

#workskin .no-indent {
text-indent: 0 !important;
}

#workskin .img src {
max-width: 100%;
height: auto;
}