pushing the changes after an afternoon of work
This commit is contained in:
parent
5f481fbafd
commit
cfdd7b37e4
246
mastodon.css
246
mastodon.css
@ -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 {
|
||||
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,11 +237,53 @@
|
||||
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;
|
||||
}
|
||||
|
||||
/* 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: black !important;
|
||||
}
|
||||
|
||||
/* hashtags */
|
||||
a.hashtag {
|
||||
color: black !important
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
div.status__content a.mention span {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* media content */
|
||||
div.media-gallery {
|
||||
max-height: 90mm;
|
||||
}
|
||||
button.icon-button.overlayed {
|
||||
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) */
|
||||
@ -143,28 +306,9 @@
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* page footer with Mastodon links */
|
||||
/* --- misc --- */
|
||||
|
||||
/* page footer with general Mastodon links */
|
||||
div.footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* hashtags */
|
||||
a.hashtag {
|
||||
color: black !important
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
div.status__content a.mention span {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* media content */
|
||||
div.media-gallery {
|
||||
max-height: 90mm;
|
||||
}
|
||||
button.icon-button.overlayed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user