infeeeee/dis-2019
1
0
Fork 0
Code Issues 6 Pull Requests Releases 19 Wiki Activity

basic media print rules

Browse Source
This commit is contained in:
infeeeee
2019-10-04 22:57:30 +02:00
parent 98e962b7e8
commit 2709f6bfa7
4 changed files with 248 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/base.css
View File

File diff suppressed because one or more lines are too long

4
gulpfile.js
View File

@@ -28,9 +28,11 @@ gulp.task('liverel', function () {
// }); // });
gulp.task('watch', function () { gulp.task('watch', function () {
livereload.listen()
gulp.watch('./sass/**/*.scss', gulp.series('sass')) gulp.watch('./sass/**/*.scss', gulp.series('sass'))
gulp.watch(['./**', '!./node_modules/**'], gulp.series('liverel')) gulp.watch(['./**', '!./node_modules/**'], gulp.series('liverel'))
livereload.listen()
}); });
gulp.task('minify-svg', function () { gulp.task('minify-svg', function () {

272
sass/_print.scss
View File

@@ -3,19 +3,19 @@
\*------------------------------------*/ \*------------------------------------*/
::selection { ::selection {
background:#04A4CC; background: #04a4cc;
color:#FFF; color: #fff;
text-shadow:none; text-shadow: none;
} }
::-webkit-selection { ::-webkit-selection {
background:#04A4CC; background: #04a4cc;
color:#FFF; color: #fff;
text-shadow:none; text-shadow: none;
} }
::-moz-selection { ::-moz-selection {
background:#04A4CC; background: #04a4cc;
color:#FFF; color: #fff;
text-shadow:none; text-shadow: none;
} }
/*------------------------------------*\ /*------------------------------------*\
@@ -23,73 +23,71 @@
\*------------------------------------*/ \*------------------------------------*/
.alignnone { .alignnone {
margin:5px 20px 20px 0; margin: 5px 20px 20px 0;
} }
.aligncenter, .aligncenter,
div.aligncenter { div.aligncenter {
display:block; display: block;
margin:5px auto 5px auto; margin: 5px auto 5px auto;
} }
.alignright { .alignright {
float:right; float: right;
margin:5px 0 20px 20px; margin: 5px 0 20px 20px;
} }
.alignleft { .alignleft {
float:left; float: left;
margin:5px 20px 20px 0; margin: 5px 20px 20px 0;
} }
a img.alignright { a img.alignright {
float:right; float: right;
margin:5px 0 20px 20px; margin: 5px 0 20px 20px;
} }
a img.alignnone { a img.alignnone {
margin:5px 20px 20px 0; margin: 5px 20px 20px 0;
} }
a img.alignleft { a img.alignleft {
float:left; float: left;
margin:5px 20px 20px 0; margin: 5px 20px 20px 0;
} }
a img.aligncenter { a img.aligncenter {
display:block; display: block;
margin-left:auto; margin-left: auto;
margin-right:auto; margin-right: auto;
} }
.wp-caption { .wp-caption {
background:#FFF; background: #fff;
border:1px solid #F0F0F0; border: 1px solid #f0f0f0;
max-width:96%; max-width: 96%;
padding:5px 3px 10px; padding: 5px 3px 10px;
text-align:center; text-align: center;
} }
.wp-caption.alignnone { .wp-caption.alignnone {
margin:5px 20px 20px 0; margin: 5px 20px 20px 0;
} }
.wp-caption.alignleft { .wp-caption.alignleft {
margin:5px 20px 20px 0; margin: 5px 20px 20px 0;
} }
.wp-caption.alignright { .wp-caption.alignright {
margin:5px 0 20px 20px; margin: 5px 0 20px 20px;
} }
.wp-caption img { .wp-caption img {
border:0 none; border: 0 none;
height:auto; height: auto;
margin:0; margin: 0;
max-width:98.5%; max-width: 98.5%;
padding:0; padding: 0;
width:auto; width: auto;
} }
.wp-caption .wp-caption-text, .wp-caption .wp-caption-text,
.gallery-caption { .gallery-caption {
font-size:11px; font-size: 11px;
line-height:17px; line-height: 17px;
margin:0; margin: 0;
padding:0 4px 5px; padding: 0 4px 5px;
} }
.sticky { .sticky {
} }
.bypostauthor { .bypostauthor {
} }
/*------------------------------------*\ /*------------------------------------*\
@@ -97,51 +95,199 @@ a img.aligncenter {
\*------------------------------------*/ \*------------------------------------*/
@media print { @media print {
@page {
margin: 2cm;
}
html {
overflow-y: unset !important;
}
* { * {
background:transparent !important; -webkit-print-color-adjust: exact;
color:#000 !important; color-adjust: exact !important;
box-shadow:none !important; }
text-shadow:none !important;
*:not(header *) {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
} }
a, a,
a:visited { a:visited {
text-decoration:underline; text-decoration: underline;
} }
a[href]:after { a[href]:after {
content:" (" attr(href) ")"; content: " (" attr(href) ")";
} }
abbr[title]:after { abbr[title]:after {
content:" (" attr(title) ")"; content: " (" attr(title) ")";
} }
.ir a:after, .ir a:after,
a[href^="javascript:"]:after, a[href^="javascript:"]:after,
a[href^="#"]:after { a[href^="#"]:after {
content:""; content: "";
} }
pre,blockquote { pre,
border:1px solid #999; blockquote {
page-break-inside:avoid; border: 1px solid #999;
page-break-inside: avoid;
} }
thead { thead {
display:table-header-group; display: table-header-group;
} }
tr,img { tr,
page-break-inside:avoid; img {
page-break-inside: avoid;
} }
img { img {
max-width:100% !important; max-width: 100% !important;
} }
@page { @page {
margin:0.5cm; margin: 0.5cm;
} }
p, p,
h2, h2,
h3 { h3 {
orphans:3; orphans: 3;
widows:3; widows: 3;
} }
h2, h2,
h3 { h3 {
page-break-after:avoid; page-break-after: avoid;
}
//structure
.wrapper {
height: unset !important;
}
//header
header {
position: relative !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
padding: 2rem !important;
.header-inner {
flex-direction: column !important;
justify-content: flex-start;
align-items: flex-start !important;
padding: 0 2rem !important;
.dis-logo {
background-image: url(../img/dis-logo-black.png) !important;
background-image: url(../img/dis-logo-black.svg) !important;
margin-bottom: 1rem;
}
a {
display: flex !important;
flex-direction: row;
justify-content: flex-start;
align-items: center;
div {
margin-right: 2rem;
}
}
.menubutton {
display: none;
}
.social-link {
display: block !important;
margin: 0.5rem 2rem !important;
}
.events-link {
display: none;
}
}
}
//masonrypage
.masonrypage {
article {
min-height: unset !important;
a.thumbnailwrapper {
img {
height: 50vw !important;
width: 100vw !important;
}
&:after {
content: "";
}
}
h2 {
display: block !important;
padding-bottom: 5rem !important;
}
.metadata {
top: calc(50vw - 5rem + 1px) !important;
position: absolute;
// border-top: 1px solid #000;
@include fit-content(width);
height: $h-unit-1;
background-color: #fff;
@include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1}, white, #000, left);
&::after {
display: block !important;
}
}
}
}
//single
.singularpage {
.titlewrapper {
padding-top: 2rem !important;
.metadata {
a {
text-decoration: none;
&::after {
content: "";
}
}
}
}
.single-content {
hr.content-begin {
margin-top: 2rem !important;
}
a.cboxElement::after {
content: "" !important;
}
figcaption {
display: block !important;
}
.alignleft,
.alignright,
.wp-block-image {
page-break-inside: avoid;
width: 100% !important;
height: auto;
img {
page-break-inside: avoid;
width: 100%;
height: auto;
}
}
&::after{
content: "A fák érdekében feleslegesen ne nyomtasd ki ezt a cikket. A papírszemetet gyűjtsd szelektíven!";
top: 3rem;
position: relative;
}
}
.fb-like,
.fb-page,
.toHome {
display: none !important;
}
} }
} }

11
sass/base.scss
View File

@@ -505,6 +505,9 @@ $v-unit-6: 24rem;
background-image: url(../img/#{$iconname}-black.png); background-image: url(../img/#{$iconname}-black.png);
background-image: url(../img/#{$iconname}-black.svg); background-image: url(../img/#{$iconname}-black.svg);
} }
@media print {
background-image: url(../img/#{$iconname}-black.png);
}
} }
.facebook-icon { .facebook-icon {
@@ -568,7 +571,7 @@ $v-unit-6: 24rem;
.events-link { .events-link {
margin: 0 2rem 0 0; margin: 0 2rem 0 0;
&.hidden { &.hidden {
display: none !important; display: none;
} }
@media #{$tablet} { @media #{$tablet} {
margin: 0; margin: 0;
@@ -2717,7 +2720,7 @@ body.page {
//metadata on mobile //metadata on mobile
.metadata { .metadata {
@media #{$only-mobile} { @media #{$only-mobile}, print {
color: $color !important; color: $color !important;
.vr { .vr {
background-color: $color !important; background-color: $color !important;
@@ -2728,7 +2731,7 @@ body.page {
color: $color !important; color: $color !important;
} }
@media #{$only-mobile} { @media #{$only-mobile}, print {
&::before, &::before,
&::after { &::after {
border-color: $color !important; border-color: $color !important;
@@ -2736,7 +2739,7 @@ body.page {
} }
} }
h2 { h2 {
@media #{$only-mobile} { @media #{$only-mobile}, print {
border-top-color: $color !important; border-top-color: $color !important;
} }
} }