pushing the changes after an afternoon of work

mastodon.css

@@ -1,19 +1,23 @@
-@media print{
-
     @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{
-        --font-size: 24pt;
+        --font-size: 14pt;
         --line-height: 1.25;
         --small-font-size: 11pt;
         --small-line-height: 1.15;
-        --header-font-size: 46pt;
+        --header-font-size: 50px;
+        --datetime-font-size: 9pt;
+
+        --shape-width: 45mm;
+        --shape-height: 15mm;
     }
 
     body {
+        width: 118mm;
         background: unset;
         font-family: serif !important;
         font-size: var(--font-size);
@@ -21,22 +25,36 @@
         color: color: black;
     }
 
-    /* navigation bar */
+    /* --- 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 {
+    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;
-        transform: rotate(2deg);
+        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;
@@ -44,34 +62,126 @@
 
     /* hashtag title */
     div.page-header {
-        break-after: page;
+        max-width: 118mm;
+        min-height: 200mm;
+        overflow: hidden;
         background: unset;
         border: unset;
-        margin: 0 0 5em 0;
+        margin: 0;
         padding: 0;
+        break-after: page;
     }
     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;
+        display: block;
     }
     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{
         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-left: 5px solid #00BCD4;
         border-right: 5px solid #9C27B0;
         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 */
     div.statuses-grid {
         width: 100% !important;
@@ -86,10 +196,11 @@
         float: left;
         top: unset !important;
         left: unset !important;
-        width: 90% !important;
+        width: 118mm !important;
         max-width: unset !important;
-        margin: 0;
+        margin: 0 auto;
         break-inside: avoid;
+        /* break-after: page; */
     }
     div.statuses-grid__item > div {
         height: unset !important;
@@ -98,15 +209,25 @@
     div.detailed-status {
         background: unset !important;
         padding: 0 !important;
-        margin: 0 0 2em 0 !important;
+        margin: 0 !important;
-    /*     border: 1px solid lightgreen !important; */
     }
+
     /* author details */
     span.display-name {
         color: unset;
     }
     a.detailed-status__display-name {
         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 {
         font-size: 14pt;
@@ -116,36 +237,25 @@
         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);
-        line-height: var(--small-line-height);
+        font-weight: normal;
     }
 
-    /* status cards (previews of linked content) */
+    /* post metadata: hide the boosts and favorites */
-    div.status__content {
+    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 {
-        font-size: inherit !important;
+        display: none;
-        color: black;
-        line-height: inherit !important;
     }
-    .status-card {
+    div.detailed-status__meta {
-        font-size: smaller !important;
+        color: transparent !important;
-        border: 0;
     }
-    .status-card__title,
+    div.detailed-status__meta a.detailed-status__datetime {
-    .status-card__description,
-    .status-card__host {
         color: black !important;
-        font-size: var(--small-font-size);
-    }
-    .status-card__host {
-        text-decoration: underline;
-    }
-
-    /* page footer with Mastodon links */
-    div.footer {
-        display: none;
     }
 
     /* hashtags */
@@ -167,4 +277,38 @@
         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) */
+    div.status__content {
+        font-size: inherit !important;
+        color: black;
+        line-height: inherit !important;
+    }
+    .status-card {
+        font-size: smaller !important;
+        border: 0;
+    }
+    .status-card__title,
+    .status-card__description,
+    .status-card__host {
+        color: black !important;
+        font-size: var(--small-font-size);
+    }
+    .status-card__host {
+        text-decoration: underline;
+    }
+
+    /* --- misc --- */
+
+    /* page footer with general Mastodon links */
+    div.footer {
+        display: none;
+    }