switching to the lumbung color scheme + loading font and logotype
This commit is contained in:
parent
3bf0901fa0
commit
a040c1bd76
202
mastodon.css
202
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{
|
@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;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user