Skip header

Actions

Work Header

Rating:

General Audiences

Archive Warning:

No Archive Warnings Apply

Category:

Fandoms:

Additional Tags:

Language:

English

Series:

← Previous Work Part 4 of AO3 workskins Next Work →

Stats:

Published:: 2024-04-20
Completed:: 2024-04-20
Words:: 5,675
Chapters:: 3/3
Comments:: 7
Kudos:: 40
Bookmarks:: 31
Hits:: 1,244

Mimicking Twitter Posts for Fics - Some Twitter Workskins

Summary:

A repository of a twitter skin I made for Ao3, so you can add your characters tweeting at eachother inside your fic. Friendly towards different siteskins, disabled workskins, screenreaders and mobile readers.
This is mainly a demo, not a tutorial. I am currently planning to create a generator for this workskin on this site.

Notes:

Inspired by Twitter Work Skin: Tweets & Profile (newest layout) by starskin

(See the end of the work for other works inspired by this one.)

Chapter Text

Twitter Workskin

Here's my attempt at a workskin! I started this using code from the work I've linked to this fic. The goal of this skin is to be different siteskin-friendly, mobile-friendly, screenreader-friendly, and disabled workskin-friendly ( as in, it still resembles a tweet using just basic HTML).

I've also included as many options for what to add as I can, as well as using nth-child and before / after pseudo classes to 'automate' as much as possible, so the HTML isn't super bulky.

The icons I used are from SVG replo / I took them from the workskins I linked above.

Simple Tweet

-- Tweet: --

Wow, what a very nice and accessible workskin. What should I tweet today?

Posted 02:00 · 2023-12-16

[Replies: 2 ]

[Retweets: 32 ]

[Likes: 45 ]

-- Tweet: --

This is what it looks like with the creator's workskin disabled! All of the new words are still read by screenreaders when the workskin is active, making it more accessible than words with no context added I'd also like to think the dividers are a nice touch.

Posted 02:00 · 2023-12-16

[Replies: 2 ]

[Retweets: 32 ]

[Likes: 45 ]

Tweets of different styles

-- Tweet: --

This is the 'Ao3 default' style. Try using some siteskins like reversi (located in the footer of the Ao3 website) to see how it changes!

Posted 02:00 · 2023-12-16

[Replies: 2 ]

[Retweets: 32 ]

[Likes: 45 ]

-- Tweet: --

This is the dark mode style, makes it easy on the eyes

Posted 02:00 · 2023-12-16

[Replies: 2 ]

[Retweets: 32 ]

[Likes: 45 ]

-- Tweet: --

Lastly, a minimal style, this is the least intrusive option.

Posted 02:00 · 2023-12-16

[Replies: 2 ]

[Retweets: 32 ]

[Likes: 45 ]

Tweet with reply

-- Tweet: --

The regular tweet and the reply tweet are both quite similar, only the formatting is different, and they use almost all of the same classes.

Posted 02:00 · 2023-12-16

[Replies: 2 ]

[Retweets: 32 ]

[Likes: 45 ]

-- Reply Tweet: --

The reply tweet is seperated into two columns thanks to display: table. The div that holds the icon is set to a specified min-width and max-width, and the div that holds the body of the tweet's width is set to auto.

the divider for the regular tweet is a pseudo element of the stats div, and its disabled in the reply tweet

[Replies: 2 ]

[Retweets: 32 ]

[Likes: 45 ]

Tweet with reply - stripped

-- Tweet: --

Adding the date, time, handle, the stats, and even icon are all optional. Pretty cool, right? the only thing you need is your username and some text.

-- Reply Tweet: --

The reply tweet keeps a bit of its left-margin to distinguish it.

[Replies: 2 ]

[Retweets: 32 ]

[Likes: 45 ]

Adding Images and Polls

You can add both images and polls quite easily. Don't forget to add alt text to the image!

Hawks from BNHA looking sexy

-- Poll: --

Option: Hawks
Option: Keigo Takami
Option: Dabi's summer fling

4 votes · 23 hours left

Posted 03:45 · 2023-12-18

[Replies: 2 ]

[Retweets: 32 ]

[Likes: 45 ]

-- Tweet: --

Another poll, by itself this time

-- Poll: --

Option: Option one
Option: Option two
Option: Option three

268 votes · 23 hours left

Posted 02:00 · 2023-12-16

[Replies: 234 ]

[Retweets: 32K ]

[Likes: 454M ]

Tweet with answered poll

-- Tweet: --

This poll has been answered! This is a bit trickier for me to automate, as I have to make a new CSS class for each poll option (because of its percent-age and which result won).

In this poll, you've voted for option two, and the poll is finished, with option one winning. Take a look at this without the workskin, I've made it so you still now which poll won as well as what you voted for.

