updates :)
This commit is contained in:
parent
cfdd7b37e4
commit
3bf0901fa0
284
mastodon.css
284
mastodon.css
@ -5,21 +5,38 @@
|
||||
}
|
||||
|
||||
:root{
|
||||
--font-size: 14pt;
|
||||
--font-size: 10pt;
|
||||
--line-height: 1.25;
|
||||
--small-font-size: 11pt;
|
||||
--small-font-size: 8pt;
|
||||
--small-line-height: 1.15;
|
||||
--header-font-size: 50px;
|
||||
--datetime-font-size: 9pt;
|
||||
|
||||
--shape-width: 45mm;
|
||||
--shape-height: 15mm;
|
||||
--datetime-font-size: 8pt;
|
||||
--second-color: black;
|
||||
--third-color: #073d07;
|
||||
}
|
||||
@font-face{
|
||||
font-family: "gudea";
|
||||
src: url(https://vvvvvvaria.org/~mb/fonts/gudea/Gudea-Regular.otf);
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face{
|
||||
font-family: "gudea";
|
||||
src: url(https://vvvvvvaria.org/~mb/fonts/gudea/Gudea-Bold.otf);
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face{
|
||||
font-family: "gudea";
|
||||
src: url(https://vvvvvvaria.org/~mb/fonts/gudea/Gudea-Italic.otf);
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 118mm;
|
||||
background: unset;
|
||||
font-family: serif !important;
|
||||
font-family: "gudea", sans-serif !important;
|
||||
font-size: var(--font-size);
|
||||
line-height: var(--line-height);
|
||||
color: color: black;
|
||||
@ -27,44 +44,11 @@
|
||||
|
||||
/* --- front page --- */
|
||||
|
||||
/* lumbung.space title */
|
||||
div.public-layout nav.header {
|
||||
background: unset;
|
||||
border: unset;
|
||||
width: unset;
|
||||
height: unset;
|
||||
margin: unset;
|
||||
}
|
||||
div.public-layout nav.header > div{
|
||||
display: block !important;
|
||||
flex: unset !important;
|
||||
}
|
||||
div.public-layout nav.header a.brand{
|
||||
visibility: hidden;
|
||||
}
|
||||
div.public-layout nav.header a.brand::before {
|
||||
visibility: visible;
|
||||
display: block;
|
||||
width: 148mm !important;
|
||||
content: "social.lumbung.space";
|
||||
font-size: var(--header-font-size) !important;
|
||||
font-weight: bold;
|
||||
line-height: 0;
|
||||
text-align: center;
|
||||
transform: rotate(-2deg);
|
||||
color: #00cf38;
|
||||
margin: 3mm 0 5mm;
|
||||
overflow: visible;
|
||||
}
|
||||
div.public-layout nav.header a.nav-link.nav-button.webapp-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* hashtag title */
|
||||
div.page-header {
|
||||
max-width: 118mm;
|
||||
min-height: 200mm;
|
||||
overflow: hidden;
|
||||
overflow-wrap: anywhere;
|
||||
background: unset;
|
||||
border: unset;
|
||||
margin: 0;
|
||||
@ -72,112 +56,74 @@
|
||||
break-after: page;
|
||||
}
|
||||
div.page-header h1 {
|
||||
font-size: calc(var(--header-font-size) * 0.75) !important;
|
||||
font-weight: normal;
|
||||
color: orange;
|
||||
display: block;
|
||||
font-size: var(--header-font-size) !important;
|
||||
font-weight: bold;
|
||||
line-height: 0.75;
|
||||
letter-spacing: -0.04em;
|
||||
text-align: center;
|
||||
transform: rotate(-2deg);
|
||||
color: green;
|
||||
margin: 2.5mm 0 0;
|
||||
overflow: visible;
|
||||
}
|
||||
div.page-header p {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* color empty frame front page */
|
||||
div.page-header::before{
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: var(--shape-width);
|
||||
height: var(--shape-height);
|
||||
margin: -8mm 0 0 5mm;
|
||||
padding: 5mm;
|
||||
border-top: 5px solid #00BCD4;
|
||||
border-left: 5px solid #9C27B0;
|
||||
border-right: 5px solid #ff002d;
|
||||
border-bottom: 5px solid pink;
|
||||
border-radius: 10px;
|
||||
transform: rotate(12deg);
|
||||
overflow: hidden;
|
||||
}
|
||||
/* big # on the cover */
|
||||
div.page-header::after{
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: var(--shape-width);
|
||||
height: var(--shape-height);
|
||||
margin: 40mm 0 0 -5mm;
|
||||
padding: 5mm;
|
||||
border-top: 5px solid #9C27B0;
|
||||
border-left: 5px solid #ff002d;
|
||||
border-right: 5px solid pink;
|
||||
border-bottom: 5px solid #00BCD4;
|
||||
border-radius: 10px;
|
||||
transform: rotate(21deg);
|
||||
overflow: hidden;
|
||||
}
|
||||
div.page-header p::before{
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: var(--shape-width);
|
||||
height: var(--shape-height);
|
||||
margin: 75mm 0 0 15mm;
|
||||
padding: 5mm;
|
||||
border-top: 5px solid #ff002d;
|
||||
border-left: 5px solid pink;
|
||||
border-right: 5px solid #00BCD4;
|
||||
border-bottom: 5px solid #9C27B0;
|
||||
border-radius: 10px;
|
||||
transform: rotate(9deg);
|
||||
overflow: hidden;
|
||||
visibility: visible;
|
||||
content: "#";
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
font-family: monospace;
|
||||
font-size: 450pt;
|
||||
line-height: 0.8;
|
||||
font-weight: bolder;
|
||||
margin: 0 auto 60mm -2mm;
|
||||
color: #00cf38;
|
||||
page-break-after: always;
|
||||
}
|
||||
|
||||
div.page-header p::after{
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: var(--shape-width);
|
||||
height: var(--shape-height);
|
||||
margin: 120mm 0 0 -70mm;
|
||||
padding: 5mm;
|
||||
border-top: 5px solid pink;
|
||||
border-left: 5px solid #00BCD4;
|
||||
border-right: 5px solid #9C27B0;
|
||||
border-bottom: 5px solid #ff002d;
|
||||
border-radius: 10px;
|
||||
transform: rotate(6deg);
|
||||
overflow: hidden;
|
||||
visibility: visible;
|
||||
/* social.lumbung.space title */
|
||||
div.public-layout nav.header {
|
||||
background: unset;
|
||||
border: unset;
|
||||
width: unset;
|
||||
height: unset;
|
||||
margin: unset;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
div.page-header h1::before{
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: var(--shape-width);
|
||||
height: var(--shape-height);
|
||||
margin: 105mm 0 0 5mm;
|
||||
padding: 5mm;
|
||||
border-top: 5px solid #ff002d;
|
||||
border-left: 5px solid pink;
|
||||
border-right: 5px solid #00BCD4;
|
||||
border-bottom: 5px solid #9C27B0;
|
||||
border-radius: 10px;
|
||||
transform: rotate(-6deg);
|
||||
overflow: hidden;
|
||||
visibility: visible;
|
||||
div.public-layout nav.header > div{
|
||||
display: block !important;
|
||||
flex: unset !important;
|
||||
}
|
||||
|
||||
div.page-header h1::after{
|
||||
content: " ";
|
||||
div.public-layout nav.header a.brand{
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
width: var(--shape-width);
|
||||
height: var(--shape-height);
|
||||
margin: 40mm 0 0 -105mm;
|
||||
padding: 5mm;
|
||||
border-top: 5px solid pink;
|
||||
border-left: 5px solid #00BCD4;
|
||||
border-right: 5px solid #9C27B0;
|
||||
border-bottom: 5px solid #ff002d;
|
||||
border-radius: 10px;
|
||||
transform: rotate(-6deg);
|
||||
overflow: hidden;
|
||||
left: 0;
|
||||
width: 100% !important;
|
||||
text-align: center;
|
||||
top: 170mm;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
div.public-layout nav.header a.brand::before {
|
||||
content: "hashtag harvesting at social.lumbung.space";
|
||||
display: block;
|
||||
width: 108mm !important; /* 148mm - 30mm page margin - 10mm padding*/
|
||||
font-size: 12pt !important;
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
text-align: center;
|
||||
color: var(--third-color);
|
||||
visibility: visible;
|
||||
padding: 5mm 5mm 15mm;
|
||||
margin: 0 auto;
|
||||
}
|
||||
div.public-layout nav.header a.nav-link.nav-button.webapp-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* --- posts --- */
|
||||
@ -193,14 +139,13 @@
|
||||
div.statuses-grid__item {
|
||||
position: relative !important;
|
||||
display: block;
|
||||
width: 90% !important;
|
||||
float: left;
|
||||
top: unset !important;
|
||||
left: unset !important;
|
||||
width: 118mm !important;
|
||||
max-width: unset !important;
|
||||
margin: 0 auto;
|
||||
break-inside: avoid;
|
||||
/* break-after: page; */
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
div.statuses-grid__item > div {
|
||||
height: unset !important;
|
||||
@ -217,34 +162,45 @@
|
||||
color: unset;
|
||||
}
|
||||
a.detailed-status__display-name {
|
||||
color: black !important;
|
||||
color: var(--second-color) !important;
|
||||
transform: rotate(-3deg);
|
||||
padding: 5mm 5mm 10mm 5mm;
|
||||
padding: 2mm 4mm 4mm;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin: 5mm 0 10mm 10mm;
|
||||
border-top: 5px solid pink;
|
||||
border-left: 5px solid #00BCD4;
|
||||
border-right: 5px solid #9C27B0;
|
||||
border-bottom: 5px solid #ff002d;
|
||||
border-radius: 8px;
|
||||
margin: 2mm 0 6mm 10mm;
|
||||
border-top: 1px solid var(--second-color);
|
||||
border-left: 1px solid var(--second-color);
|
||||
border-right: 1px solid var(--second-color);
|
||||
page-break-after: avoid;
|
||||
}
|
||||
strong.display-name__html {
|
||||
font-size: 14pt;
|
||||
color: black;
|
||||
font-size: 10pt;
|
||||
color: var(--second-color);
|
||||
}
|
||||
span.display-name__account {
|
||||
font-size: var(--small-font-size);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* post metadata: timestamp (moved to the top) */
|
||||
div.detailed-status__meta a.detailed-status__datetime{
|
||||
position: absolute;
|
||||
top: 24.5mm;
|
||||
left: 33.5mm;
|
||||
top: 16.5mm;
|
||||
left: 30mm;
|
||||
transform: rotate(-3deg);
|
||||
font-size: var(--small-font-size);
|
||||
font-weight: normal;
|
||||
color: var(--second-color) !important;
|
||||
}
|
||||
|
||||
/* rotate the even posts counter-clockwise, */
|
||||
/* to make the rhythm a bit more playful */
|
||||
div.statuses-grid__item:nth-of-type(odd) a.detailed-status__display-name {
|
||||
transform: rotate(3deg);
|
||||
}
|
||||
div.statuses-grid__item:nth-of-type(odd) div.detailed-status__meta a.detailed-status__datetime {
|
||||
transform: rotate(3deg);
|
||||
left: 29.5mm;
|
||||
}
|
||||
|
||||
/* post metadata: hide the boosts and favorites */
|
||||
@ -255,13 +211,12 @@
|
||||
color: transparent !important;
|
||||
}
|
||||
div.detailed-status__meta a.detailed-status__datetime {
|
||||
color: black !important;
|
||||
color: var(--second-color) !important;
|
||||
}
|
||||
|
||||
/* hashtags */
|
||||
a.hashtag {
|
||||
color: black !important
|
||||
font-weight: bold;
|
||||
color: var(--third-color) !important;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -271,11 +226,23 @@
|
||||
|
||||
/* media content */
|
||||
div.media-gallery {
|
||||
max-height: 90mm;
|
||||
height: auto !important;
|
||||
width: auto;
|
||||
max-width: unset;
|
||||
max-height: unset;
|
||||
object-position: unset !important;
|
||||
}
|
||||
button.icon-button.overlayed {
|
||||
display: none;
|
||||
}
|
||||
a.media-gallery__item-thumbnail img {
|
||||
height: auto;
|
||||
max-height: 100mm;
|
||||
width: auto;
|
||||
max-width: 80%;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* unwrap URLs in posts */
|
||||
div.status__content__text a.status-link.unhandled-link span.ellipsis{
|
||||
@ -304,11 +271,16 @@
|
||||
}
|
||||
.status-card__host {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- misc --- */
|
||||
|
||||
/* page footer with general Mastodon links */
|
||||
div.footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user