:root {
/* https://www.colourlovers.com/palette/4654317/V_O_G_U_E_%E2%80%A2_1928 */
--a: hsl(13, 74%, 59%);
--b: hsl(5, 79%, 38%);
--c: hsl(345, 50%, 2%);
--d: hsl(46, 26%, 71%);
--e: hsl(37, 78%, 89%);
--background: var(--c);
--foreground: var(--e);
--primary: var(--a);
--secondary: var(--b);
--secondarier: hsl(5, 79%, 48%);
--faint: var(--d);
--faintish: hsl(46, 26%, 51%);
--fainter: hsl(46, 26%, 11%);
--monospace: 'Droid Sans Mono';
--sans: 'Signika Negative';
--vertical-gap: 3rem;
--top-gutter: 1rem;
--left-gutter: 2rem;
--radius: .3rem;
}
@media (prefers-color-scheme: light) {
:root {
--background: var(--e);
--foreground: var(--c);
--primary: var(--b);
--secondary: var(--a);
--secondarier: hsl(13, 74%, 70%);
--faint: hsl(42, 65%, 20%);
--faintish: hsl(42, 60%, 33%);
--fainter: var(--d);
}
body {
text-shadow: none !important;
}
}
body {
font: 1rem/1.35 var(--sans);
margin: 3rem auto;
padding: 0 1rem;
max-width: 35rem;
background: var(--background);
color: var(--foreground);
text-shadow: 1px 1px 2px black;
hyphens: auto;
}
.hidden {
display: none;
}
em, strong {
line-height: 1;
}
p > code {
margin: 0 0.15rem;
}
code {
font-size: 0.8rem;
font-family: var(--monospace);
}
pre {
margin: 1.35rem 1rem;
line-height: 1.1;
}
hr {
width: 25%;
border: none;
border-top: 1px solid var(--fainter);
}
img {
max-width: 100%;
}
a {
color: var(--primary);
transition: .1s;
}
a:hover {
color: var(--secondary);
}
ul {
margin: 1rem 0;
}
ol {
margin: 1rem 0;
}
blockquote {
text-align: left;
margin: 1rem 5rem 1rem var(--left-gutter);
padding: 0;
hypens: none;
}
blockquote:before {
content: "“";
position: absolute;
margin-left: -1.75rem;
margin-top: -0.2rem;
font-size: 2.5rem;
}
article {
margin-bottom: var(--vertical-gap);
padding: var(--top-gutter) 0 0;
}
article h1 {
text-align: left;
hypens: manual;
}
article h1 {
font-size: 1.55rem;
margin: 0rem;
}
article h2 {
font-size: 1.25rem;
margin: 1.5rem 0 1rem;
}
h1 + .e-content {
margin-top: 1rem;
}
p {
margin: 0;
}
.h-entry > * + *, .e-content > * + *, .h-cite > * + * {
margin-top: 1rem;
}
/* meta */
.meta {
margin-top: .5rem;
color: var(--faintish);
font-family: var(--monospace);
font-size: 0.7rem;
}
.meta a {
color: var(--faint);
text-decoration: none;
}
.meta a:hover {
color: var(--foreground);
text-decoration: underline;
}
.meta.expanded {
margin-top: 1.5rem;
}
details.meta {
margin-bottom: 1rem;
}
details.meta summary {
margin-bottom: .5rem;
user-select: none;
cursor: pointer;
}
details.meta .inner {
line-height: 1.75;
margin: 0 0 0 1rem;
padding: 0;
list-style: none;
}
/* h-cite */
div.h-cite {
border: 1px solid var(--fainter);
padding: 1rem;
border-radius: var(--radius);
box-shadow: .3rem .3rem 0 var(--fainter);
}
div.h-cite + .meta {
margin-top: 1rem;
}
div.h-cite img:first-child {
max-width: calc(100% + 2rem);
margin-left: -1rem;
margin-top: -1rem;
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
}
/* note */
.note .e-content {
white-space: pre-wrap;
}
/* small posts */
.reply, .like, .rsvp, .read, .drank, .checkin, .bookmark, .repost {
padding: var(--top-gutter) 0 0 var(--left-gutter);
}
.reply h1, .like h1, .rsvp h1, .read h1, .drank h1, .checkin h1, .bookmark h1, .repost h1 {
font-size: 1rem;
position: relative;
}
.reply h1:before, .like h1:before, .rsvp h1:before, .read h1:before, .drank h1:before, .checkin h1:before, .bookmark h1:before, .repost h1:before {
position: absolute;
margin-left: -1.5rem;
}
/* reply */
.reply h1.p-summary:before {
content: '↳ ';
}
/* like */
.like h1 {
font-weight: normal;
}
.like h1 .u-like-of {
font-weight: bold;
}
.like .h-entry:not(:last-child):after {
content: ', ';
margin-left: -.23em;
margin-right: .1rem;
}
.like .h-entry > a.u-url {
color: var(--faint);
text-decoration: none;
}
.like a.u-url:hover {
color: var(--foreground);
text-decoration: underline;
}
.like h1:before {
content: '❤️ ';
}
/* bookmark */
.bookmark h1:before {
content: '🔖 ';
}
/* rsvp */
.rsvp h1 {
font-weight: normal;
}
.rsvp h1:before {
content: '📅 ';
}
/* read */
.read h1 {
font-weight: normal;
}
.read h1:before {
content: '📕 ';
}
/* drank */
.drank h1 {
font-weight: normal;
}
.drank h1:before {
content: '🍼 ';
}
/* repost */
.repost h1 {
font-weight: normal;
}
.repost h1:before {
content: '♺ ';
}
/* checkin */
.checkin h1 {
font-weight: normal;
}
.checkin h1:before {
content: '📌 ';
}
.checkin .full-address {
font-size: .8rem;
color: var(--faintish);
}
/* nav */
p.page {
color: var(--secondary);
margin: 1rem;
font-size: .9rem;
}
p.page strong {
color: var(--secondarier);
}
nav {
margin: 1rem;
font-size: .9rem;
}
nav .previous, nav .next {
margin: 0 1em;
}
nav a {
color: var(--secondary);
text-decoration: none;
}
nav a:hover {
color: var(--secondarier);
text-decoration: underline;
}
nav.arrows {
text-align: center;
}
.arrows .older:before {
content: '← ';
}
nav a + a {
margin-left: 2rem;
}
/* footer */
footer {
color: var(--faintish);
opacity: .5;
font-size: 0.8rem;
margin: 5rem auto;
transition: .3s;
text-align: center;
}
footer:hover {
opacity: 1;
}
footer a {
color: var(--faint);
}
footer a:hover {
color: var(--foreground);
}
/* mentions */
ul.mentions {
list-style: none;
padding-left: 0;
}
.mentions li {
margin: 1rem 0;
}
.mentions .target {
display: block;
font-size: .8rem;
}