diff --git a/mastodon.css b/mastodon.css index 239ae69..546ccb1 100644 --- a/mastodon.css +++ b/mastodon.css @@ -1,3 +1,48 @@ +/* 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 */ @@ -9,32 +54,13 @@ --line-height: 1.25; --small-font-size: 8pt; --small-line-height: 1.15; - --header-font-size: 50px; + --header-font-size: 34pt; --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; + margin: 10mm 0 !important; background: unset; font-family: "gudea", sans-serif !important; font-size: var(--font-size); @@ -44,87 +70,91 @@ /* --- front page --- */ - /* hashtag title */ + /* Reset some of Hometown's CSS rules */ div.page-header { - max-width: 118mm; + max-width: 118mm; /* 148mm - 30mm page margin - 10mm padding*/ overflow: hidden; overflow-wrap: anywhere; background: unset; border: unset; - margin: 0; - padding: 0; + margin: 0 !important; + padding: 0 !important; break-after: page; } - div.page-header h1 { - 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; } - - /* big # on the cover */ - div.page-header::after{ - 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; - } - - /* social.lumbung.space title */ 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; - left: 0; - width: 100% !important; - text-align: center; - top: 170mm; - padding: 0; + top: 0; + left: 50mm; margin: 0; } - div.public-layout nav.header a.brand::before { - content: "hashtag harvesting at social.lumbung.space"; + div.public-layout nav.header::after { + content: "Hashtag harvesting at social.lumbung.space"; display: block; - width: 108mm !important; /* 148mm - 30mm page margin - 10mm padding*/ - font-size: 12pt !important; + width: 50mm !important; + margin: -11mm 0 0 0; + font-size: 11pt !important; font-weight: bold; font-style: normal; - text-align: center; - color: var(--third-color); + color: #c2c2ff; visibility: visible; - padding: 5mm 5mm 15mm; - margin: 0 auto; } 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 --- */ @@ -162,20 +192,20 @@ color: unset; } a.detailed-status__display-name { - color: var(--second-color) !important; + color: #007f76 !important; transform: rotate(-3deg); padding: 2mm 4mm 4mm; display: inline-block; width: auto; 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); + 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: var(--second-color); + color: #007f76; } span.display-name__account { font-size: var(--small-font-size); @@ -190,7 +220,7 @@ transform: rotate(-3deg); font-size: var(--small-font-size); font-weight: normal; - color: var(--second-color) !important; + color: #007f76 !important; } /* rotate the even posts counter-clockwise, */ @@ -211,12 +241,12 @@ color: transparent !important; } div.detailed-status__meta a.detailed-status__datetime { - color: var(--second-color) !important; + color: #007f76 !important; } /* hashtags */ a.hashtag { - color: var(--third-color) !important; + color: #c2c2ff !important; margin: 0; text-decoration: none; } @@ -228,20 +258,24 @@ div.media-gallery { 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%; + max-height: 185mm !important; + width: 100% !important; margin: 0 auto; display: block; + object-position: 50% 0% !important; + } + + /* media galleries */ + div.media-gallery__item{ + width: 100% !important; + height: auto !important; + margin: 2mm 0; } /* unwrap URLs in posts */ @@ -279,8 +313,4 @@ div.footer { display: none; } - - - - - +} \ No newline at end of file