pushing the changes after an afternoon of work
This commit is contained in:
parent
5f481fbafd
commit
cfdd7b37e4
246
mastodon.css
246
mastodon.css
@ -1,19 +1,23 @@
|
|||||||
@media print{
|
|
||||||
|
|
||||||
@page{
|
@page{
|
||||||
size: A5;
|
size: A5; /* only works in Chrome, Edge and Opera; see https://developer.mozilla.org/en-US/docs/Web/CSS/@page */
|
||||||
margins: 10mm 15mm;
|
orientation: portrait; /* only works in Chrome, Edge and Opera; see https://developer.mozilla.org/en-US/docs/Web/CSS/@page */
|
||||||
|
margin: 10mm 15mm;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root{
|
:root{
|
||||||
--font-size: 24pt;
|
--font-size: 14pt;
|
||||||
--line-height: 1.25;
|
--line-height: 1.25;
|
||||||
--small-font-size: 11pt;
|
--small-font-size: 11pt;
|
||||||
--small-line-height: 1.15;
|
--small-line-height: 1.15;
|
||||||
--header-font-size: 46pt;
|
--header-font-size: 50px;
|
||||||
|
--datetime-font-size: 9pt;
|
||||||
|
|
||||||
|
--shape-width: 45mm;
|
||||||
|
--shape-height: 15mm;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
width: 118mm;
|
||||||
background: unset;
|
background: unset;
|
||||||
font-family: serif !important;
|
font-family: serif !important;
|
||||||
font-size: var(--font-size);
|
font-size: var(--font-size);
|
||||||
@ -21,22 +25,36 @@
|
|||||||
color: color: black;
|
color: color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* navigation bar */
|
/* --- front page --- */
|
||||||
|
|
||||||
|
/* lumbung.space title */
|
||||||
div.public-layout nav.header {
|
div.public-layout nav.header {
|
||||||
background: unset;
|
background: unset;
|
||||||
border: unset;
|
border: unset;
|
||||||
width: unset;
|
width: unset;
|
||||||
height: unset;
|
height: unset;
|
||||||
|
margin: unset;
|
||||||
}
|
}
|
||||||
div.public-layout nav.header > div{
|
div.public-layout nav.header > div{
|
||||||
display: block !important;
|
display: block !important;
|
||||||
flex: unset !important;
|
flex: unset !important;
|
||||||
}
|
}
|
||||||
div.public-layout nav.header a.brand {
|
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-size: var(--header-font-size) !important;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
transform: rotate(2deg);
|
line-height: 0;
|
||||||
|
text-align: center;
|
||||||
|
transform: rotate(-2deg);
|
||||||
color: #00cf38;
|
color: #00cf38;
|
||||||
|
margin: 3mm 0 5mm;
|
||||||
|
overflow: visible;
|
||||||
}
|
}
|
||||||
div.public-layout nav.header a.nav-link.nav-button.webapp-btn {
|
div.public-layout nav.header a.nav-link.nav-button.webapp-btn {
|
||||||
display: none;
|
display: none;
|
||||||
@ -44,34 +62,126 @@
|
|||||||
|
|
||||||
/* hashtag title */
|
/* hashtag title */
|
||||||
div.page-header {
|
div.page-header {
|
||||||
break-after: page;
|
max-width: 118mm;
|
||||||
|
min-height: 200mm;
|
||||||
|
overflow: hidden;
|
||||||
background: unset;
|
background: unset;
|
||||||
border: unset;
|
border: unset;
|
||||||
margin: 0 0 5em 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
break-after: page;
|
||||||
}
|
}
|
||||||
div.page-header h1 {
|
div.page-header h1 {
|
||||||
font-size: var(--header-font-size) !important;
|
font-size: calc(var(--header-font-size) * 0.75) !important;
|
||||||
|
font-weight: normal;
|
||||||
color: orange;
|
color: orange;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
div.page-header p {
|
div.page-header p {
|
||||||
display: none;
|
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;
|
||||||
}
|
}
|
||||||
div.page-header::after{
|
div.page-header::after{
|
||||||
content: " ";
|
content: " ";
|
||||||
display: block;
|
position: absolute;
|
||||||
width: 90mm;
|
width: var(--shape-width);
|
||||||
height: 120mm;
|
height: var(--shape-height);
|
||||||
margin: 15mm auto 0;
|
margin: 40mm 0 0 -5mm;
|
||||||
padding: 1em;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
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-top: 5px solid pink;
|
||||||
border-left: 5px solid #00BCD4;
|
border-left: 5px solid #00BCD4;
|
||||||
border-right: 5px solid #9C27B0;
|
border-right: 5px solid #9C27B0;
|
||||||
border-bottom: 5px solid #ff002d;
|
border-bottom: 5px solid #ff002d;
|
||||||
border-radius: 15px;
|
border-radius: 10px;
|
||||||
transform: rotate(-3deg)
|
transform: rotate(6deg);
|
||||||
|
overflow: hidden;
|
||||||
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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.page-header h1::after{
|
||||||
|
content: " ";
|
||||||
|
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;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- posts --- */
|
||||||
|
|
||||||
/* grid of posts */
|
/* grid of posts */
|
||||||
div.statuses-grid {
|
div.statuses-grid {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
@ -86,10 +196,11 @@
|
|||||||
float: left;
|
float: left;
|
||||||
top: unset !important;
|
top: unset !important;
|
||||||
left: unset !important;
|
left: unset !important;
|
||||||
width: 90% !important;
|
width: 118mm !important;
|
||||||
max-width: unset !important;
|
max-width: unset !important;
|
||||||
margin: 0;
|
margin: 0 auto;
|
||||||
break-inside: avoid;
|
break-inside: avoid;
|
||||||
|
/* break-after: page; */
|
||||||
}
|
}
|
||||||
div.statuses-grid__item > div {
|
div.statuses-grid__item > div {
|
||||||
height: unset !important;
|
height: unset !important;
|
||||||
@ -98,15 +209,25 @@
|
|||||||
div.detailed-status {
|
div.detailed-status {
|
||||||
background: unset !important;
|
background: unset !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
margin: 0 0 2em 0 !important;
|
margin: 0 !important;
|
||||||
/* border: 1px solid lightgreen !important; */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* author details */
|
/* author details */
|
||||||
span.display-name {
|
span.display-name {
|
||||||
color: unset;
|
color: unset;
|
||||||
}
|
}
|
||||||
a.detailed-status__display-name {
|
a.detailed-status__display-name {
|
||||||
color: black !important;
|
color: black !important;
|
||||||
|
transform: rotate(-3deg);
|
||||||
|
padding: 5mm 5mm 10mm 5mm;
|
||||||
|
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;
|
||||||
}
|
}
|
||||||
strong.display-name__html {
|
strong.display-name__html {
|
||||||
font-size: 14pt;
|
font-size: 14pt;
|
||||||
@ -116,11 +237,53 @@
|
|||||||
font-size: var(--small-font-size);
|
font-size: var(--small-font-size);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* post metadata (timestamp etc.) */
|
/* post metadata: timestamp (moved to the top) */
|
||||||
.detailed-status__meta {
|
div.detailed-status__meta a.detailed-status__datetime{
|
||||||
color: black !important;
|
position: absolute;
|
||||||
|
top: 24.5mm;
|
||||||
|
left: 33.5mm;
|
||||||
|
transform: rotate(-3deg);
|
||||||
font-size: var(--small-font-size);
|
font-size: var(--small-font-size);
|
||||||
line-height: var(--small-line-height);
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* post metadata: hide the boosts and favorites */
|
||||||
|
div.detailed-status__meta .fa, div.statuses-grid div.detailed-status__meta .detailed-status__application, div.statuses-grid div.detailed-status__meta .detailed-status__link {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
div.detailed-status__meta {
|
||||||
|
color: transparent !important;
|
||||||
|
}
|
||||||
|
div.detailed-status__meta a.detailed-status__datetime {
|
||||||
|
color: black !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* hashtags */
|
||||||
|
a.hashtag {
|
||||||
|
color: black !important
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
div.status__content a.mention span {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* media content */
|
||||||
|
div.media-gallery {
|
||||||
|
max-height: 90mm;
|
||||||
|
}
|
||||||
|
button.icon-button.overlayed {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* unwrap URLs in posts */
|
||||||
|
div.status__content__text a.status-link.unhandled-link span.ellipsis{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
div.status__content__text a.status-link.unhandled-link::after{
|
||||||
|
content: attr(href);
|
||||||
|
margin: 0.5em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* status cards (previews of linked content) */
|
/* status cards (previews of linked content) */
|
||||||
@ -143,28 +306,9 @@
|
|||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* page footer with Mastodon links */
|
/* --- misc --- */
|
||||||
|
|
||||||
|
/* page footer with general Mastodon links */
|
||||||
div.footer {
|
div.footer {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* hashtags */
|
|
||||||
a.hashtag {
|
|
||||||
color: black !important
|
|
||||||
font-weight: bold;
|
|
||||||
margin: 0;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
div.status__content a.mention span {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* media content */
|
|
||||||
div.media-gallery {
|
|
||||||
max-height: 90mm;
|
|
||||||
}
|
|
||||||
button.icon-button.overlayed {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user