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
Split 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{
--font-size: 14pt;
--font-size: 10pt;
--line-height: 1.25;
--small-font-size: 11pt;
--small-font-size: 8pt;
--small-line-height: 1.15;
--header-font-size: 50px;
--datetime-font-size: 9pt;
--shape-width: 45mm;
--shape-height: 15mm;
--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 {
width: 118mm;
background: unset;
font-family: serif !important;
font-family: "gudea", sans-serif !important;
font-size: var(--font-size);
line-height: var(--line-height);
color: color: black;
@ -27,44 +44,11 @@
/* --- 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 */
div.page-header {
max-width: 118mm;
min-height: 200mm;
overflow: hidden;
overflow-wrap: anywhere;
background: unset;
border: unset;
margin: 0;
@ -72,112 +56,74 @@
break-after: page;
}
div.page-header h1 {
font-size: calc(var(--header-font-size) * 0.75) !important;
font-weight: normal;
color: orange;
display: block;
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 {
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;
}
/* big # on the cover */
div.page-header::after{
content: " ";
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;
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;
}
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: 10px;
transform: rotate(6deg);
overflow: hidden;
visibility: visible;
/* social.lumbung.space title */
div.public-layout nav.header {
background: unset;
border: unset;
width: unset;
height: unset;
margin: unset;
background-color: transparent !important;
}
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.public-layout nav.header > div{
display: block !important;
flex: unset !important;
}
div.page-header h1::after{
content: " ";
div.public-layout nav.header a.brand{
visibility: hidden;
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;
left: 0;
width: 100% !important;
text-align: center;
top: 170mm;
padding: 0;
margin: 0;
}
div.public-layout nav.header a.brand::before {
content: "hashtag harvesting at social.lumbung.space";
display: block;
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;
padding: 5mm 5mm 15mm;
margin: 0 auto;
}
div.public-layout nav.header a.nav-link.nav-button.webapp-btn {
display: none;
}
/* --- posts --- */
@ -193,14 +139,13 @@
div.statuses-grid__item {
position: relative !important;
display: block;
width: 90% !important;
float: left;
top: unset !important;
left: unset !important;
width: 118mm !important;
max-width: unset !important;
margin: 0 auto;
break-inside: avoid;
/* break-after: page; */
page-break-inside: avoid;
}
div.statuses-grid__item > div {
height: unset !important;
@ -217,34 +162,45 @@
color: unset;
}
a.detailed-status__display-name {
color: black !important;
color: var(--second-color) !important;
transform: rotate(-3deg);
padding: 5mm 5mm 10mm 5mm;
padding: 2mm 4mm 4mm;
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;
margin: 2mm 0 6mm 10mm;
border-top: 1px solid var(--second-color);
border-left: 1px solid var(--second-color);
border-right: 1px solid var(--second-color);
page-break-after: avoid;
}
strong.display-name__html {
font-size: 14pt;
color: black;
font-size: 10pt;
color: var(--second-color);
}
span.display-name__account {
font-size: var(--small-font-size);
line-height: 1;
}
/* post metadata: timestamp (moved to the top) */
div.detailed-status__meta a.detailed-status__datetime{
position: absolute;
top: 24.5mm;
left: 33.5mm;
top: 16.5mm;
left: 30mm;
transform: rotate(-3deg);
font-size: var(--small-font-size);
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 */
@ -255,13 +211,12 @@
color: transparent !important;
}
div.detailed-status__meta a.detailed-status__datetime {
color: black !important;
color: var(--second-color) !important;
}
/* hashtags */
a.hashtag {
color: black !important
font-weight: bold;
color: var(--third-color) !important;
margin: 0;
text-decoration: none;
}
@ -271,11 +226,23 @@
/* media content */
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 {
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 */
div.status__content__text a.status-link.unhandled-link span.ellipsis{
@ -312,3 +279,8 @@
div.footer {
display: none;
}

Write Preview
Loading…
Cancel
Save