girlrock | Entries tagged with media: code

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>

k

Entries tagged with media: code

tumblr skin for anon

youtube embedding trick

[layout] 01. london fog

thoughts on fic interactivity

GUIDE TO DREAMWIDTH HTML/CSS

Profile

인생은 혼자야!