alemi
ea655be121
... yet! this fixes the weird bug that resets timeline scroll when coming back from users (annoying!). also slightly better spacing for things and more consistent loading buttons. its a big refactor and its underway but there's so much in progress that ill commit this big chunk as is and i totally wont regret it later when i need to remember what i was moving where aha
380 lines
7.4 KiB
HTML
380 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>upub</title>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:title" content="upub">
|
|
<meta property="og:description" content="micro social network, federated" />
|
|
<meta property="og:url" content="https://upub.alemi.dev/web" />
|
|
<meta property="og:site_name" content="upub" />
|
|
|
|
<link rel="preload" href="https://cdn.alemi.dev/web/font/FiraCode-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
|
|
<link rel="preload" href="https://cdn.alemi.dev/web/font/FiraCode-Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
|
|
|
|
<link crossorigin rel="stylesheet" href="https://cdn.alemi.dev/web/alemi.css">
|
|
<style>
|
|
:root {
|
|
--main-col-percentage: 75%;
|
|
}
|
|
@font-face {
|
|
font-family: 'Fira Code';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("https://cdn.alemi.dev/web/font/FiraCode-Regular.woff2") format("woff2"), url("https://cdn.alemi.dev/web/font/FiraCode-Regular.woff") format("woff");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Fira Code';
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
font-display: swap;
|
|
src: url("https://cdn.alemi.dev/web/font/FiraCode-Bold.woff2") format("woff2"), url("https://cdn.alemi.dev/web/font/FiraCode-Bold.woff") format("woff");
|
|
}
|
|
|
|
* {
|
|
font-family: 'Fira Code', Menlo, DejaVu Sans Mono, Monaco, Consolas, Ubuntu Mono, monospace;
|
|
}
|
|
html {
|
|
overflow-y: scroll;
|
|
height: 100vh;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding-bottom: 1.2em;
|
|
font-size: 11pt;
|
|
}
|
|
textarea {
|
|
font-size: 10pt;
|
|
}
|
|
nav {
|
|
z-index: 90;
|
|
top: 0;
|
|
position: sticky;
|
|
padding-top: .05em;
|
|
background-color: var(--background);
|
|
}
|
|
footer {
|
|
width: 100%;
|
|
position: fixed;
|
|
bottom: 0;
|
|
background-color: var(--background);
|
|
text-align: center;
|
|
padding-bottom: 0;
|
|
line-height: 1rem;
|
|
}
|
|
main {
|
|
margin: 0em 1em;
|
|
}
|
|
blockquote {
|
|
margin-top: .5em;
|
|
margin-bottom: .5em;
|
|
margin-left: 1.25em;
|
|
padding-left: .3em;
|
|
overflow-wrap: break-word;
|
|
hyphens: auto;
|
|
border-left: solid 3px var(--background-secondary);
|
|
}
|
|
article.tl {
|
|
color: var(--text);
|
|
border-left: solid 3px var(--accent);
|
|
margin-left: 1.25em;
|
|
margin-right: 1em;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
word-wrap: break-word;
|
|
}
|
|
article p {
|
|
margin: 0 0 0 .5em;
|
|
}
|
|
b.displayname {
|
|
overflow-wrap: break-word;
|
|
}
|
|
table.align {
|
|
max-width: 100%;
|
|
}
|
|
span.footer {
|
|
padding: .1em;
|
|
font-size: .6em;
|
|
color: var(--secondary);
|
|
}
|
|
span.nowrap {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
display: block;
|
|
}
|
|
hr.sep {
|
|
border: 1px solid rgba(var(--accent-rgb), 0.45);
|
|
}
|
|
div.sep-top {
|
|
border-top: 2px solid rgba(var(--accent-rgb), 0.45);
|
|
}
|
|
hr.sticky {
|
|
position: sticky;
|
|
z-index: 100;
|
|
margin-top: 0;
|
|
padding-top: 0;
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
top: 1.65rem;
|
|
}
|
|
div.sticky {
|
|
z-index: 100;
|
|
top: 2rem;
|
|
position: sticky;
|
|
background-color: var(--background);
|
|
}
|
|
div.border {
|
|
border: 1px dashed var(--accent);
|
|
}
|
|
span.border-button {
|
|
border: 1px solid var(--background-dim);
|
|
}
|
|
span.border-button:hover {
|
|
background-color: var(--background-dim);
|
|
}
|
|
div.inline {
|
|
display: inline;
|
|
}
|
|
@media screen and (max-width: 786px) {
|
|
div.sticky {
|
|
top: 1.75rem;
|
|
padding-top: .25rem;
|
|
}
|
|
}
|
|
a.upub-title {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
a.upub-title:hover {
|
|
text-decoration: underline;
|
|
}
|
|
a.hover {
|
|
text-decoration: none;
|
|
}
|
|
a.hover:hover {
|
|
text-decoration: underline;
|
|
}
|
|
a.breadcrumb {
|
|
text-decoration: none;
|
|
color: var(--secondary);
|
|
}
|
|
a.breadcrumb:hover {
|
|
font-weight: bold;
|
|
color: var(--accent);
|
|
}
|
|
b.big {
|
|
font-size: 18pt;
|
|
}
|
|
div.banner {
|
|
margin-top: .3em;
|
|
outline: .3em solid rgba(var(--accent-rgb), 0.33);
|
|
}
|
|
div.overlap {
|
|
position: relative;
|
|
bottom: 3em;
|
|
margin-bottom: -3em;
|
|
}
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
img.avatar {
|
|
display: inline;
|
|
border-radius: 50%;
|
|
}
|
|
img.avatar-border {
|
|
background-color: var(--background);
|
|
border: .3em solid var(--accent);
|
|
}
|
|
img.inline {
|
|
height: .75em;
|
|
}
|
|
img.avatar-actor {
|
|
min-height: 2em;
|
|
max-height: 2em;
|
|
min-width: 2em;
|
|
max-width: 2em;
|
|
}
|
|
.box {
|
|
border: 3px solid var(--accent);
|
|
}
|
|
.cursor {
|
|
cursor: pointer;
|
|
}
|
|
video.attachment {
|
|
height: 10em;
|
|
}
|
|
img.attachment {
|
|
cursor: pointer;
|
|
height: 10em;
|
|
width: 100%;
|
|
border: 3px solid var(--accent);
|
|
padding: 5px;
|
|
object-fit: cover;
|
|
box-sizing: border-box;
|
|
}
|
|
img.expand,
|
|
video.expand {
|
|
height: unset;
|
|
max-height: 55vh;
|
|
max-width: 100%;
|
|
object-fit: contain;
|
|
}
|
|
div.tl-header {
|
|
background-color: rgba(var(--accent-rgb), 0.33);
|
|
color: var(--accent);
|
|
}
|
|
p.tiny-text {
|
|
line-height: .75em;
|
|
}
|
|
table.post-table {
|
|
border-collapse: collapse;
|
|
}
|
|
table p {
|
|
margin: .25em 1em;
|
|
}
|
|
tr.post-table,
|
|
td.post-table {
|
|
border: 1px dashed var(--accent);
|
|
padding: .5em;
|
|
}
|
|
td.top {
|
|
vertical-align: top;
|
|
}
|
|
td.bottom {
|
|
vertical-align: bottom;
|
|
}
|
|
details>summary::marker {
|
|
display: none;
|
|
}
|
|
details>summary {
|
|
list-style: none;
|
|
cursor: pointer;
|
|
}
|
|
details>summary:hover {
|
|
font-weight: bold;
|
|
}
|
|
code.cw {
|
|
display: block;
|
|
}
|
|
input[type=button]:hover,
|
|
input[type=submit].active {
|
|
background-color: var(--accent);
|
|
border-color: var(--accent);
|
|
color: var(--background);
|
|
cursor: pointer;
|
|
}
|
|
.ml-1-r {
|
|
margin-left: 1em;
|
|
}
|
|
.mr-1-r {
|
|
margin-right: 1em;
|
|
}
|
|
.ml-3-r {
|
|
margin-left: 3em;
|
|
}
|
|
.mr-3-r {
|
|
margin-right: 3em;
|
|
}
|
|
.depth-r {
|
|
margin-left: .5em;
|
|
}
|
|
.only-on-mobile {
|
|
display: none;
|
|
}
|
|
@media screen and (max-width: 786px) {
|
|
.depth-r {
|
|
margin-left: .125em;
|
|
}
|
|
.ml-1-l {
|
|
margin-left: 0;
|
|
}
|
|
.mr-1-r {
|
|
margin-right: 0;
|
|
}
|
|
.ml-3-r {
|
|
margin-left: 0;
|
|
}
|
|
.mr-3-r {
|
|
margin-right: 0;
|
|
}
|
|
.only-on-mobile {
|
|
display: inherit;
|
|
}
|
|
.hidden-on-mobile {
|
|
display: none;
|
|
}
|
|
div.col-side {
|
|
padding-right: .25em;
|
|
}
|
|
main {
|
|
margin: 0;
|
|
}
|
|
}
|
|
@media screen and (max-width: 400px) {
|
|
.hidden-on-tiny {
|
|
display: none;
|
|
}
|
|
}
|
|
span.emoji {
|
|
color: transparent;
|
|
text-shadow: 0 0 0 var(--secondary);
|
|
}
|
|
span.emoji-btn:hover {
|
|
color: unset;
|
|
text-shadow: unset;
|
|
}
|
|
div.context {
|
|
border-left: 1px solid var(--background-dim);
|
|
padding-left: 1px;
|
|
}
|
|
span.json-key {
|
|
color: var(--accent);
|
|
}
|
|
span.json-text {
|
|
color: var(--text);
|
|
}
|
|
pre.striped {
|
|
background: repeating-linear-gradient(
|
|
135deg,
|
|
var(--background-dim),
|
|
var(--background-dim) .9em,
|
|
var(--background) .9em,
|
|
var(--background) 1em
|
|
);
|
|
}
|
|
.spinner {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
span.dots {
|
|
&:after {
|
|
animation: dots 1.5s linear infinite;
|
|
display: inline-block;
|
|
content: "\00a0\00a0\00a0";
|
|
}
|
|
}
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
/* \00a0 is unicode for "space", because otherwise it gets removed */
|
|
@keyframes dots {
|
|
0% { content: "\00a0\00a0\00a0"; }
|
|
25% { content: ".\00a0\00a0"; }
|
|
50% { content: "..\00a0"; }
|
|
75% { content: "..."; }
|
|
100% { content: "\00a0\00a0\00a0"; }
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
</head>
|
|
<body>
|
|
</body>
|
|
</html>
|