-- Poll: --

50% voted for the winning option: Option one
20% voted for option: Option two - You voted for this option
30% voted for option: Option three

4 votes · final results

[Replies: 234 ]

[Retweets: 32K ]

[Likes: 454M ]

-- Tweet: --

This poll has been answered (option two again), but it's not finished, so there's no winner yet

-- Poll: --

50% voted for option: Option one
20% voted for option: Option two - You voted for this option
30% voted for option: Option three

4 votes · 2h left

[Replies: 234 ]

[Retweets: 32K ]

[Likes: 454M ]

-- Tweet: --

Here's one more poll that you haven't voted in, and is also ongoing

-- Poll: --

50% voted for option: Option one
20% voted for option: Option two
30% voted for option: Option three

4 votes · 2h left

[Replies: 234 ]

[Retweets: 32K ]

[Likes: 454M ]

Quote tweet

-- Tweet: --

Now for quote tweets. These are also seperated by dividers and a blockquote when the workskin is disabled.

-- Quote Tweet: --

Name: steve @thefirstmc · Posted 20h ago

images and polls also work in quote tweets!

-- Poll: --

Option: Hawks

Option: Keigo Takami

Option: Dabi's summer fling

4 votes · 23 hours left

[Replies: 234 ]

[Retweets: 32K ]

[Likes: 454M ]

Tweet with multiple reply

-- Tweet: --

Let's look at all the things we can add to the reply tweets!

Posted 02:00 · 2023-12-16

[Replies: 2 ]

[Retweets: 32 ]

[Likes: 45 ]

-- Reply Tweet: --

have an image:

Hawks from BNHA looking sexy

[Replies: 2 ]

[Retweets: 32 ]

[Likes: 45 ]

-- Reply Tweet: --

now a quote tweet, with both an image and a poll.

-- Quote Tweet: --

Name: steve @thefirstmc · Posted 20h ago

images and poll coming right up!

-- Poll: --

Option: Hawks

Option: Keigo Takami

Option: Dabi's summer fling

4 votes · 23 hours left

[Replies: 2 ]

[Retweets: 32 ]

[Likes: 45 ]

-- Reply Tweet: --

Finally, have an answered poll:

-- Poll: --

Winning Option: Option one
Option: Option two - You voted for this option
Option: Option three

4 votes · final results

[Replies: 2 ]

[Retweets: 32 ]

[Likes: 45 ]

Chapter 2: HTML

Summary:

the HTML used for the demo

Chapter Text

Simple Tweet

<div>
<div>
<hr>
<span class="screenreader">-- Tweet: -- </span>
<div class="header">
<div>
<p><img src="https://images.squidge.org/images/2023/09/14/00d56b33f5a708454d853fbad6d2e18a.jpeg"
width="50" height="50" class="hidden" hidden alt=""></p>
</div>
<div class="name-handle-div">
<p class="name"><span class="screenreader">Username: </span><b>HelloWorld</b></p>
<p class="handle"><span class="screenreader">Handle: </span>@twitteruser</p>
</div>
</div>

<div class="text">
<p> This is what it looks like with the creator's workskin disabled! All of the new words are
still read by screenreaders when the workskin is active, making it more accessible than
words with no context added I'd also like to think the dividers are a nice touch.
</p>
<div class="timestamp"><p><span class="screenreader">Posted</span> 02:00 · 2023-12-16</p></div>
</div>

<table><tr>
<td class="reply"><p><span class="screenreader">[Replies: </span> 2 <span class="screenreader">]</span></p></td>
<td class="retweet"><p><span class="screenreader">[Retweets: </span> 32 <span class="screenreader">]</span></p></td>
<td class="like"><p><span class="screenreader">[Likes: </span> 45 <span class="screenreader">]</span></p></td>
</tr></table>
<hr>
</div>
</div>
</div>

Tweets of different styles

<div class="twtdiv">
<div class="twt">
<hr>
<span class="screenreader">-- Tweet: -- </span>
<div class="header">
<div>
<p><img src="https://images.squidge.org/images/2023/09/14/00d56b33f5a708454d853fbad6d2e18a.jpeg"
width="50" height="50" class="hidden" hidden alt=""></p>
</div>
<div class="name-handle-div">
<p class="name"><span class="screenreader">Username: </span><b>HelloWorld</b></p>
<p class="handle"><span class="screenreader">Handle: </span>@twitteruser</p>
</div>
</div>

<div class="text">
<p> This is the 'Ao3 default' style. Try using some siteskins like reversi (located in the footer of the Ao3
website) to see how it changes!
</p>
<div class="timestamp"><p><span class="screenreader">Posted</span> 02:00 · 2023-12-16</p></div>
</div>

