the idiot's incoherent guide to learning css & html for ao3 in dystopia

by Anonymous

Chapter 3: [ EPISTOLARY ] Gmail Interface Workskin Version 1

CSS ( Version 01 ) ▲

The following is the CSS for the preview shown above. Below the author will be providing a breakdown of the alterations that were made from the base code.

#workskin .gmail {
width: 84%;
padding: 5px;
background-color: #f8f8ff;
text-align: left;
margin: auto;
}

#workskin .emailsubject {
color: #202124;
font-family: 'Google Sans',helvetica;
text-align: justify;
font-size: 22px;
margin-left: 10px;
margin-right: 10px;
display: block;
cursor: pointer;
}

#workskin .inbox {
margin: 0 0 8px;
border-radius: 4px 4px 4px 4px;
padding: 0 2.6666656px 0 4px;
background: #F6AF69;
color: #f8f8ff;
position: relative;
cursor: pointer;
margin-left: 10px;
}

#workskin .inbox2 {
margin: 0 0 8px;
border-radius: 4px 4px 4px 4px;
padding: 0 2.6666656px 0 4px;
background: #FEEC9A;
color: #454D32;
position: relative;
cursor: pointer;
margin-left: 10px;
}

#workskin .inbox3 {
margin: 0 0 8px;
border-radius: 4px 4px 4px 4px;
padding: 0 2.6666656px 0 4px;
background: #79A98B;
color: #f8f8ff;
position: relative;
cursor: pointer;
margin-left: 10px;
}

#workskin .inbox4 {
margin: 0 0 8px;
border-radius: 4px 4px 4px 4px;
padding: 0 2.6666656px 0 4px;
background: #9B936C;
color: #f8f8ff;
position: relative;
cursor: pointer;
margin-left: 10px;
}

#workskin .inbox5 {
margin: 0 0 8px;
border-radius: 4px 4px 4px 4px;
padding: 0 2.6666656px 0 4px;
background: #8A9462;
color: #f8f8ff;
position: relative;
cursor: pointer;
margin-left: 10px;
}

#workskin .emailicon {
float: left;
width: 40px;
height: 40px;
border-radius: 50%;
padding-right: 10px;
cursor: alias;
}

#workskin .name {
color: #000000;
font-family: arial;
font-weight: bold;
}

#workskin .mail {
color: #5f6368;
font-family: arial;
cursor: pointer;
padding-right: 10px;
}

#workskin .emailtime {
color: #5f6368;
font-family: arial;
float: right;
padding-right: 10px;
}

#workskin .time {
color: #5f6368;
font-family: arial;
padding-right: 10px;
}

#workskin .arrowdown {
color: #5f6368;
font-size: 12px;
font-family: arial;
cursor: pointer;
}

#workskin .iconstop {
float: right;
margin-right: auto;
max-width: 65px;
cursor: pointer;
padding: 10px;
}

#workskin .iconsbot {
float: right;
max-width: 125px;
cursor: pointer;
}

#workskin .imgheader {
width: 841px;
max-width: 90%;
margin-left: 50px;
}

#workskin .emailbody {
width: 800px;
padding-top: 0;
padding-bottom: 0;
padding-left: 2px;
padding-right: 2px;
text-align: justify;
color: #000000;
background-color: #f8f8ff;
margin-left: auto;
margin-right: auto;
overflow: auto;
display: block;
height: 350px;
max-width: 90%;
font-family: arial;
}

#workskin .emailbody::-webkit-scrollbar {
-webkit-appearance: none;
}

#workskin .emailbody::-webkit-scrollbar:vertical {
width: 12px;
}

#workskin .emailbody::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #f8f8ff;
}

#workskin .emailbody::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #f8f8ff;
}

#workskin .attachsep {
width: 100%;
font-weight: 300;
padding-top: 0.5em;
margin-top: 0.5em;
border-top: .05em solid #ddd;
}

#workskin .docattach {
color: #1B6EF3;
font-weight: bold;
background-color: #f8f8ff;
border-color: #cfcfcf;
border-style: solid;
border-width: 1px;
margin: .25em;
padding: .25em;
cursor: pointer;
display: inline-table;
}

#workskin .docattach::before {
color: #000000;
content: '\1F5BA';
}

#workskin .imageattach {
color: #1B6EF3;
font-weight: bold;
background-color: #f8f8ff;
border-color: #cfcfcf;
border-style: solid;
border-width: 1px;
margin: .25em;
padding: .25em;
cursor: pointer;
display: inline-table;
}

#workskin .imageattach::before {
color: #000000;
content: '\1F5BC';
}

#workskin .attach {
color: #1B6EF3;
font-weight: bold;
background-color: #f8f8ff;
border-color: #cfcfcf;
border-style: solid;
border-width: 1px;
margin: .25em;
padding: .25em;
cursor: pointer;
display: inline-table;
}

