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

updates :)

master
manetta 3 years ago
parent
cfdd7b37e4
commit
3bf0901fa0
1 changed files with 128 additions and 156 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. 280
      mastodon.css

280
mastodon.css
View File

@ -5,21 +5,38 @@
} }
:root{ :root{
--font-size: 14pt; --font-size: 10pt;
--line-height: 1.25; --line-height: 1.25;
--small-font-size: 11pt; --small-font-size: 8pt;
--small-line-height: 1.15; --small-line-height: 1.15;
--header-font-size: 50px; --header-font-size: 50px;
--datetime-font-size: 9pt; --datetime-font-size: 8pt;
--second-color: black;
--shape-width: 45mm; --third-color: #073d07;
--shape-height: 15mm; }
@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;
background: unset; background: unset;
font-family: serif !important; font-family: "gudea", sans-serif !important;
font-size: var(--font-size); font-size: var(--font-size);
line-height: var(--line-height); line-height: var(--line-height);
color: color: black; color: color: black;
@ -27,44 +44,11 @@
/* --- front page --- */ /* --- 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;
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;
}
/* hashtag title */ /* hashtag title */
div.page-header { div.page-header {
max-width: 118mm; max-width: 118mm;
min-height: 200mm;
overflow: hidden; overflow: hidden;
overflow-wrap: anywhere;
background: unset; background: unset;
border: unset; border: unset;
margin: 0; margin: 0;
@ -72,112 +56,74 @@
break-after: page; break-after: page;
} }
div.page-header h1 { div.page-header h1 {
font-size: calc(var(--header-font-size) * 0.75) !important; font-size: var(--header-font-size) !important;
font-weight: normal; font-weight: bold;
color: orange; line-height: 0.75;
display: block; 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;
} }
/* color empty frame front page */ /* big # on the cover */
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{ div.page-header::after{
content: " "; content: "#";
position: absolute; display: block;
width: var(--shape-width); top: 0;
height: var(--shape-height); left: 0;
margin: 40mm 0 0 -5mm; width: 100%;
padding: 5mm; font-family: monospace;
border-top: 5px solid #9C27B0; font-size: 450pt;
border-left: 5px solid #ff002d; line-height: 0.8;
border-right: 5px solid pink; font-weight: bolder;
border-bottom: 5px solid #00BCD4; margin: 0 auto 60mm -2mm;
border-radius: 10px; color: #00cf38;
transform: rotate(21deg); page-break-after: always;
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{ /* social.lumbung.space title */
content: " "; div.public-layout nav.header {
position: absolute; background: unset;
width: var(--shape-width); border: unset;
height: var(--shape-height); width: unset;
margin: 120mm 0 0 -70mm; height: unset;
padding: 5mm; margin: unset;
border-top: 5px solid pink; background-color: transparent !important;
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;
} }
div.public-layout nav.header > div{
div.page-header h1::before{ display: block !important;
content: " "; flex: unset !important;
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.public-layout nav.header a.brand{
div.page-header h1::after{ visibility: hidden;
content: " ";
position: absolute; position: absolute;
width: var(--shape-width); left: 0;
height: var(--shape-height); width: 100% !important;
margin: 40mm 0 0 -105mm; text-align: center;
padding: 5mm; top: 170mm;
border-top: 5px solid pink; padding: 0;
border-left: 5px solid #00BCD4; margin: 0;
border-right: 5px solid #9C27B0; }
border-bottom: 5px solid #ff002d; div.public-layout nav.header a.brand::before {
border-radius: 10px; content: "hashtag harvesting at social.lumbung.space";
transform: rotate(-6deg); display: block;
overflow: hidden; width: 108mm !important; /* 148mm - 30mm page margin - 10mm padding*/
font-size: 12pt !important;
font-weight: bold;
font-style: normal;
text-align: center;
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 {
display: none;
} }
/* --- posts --- */ /* --- posts --- */
@ -193,14 +139,13 @@
div.statuses-grid__item { div.statuses-grid__item {
position: relative !important; position: relative !important;
display: block; display: block;
width: 90% !important;
float: left; float: left;
top: unset !important; top: unset !important;
left: unset !important; left: unset !important;
width: 118mm !important;
max-width: unset !important; max-width: unset !important;
margin: 0 auto; margin: 0 auto;
break-inside: avoid; page-break-inside: avoid;
/* break-after: page; */
} }
div.statuses-grid__item > div { div.statuses-grid__item > div {
height: unset !important; height: unset !important;
@ -217,34 +162,45 @@
color: unset; color: unset;
} }
a.detailed-status__display-name { a.detailed-status__display-name {
color: black !important; color: var(--second-color) !important;
transform: rotate(-3deg); transform: rotate(-3deg);
padding: 5mm 5mm 10mm 5mm; padding: 2mm 4mm 4mm;
display: inline-block; display: inline-block;
width: auto; width: auto;
margin: 5mm 0 10mm 10mm; margin: 2mm 0 6mm 10mm;
border-top: 5px solid pink; border-top: 1px solid var(--second-color);
border-left: 5px solid #00BCD4; border-left: 1px solid var(--second-color);
border-right: 5px solid #9C27B0; border-right: 1px solid var(--second-color);
border-bottom: 5px solid #ff002d; page-break-after: avoid;
border-radius: 8px;
} }
strong.display-name__html { strong.display-name__html {
font-size: 14pt; font-size: 10pt;
color: black; color: var(--second-color);
} }
span.display-name__account { span.display-name__account {
font-size: var(--small-font-size); font-size: var(--small-font-size);
line-height: 1;
} }
/* post metadata: timestamp (moved to the top) */ /* post metadata: timestamp (moved to the top) */
div.detailed-status__meta a.detailed-status__datetime{ div.detailed-status__meta a.detailed-status__datetime{
position: absolute; position: absolute;
top: 24.5mm; top: 16.5mm;
left: 33.5mm; left: 30mm;
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;
}
/* rotate the even posts counter-clockwise, */
/* to make the rhythm a bit more playful */
div.statuses-grid__item:nth-of-type(odd) a.detailed-status__display-name {
transform: rotate(3deg);
}
div.statuses-grid__item:nth-of-type(odd) div.detailed-status__meta a.detailed-status__datetime {
transform: rotate(3deg);
left: 29.5mm;
} }
/* post metadata: hide the boosts and favorites */ /* post metadata: hide the boosts and favorites */
@ -255,13 +211,12 @@
color: transparent !important; color: transparent !important;
} }
div.detailed-status__meta a.detailed-status__datetime { div.detailed-status__meta a.detailed-status__datetime {
color: black !important; color: var(--second-color) !important;
} }
/* hashtags */ /* hashtags */
a.hashtag { a.hashtag {
color: black !important color: var(--third-color) !important;
font-weight: bold;
margin: 0; margin: 0;
text-decoration: none; text-decoration: none;
} }
@ -271,11 +226,23 @@
/* media content */ /* media content */
div.media-gallery { div.media-gallery {
max-height: 90mm; height: auto !important;
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 {
height: auto;
max-height: 100mm;
width: auto;
max-width: 80%;
margin: 0 auto;
display: block;
}
/* unwrap URLs in posts */ /* unwrap URLs in posts */
div.status__content__text a.status-link.unhandled-link span.ellipsis{ div.status__content__text a.status-link.unhandled-link span.ellipsis{
@ -312,3 +279,8 @@
div.footer { div.footer {
display: none; display: none;
} }

Write Preview
Loading…
Cancel
Save