mirror of
https://github.com/GenderDysphoria/GenderDysphoria.fyi.git
synced 2025-11-25 12:32:42 +00:00
Adjustments for printing
This commit is contained in:
Jocelyn Badgley (Twipped)
@@ -8,12 +8,7 @@
|
||||
}
|
||||
|
||||
.card-img, .card-img-top {
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.card-img-top {
|
||||
page-break-before: avoid;
|
||||
page-break-after: avoid;
|
||||
// width: unset;
|
||||
}
|
||||
|
||||
.card-img-top + .card-img-top {
|
||||
@@ -148,8 +143,6 @@
|
||||
.card.right {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
page-break-inside: always;
|
||||
|
||||
}
|
||||
|
||||
.card.center {
|
||||
|
||||
67
scss/_gutter.scss
Normal file
67
scss/_gutter.scss
Normal file
@@ -0,0 +1,67 @@
|
||||
|
||||
.gutter {
|
||||
|
||||
@media screen and (min-width: 800px) {
|
||||
position: relative;
|
||||
height: 0;
|
||||
left: calc(100% + 1em);
|
||||
width: 400px;
|
||||
padding: 0 1em;
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) and (max-width: 800px) {
|
||||
float: right;
|
||||
width: 300px;
|
||||
margin-left: 1em;
|
||||
zoom: 0.9;
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
||||
page-break-inside: avoid;
|
||||
clear: both;
|
||||
|
||||
&:not(.print-inline) {
|
||||
float: right;
|
||||
width: 40vw;
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
// outline: 1px solid red;
|
||||
|
||||
&.flex, .flex {
|
||||
.tweet {
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
|
||||
> a > img:not(.card-img-top), > img {
|
||||
max-width: 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.flex, .gutter.flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
@media print {
|
||||
&.print-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
&.flex-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&.flex-center {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@@ -149,6 +149,11 @@ header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
max-height: 90vh;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
@@ -167,7 +172,7 @@ header {
|
||||
}
|
||||
|
||||
// @media (min-width: 500px) {
|
||||
body:not(.front-page):not(.longform) header + * {
|
||||
body:not(.front-page) header + * {
|
||||
margin-top: $header-full-height;
|
||||
}
|
||||
// }
|
||||
|
||||
@@ -1,11 +1,5 @@
|
||||
.front-page {
|
||||
|
||||
header {
|
||||
@media (max-width: 500px) {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.top-fold {
|
||||
min-height: 100vh;
|
||||
background-color: $header-bg-mid;
|
||||
|
||||
@@ -2,54 +2,40 @@
|
||||
|
||||
body.longform {
|
||||
|
||||
#body {
|
||||
background: unset;
|
||||
|
||||
@media screen {
|
||||
padding: 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
clear: both;
|
||||
page-break-before: always;
|
||||
}
|
||||
|
||||
.header-link { display: none; }
|
||||
|
||||
article hr {
|
||||
page-break-after: always;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
.gutter {
|
||||
float: right;
|
||||
width: 40vw;
|
||||
margin-left: 1em;
|
||||
zoom: 0.9;
|
||||
|
||||
page-break-inside: avoid;
|
||||
|
||||
&.print-center {
|
||||
float: none;
|
||||
margin: 1em auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.flex, .flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
> a > img:not(.card-img-top), > img {
|
||||
max-width: 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// #body {
|
||||
// // background: unset;
|
||||
|
||||
// @media screen {
|
||||
// padding: 0 1em;
|
||||
// }
|
||||
// }
|
||||
|
||||
// header {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// h1, h2 {
|
||||
// clear: both;
|
||||
// page-break-before: always;
|
||||
// }
|
||||
|
||||
// .header-link { display: none; }
|
||||
|
||||
// article hr {
|
||||
// page-break-after: always;
|
||||
// opacity: 0;
|
||||
// }
|
||||
|
||||
// > a > img:not(.card-img-top), > img {
|
||||
// max-width: 100%;
|
||||
// margin-bottom: 5px;
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -121,6 +121,12 @@
|
||||
}
|
||||
|
||||
ul { padding-left: 2em; }
|
||||
|
||||
.center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.cw {
|
||||
@@ -152,9 +158,30 @@
|
||||
}
|
||||
|
||||
.two-column-list {
|
||||
|
||||
@media (min-width: 500px) {
|
||||
h1, h2, h3, h4 {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
|
||||
@media (max-width: 400px) {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
columns: 2;
|
||||
padding-left: 3em;
|
||||
}
|
||||
|
||||
@media (min-width: 1100px) {
|
||||
padding-left: 5em;
|
||||
}
|
||||
|
||||
li { margin-bottom: 0.5em; }
|
||||
|
||||
@@ -26,7 +26,7 @@ body.post {
|
||||
}
|
||||
}
|
||||
|
||||
body.gdb, body.hrt {
|
||||
body.gdb {
|
||||
|
||||
#body {
|
||||
background-color: $gutter-bg;
|
||||
@@ -73,53 +73,6 @@ body.gdb, body.hrt {
|
||||
overflow: hidden;
|
||||
} }
|
||||
|
||||
.gutter {
|
||||
|
||||
@media screen and (min-width: 800px) {
|
||||
position: relative;
|
||||
height: 0;
|
||||
left: calc(100% + 1em);
|
||||
width: 400px;
|
||||
padding: 0 1em;
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media print, screen and (min-width: 500px) and (max-width: 800px) {
|
||||
float: right;
|
||||
width: 300px;
|
||||
margin-left: 1em;
|
||||
zoom: 0.9;
|
||||
}
|
||||
|
||||
// outline: 1px solid red;
|
||||
|
||||
&.flex, .flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.tweet {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
&.flex-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&.flex-center {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
> a > img:not(.card-img-top), > img {
|
||||
max-width: 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.full-wide {
|
||||
width: calc(100vw - 4em);
|
||||
background-color: darken($content-bg, 1%);
|
||||
|
||||
@@ -8,7 +8,6 @@
|
||||
$borderRadius: .35em;
|
||||
$avatarSize: 36px;
|
||||
|
||||
// zoom: 0.8;
|
||||
font-size: 12px;
|
||||
border: 1px solid $borderColor;
|
||||
border-radius: .35em;
|
||||
@@ -18,6 +17,8 @@
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
page-break-inside: avoid;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
&.capped { max-height: 700px; }
|
||||
}
|
||||
|
||||
@@ -101,6 +101,7 @@ $header-full-height: 100px;
|
||||
// @import "./index";
|
||||
@import "./page";
|
||||
@import "./card";
|
||||
@import "./gutter";
|
||||
@import "./grid-row";
|
||||
@import "./markup";
|
||||
// @import "./pager";
|
||||
@@ -141,13 +142,57 @@ body.page, body.post {
|
||||
|
||||
article {
|
||||
border: 0;
|
||||
|
||||
blockquote {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
h1 {
|
||||
// clear: both;
|
||||
page-break-before: always;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
&.span34 {
|
||||
width: 50vw;
|
||||
.print-break-before {
|
||||
page-break-before: always;
|
||||
}
|
||||
|
||||
.print-break-after {
|
||||
page-break-after: always;
|
||||
}
|
||||
|
||||
.print-hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.card, .gutter {
|
||||
&.print-span1 { width: 100vw !important; }
|
||||
&.print-span34 { width: 75vw !important; }
|
||||
&.print-span2 { width: 50vw !important; }
|
||||
&.print-span3 { width: 33vw !important; }
|
||||
&.print-span4 { width: 25vw !important; }
|
||||
&.print-span5 { width: 20vw !important; }
|
||||
&.print-span6 { width: 15vw !important; }
|
||||
|
||||
&.print-span1,
|
||||
&.print-span34,
|
||||
&.print-span2 {
|
||||
&.print-inline, &.print-center {
|
||||
margin: 1em auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.print-center {
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
&.print-right {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.card img.card-img-top {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -183,4 +228,3 @@ body.page, body.post {
|
||||
footer .patreon-support { display: none; }
|
||||
footer .foot-nav { display: none; }
|
||||
|
||||
article hr { page-break-after: always; }
|
||||
|
||||
@@ -101,6 +101,7 @@ $header-full-height: 100px;
|
||||
@import "./index";
|
||||
@import "./page";
|
||||
@import "./card";
|
||||
@import "./gutter";
|
||||
@import "./grid-row";
|
||||
@import "./markup";
|
||||
@import "./pager";
|
||||
|
||||
Reference in New Issue
Block a user