#workskin .attach::before {
content: '\1F4CE';
color: #000000;
}

➥ 【ＱＵＩＣＫ　ＮＯＴＥ！】
If you're lost as to why the workskin on itself starts off with another name (@sunsercurbed named the workskin as headerbox ), please note that this is simply renamed because once you add multiple of workskins into your Archive work, it will get confusing in the long run. It will have around the same exact code as the base code aside from slight alterations.

 

HTML ( Version 01 ) ▲

The following is the HTML for the preview shown above.

<div class="gmail">

<p><span class="emailsubject">How a Locksmith, a Dictator and a WWII General Are Connected to $22 Billion in Lost Treasure</span> <span class="inbox"> Inbox <small>✖</small> </span><span class="inbox2"> Email Subscription <small>✖ </small> </span><span class="inbox3"> Newsletter <small>✖</small> </span> <img class="iconstop" src="https://cdn.discordapp.com/attachments/886737487970566164/979814985138044998/print1.png" /><br />
<br />
</p>

<p>
    <img class="emailicon" src="https://i.pinimg.com/originals/26/d0/2f/26d02f43993c1983e294a2b6ded39d22.png" width="40px" height="40px" />
  </p>

<p><span class="name">HISTORY</span> <span class="mail"><[email protected]></span> <img class="iconsbot" src="https://cdn.discordapp.com/attachments/886737487970566164/979814984894787684/unstar1.png" /><span class="emailtime">11:42 AM (3 hours ago)</span><br />
<span class="mail">to me</span><span class="arrowdown"> <strong>▼</strong></span></p>

<p></p><div class="emailbody"><h2>
      <span class="black">How a Locksmith, a Dictator and a WWII General Are Connected to $22 Billion in Lost Treasure</span>
    </h2><hr />

<p><big>𝙁𝙞𝙧𝙨𝙩 𝙘𝙖𝙢𝙚 𝙩𝙝𝙚 𝙙𝙞𝙖𝙢𝙤𝙣𝙙-𝙛𝙞𝙡𝙡𝙚𝙙 𝙜𝙤𝙡𝙙𝙚𝙣 𝘽𝙪𝙙𝙙𝙝𝙖 𝙖𝙣𝙙 𝙩𝙝𝙚 𝙗𝙤𝙭 𝙤𝙛 𝙜𝙤𝙡𝙙 𝙗𝙖𝙧𝙨. 𝙏𝙝𝙚𝙣 𝙘𝙖𝙢𝙚 𝙩𝙝𝙚 𝙩𝙤𝙧𝙩𝙪𝙧𝙚.</big><br />
ɢʀᴇɢ ᴅᴀᴜɢʜᴇʀᴛʏ ᴀᴘʀ <small>29, 2019</small></p>

<p>Roxas v. Marcos was a classic David and Goliath tale, a battle between two wildly mismatched opponents.</p>

<p>Goliath in this case was the ruthless Philippine dictator Ferdinand Marcos, a man with a personal fortune estimated in the billions of dollars and an army of thugs and torturers at his command.</p>

<p>David was a 27-year-old Filipino locksmith and amateur treasure hunter named Rogelio Roxas.</p>

<p>At stake in the fight was a golden Buddha statue and other loot Roxas said he had unearthed from a secret underground tunnel. It was believed to be part a long-rumored stash of plunder that Japanese general Tomoyuki Yamashita had buried in the Philippines in the waning days of World War II. Marcos’ agents had stolen it from Roxas at gunpoint. Roxas wanted it back.</p>

<p>
      <img class="responsive" src="https://www.history.com/.image/c_limit%2Ccs_srgb%2Cq_auto:good%2Cw_700/MTYzNzE0NTM2ODkxNzU0NDMz/ap_9606240308.webp" alt="" width="854" height="519" />
    </p>