<table><tr>
<td class="reply"><p><span class="screenreader">[Replies: </span> 2 <span class="screenreader">]</span></p></td>
<td class="retweet"><p><span class="screenreader">[Retweets: </span> 32 <span class="screenreader">]</span></p></td>
<td class="like"><p><span class="screenreader">[Likes: </span> 45 <span class="screenreader">]</span></p></td>
</tr></table>
<hr>
</div>
</div>

<div class="twtdiv twt-dark">
<div class="twt">
<hr>
<span class="screenreader">-- Tweet: -- </span>
<div class="header">
<div>
<p><img src="https://images.squidge.org/images/2023/09/14/00d56b33f5a708454d853fbad6d2e18a.jpeg"
width="50" height="50" class="hidden" hidden alt=""></p>
</div>
<div class="name-handle-div">
<p class="name"><span class="screenreader">Username: </span><b>HelloWorld</b></p>
<p class="handle"><span class="screenreader">Handle: </span>@twitteruser</p>
</div>
</div>

<div class="text">
<p> This is the dark mode style, makes it easy on the eyes
</p>
<div class="timestamp"><p><span class="screenreader">Posted</span> 02:00 · 2023-12-16</p></div>
</div>

<table><tr>
<td class="reply"><p><span class="screenreader">[Replies: </span> 2 <span class="screenreader">]</span></p></td>
<td class="retweet"><p><span class="screenreader">[Retweets: </span> 32 <span class="screenreader">]</span></p></td>
<td class="like"><p><span class="screenreader">[Likes: </span> 45 <span class="screenreader">]</span></p></td>
</tr></table>
<hr>
</div>
</div>
</div>

<div class="twtdiv twt-minimal">
<hr>
<div class="twt">
<span class="screenreader">-- Tweet: -- </span>
<div class="header">
<div>
<p><img src="https://images.squidge.org/images/2023/09/14/00d56b33f5a708454d853fbad6d2e18a.jpeg"
width="50" height="50" class="hidden" hidden alt=""></p>
</div>
<div class="name-handle-div">
<p class="name"><span class="screenreader">Username: </span><b>HelloWorld</b></p>
<p class="handle"><span class="screenreader">Handle: </span>@twitteruser</p>
</div>
</div>

<div class="text">
<p> Lastly, a minimal style, this is the least intrusive option.
</p>
<div class="timestamp"><p><span class="screenreader">Posted</span> 02:00 · 2023-12-16</p></div>
</div>

<table><tr>
<td class="reply"><p><span class="screenreader">[Replies: </span> 2 <span class="screenreader">]</span></p></td>
<td class="retweet"><p><span class="screenreader">[Retweets: </span> 32 <span class="screenreader">]</span></p></td>
<td class="like"><p><span class="screenreader">[Likes: </span> 45 <span class="screenreader">]</span></p></td>
</tr></table>
<hr>
</div>
</div>
</div>

Tweet with reply

<div class="reply-body">
<div class="header">
<p><span class="name"><span class="screenreader">Name: </span><b>steve</b></span><span class="handle"> @thefirstmc · <span class="screenreader">Posted</span> 20h <span class="screenreader">ago</span></span></p>

</div>
<div class="text">
<p>
The reply tweet is seperated into two columns thanks to display: table. The div that holds the icon is set to
a specified min-width and max-width, and the div that holds the body of the tweet's width is set to
auto.
</p><p>
the divider for the regular tweet is a pseudo element of the stats div, and its disabled
in the reply tweet
</p>

</div>
<table><tr>
<td class="reply"><p><span class="screenreader">[Replies: </span> 2 <span class="screenreader">]</span></p></td>
<td class="retweet"><p><span class="screenreader">[Retweets: </span> 32 <span class="screenreader">]</span></p></td>
<td class="like"><p><span class="screenreader">[Likes: </span> 45 <span class="screenreader">]</span></p></td>
</tr></table>
</div>
<hr>
</div>
</div>
<br>
<Br>

Tweet with reply - stripped

<div class="twt reply-twt">
<span class="screenreader">-- Reply Tweet: -- </span>
<div class="icon-div">
</div>

</div>
<div class="text">
<p>
The reply tweet keeps a bit of its left-margin to distinguish it.

Adding Images and Polls

<div class="header">
<div>
<p><img src="https://images.squidge.org/images/2023/09/14/00d56b33f5a708454d853fbad6d2e18a.jpeg"
width="50" height="50" class="hidden" hidden alt=""></p>
</div>
<div class="name-handle-div">
<p class="name"><span class="screenreader">Username: </span><b>HelloWorld</b></p>
<p class="handle"><span class="screenreader">Handle: </span>@twitteruser</p>
</div>
</div>

