From 100fe7e0e6ed272c606c6472de533fe3ee20b3e2 Mon Sep 17 00:00:00 2001 From: ouidade Date: Fri, 18 Jul 2025 01:14:44 +0200 Subject: [PATCH] debut @print --- .../custom/eql/dist/assets/css/bundle.css | 165 ++++++++++++++++ web/themes/custom/eql/scss/global/_print.scss | 186 ++++++++++++++++++ web/themes/custom/eql/scss/pages/_projet.scss | 8 + web/themes/custom/eql/scss/styles.scss | 2 +- 4 files changed, 360 insertions(+), 1 deletion(-) create mode 100644 web/themes/custom/eql/scss/global/_print.scss diff --git a/web/themes/custom/eql/dist/assets/css/bundle.css b/web/themes/custom/eql/dist/assets/css/bundle.css index baad4ac..9acf2bf 100644 --- a/web/themes/custom/eql/dist/assets/css/bundle.css +++ b/web/themes/custom/eql/dist/assets/css/bundle.css @@ -250,6 +250,171 @@ svg.ext { margin: auto; } } +/* -----------------------/* + * Reset CSS Print "Bretzel" + * Made par Alsacréations + /* ---------------------- */ +/* + * Ressources et documentations : + * 1- https://www.docuseal.co/blog/css-print-page-style + * 2- https://www.alsacreations.com/astuce/lire/1160-Une-feuille-de-styles-de-base-pour-le-media-print.html +*/ +@media print { + /* Dimension et marges de page */ + @page { + size: A4 portrait; + margin: 1.5cm 1.5cm; + } + /* Reset général */ + * { + all: unset; + display: revert; + box-sizing: border-box; + } + img { + max-width: 100%; + } + input, + textarea, + select { + all: revert; + } + /* On redéfinit les styles globaux (12pt = 16px) */ + body { + width: auto; + margin: 0; + font-family: serif; + font-size: 12pt; + font-family: Georgia, serif; + line-height: 1.5; + color: #000000 !important; + background-color: #ffffff !important; + } + #fotter-bottom { + box-shadow: none !important; + border-top: rgba(0, 0, 0, 0.5); + } + #fotter-bottom a[href^=http]:after, + #fotter-bottom a[href^=https]:after { + content: ""; + } + /* Espacements typographiques (15pt = 20px) */ + p, + blockquote, + label, + ul, + ol { + margin-block: 0 15pt; + } + p:last-child { + margin-bottom: 0; + } + /* Titrages (24pt = 32px) */ + h1 { + margin-block: 0 24pt; + font-weight: 700; + font-size: 18pt; + line-height: 1.1; + } + h2 { + margin-block: 0 18pt; + font-weight: 700; + font-size: 16pt; + line-height: 1.1; + } + h3 { + margin-block: 0 15pt; + font-weight: 700; + font-size: 14pt; + } + h4 { + margin-block: 0 12pt; + font-weight: 700; + font-size: 12pt; + } + /* Classes dédiées print / no-print */ + .print { + display: revert; + } + .no-print { + display: none; + } + /* Pas de veuves ou orphelines (3 lignes minimum) */ + p, + blockquote { + orphans: 3; + widows: 3; + } + /* Pas de saut de page au sein de ces éléments */ + blockquote, + ul, + ol, + figure, + table, + .paragraph, + footer, + .top_top, + .top_bottom { + page-break-inside: avoid; + } + /* Pas de saut de page après ces éléments */ + h1, + h2, + h3, + h4, + caption, + .field--name-field-titre { + page-break-after: avoid; + } + /* Styles des liens */ + a, + a:link, + a:visited { + background: transparent !important; + color: unset; + font-weight: 700; + text-decoration: underline !important; + } + /* On affiche l'URL des liens externes */ + a[href^=http]:after, + a[href^=https]:after { + content: " (" attr(href) ")"; + } + /* On masque les vidéos, header et menu de navigation */ + video, + object, + iframe, + header, + nav { + display: none !important; + width: 0 !important; + height: 0 !important; + overflow: hidden !important; + } + /* Style page projet */ + .page-node-type-projet .layout__region--top { + width: 100% !important; + padding-top: 0rem !important; + } + .page-node-type-projet .layout__region--top .top_top { + flex-direction: column !important; + } + .page-node-type-projet .layout__region--top .top_top .block-entity-fieldnodefield-photo { + width: 100% !important; + } + .page-node-type-projet .layout__region--top .top_top .top_right { + width: 100% !important; + } + .page-node-type-projet .layout__region--top .top_bottom { + width: 100% !important; + } + .page-node-type-projet .layout__region--first { + display: none; + } + .page-node-type-projet .layout__region--second { + flex: 0 1 100% !important; + } +} /*pages*/ /* @import "pages/partials/header_footer"; diff --git a/web/themes/custom/eql/scss/global/_print.scss b/web/themes/custom/eql/scss/global/_print.scss new file mode 100644 index 0000000..6eecab2 --- /dev/null +++ b/web/themes/custom/eql/scss/global/_print.scss @@ -0,0 +1,186 @@ + + +/* -----------------------/* + * Reset CSS Print "Bretzel" + * Made par Alsacréations + /* ---------------------- */ + +/* + * Ressources et documentations : + * 1- https://www.docuseal.co/blog/css-print-page-style + * 2- https://www.alsacreations.com/astuce/lire/1160-Une-feuille-de-styles-de-base-pour-le-media-print.html +*/ + +@media print { + /* Dimension et marges de page */ + @page { + size: A4 portrait; + margin: 1.5cm 1.5cm; + } + + /* Reset général */ + * { + all: unset; + display: revert; + box-sizing: border-box; + } + img { + max-width: 100%; + } + input, + textarea, + select { + all: revert; + } + + /* On redéfinit les styles globaux (12pt = 16px) */ + body { + + width: auto; + margin: 0; + font-family: serif; + font-size: 12pt; + font-family: Georgia, serif; + line-height: 1.5; + color: #000000 !important; + background-color: #ffffff !important; + } + #fotter-bottom{ + box-shadow: none !important; + border-top: rgba($color: #000000, $alpha: 0.5); + a[href^="http"]:after, + a[href^="https"]:after { + content: ""; + } + } + + /* Espacements typographiques (15pt = 20px) */ + p, + blockquote, + label, + ul, + ol { + margin-block: 0 15pt; + } + p:last-child { + margin-bottom: 0; + } + + /* Titrages (24pt = 32px) */ + h1 { + margin-block: 0 24pt; + font-weight: 700; + font-size: 18pt; + line-height: 1.1; + } + h2 { + margin-block: 0 18pt; + font-weight: 700; + font-size: 16pt; + line-height: 1.1; + } + h3 { + margin-block: 0 15pt; + font-weight: 700; + font-size: 14pt; + } + h4 { + margin-block: 0 12pt; + font-weight: 700; + font-size: 12pt; + } + + /* Classes dédiées print / no-print */ + .print { + display: revert; + } + .no-print { + display: none; + } + + /* Pas de veuves ou orphelines (3 lignes minimum) */ + p, + blockquote { + orphans: 3; + widows: 3; + } + + /* Pas de saut de page au sein de ces éléments */ + blockquote, + ul, + ol, + figure, + table, + .paragraph, + footer, + .top_top, + .top_bottom { + page-break-inside: avoid; + } + + /* Pas de saut de page après ces éléments */ + h1, + h2, + h3, + h4, + caption, + .field--name-field-titre { + page-break-after: avoid; + } + + /* Styles des liens */ + a, + a:link, + a:visited { + background: transparent !important; + color: unset; + font-weight: 700; + text-decoration: underline !important; + } + + /* On affiche l'URL des liens externes */ + a[href^="http"]:after, + a[href^="https"]:after { + content: " (" attr(href) ")"; + } + + /* On masque les vidéos, header et menu de navigation */ + video, + object, + iframe, + header, + nav { + display: none !important; + width: 0 !important; + height: 0 !important; + overflow: hidden !important; + } + + /* Style page projet */ + .page-node-type-projet{ + .layout__region--top{ + width: 100% !important; + padding-top: 0rem !important; + .top_top{ + flex-direction: column !important; + .block-entity-fieldnodefield-photo{ + width: 100% !important; + } + .top_right{ + width: 100% !important; + } + } + .top_bottom{ + width: 100% !important; + } + } + .layout__region--first{ + display: none; + } + .layout__region--second{ + flex: 0 1 100% !important; + } + } + + } + \ No newline at end of file diff --git a/web/themes/custom/eql/scss/pages/_projet.scss b/web/themes/custom/eql/scss/pages/_projet.scss index a0a0cac..4d44730 100644 --- a/web/themes/custom/eql/scss/pages/_projet.scss +++ b/web/themes/custom/eql/scss/pages/_projet.scss @@ -51,6 +51,14 @@ display: none; } } + // .slick-prev::before, .slick-next::before{ + // opacity: 1 !important; + // top: 0 !important; + // } + // .slick-prev, .slick-next{ + // top: 98% !important; + // } + } diff --git a/web/themes/custom/eql/scss/styles.scss b/web/themes/custom/eql/scss/styles.scss index a6f0f91..e85a5ee 100644 --- a/web/themes/custom/eql/scss/styles.scss +++ b/web/themes/custom/eql/scss/styles.scss @@ -14,7 +14,7 @@ // @import "global/_reset"; @import "global/_typography"; @import "global/_mediaqueries"; - +@import "global/_print"; // @import "global/_nodetyperessource.scss";