193 lines
3.2 KiB
CSS
193 lines
3.2 KiB
CSS
:root {
|
|
--like: rgb(223, 104, 104);
|
|
--repost: rgb(162, 223, 73);
|
|
--bluesky: rgb(16, 131, 254);
|
|
--mastodon: rgb(86, 58, 204);
|
|
}
|
|
|
|
main {
|
|
width: min(calc(100% - 4rem), 900px);
|
|
margin: 0 auto 1rem auto;
|
|
}
|
|
|
|
.blog p:hover,
|
|
.comment p:hover {
|
|
background: inherit;
|
|
}
|
|
|
|
article.blog {
|
|
font-family: 'Lora', serif;
|
|
}
|
|
|
|
.blog-date {
|
|
margin-top: -1em;
|
|
opacity: .75;
|
|
}
|
|
|
|
.blog p {
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
.blog sub {
|
|
opacity: .75;
|
|
}
|
|
|
|
.blog pre {
|
|
max-height: 15em;
|
|
padding: .5em;
|
|
font-size: .9em;
|
|
border: 1px solid #8884;
|
|
border-radius: 2px;
|
|
overflow: scroll;
|
|
background: #060606;
|
|
}
|
|
|
|
.blog p code {
|
|
padding: .2em .3em;
|
|
font-size: .9em;
|
|
border: 1px solid #8884;
|
|
border-radius: 2px;
|
|
background: #060606;
|
|
}
|
|
|
|
.blog img {
|
|
max-height: 50%;
|
|
max-width: 100%;
|
|
|
|
display: block;
|
|
}
|
|
|
|
.blog i.end-mark {
|
|
width: 1.2em;
|
|
height: 1.2em;
|
|
margin-top: -.2em;
|
|
|
|
display: inline-block;
|
|
transform: translateY(.2em);
|
|
|
|
background: url("/img/aridoodle.png");
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
|
|
|
|
/* COMMENTS */
|
|
|
|
.interactions {
|
|
margin: 1em 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: .5em;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
padding: .4em .6em;
|
|
border: 1px solid var(--on-background);
|
|
border-radius: 2px;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.interactions .likes,
|
|
.interactions .reposts {
|
|
padding: 0 .5em;
|
|
min-width: fit-content;
|
|
font-family: monospace;
|
|
text-align: center;
|
|
line-height: 2em;
|
|
border: 1px solid var(--on-background);
|
|
border-radius: 2px;
|
|
text-wrap: nowrap;
|
|
}
|
|
|
|
.interactions .likes {
|
|
border-color: var(--on-background);
|
|
}
|
|
.interactions .reposts {
|
|
border-color: var(--on-background);
|
|
}
|
|
|
|
.btn.bluesky,
|
|
.btn.mastodon {
|
|
font-family: monospace;
|
|
text-wrap: nowrap;
|
|
}
|
|
|
|
.btn.bluesky {
|
|
color: var(--bluesky);
|
|
border-color: var(--bluesky);
|
|
}
|
|
|
|
.btn.mastodon {
|
|
color: var(--mastodon);
|
|
border-color: var(--mastodon);
|
|
}
|
|
|
|
.comment {
|
|
font-family: 'Inter', 'Arial', sans-serif;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.comment .comment-hover {
|
|
padding: 1em;
|
|
transition: background-color .1s;
|
|
}
|
|
|
|
.comment .comment-hover:hover {
|
|
background-color: #8881;
|
|
}
|
|
|
|
.comment .comment-header a {
|
|
display: flex;
|
|
gap: .5em;
|
|
font-weight: 600;
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.comment .comment-header a .display-name {
|
|
overflow: inherit;
|
|
text-overflow: inherit;
|
|
}
|
|
|
|
.comment .comment-header a .handle {
|
|
opacity: .5;
|
|
font-family: monospace;
|
|
font-size: .9em;
|
|
overflow: inherit;
|
|
text-overflow: inherit;
|
|
}
|
|
|
|
.comment .comment-header img.avatar {
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
}
|
|
|
|
.comment .comment-body {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.comment p.comment-text {
|
|
margin: .5em 0;
|
|
white-space: break-spaces;
|
|
}
|
|
|
|
.comment .comment-footer .comment-date {
|
|
margin: 0;
|
|
font-size: .8em;
|
|
opacity: .5;
|
|
}
|
|
|
|
.comment .comment-replies {
|
|
margin-left: 1em;
|
|
border-left: 2px solid #8884;
|
|
}
|