<div class="text">
You can add both images and polls quite easily. Don't forget to add alt text to the image!
<p class="twt-image">
<img src= ' https://images.squidge.org/images/2023/09/14/00d56b33f5a708454d853fbad6d2e18a.jpeg'
width="400" alt="Hawks from BNHA looking sexy">
</p>

<div class="poll"><p class="screenreader">-- Poll: --</p>
<ul>
<li><span class="screenreader">Option: </span> Hawks</li>
<li><span class="screenreader">Option: </span>Keigo Takami</li>
<li><span class="screenreader">Option: </span>Dabi's summer fling</li>
</ul>
<p class="poll-info">4 votes · 23 hours left</p>
</div>

<div class="timestamp"><p><span class="screenreader">Posted</span> 03:45 · 2023-12-18 </p></div>
</div>
<table><tr>
<td class="reply"><p><span class="screenreader">[Replies: </span> 2 <span class="screenreader">]</span></p></td>
<td class="retweet"><p><span class="screenreader">[Retweets: </span> 32 <span class="screenreader">]</span></p></td>
<td class="like"><p><span class="screenreader">[Likes: </span> 45 <span class="screenreader">]</span></p></td>
</tr></table>
<hr>
</div>
</div>

<div class="twtdiv twt-light">
<div class="twt">
<hr>
<span class="screenreader">-- Tweet: -- </span>
<div class="header">
<div>
<p><img src="https://images.squidge.org/images/2023/09/14/00d56b33f5a708454d853fbad6d2e18a.jpeg"
width="50" height="50" class="hidden" hidden alt=""></p>
</div>
<div class="name-handle-div">
<p class="name"><span class="screenreader">Username: </span><b>HelloWorld</b></p>
<p class="handle"><span class="screenreader">Handle: </span>@twitteruser</p>
</div>
</div>

<div class="text">
<p>Another poll, by itself this time </p>


<div class="poll"><p class="screenreader">-- Poll: --</p>
<ul>
<li><span class="screenreader">Option: </span>Option one</li>
<li><span class="screenreader">Option: </span>Option two</li>
<li><span class="screenreader">Option: </span>Option three</li>
</ul>
<p class="poll-info">268 votes · 23 hours left</p>
</div>

<div class="timestamp"><p><span class="screenreader">Posted</span> 02:00 · 2023-12-16</p></div>
</div>

<table><tr>
<td class="reply"><p><span class="screenreader">[Replies: </span> 234 <span class="screenreader">]</span></p></td>
<td class="retweet"><p><span class="screenreader">[Retweets: </span> 32K <span class="screenreader">]</span></p></td>
<td class="like"><p><span class="screenreader">[Likes: </span> 454M <span class="screenreader">]</span></p></td>
</tr></table>
<hr>
</div>
</div>
</div>

Tweet with answered poll

<div class="twtdiv twt-light">
<div class="twt">
<hr>
<span class="screenreader">-- Tweet: -- </span>
<div class="header">
<div>
<p><img src="https://images.squidge.org/images/2023/09/14/00d56b33f5a708454d853fbad6d2e18a.jpeg"
width="50" height="50" class="hidden" hidden alt=""></p>
</div>
<div class="name-handle-div">
<p class="name"><span class="screenreader">Username: </span><b>HelloWorld</b></p>
<p class="handle"><span class="screenreader">Handle: </span>@twitteruser</p>
</div>
</div>

<div class="text">
<p>This poll has been answered! This is a bit trickier for me to automate, as I have to make a new
CSS class for each poll option (because of its percent-age and which result won). </p>
<p>In this poll, you've voted for option two, and the poll is finished, with option one winning.
Take a look at this without the workskin, I've made it so you still now which poll won as well as what
you voted for.
</p>

<div class="poll answered"><p class="screenreader">-- Poll: --</p>
<ul>
<li class="percent--1-winner"><span class="screenreader"><b>50% voted for the winning option: </span> Option one</b></li>
<li class="percent--2"><span class="screenreader">20% voted for option: </span>Option two <img src="https://images.squidge.org/images/2023/12/16/pollcheckmark.png" width="15" class="hidden" hidden alt=""><span class="screenreader">- You voted for this option</span></li>
<li class="percent--3"><span class="screenreader">30% voted for option: </span>Option three</li>
</ul>
<p class="poll-info">4 votes · final results</p>
</div>
</div>
<table><tr>
<td class="reply"><p><span class="screenreader">[Replies: </span> 234 <span class="screenreader">]</span></p></td>
<td class="retweet"><p><span class="screenreader">[Retweets: </span> 32K <span class="screenreader">]</span></p></td>
<td class="like"><p><span class="screenreader">[Likes: </span> 454M <span class="screenreader">]</span></p></td>
</tr></table>
<hr>
</div>
</div>
</div>
<br>
<br>