<p align="justify">
      <a href="https://www.history.com/news/wwii-yamashita-treasure-roxas-marcos-gold-buddha" rel="nofollow"> <span class="black">ᴊᴏꜱᴇ ʀᴏxᴀꜱ, ʀɪɢʜᴛ, ʜᴏʟᴅꜱ ᴛʜᴇ ɢᴏʟᴅᴇɴ ʙᴜᴅᴅʜᴀ ᴀꜱ ʜᴇɴʀʏ ʀᴏxᴀꜱ, ꜱᴏɴ ᴏꜰ ʀᴏɢᴇʟɪᴏ, ᴛʜᴇ ᴏʀɪɢɪɴᴀʟ ᴏᴡɴᴇʀ ᴏꜰ ᴛʜᴇ ʙᴜᴅᴅʜᴀ, ᴡᴀᴛᴄʜᴇꜱ ᴀᴛ ᴀ ᴄᴏᴜʀᴛʜᴏᴜꜱᴇ ɪɴ ʙᴀɢᴜɪᴏ ᴄɪᴛʏ, ᴡʜᴇʀᴇ ɪᴛ ᴡᴀꜱ ᴏʀᴅᴇʀᴇᴅ ʀᴇʟᴇᴀꜱᴇᴅ ᴛᴏ ᴛʜᴇ ᴛʀᴜꜱᴛᴇᴇʜɪᴘ ᴏꜰ ᴛʜᴇ ʀᴏxᴀꜱ ꜰᴀᴍɪʟʏ ᴏɴ ᴍᴏɴᴅᴀʏ ᴊᴜɴᴇ <small> 24, 1996. </small> | ꜱᴛᴇᴘʜᴇɴ ᴡᴀʟʟᴀᴄᴇ/ᴀᴘ ᴘʜᴏᴛᴏ</span> </a>
    </p>

<p>When Roxas v. Marcos finally played out in a Honolulu courtroom, more than 20 years later, Roxas would not only win, but win big. The jury ordered the Marcos family to pay a staggering $22 billion, then the largest award on record.</p>

<p>
      <img class="responsive" src="https://i0.wp.com/currentph.com/wp-content/uploads/2020/02/7508809E-2A42-44FF-9862-C88598E35879.jpeg?resize=696%2C423&amp;ssl=1" alt="" width="854" height="519" />
    </p>

<p align="center">
      <a href="https://currentph.com/2020/02/26/karapatan-remembers-thousands-of-victims-under-marcos-regime/" rel="nofollow"> <span class="black">ᴘᴇᴏᴘʟᴇ ᴘᴏᴡᴇʀ ʀᴇᴠᴏʟᴜᴛɪᴏɴ ᴛʜᴀᴛ ᴛᴏᴘᴘʟᴇᴅ ᴛʜᴇ ᴛᴡᴏ ᴅᴇᴄᴀᴅᴇꜱ ᴏꜰ ᴅɪᴄᴛᴀᴛᴏʀꜱʜɪᴘ. | ɪᴍᴀɢᴇ: ᴄᴜʀʀᴇɴᴛᴘʜ</span> </a>
    </p>

<p></p><center>

<p><br />
<span class="arrowdown"> <u>Get HISTORY at Your Fingertips! View this email in your browser.</u> </span>
      </p></center>

<p> </p>

<p><b>ATTACHMENTS:</b><br />
<span class="docattach">  <u>thegoldenbuddha.pdf (9 KB) </u></span> <span class="imageattach">  <u>Jose Roxas.gif (70 KB) </u></span> <span class="attach">  <u>PP1.xyz (5 MB) </u></span></p></div></div>

 

CODE ELEMENTS & THE EMOTIONAL BREAKDOWN ▲
A.  EMAIL TEXT CONTENT

The first in the agenda is making the workskin compatible with multiple siteskins. This means that texts within the containers must have specific lines to indicate the color. In this way the siteskin does not override the text colors and create a white text against white container. Next to this is also making sure that the is all justified. Another thing to tackle within this is adjusting the text so it does not spill over the container. As the author of this Idiot’s Guide is a mobile reader, it is important to keep that in priority as well. Below you will be able to see a code that addresses all these:

#workskin .emailbody {
width: 800px;
padding-top: 0;
padding-bottom: 0;
padding-left: 2px;
padding-right: 2px;
text-align: justify;
color: #000000;
background-color: #f8f8ff;
margin-left: auto;
margin-right: auto;
overflow: auto;
display: block;
height: 350px;
max-width: 90%;
font-family: arial;
}

➥ 【ＱＵＩＣＫ　ＮＯＴＥ！】
The color of the email body is off white on purpose as the entire < div class > is actually also off white. Change the encircled value at any time!

This code kills as many birds with one go as possible. Version 01 of this altered workskin makes use of this code. This allows the text color and container to remain consistent even if the user is using siteskins that adjusts text color and background. Extracted from the code above, the code below is added: 

text-align: justify;
color: #000000;
background-color: #f8f8ff;

B.  ADDITIONAL SCROLLBAR

The second agenda is adding the scroll bar. The reason being that having a scroll bar gives the semblance of interaction between the reader and the Archive work. In the code provided above, we added: 

overflow: auto;
display: block;

The < display > property specifies how the display of an element behaves. There are different values to which can be used here, but< block > in particular takes up the entire width specified and creates a new line. It functions similarly as < p >. As for the < overflow >, it specifies the content within your element is displayed. The value of < auto > in particular adds the scrollbar element to the content but only if it is necessary. So if your email only contains one line, then there will be no scroll. But if it contains wordcount that cannot be displayed in your specific height, then it adds the scrollbar. 

