mb
/
lumbung-web-to-print
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

switching to the lumbung color scheme + loading font and logotype

master
manetta 3 years ago
parent
3bf0901fa0
commit
a040c1bd76
1 changed files with 116 additions and 86 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 202
      mastodon.css

202
mastodon.css
View File

@ -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{ @page{
size: A5; /* only works in Chrome, Edge and Opera; see https://developer.mozilla.org/en-US/docs/Web/CSS/@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 */ 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; --line-height: 1.25;
--small-font-size: 8pt; --small-font-size: 8pt;
--small-line-height: 1.15; --small-line-height: 1.15;
--header-font-size: 50px; --header-font-size: 34pt;
--datetime-font-size: 8pt; --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 { body {
width: 118mm; width: 118mm;
margin: 10mm 0 !important;
background: unset; background: unset;
font-family: "gudea", sans-serif !important; font-family: "gudea", sans-serif !important;
font-size: var(--font-size); font-size: var(--font-size);
@ -44,87 +70,91 @@
/* --- front page --- */ /* --- front page --- */
/* hashtag title */ /* Reset some of Hometown's CSS rules */
div.page-header { div.page-header {
max-width: 118mm; max-width: 118mm; /* 148mm - 30mm page margin - 10mm padding*/
overflow: hidden; overflow: hidden;
overflow-wrap: anywhere; overflow-wrap: anywhere;
background: unset; background: unset;
border: unset; border: unset;
margin: 0; margin: 0 !important;
padding: 0; padding: 0 !important;
break-after: page; 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 { div.page-header p {
visibility: hidden; 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 { div.public-layout nav.header {
background: unset; background: unset;
border: unset; border: unset;
width: unset; width: unset;
height: unset; height: unset;
margin: unset; margin: unset;
display: unset;;
background-color: transparent !important; background-color: transparent !important;
} }
div.public-layout nav.header > div{ div.public-layout nav.header > div{
display: block !important; display: block !important;
flex: unset !important; flex: unset !important;
} }
/* Hashtag harvesting at social.lumbung.space */
div.public-layout nav.header a.brand{ div.public-layout nav.header a.brand{
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;
left: 0; top: 0;
width: 100% !important; left: 50mm;
text-align: center;
top: 170mm;
padding: 0;
margin: 0; margin: 0;
} }
div.public-layout nav.header a.brand::before { div.public-layout nav.header::after {
content: "hashtag harvesting at social.lumbung.space"; content: "Hashtag harvesting at social.lumbung.space";
display: block; display: block;
width: 108mm !important; /* 148mm - 30mm page margin - 10mm padding*/ width: 50mm !important;
font-size: 12pt !important; margin: -11mm 0 0 0;
font-size: 11pt !important;
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
text-align: center; color: #c2c2ff;
color: var(--third-color);
visibility: visible; visibility: visible;
padding: 5mm 5mm 15mm;
margin: 0 auto;
} }
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;
} }
/* 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 --- */ /* --- posts --- */
@ -162,20 +192,20 @@
color: unset; color: unset;
} }
a.detailed-status__display-name { a.detailed-status__display-name {
color: var(--second-color) !important; color: #007f76 !important;
transform: rotate(-3deg); transform: rotate(-3deg);
padding: 2mm 4mm 4mm; padding: 2mm 4mm 4mm;
display: inline-block; display: inline-block;
width: auto; width: auto;
margin: 2mm 0 6mm 10mm; margin: 2mm 0 6mm 10mm;
border-top: 1px solid var(--second-color); border-top: 1px solid #007f76;
border-left: 1px solid var(--second-color); border-left: 1px solid #007f76;
border-right: 1px solid var(--second-color); border-right: 1px solid #007f76;
page-break-after: avoid; page-break-after: avoid;
} }
strong.display-name__html { strong.display-name__html {
font-size: 10pt; font-size: 10pt;
color: var(--second-color); color: #007f76;
} }
span.display-name__account { span.display-name__account {
font-size: var(--small-font-size); font-size: var(--small-font-size);
@ -190,7 +220,7 @@
transform: rotate(-3deg); transform: rotate(-3deg);
font-size: var(--small-font-size); font-size: var(--small-font-size);
font-weight: normal; font-weight: normal;
color: var(--second-color) !important; color: #007f76 !important;
} }
/* rotate the even posts counter-clockwise, */ /* rotate the even posts counter-clockwise, */
@ -211,12 +241,12 @@
color: transparent !important; color: transparent !important;
} }
div.detailed-status__meta a.detailed-status__datetime { div.detailed-status__meta a.detailed-status__datetime {
color: var(--second-color) !important; color: #007f76 !important;
} }
/* hashtags */ /* hashtags */
a.hashtag { a.hashtag {
color: var(--third-color) !important; color: #c2c2ff !important;
margin: 0; margin: 0;
text-decoration: none; text-decoration: none;
} }
@ -228,20 +258,24 @@
div.media-gallery { div.media-gallery {
height: auto !important; height: auto !important;
width: auto; width: auto;
max-width: unset;
max-height: unset;
object-position: unset !important;
} }
button.icon-button.overlayed { button.icon-button.overlayed {
display: none; display: none;
} }
a.media-gallery__item-thumbnail img { a.media-gallery__item-thumbnail img {
height: auto; height: auto;
max-height: 100mm; max-height: 185mm !important;
width: auto; width: 100% !important;
max-width: 80%;
margin: 0 auto; margin: 0 auto;
display: block; 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 */ /* unwrap URLs in posts */
@ -279,8 +313,4 @@
div.footer { div.footer {
display: none; display: none;
} }
}
Write Preview
Loading…
Cancel
Save