<div class="twtdiv twt-light">
<div class="twt">
<hr>
<span class="screenreader">-- Tweet: -- </span>
<div class="header">
<div>
<p><img src="https://images.squidge.org/images/2023/09/14/00d56b33f5a708454d853fbad6d2e18a.jpeg"
width="50" height="50" class="hidden" hidden alt=""></p>
</div>
<div class="name-handle-div">
<p class="name"><span class="screenreader">Username: </span><b>HelloWorld</b></p>
<p class="handle"><span class="screenreader">Handle: </span>@twitteruser</p>
</div>
</div>

<div class="text">
<p>This poll has been answered (option two again), but it's not finished, so there's no winner yet

</p>

<div class="poll answered"><p class="screenreader">-- Poll: --</p>
<ul>
<li class="percent--1"><span class="screenreader">50% voted for option: </span> Option one</li>
<li class="percent--2"><span class="screenreader">20% voted for option: </span>Option two <img src="https://images.squidge.org/images/2023/12/16/pollcheckmark.png" width="15" class="hidden" hidden alt=""><span class="screenreader">- You voted for this option</span></li>
<li class="percent--3"><span class="screenreader">30% voted for option: </span>Option three</li>
</ul>
<p class="poll-info">4 votes · 2h left</p>
</div>
</div>
<table><tr>
<td class="reply"><p><span class="screenreader">[Replies: </span> 234 <span class="screenreader">]</span></p></td>
<td class="retweet"><p><span class="screenreader">[Retweets: </span> 32K <span class="screenreader">]</span></p></td>
<td class="like"><p><span class="screenreader">[Likes: </span> 454M <span class="screenreader">]</span></p></td>
</tr></table>
<hr>
</div>
</div>
</div>
<br>
<br>

<div class="twtdiv twt-light">
<div class="twt">
<hr>
<span class="screenreader">-- Tweet: -- </span>
<div class="header">
<div>
<p><img src="https://images.squidge.org/images/2023/09/14/00d56b33f5a708454d853fbad6d2e18a.jpeg"
width="50" height="50" class="hidden" hidden alt=""></p>
</div>
<div class="name-handle-div">
<p class="name"><span class="screenreader">Username: </span><b>HelloWorld</b></p>
<p class="handle"><span class="screenreader">Handle: </span>@twitteruser</p>
</div>
</div>

<div class="text">
<p>
Here's one more poll that you haven't voted in, and is also ongoing
</p>

<div class="poll answered"><p class="screenreader">-- Poll: --</p>
<ul>
<li class="percent--1"><span class="screenreader">50% voted for option: </span> Option one</li>
<li class="percent--2"><span class="screenreader">20% voted for option: </span>Option two</li>
<li class="percent--3"><span class="screenreader">30% voted for option: </span>Option three</li>
</ul>
<p class="poll-info">4 votes · 2h left</p>
</div>
</div>
<table><tr>
<td class="reply"><p><span class="screenreader">[Replies: </span> 234 <span class="screenreader">]</span></p></td>
<td class="retweet"><p><span class="screenreader">[Retweets: </span> 32K <span class="screenreader">]</span></p></td>
<td class="like"><p><span class="screenreader">[Likes: </span> 454M <span class="screenreader">]</span></p></td>
</tr></table>
<hr>
</div>
</div>
</div>

Quote tweet

<hr>
<blockquote>
<p><span class="screenreader">-- Quote Tweet: -- </span></p>
<div class="quote-div">

<div class="name-handle-div">
<p><span class="name"><span class="screenreader">Name: </span>
<b>steve</b></span><span class="handle"> @thefirstmc ·
<span class="screenreader">Posted</span> 20h <span class="screenreader">ago
</span></span></p>
</div>
</div>

<p>images and polls also work in quote tweets!</p>
<p class="twt-image">
<img src= ' https://images.squidge.org/images/2023/09/14/00d56b33f5a708454d853fbad6d2e18a.jpeg' width="400" alt="hawks from BNHA looking sexy">
</p>

</div>
</blockquote>
<hr>

</div>
<table><tr>
<td class="reply"><p><span class="screenreader">[Replies: </span> 234 <span class="screenreader">]</span></p></td>
<td class="retweet"><p><span class="screenreader">[Retweets: </span> 32K <span class="screenreader">]</span></p></td>
<td class="like"><p><span class="screenreader">[Likes: </span> 454M <span class="screenreader">]</span></p></td>
</tr></table>
<hr>
</div>
</div>
</div>

Tweet with multiple reply