After looking over HOW TO MIMIC EMAIL WINDOWS by La_Temperanza, the author took part of their code and added it into the existingcode. For the scrollbar, La_Temperanza added < ::-webkit-scrollbar >. This command allows us to modify the visual presentation of the scrollbar that can be summoned by the value of < auto > in < overflow >. Chrome, Edge, Safari and Opera support the non-standard < ::-webkit-scrollbar >.

#workskin .emailbody::-webkit-scrollbar {
-webkit-appearance: none;
}
#workskin .emailbody::-webkit-scrollbar:vertical {
width: 12px;
}
#workskin .emailbody::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #f8f8ff;
}
#workskin .emailbody::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #f8f8ff;
}

Note that the background is off white therefore, the < border > and < background > should have the same off white color value so it blends seamlessly with the background. Do not forget to alter this if you intend to change the color of the background.

To expound more unto that, look into it here: HOW TO CREATE CUSTOM SCROLLBARS

C.  EMAIL LABELS

This was initially not part of the alterations done on the source code, but the author wanted to experiment on being able to different colored labels that would create a second line. After the tweaks on the margins and padding of the header, it is now possible to add more labels with consistent spacing and will fall on the second line with the same initial margin. To add customize colors and add more labels, the CSS code below can be altered alongside the corresponding HTML.

CSS Code for Label:

#workskin .inbox {
margin: 0 0 8px;
border-radius: 4px 4px 4px 4px;
padding: 0 2.6666656px 0 4px;
background: #F6AF69;
color: #f8f8ff;
position: relative;
cursor: pointer;
margin-left: 10px;
}

#workskin .inbox2 {
margin: 0 0 8px;
border-radius: 4px 4px 4px 4px;
padding: 0 2.6666656px 0 4px;
background: #FEEC9A;
color: #454D32;
position: relative;
cursor: pointer;
margin-left: 10px;
}

#workskin .inbox3 {
margin: 0 0 8px;
border-radius: 4px 4px 4px 4px;
padding: 0 2.6666656px 0 4px;
background: #79A98B;
color: #f8f8ff;
position: relative;
cursor: pointer;
margin-left: 10px;
}

#workskin .inbox4 {
margin: 0 0 8px;
border-radius: 4px 4px 4px 4px;
padding: 0 2.6666656px 0 4px;
background: #9B936C;
color: #f8f8ff;
position: relative;
cursor: pointer;
margin-left: 10px;
}

#workskin .inbox4 {
margin: 0 0 8px;
border-radius: 4px 4px 4px 4px;
padding: 0 2.6666656px 0 4px;
background: #8A9462;
color: #f8f8ff;
position: relative;
cursor: pointer;
margin-left: 10px;
}

The provided code above has up to 5 different label colors available. Change the hexcode (encircled pink above) to experiment on different colors. Note to also alter the < text color > with the hexcode (encircled with orange) .

HTML Code for Label:

Feel free to customize the email labels. In the HTML code provided below, customize the text in orange:

<span class="inbox"> Inbox <small>✖</small></span> 
  

Below is the preview of the colors for the labels provided within the code:

Inbox ✖ Inbox2 ✖ Inbox3 ✖

Inbox4 ✖ Inbox5 ✖

Notes:

WORK IN PROGRESS. To add: Attachment extracted from La_Temperanza's tutorial, Signature, Sent Email Tutorial, WORSKIN V.2 and Breakdown, WORSKIN V.3 and Breakdown, WORSKIN V.4 and Breakdown, and Graphic Element Resources.

Notes:

𝗪𝗢𝗥𝗞𝗦𝗞𝗜𝗡 𝗦𝗢𝗨𝗥𝗖𝗘 𝗖𝗢𝗗𝗘:
The following workskins are not made by the author but merely altered from existing workskins. The following are the direct links of the workskins the author has altered:

[ 1 ] HOW TO MIMIC EMAIL WINDOWS by La_Temperanza.
[ 2 ] GMAIL EMAIL SKIN by sunsetcurbed.

 

𝗔𝗥𝗧𝗜𝗖𝗟𝗘 𝗖𝗢𝗡𝗧𝗘𝗡𝗧 𝗦𝗢𝗨𝗥𝗖𝗘𝗦:
To be able to employ crack ass attention to the HTML and CSS coding of this work; and lessen the amount of time needed to come up with content, without the use of default Lorem Ipsum, the author took the liberty to borrow excerpts from existing articles. The following are the direct links of the source material used in verbatim in this work:

[ 1 ] Daugherty, Greg. “How a Locksmith, a Dictator and a WWII General Are Connected to $22 Billion in Lost Treasure.” History.com, A&E Television Networks, 29 Apr. 2019, https://www.history.com/news/wwii-yamashita-treasure-roxas-marcos-gold-buddha.