tumblr skin for anon

[girlrock]

this doesn't have icons but you can add them easily by putting a second class in the info block, for example: <div class="tumblr-info username">
and then setting: .username::before { content: url("iconurl"); }

CSS
#workskin .tumblr-container { background-color: #001935; margin: 20px auto; padding: 25px 25px 5px 25px; width: fit-content; } #workskin .tumblr { margin: auto; color: #000; font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif; max-width: 540px; font-size: 15px; margin-bottom: 20px; } #workskin .tumblr p { margin: 0; } #workskin .tumblr-info { background: #fff; padding: 16px 16px 14px; border-radius: 8px 8px 0 0; border: 1px solid rgba(0, 25, 53, 0.1); border-bottom: none; } #workskin .tumblr-info-bg { background-color: #fff; overflow: hidden; border-radius: 8px 8px 0 0; } #workskin .tumblr-ask-body p { margin: 20px auto; } #workskin .tumblr-ask-body, #workskin .tumblr-body { border-radius: 0 0 8px 8px; border: 1px solid rgba(0, 25, 53, 0.1); border-top: none; background-color: #fff; } #workskin .tumblr-ask-body { padding: 8px 16px 16px; } #workskin .tumblr-body { padding: 8px 16px 16px; } #workskin .tumblr-body-reply { border: 1px solid rgba(0, 25, 53, 0.1); border-top: none; border-bottom: none; padding: 8px 16px 16px; background-color: #fff; } #workskin .tumblr-replies { padding: 0 16px 16px; border-top: none; border: 1px solid rgba(0, 25, 53, 0.1); border-radius: 0 0 8px 8px; background-color: #fff; } #workskin .tumblr-at { color: #00b8ff; } #workskin .tumblr-info:hover { background: rgba(0, 25, 53, 0.05); transition: background-color 0.2s !important; cursor: pointer; } #workskin .tumblr-time, #workskin .tumblr-tags { color: rgba(0,0,0,0.65); margin-top: 14px; } #workskin .tumblr-tags p { margin: 0; } #workskin .tumblr-notes { padding-top: 8px; } #workskin .tumblr-notes:hover { cursor: pointer; } #workskin .tumblr-tag:hover { text-decoration: underline; cursor: pointer; } #workskin .tumblr-info-box { padding-left: 10px; } #workskin .tumblr-reply-info { display: flex; } #workskin .tumblr-reply-info::before { float: left; border-radius: 50%; overflow: hidden; height: 32px; width: 32px; flex-shrink: 0; } #workskin .tumblr-reply-box { padding-left: 10px; } #workskin .small-reply { font-size: 14px; } #workskin .tumblr-ask { color: rgba(0, 0, 0, 0.65); background-color: rgba(0, 0, 0, 0.07); font-size: 14px; padding: 1px 18px; margin: 0 0 20px 0; border-radius: 4px; font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif; border: none; } #workskin .tumblr-ask-q { font-size: 15px; color: #000; font-style: normal !important; margin-top: 20px; } #workskin .tumblr-quote { padding: 1px 19px; margin-left: 16px; font-size: 14px; font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif; border-left: 3px solid rgba(0,0,0,.07); } #workskin .tumblr-emoji { font-size: 36px; }
HTML
this isn't comprehensive since i was obviously fucking around and doing everything from scratch / on the go, but here's example usage:

tumblr ask

<div class="tumblr-container">
<div class="tumblr">
<div class="tumblr-info-bg"><div class="tumblr-info"><b>[USERNAME]</b>
<span class="tumblr-time">[TIMESTAMP]</span></div></div>

<div class="tumblr-ask-body"><blockquote class="tumblr-ask"><b>Anonymous</b> asked:
<div class="tumblr-ask-q">[ASK CONTENT]</div></blockquote>

<p>[REPLY CONTENT]</p>

<div class="tumblr-tags"><span class="tumblr-tag">#[TAG 1]</span> <span class="tumblr-tag">#[TAG 2]</span>
</div></div></div></div>


regular tumblr post

<div class="tumblr-container">
<div class="tumblr">
<div class="tumblr-info-bg"><div class="tumblr-info">
<b>[USERNAME]</b>
<span class="tumblr-time">[TIMESTAMP]</span></div></div>
<div class="tumblr-body">[BODY TEXT]
<p><br></p>
[MORE BODY TEXT (basically you have to do a forced br if you have paragraphs sorry)]
<div class="tumblr-tags"><span class="tumblr-tag">#[TAG 1]</span>
</div></div></div></div>