<div class="twtdiv twt-light">
<hr>
<div class="twt">
<span class="screenreader">-- Tweet: -- </span>
<div class="header">
<div>
<p><img src="https://images.squidge.org/images/2023/09/14/00d56b33f5a708454d853fbad6d2e18a.jpeg"
width="50" height="50" class="hidden" hidden alt=""></p>
</div>
<div class="name-handle-div">
<p class="name"><span class="screenreader">Username: </span><b>HelloWorld</b></p>
<p class="handle"><span class="screenreader">Handle: </span>@twitteruser</p>
</div>
</div>

<div class="text">
<p> Let's look at all the things we can add to the reply tweets!
</p>
<div class="timestamp"><p><span class="screenreader">Posted</span> 02:00 · 2023-12-16</p></div>
</div>

<table><tr>
<td class="reply"><p><span class="screenreader">[Replies: </span> 2 <span class="screenreader">]</span></p></td>
<td class="retweet"><p><span class="screenreader">[Retweets: </span> 32 <span class="screenreader">]</span></p></td>
<td class="like"><p><span class="screenreader">[Likes: </span> 45 <span class="screenreader">]</span></p></td>
</tr></table>
<hr>
</div>



<div class="twt reply-twt">
<span class="screenreader">-- Reply Tweet: -- </span>
<div class="icon-div">
<p><img src="https://images.squidge.org/images/2023/12/07/stevemc.jpeg" width="50px" class="hidden" hidden alt=""></p>
</div>

<div class="reply-body">
<div class="header">
<p><span class="name"><span class="screenreader">Name: </span><b>steve</b></span><span class="handle"> @thefirstmc · <span class="screenreader">Posted</span> 20h <span class="screenreader">ago</span></span></p>

</div>
<div class="text">
<p>
have an image:
</p>
<p class="twt-image">
<img src= ' https://images.squidge.org/images/2023/09/14/00d56b33f5a708454d853fbad6d2e18a.jpeg'
width="400" alt="Hawks from BNHA looking sexy">
</p>

</div>
<table><tr>
<td class="reply"><p><span class="screenreader">[Replies: </span> 2 <span class="screenreader">]</span></p></td>
<td class="retweet"><p><span class="screenreader">[Retweets: </span> 32 <span class="screenreader">]</span></p></td>
<td class="like"><p><span class="screenreader">[Likes: </span> 45 <span class="screenreader">]</span></p></td>
</tr></table>
</div>
<hr>
</div>

<div class="twt reply-twt">
<span class="screenreader">-- Reply Tweet: -- </span>
<div class="icon-div">
<p><img src="https://images.squidge.org/images/2023/12/07/stevemc.jpeg" width="50px" class="hidden" hidden alt=""></p>
</div>

<div class="reply-body">
<div class="header">
<p><span class="name"><span class="screenreader">Name: </span><b>steve</b></span><span class="handle"> @thefirstmc · <span class="screenreader">Posted</span> 20h <span class="screenreader">ago</span></span></p>

</div>
<div class="text">
<p>
now a quote tweet, with both an image and a poll.
</p>

<hr>
<blockquote>
<p><span class="screenreader">-- Quote Tweet: -- </span></p>
<div class="quote-div">

<p>images and poll coming right up!</p>
<p class="twt-image">
<img src= ' https://images.squidge.org/images/2023/09/14/00d56b33f5a708454d853fbad6d2e18a.jpeg' width="400" alt="hawks from BNHA looking sexy">
</p>

</div>
</blockquote>
<hr>

</div>
<div class="text">
<p>
Finally, have an answered poll:
</p>
<div class="poll answered"><p class="screenreader">-- Poll: --</p>
<ul>
<li class="percent--1-winner"><span class="screenreader"><b>Winning Option: </span> Option one</b></li>
<li class="percent--2"><span class="screenreader">Option: </span>Option two <img src="https://images.squidge.org/images/2023/12/16/pollcheckmark.png" width="15" class="hidden" hidden alt=""><span class="screenreader">- You voted for this option</span></li>
<li class="percent--3"><span class="screenreader">Option: </span>Option three</li>
</ul>
<p class="poll-info">4 votes · final results</p>
</div>

</div>

Chapter 3: CSS

Summary:

the CSS used for the twitter mimic

Chapter Text

