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

pushing the changes after an afternoon of work

master
manetta 3 years ago
parent
5f481fbafd
commit
cfdd7b37e4
1 changed files with 193 additions and 49 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 238
      mastodon.css

238
mastodon.css
View File

@ -1,19 +1,23 @@
@media print{
@page{
size: A5;
margins: 10mm 15mm;
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: 24pt;
--font-size: 14pt;
--line-height: 1.25;
--small-font-size: 11pt;
--small-line-height: 1.15;
--header-font-size: 46pt;
--header-font-size: 50px;
--datetime-font-size: 9pt;
--shape-width: 45mm;
--shape-height: 15mm;
}
body {
width: 118mm;
background: unset;
font-family: serif !important;
font-size: var(--font-size);
@ -21,22 +25,36 @@
color: color: black;
}
/* navigation bar */
/* --- front page --- */
/* lumbung.space title */
div.public-layout nav.header {
background: unset;
border: unset;
width: unset;
height: unset;
margin: unset;
}
div.public-layout nav.header > div{
display: block !important;
flex: unset !important;
}
div.public-layout nav.header a.brand{
visibility: hidden;
}
div.public-layout nav.header a.brand::before {
visibility: visible;
display: block;
width: 148mm !important;
content: "social.lumbung.space";
font-size: var(--header-font-size) !important;
font-weight: bold;
transform: rotate(2deg);
line-height: 0;
text-align: center;
transform: rotate(-2deg);
color: #00cf38;
margin: 3mm 0 5mm;
overflow: visible;
}
div.public-layout nav.header a.nav-link.nav-button.webapp-btn {
display: none;
@ -44,34 +62,126 @@
/* hashtag title */
div.page-header {
break-after: page;
max-width: 118mm;
min-height: 200mm;
overflow: hidden;
background: unset;
border: unset;
margin: 0 0 5em 0;
margin: 0;
padding: 0;
break-after: page;
}
div.page-header h1 {
font-size: var(--header-font-size) !important;
font-size: calc(var(--header-font-size) * 0.75) !important;
font-weight: normal;
color: orange;
display: block;
}
div.page-header p {
display: none;
visibility: hidden;
}
/* color empty frame front page */
div.page-header::before{
content: " ";
position: absolute;
width: var(--shape-width);
height: var(--shape-height);
margin: -8mm 0 0 5mm;
padding: 5mm;
border-top: 5px solid #00BCD4;
border-left: 5px solid #9C27B0;
border-right: 5px solid #ff002d;
border-bottom: 5px solid pink;
border-radius: 10px;
transform: rotate(12deg);
overflow: hidden;
}
div.page-header::after{
content: " ";
display: block;
width: 90mm;
height: 120mm;
margin: 15mm auto 0;
padding: 1em;
position: absolute;
width: var(--shape-width);
height: var(--shape-height);
margin: 40mm 0 0 -5mm;
padding: 5mm;
border-top: 5px solid #9C27B0;
border-left: 5px solid #ff002d;
border-right: 5px solid pink;
border-bottom: 5px solid #00BCD4;
border-radius: 10px;
transform: rotate(21deg);
overflow: hidden;
}
div.page-header p::before{
content: " ";
position: absolute;
width: var(--shape-width);
height: var(--shape-height);
margin: 75mm 0 0 15mm;
padding: 5mm;
border-top: 5px solid #ff002d;
border-left: 5px solid pink;
border-right: 5px solid #00BCD4;
border-bottom: 5px solid #9C27B0;
border-radius: 10px;
transform: rotate(9deg);
overflow: hidden;
visibility: visible;
}
div.page-header p::after{
content: " ";
position: absolute;
width: var(--shape-width);
height: var(--shape-height);
margin: 120mm 0 0 -70mm;
padding: 5mm;
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)
border-radius: 10px;
transform: rotate(6deg);
overflow: hidden;
visibility: visible;
}
div.page-header h1::before{
content: " ";
position: absolute;
width: var(--shape-width);
height: var(--shape-height);
margin: 105mm 0 0 5mm;
padding: 5mm;
border-top: 5px solid #ff002d;
border-left: 5px solid pink;
border-right: 5px solid #00BCD4;
border-bottom: 5px solid #9C27B0;
border-radius: 10px;
transform: rotate(-6deg);
overflow: hidden;
visibility: visible;
}
div.page-header h1::after{
content: " ";
position: absolute;
width: var(--shape-width);
height: var(--shape-height);
margin: 40mm 0 0 -105mm;
padding: 5mm;
border-top: 5px solid pink;
border-left: 5px solid #00BCD4;
border-right: 5px solid #9C27B0;
border-bottom: 5px solid #ff002d;
border-radius: 10px;
transform: rotate(-6deg);
overflow: hidden;
visibility: visible;
}
/* --- posts --- */
/* grid of posts */
div.statuses-grid {
width: 100% !important;
@ -86,10 +196,11 @@
float: left;
top: unset !important;
left: unset !important;
width: 90% !important;
width: 118mm !important;
max-width: unset !important;
margin: 0;
margin: 0 auto;
break-inside: avoid;
/* break-after: page; */
}
div.statuses-grid__item > div {
height: unset !important;
@ -98,15 +209,25 @@
div.detailed-status {
background: unset !important;
padding: 0 !important;
margin: 0 0 2em 0 !important;
/* border: 1px solid lightgreen !important; */
margin: 0 !important;
}
/* author details */
span.display-name {
color: unset;
}
a.detailed-status__display-name {
color: black !important;
transform: rotate(-3deg);
padding: 5mm 5mm 10mm 5mm;
display: inline-block;
width: auto;
margin: 5mm 0 10mm 10mm;
border-top: 5px solid pink;
border-left: 5px solid #00BCD4;
border-right: 5px solid #9C27B0;
border-bottom: 5px solid #ff002d;
border-radius: 8px;
}
strong.display-name__html {
font-size: 14pt;
@ -116,36 +237,25 @@
font-size: var(--small-font-size);
}
/* post metadata (timestamp etc.) */
.detailed-status__meta {
color: black !important;
/* post metadata: timestamp (moved to the top) */
div.detailed-status__meta a.detailed-status__datetime{
position: absolute;
top: 24.5mm;
left: 33.5mm;
transform: rotate(-3deg);
font-size: var(--small-font-size);
line-height: var(--small-line-height);
font-weight: normal;
}
/* status cards (previews of linked content) */
div.status__content {
font-size: inherit !important;
color: black;
line-height: inherit !important;
/* 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;
}
.status-card {
font-size: smaller !important;
border: 0;
div.detailed-status__meta {
color: transparent !important;
}
.status-card__title,
.status-card__description,
.status-card__host {
div.detailed-status__meta a.detailed-status__datetime {
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 */
@ -167,4 +277,38 @@
display: none;
}
/* 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;
}
Write Preview
Loading…
Cancel
Save