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)
+ });