lumbung-web-to-print/mastodon.css

/* PRINT CSS STARTS HERE */

/* Adding the fonts + logotype image here, */
/* to let them be loaded by the DOM before hitting CTRL+P for making the PDF */
@font-face {
    font-family: "gudea";
    font-style: normal;
    font-weight: 400;
    src: url(https://social.lumbung.space/packs/media/fonts/gudea.woff2) format("woff2");
}
@font-face {
    font-family: "gudea";
    font-style: italic;
    font-weight: 400;
    src: url(https://social.lumbung.space/packs/media/fonts/gudea-italic.woff2) format("woff2");
}
@font-face {
    font-family: "gudea";
    font-style: normal;
    font-weight: 700;
    src: url(https://social.lumbung.space/packs/media/fonts/gudea-bold.woff2) format("woff2");
}
div.page-header{
    font-family: "gudea";
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}
div.page-header h1::before {
    content: url(https://lumbung.space/img/logo.svg);
    display: block;
    margin: 0 0 1em 0;
}
div.page-header h1 + p{
    width:  80%;
    margin: 0 auto;
    display: block;
}
div.page-header h1 + p::after {
    content: ' You can save these posts as a "hashtag harvesting zine"! Use CTLR+P to save this page as a PDF. Best size is A5 with default margins. Make sure that you enable "print backgrounds". ';
    margin: 1em 0 0 0;
    display: block;
}

@media print{

    @page{
        size: A5; /* only works in Chrome, Edge and Opera; see https://developer.mozilla.org/en-US/docs/Web/CSS/@page */
        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: 10pt;
        --line-height: 1.25;
        --small-font-size: 8pt;
        --small-line-height: 1.15;
        --header-font-size: 34pt;
        --datetime-font-size: 8pt;
    }

    body {
        width: 118mm;
        margin: 10mm 0 !important;
        background: unset;
        font-family: "gudea", sans-serif !important;
        font-size: var(--font-size);
        line-height: var(--line-height);
        color: color: black;
    }

    /* --- front page --- */

    /* Reset some of Hometown's CSS rules */
    div.page-header {
        max-width: 118mm; /* 148mm - 30mm page margin - 10mm padding*/
        overflow: hidden;
        overflow-wrap: anywhere;
        background: unset;
        border: unset;
        margin: 0 !important;
        padding: 0 !important;
        break-after: page;
    }
    div.page-header p {
        visibility: hidden;
    }
    div.public-layout nav.header {
        background: unset;
        border: unset;
        width: unset;
        height: unset;
        margin: unset;
        display: unset;;
        background-color: transparent !important;
    }
    div.public-layout nav.header > div{
        display: block !important; 
        flex: unset !important; 
    }

    /* Hashtag harvesting at social.lumbung.space */
    div.public-layout nav.header a.brand{
        visibility: hidden;
        position: absolute;
        top: 0;
        left: 50mm;
        margin: 0;
    }
    div.public-layout nav.header::after {
        content: "Hashtag harvesting at social.lumbung.space";
        display: block;
        width: 50mm !important; 
        margin: -11mm 0 0 0;
        font-size: 11pt !important;
        font-weight: bold;
        font-style: normal;
        color: #c2c2ff;
        visibility: visible;
    }
    div.public-layout nav.header a.nav-link.nav-button.webapp-btn {
        display: none;
    }
    /* Lumbung logotype */
    div.page-header h1::before {
        content: url(https://lumbung.space/img/logo.svg);
        display: block;
        width: 90%;
        margin: 0 5% !important;
        height: 120px;
        overflow: visible;
    }
    /* hashtag title */
    div.page-header h1 {
        margin: 0 10mm 5mm;
        font-size: var(--header-font-size) !important;
        font-weight: bold;
        line-height: 0.9;
        letter-spacing: -0.04em;
        text-align: center;
        transform: rotate(-2deg);
        color: #c2c2ff;
        overflow: visible;
    }
    /* big # on the cover */
    div.page-header h1::after{
        content: "#";
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        font-size: 380pt;
        line-height: 0.5;
        font-weight: bolder;
        margin: 30mm auto 30mm -2mm;
        color: #f1d5c0;
        page-break-after: always;
    }

    /* --- posts --- */

    /* 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;
        width: 90% !important;
        float: left;
        top: unset !important;
        left: unset !important;
        max-width: unset !important;
        margin: 0 auto;
        page-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 !important;
    }

    /* author details */
    span.display-name {
        color: unset;
    }
    a.detailed-status__display-name {
        color: #007f76 !important;
        transform: rotate(-3deg);
        padding: 2mm 4mm 4mm;
        display: inline-block;
        width: auto;
        margin: 2mm 0 6mm 10mm;
        border-top: 1px solid #007f76;
        border-left: 1px solid #007f76;
        border-right: 1px solid #007f76;
        page-break-after: avoid;
    }
    strong.display-name__html {
        font-size: 10pt;
        color: #007f76;
    }
    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: 16.5mm;
        left: 30mm;
        transform: rotate(-3deg);
        font-size: var(--small-font-size);
        font-weight: normal;
        color: #007f76 !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 */
    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: #007f76 !important;
    }

    /* hashtags */
    a.hashtag {
        color: #c2c2ff !important;
        margin: 0;
        text-decoration: none;
    }
    div.status__content a.mention span {
        text-decoration: none;
    }

    /* media content */
    div.media-gallery {
        height: auto !important;
        width: auto;
    }
    button.icon-button.overlayed {
        display: none;
    }
    a.media-gallery__item-thumbnail{
        position: relative;
        display: block;
    }
    a.media-gallery__item-thumbnail img {
        position: relative;
        display: block;
        width: 100% !important;
        height: auto;
        max-height: 185mm !important;
        margin: 0 auto;
        object-position: 50% 0% !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    /* media galleries */  
    div.media-gallery__item{
        width: 100% !important;
        height: auto !important;
        margin: 2mm 0;
    }

    /* 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;
    }
}