diff --git a/static/styles.css b/static/styles.css index 0f7bcfd..7566cb3 100644 --- a/static/styles.css +++ b/static/styles.css @@ -9,6 +9,12 @@ html { font-size: 18px; } } +@media print { + html { + font-size: 17px; + margin: 0; + } +} body { margin: 0; @@ -26,6 +32,12 @@ body { .theme--dark body { background: #1e1e1e; } +@media print { + body { + margin: 0; + color: #000000 !important; + } +} @media (max-width: 580px) { body.lock { overflow: hidden; @@ -74,6 +86,11 @@ h1, h2 { bottom: -40%; } } +@media print { + .background { + display: none; + } +} .theme-toggle { position: fixed; @@ -98,6 +115,11 @@ h1, h2 { right: 0; } } +@media print { + .theme-toggle { + display: none; + } +} .sun { display: none; @@ -129,6 +151,11 @@ h1, h2 { font-size: 0.8rem; } } +@media print { + .top { + display: block; + } +} .theme--default .top span { color: #e32a6d; } @@ -172,6 +199,12 @@ h1, h2 { text-align: right; text-decoration: none; } +@media print { + .nostr_link { + display: block; + text-align: right; + } +} .container { display: flex; @@ -186,6 +219,11 @@ h1, h2 { width: 100%; } } +@media print { + .container { + width: 100%; + } +} .container .columnA { flex-basis: 25%; margin-top: 2rem; @@ -427,6 +465,11 @@ h1, h2 { visibility: hidden; display: none; } +@media print { + .container .column_content .field.advanced-switch-wrapper { + display: none; + } +} .container .column_content .field.advanced-switch-wrapper label:first-of-type { cursor: pointer; text-indent: -9999px; @@ -595,6 +638,11 @@ h1, h2 { display: none; } } +@media print { + .container .column_clients { + display: none; + } +} .container .column_clients .title { font-size: 0.8rem; margin-bottom: 1rem; @@ -730,10 +778,22 @@ body.note .column_content, body.other .column_content { margin-right: 0; } } +@media print { + body.note .column_content, body.other .column_content { + flex-basis: 100%; + max-width: 100%; + } +} body.note .column_content .profile_intro, body.other .column_content .profile_intro { display: flex; max-width: 100%; align-items: center; + margin-bottom: 1rem; +} +@media print { + body.note .column_content .profile_intro, body.other .column_content .profile_intro { + margin-bottom: 1rem; + } } body.note .column_content .profile_intro a, body.other .column_content .profile_intro a { display: inherit; @@ -751,13 +811,17 @@ body.note .column_content .profile_intro a, body.other .column_content .profile_ } body.note .column_content .profile_intro .info-wrapper, body.other .column_content .profile_intro .info-wrapper { flex-grow: 1; - margin-bottom: 1rem; } @media (max-width: 580px) { body.note .column_content .profile_intro .info-wrapper, body.other .column_content .profile_intro .info-wrapper { display: block; } } +@media print { + body.note .column_content .profile_intro .info-wrapper, body.other .column_content .profile_intro .info-wrapper { + font-size: 1rem; + } +} @media (max-width: 580px) { body.note .column_content .profile_intro .info-wrapper .name, body.note .column_content .profile_intro .info-wrapper .npub, body.other .column_content .profile_intro .info-wrapper .name, @@ -775,6 +839,11 @@ body.note .column_content .profile_intro .pic-wrapper, body.other .column_conten margin-right: 0.5rem; } } +@media print { + body.note .column_content .profile_intro .pic-wrapper, body.other .column_content .profile_intro .pic-wrapper { + flex-basis: 10%; + } +} body.note .column_content .published_at, body.note .column_content .reply_of, body.other .column_content .published_at, body.other .column_content .reply_of { width: 100%; text-align: right; @@ -807,4 +876,14 @@ body.note .column_content .reply_of, body.other .column_content .reply_of { color: #9a9a9a; } +@media print { + @page { + margin: 2cm 3cm; + } + /* Safari specific styles */ + body.safari { + margin: 1cm 3cm; + } +} + /*# sourceMappingURL=styles.css.map */ diff --git a/static/styles.scss b/static/styles.scss index ecbdc57..11973b0 100644 --- a/static/styles.scss +++ b/static/styles.scss @@ -96,6 +96,10 @@ html { @media (max-width: 580px) { font-size: 18px; } + @media print { + font-size: 17px; + margin: 0; + } } body { @include themed() { @@ -106,6 +110,10 @@ body { } margin: 0; margin-bottom: 4rem; + @media print { + margin: 0; + color: #000000 !important; + } &.lock { @media (max-width: 580px) { overflow: hidden; @@ -145,6 +153,9 @@ a { bottom: -40%; } } + @media print { + display: none; + } } .theme-toggle { @@ -164,6 +175,9 @@ a { top: 0; right: 0; } + @media print { + display: none; + } } .sun { @@ -194,6 +208,9 @@ a { padding: 1rem; font-size: 0.8rem; } + @media print { + display: block; + } span { @include themed() { color: t($accent1); @@ -231,6 +248,10 @@ a { flex-basis: 15%; text-align: right; text-decoration: none; + @media print { + display: block; + text-align: right; + } } .container { @@ -243,6 +264,9 @@ a { display: block; width: 100%; } + @media print { + width: 100%; + } .columnA { flex-basis: 25%; @@ -425,14 +449,15 @@ a { &.advanced-switch-wrapper { display: flex; align-items: center; - input[type='checkbox'] { height: 0; width: 0; visibility: hidden; display: none; } - + @media print { + display: none; + } label:first-of-type { cursor: pointer; text-indent: -9999px; @@ -569,6 +594,9 @@ a { } } } + @media print { + display: none; + } .title { font-size: 0.8rem; margin-bottom: 1rem; @@ -687,10 +715,18 @@ body.note, body.other { max-width: 100%; margin-right: 0; } + @media print { + flex-basis: 100%; + max-width: 100%; + } .profile_intro { display: flex; max-width: 100%; align-items: center; + margin-bottom: 1rem; + @media print { + margin-bottom: 1rem; + } a { display: inherit; width: 100%; @@ -705,10 +741,12 @@ body.note, body.other { } .info-wrapper { flex-grow: 1; - margin-bottom: 1rem; @media (max-width: 580px) { display: block; } + @media print { + font-size: 1rem; + } .name, .npub { @media (max-width: 580px) { @@ -723,6 +761,9 @@ body.note, body.other { @media (max-width: 580px) { margin-right: 0.5rem; } + @media print { + flex-basis: 10%; + } } } .published_at, .reply_of { @@ -754,3 +795,13 @@ body.note, body.other { color: $color-base5; } } + +@media print { + @page { + margin: 2cm 3cm; + } + /* Safari specific styles */ + body.safari { + margin: 1cm 3cm; + } +} \ No newline at end of file diff --git a/templates/head.html b/templates/head.html index 931c56d..c1cb8ab 100644 --- a/templates/head.html +++ b/templates/head.html @@ -63,5 +63,5 @@ {{end}} - + diff --git a/templates/scripts.js b/templates/scripts.js index 63a3952..4bf117b 100644 --- a/templates/scripts.js +++ b/templates/scripts.js @@ -105,4 +105,9 @@ document.addEventListener('DOMContentLoaded', function() { contentDiv.classList.add('gradient'); } } -}); \ No newline at end of file +}); + +// Needed to apply proper print styles +if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) { + document.body.classList.add('safari'); +} \ No newline at end of file diff --git a/templates/top.html b/templates/top.html index e111de5..b0edaeb 100644 --- a/templates/top.html +++ b/templates/top.html @@ -70,4 +70,15 @@ // if (prefersDarkMode) { // document.documentElement.classList.add('theme--dark'); // } + + window.addEventListener('beforeprint', function() { + const htmlElement = document.documentElement + htmlElement.classList.remove('theme--dark') + htmlElement.classList.add('theme--default') + }); + window.addEventListener('afterprint', function() { + const htmlElement = document.documentElement + htmlElement.classList.toggle('theme--dark', isDarkMode) + htmlElement.classList.toggle('theme--default', !isDarkMode) + });