.twt .screenreader {

position: absolute;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

/*I've added a div called twtdiv that is only meant to
help with the twt:firstchild last child thing

without it, the first tweet ever and the last tweet ever will be marked, meaning multiple
tweets in a fic would become more difficult for me to provide
*/

.twtdiv{
width: 85vw;
max-width: 20cm;
margin: 1em auto;
border: 2px solid #84848477;
border-radius: 10px;
}

.twt {
padding: 1vw;
border-bottom: 2px solid #84848477;
border-top:0;
line-height: 1;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
}

.twt:last-child{
border-bottom: none;
}

.twtdiv p{
margin: 0px auto;
line-height: 1.3;
line-break:auto;
}

.twt div{
margin: 0;
padding: 0;
}

.twt ul{
padding: 0;
}

/* Ive added some hr's for visibility when theres no workskin*/
.twtdiv hr{
display: none;

}

.twtdiv blockquote{
margin: 0;
margin-inline-start: 0;
border-inline-start: rgb(0,0,0,0) 0px solid;
padding: 0;
background-color: rgb(0,0,0,0);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;

}

/*
STYLIZATION
*/

/*different twitter colours*/
.twt-light{
background-color: white;
color: black;
}

.twt-dark{
background-color: black;
color: white;
}

/*another twitter style, a minimal feel*/
.twt-minimal{
border: none;
}

.twt-minimal:first-child{
border: none;
}

/*
HEADER
*/

.twt .header{
display: block;
padding-bottom: 0;
display: block;
text-wrap:nowrap;
overflow: hidden;

}

.twt .header div{
display: inline-block;

}

.twt .header .name-handle-div{
margin: 5px auto 1em 10px;
vertical-align: top;
max-width: 50%;
word-break: keep-all;

}

.twt .header img{
visibility: visible;
display:inline-block;
border-radius: 50%;
width: 50px;
height: 50px;
}

.twt .icon-div img{
border-radius: 50%;
width: 50px;
height: 50px;
width: 100%;
height: 100%;
overflow: hidden;
}

.twt .name:hover {
text-decoration: underline;
}

.twt .handle {
font-size: small;
font-weight: normal;
opacity: 67%
}

.twt .header::after{
/*oh no not float*/
float: right;
content: url('https://images.squidge.org/images/2023/12/16/ellipsis-svgrepo-com1.png');
background-size: 100%;
transform: scale(4.5%);
width: 0;
height: 0;
margin-right: 30px;

}

/*
BODY
*/

.twt .text{
font-size: 1.2em;
margin: 5px 0.5em;
}

.twt .text p{
margin-bottom: 1em;
}

.twt .text::after{
display: block;

background-color:currentColor;
opacity: 25%;
height: 1.5px;
content: "";
margin: 15px 0 0 0;
}

.twt .timestamp {
opacity: 60%;
font-size: small;
margin: 0.8em auto 0 0.5em;

}

/*
FOOTER
*/

.twt table {
table-layout: fixed;
width: 100%;

opacity: 70%;
font-size: small;
margin: 10px auto 0px auto;
font-weight: bold;
}

.twt table:hover{
background-color: none;
}
.twt td{
text-align: center;

}

.twt td p{
display: inline-block;
padding: 0 0 0 25px;
width: min-content;
}

.reply-twt td{
text-align: left;
}

.twt table p::before{
float: left;
width: 0px;
height: 0px;
margin-top: 0px;
margin-left: -25px;
transform: scale(50%);
margin-bottom: 16px;
}

.twt table .reply p::before{
content: url("https://images.squidge.org/images/2023/12/09/replies.png");
}

/*the retweets a different size from the rest, who knows why*/
.twt table .retweet p::before{
content: url("https://images.squidge.org/images/2023/12/09/retweets.png");
margin-left: -29px;
margin-bottom: 17px;
transform: scale(42%);
}

.twt table .like p::before{
content: url("https://images.squidge.org/images/2023/12/09/likes.png");
}

/*
REPLY
*/

.reply-twt .icon-div {
display: table-cell;
width: 50px;
vertical-align: top;
}

.reply-twt .icon-div img{
display: table-cell;
margin: 0 1vw;
width: 50px;
height: 50px;
border-radius: 50%;

vertical-align: top;
}

.reply-twt .reply-body {
display: table-cell;
padding-left: 2vw;

text-overflow:ellipsis;
}

.twt .reply-to{
margin: 3px 0;
font-size: 0.9em;
opacity: 70%;
}
.twt .handle-link {
color: #1DA1F2;
}

.twt .handle-link:hover {
text-decoration: underline;

}

.reply-twt .reply-body .text{
margin: 0.5em auto;
}

.reply-twt .reply-body .text::after{
display: none;
content: "";
}

.twt .reply-body::before{
/*oh no not float*/
float: right;
content: url('https://images.squidge.org/images/2023/12/16/ellipsis-svgrepo-com1.png');
background-size: 100%;
transform: scale(4.5%);
width: 0;
height: 0;
margin-right: 30px;
margin-top: -5px;

}

/*
QUOTE TWEET
*/

.twt .quote-div {
line-height: 1;
padding: 5px 1vw;
border: 2px solid #8484845d;
border-radius: 10px;
margin-top: 0.3em;

}

.reply-twt .quote-div .icon-div{
width: auto;
}

.twt .quote-div .header{
display: block;
text-wrap:nowrap;
overflow: hidden;
}

.twt .quote-div .header div, .twt .quote-div .header p{
display: inline-block;
margin: 0;
padding: 0;
}

.twt .quote-div p{
display: inline-block;
padding: 0;
margin: 0;
}

.twt .quote-div .icon-div img{
display: inline-block;
height: 30px;
width: 30px;
padding: 0;
margin: 0;
}

.twt .quote-div .name-handle-div{
padding-right: 1em;
}

/*get rid of the ellipsis in main and reply tweet*/
.twt .quote-div .header::after{ content: ""; }

/*
IMAGE
*/

.twt-image>img{
width: 96%;
display: block;
background-color: #c7c7c7;
border: 1px solid #c7c7c7;
border-radius: 10px;

margin: 1em auto;
overflow: hidden;
line-height: 0;
}

/*Polls*/

.twt .poll ul{
margin: 2px auto;
}

.twt .poll li{

list-style-type: none none;
margin-block-start: 0em;
margin-inline-end: 0;
margin-block-end: 0em;
margin-inline-start: 0em;
display: block;
color: rgba(0, 172, 240, 0.89);
font-weight: bold;
font-size: 0.95em;
border: 1.2px solid rgba(0, 172, 240, 0.89);
border-radius: 25px;
margin: 5px 0.5vw;
text-align: center;
padding: 5px 5px 5px 5px;

}

.twt .answered li{
background-color: #84848400;
border: none;
border-radius: 5px;
text-align: left;
color: unset;
font-weight: normal;
padding-left: 2em;
overflow: hidden;
text-wrap: nowrap;

}
.twt .poll .winner{
background-color: #1DA1F2;
}

.twt .answered .percent--1{
background: linear-gradient(90deg, #9babb956 0%, #9babb956 50%, rgb(0,0,0,0) 0%, rgb(0,0,0,0) 100%);
}

.twt .answered .percent--1-winner{
background: linear-gradient(90deg, #1da0f29b 0%, #1DA1F29b 50%, rgb(0,0,0,0) 0%, rgb(0,0,0,0) 100%);
}

.twt .answered .percent--2{
background: linear-gradient(90deg, #9babb956 0%, #9babb956 20%, rgb(0,0,0,0) 0%, rgb(0,0,0,0) 100%);
}

.twt .answered .percent--3{
background: linear-gradient(90deg, #9babb956 0%, #9babb956 30%, rgb(0,0,0,0) 0%, rgb(0,0,0,0) 100%);
}

.twt .answered .percent--4{
background: linear-gradient(90deg, #717d8826 0%, #9babb956 10%, rgb(0,0,0,0) 0%, rgb(0,0,0,0) 100%);
}

.twt .poll .poll-info{
display: block;
border: none;
text-align:justify;
background-color: unset;
color: currentColor;
opacity: 70%;
font-weight: normal;
font-size: smaller;
padding-left: 15px;
margin: 0;
}

.twt .poll img{
display: inline-block;
vertical-align: middle;
height: 1.2em;
width: 1.2em;
margin: -5px auto 0 auto;
}

.twt .poll .percent--text{
float: right;
font-size: 0.9em;
overflow: hidden;
text-wrap: nowrap;

}

Series this work belongs to:

← Previous Work Part 4 of AO3 workskins Next Work →

Works inspired by this one:

Actions

Kudos

Insert_Urso, mx_possum, 1001paperboxes, Genly, neptunesenceladus, darvin, tokikiri18, sleeplessolitude, forgedinwinter, Queares, kuroborosu, sh_00tingstarzz, flesh_and_feather, xonirium, kamennosugao, RJam9, Xenttz_f1y, BackyardPodcast, qualitycats, hellishlymint, potatoturnipbean, mystyrust, morinacli, komori_kitsu, legonerd, GumbaBunny, Katophoenix, wooga, InTheDarkHood, SpaceBucketHat, elkphant, Ippyhaj, Imaginebeingfunny, ReddClovers, kindofamess, icashi, and lxriat as well as 3 guests left kudos on this work!

Archive of Our Own^beta

Actions

Work Header

Mimicking Twitter Posts for Fics - Some Twitter Workskins

Ultraviollett

Summary:

Notes:

Chapter 1: Demo

Chapter Text

Twitter Workskin

Simple Tweet

Tweets of different styles

Tweet with reply

Tweet with reply - stripped

Adding Images and Polls

Tweet with answered poll

Quote tweet

Tweet with multiple reply

Chapter 2: HTML

Summary:

Chapter Text

Chapter 3: CSS

Summary:

Chapter Text

Series this work belongs to:

Works inspired by this one:

Actions

Kudos

Comments

Footer

About the Archive

Contact Us

Development