From 5f481fbafd01eb3b594055b9a822fe7d78cd0653 Mon Sep 17 00:00:00 2001
From: manetta <mail@manettaberends.nl>
Date: Thu, 13 Jan 2022 18:11:55 +0100
Subject: [PATCH] adding a first version of a custom web-to-print stylesheet
 for the #hashtags pages on Mastodon

---
 mastodon.css | 170 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 170 insertions(+)
 create mode 100644 mastodon.css

diff --git a/mastodon.css b/mastodon.css
new file mode 100644
index 0000000..d806a98
--- /dev/null
+++ b/mastodon.css
@@ -0,0 +1,170 @@
+@media print{
+
+    @page{
+        size: A5;
+        margins: 10mm 15mm;
+    }
+
+    :root{
+        --font-size: 24pt;
+        --line-height: 1.25;
+        --small-font-size: 11pt;
+        --small-line-height: 1.15;
+        --header-font-size: 46pt;
+    }
+
+    body {
+        background: unset;
+        font-family: serif !important;
+        font-size: var(--font-size);
+        line-height: var(--line-height);
+        color: color: black;
+    }
+
+    /* navigation bar */
+    div.public-layout nav.header {
+        background: unset;
+        border: unset;
+        width: unset;
+        height: unset;
+    }
+    div.public-layout nav.header > div{
+        display: block !important;
+        flex: unset !important;
+    }
+    div.public-layout nav.header a.brand {
+        font-size: var(--header-font-size) !important;
+        font-weight: bold;
+        transform: rotate(2deg);
+        color: #00cf38;
+    }
+    div.public-layout nav.header a.nav-link.nav-button.webapp-btn {
+        display: none;
+    }
+
+    /* hashtag title */
+    div.page-header {
+        break-after: page;
+        background: unset;
+        border: unset;
+        margin: 0 0 5em 0;
+        padding: 0;
+    }
+    div.page-header h1 {
+        font-size: var(--header-font-size) !important;
+        color: orange;
+    }
+    div.page-header p {
+        display: none;
+    }
+    div.page-header::after{
+        content: " ";
+        display: block;
+        width: 90mm;
+        height: 120mm;
+        margin: 15mm auto 0;
+        padding: 1em;
+        border-top: 5px solid pink;
+        border-left: 5px solid #00BCD4;
+        border-right: 5px solid #9C27B0;
+        border-bottom: 5px solid #ff002d;
+        border-radius: 15px;
+        transform: rotate(-3deg)
+    }
+
+    /* grid of posts */
+    div.statuses-grid {
+        width: 100% !important;
+        height: unset;
+        min-height: unset;
+    }
+
+    /* single post */
+    div.statuses-grid__item {
+        position: relative !important;
+        display: block;
+        float: left;
+        top: unset !important;
+        left: unset !important;
+        width: 90% !important;
+        max-width: unset !important;
+        margin: 0;
+        break-inside: avoid;
+    }
+    div.statuses-grid__item > div {
+        height: unset !important;
+        box-sizing: unset !important;
+    }
+    div.detailed-status {
+        background: unset !important;
+        padding: 0 !important;
+        margin: 0 0 2em 0 !important;
+    /*     border: 1px solid lightgreen !important; */
+    }
+    /* author details */
+    span.display-name {
+        color: unset;
+    }
+    a.detailed-status__display-name {
+        color: black !important;
+    }
+    strong.display-name__html {
+        font-size: 14pt;
+        color: black;
+    }
+    span.display-name__account {
+        font-size: var(--small-font-size);
+    }
+
+    /* post metadata (timestamp etc.) */
+    .detailed-status__meta {
+        color: black !important;
+        font-size: var(--small-font-size);
+        line-height: var(--small-line-height);
+    }
+
+    /* 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;
+    }
+
+    /* page footer with Mastodon links */
+    div.footer {
+        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;
+    }
+
+}
\ No newline at end of file