style: add a stylesheet for printing
* Install the gutenberg framework with yarn. * Copy the stylesheet to assets/css. * Configure the resource in the head.html. * Adapt the templates to hide elements on print. * Closes #28. Co-Authored-by: iGor milhit <igor@milhit.ch>dev
parent
a7c87c947f
commit
897b8e6ecf
GPG Key ID:
692D97C3D0228A99
|
|
@ -3,7 +3,6 @@
|
|||
*.css.map
|
||||
*.sass.map
|
||||
*.scss.map
|
||||
assets/css/
|
||||
|
||||
### Node, Yarn ###
|
||||
node_modules/
|
||||
|
|
|
|||
|
|
@ -9,6 +9,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
|
|||
|
||||
## [Unreleased](https://framagit.org/iGormilhit/portfoliGor/compare/v0.2.0...HEAD)
|
||||
|
||||
### Commits
|
||||
|
||||
- style: add a stylesheet for printing [`76161ef`](https://framagit.org/iGormilhit/portfoliGor/commit/76161ef3a77c57917f6680f94822c4a93f41afda)
|
||||
- layout: fix medias integration [`a7c87c9`](https://framagit.org/iGormilhit/portfoliGor/commit/a7c87c947f1ca9ed56b38dd40091484ebae3c742)
|
||||
|
||||
## [v0.2.0](https://framagit.org/iGormilhit/portfoliGor/compare/0.1.1...v0.2.0) - 2021-11-03
|
||||
|
||||
### Fixed
|
||||
|
|
|
|||
|
|
@ -0,0 +1,574 @@
|
|||
/*!
|
||||
* Gutenberg
|
||||
*
|
||||
* MIT Fabien Sa
|
||||
* https://github.com/BafS/Gutenberg
|
||||
*/
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
/* Document
|
||||
========================================================================== */
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
html {
|
||||
line-height: 1.15;
|
||||
/* 1 */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* 2 */ }
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
body {
|
||||
margin: 0; }
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
main {
|
||||
display: block; }
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0; }
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
/* 1 */
|
||||
height: 0;
|
||||
/* 1 */
|
||||
overflow: visible;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
pre {
|
||||
font-family: monospace, monospace;
|
||||
/* 1 */
|
||||
font-size: 1em;
|
||||
/* 2 */ }
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
a {
|
||||
background-color: transparent; }
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
abbr[title] {
|
||||
border-bottom: none;
|
||||
/* 1 */
|
||||
text-decoration: underline;
|
||||
/* 2 */
|
||||
text-decoration: underline dotted;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder; }
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
/* 1 */
|
||||
font-size: 1em;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
small {
|
||||
font-size: 80%; }
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline; }
|
||||
|
||||
sub {
|
||||
bottom: -0.25em; }
|
||||
|
||||
sup {
|
||||
top: -0.5em; }
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
img {
|
||||
border-style: none; }
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
/* 1 */
|
||||
font-size: 100%;
|
||||
/* 1 */
|
||||
line-height: 1.15;
|
||||
/* 1 */
|
||||
margin: 0;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
button,
|
||||
input {
|
||||
/* 1 */
|
||||
overflow: visible; }
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
button,
|
||||
select {
|
||||
/* 1 */
|
||||
text-transform: none; }
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; }
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0; }
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText; }
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em; }
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
legend {
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
color: inherit;
|
||||
/* 2 */
|
||||
display: table;
|
||||
/* 1 */
|
||||
max-width: 100%;
|
||||
/* 1 */
|
||||
padding: 0;
|
||||
/* 3 */
|
||||
white-space: normal;
|
||||
/* 1 */ }
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
progress {
|
||||
vertical-align: baseline; }
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
textarea {
|
||||
overflow: auto; }
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
padding: 0;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto; }
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
/* 1 */
|
||||
outline-offset: -2px;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none; }
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
/* 1 */
|
||||
font: inherit;
|
||||
/* 2 */ }
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
details {
|
||||
display: block; }
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
summary {
|
||||
display: list-item; }
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
template {
|
||||
display: none; }
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
[hidden] {
|
||||
display: none; }
|
||||
|
||||
* {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after,
|
||||
p:first-letter,
|
||||
div:first-letter,
|
||||
blockquote:first-letter,
|
||||
li:first-letter,
|
||||
p:first-line,
|
||||
div:first-line,
|
||||
blockquote:first-line,
|
||||
li:first-line {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important; }
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background: #fff !important;
|
||||
color: #000 !important;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
margin: 0 auto;
|
||||
text-rendering: optimizeLegibility; }
|
||||
|
||||
p,
|
||||
blockquote,
|
||||
table,
|
||||
ul,
|
||||
ol,
|
||||
dl {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-top: 0; }
|
||||
|
||||
p:last-child,
|
||||
ul:last-child,
|
||||
ol:last-child {
|
||||
margin-bottom: 0; }
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: #000;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 0.75rem;
|
||||
margin-top: 0; }
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem; }
|
||||
|
||||
h2 {
|
||||
font-size: 2rem; }
|
||||
|
||||
h3 {
|
||||
font-size: 1.75rem; }
|
||||
|
||||
h4 {
|
||||
font-size: 1.5rem; }
|
||||
|
||||
h5 {
|
||||
font-size: 1.25rem; }
|
||||
|
||||
h6 {
|
||||
font-size: 1rem; }
|
||||
|
||||
a, a:visited {
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
word-wrap: break-word; }
|
||||
|
||||
table {
|
||||
border-collapse: collapse; }
|
||||
|
||||
thead {
|
||||
display: table-header-group; }
|
||||
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
border-bottom: 1px solid #000; }
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 8px 16px;
|
||||
page-break-inside: avoid; }
|
||||
|
||||
code,
|
||||
pre,
|
||||
kbd {
|
||||
border: 1px solid #bbb;
|
||||
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
font-size: 85%; }
|
||||
|
||||
code,
|
||||
kbd {
|
||||
padding: 3px; }
|
||||
|
||||
pre {
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 10px 12px; }
|
||||
pre code,
|
||||
pre kbd {
|
||||
border: 0; }
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: transparent; }
|
||||
|
||||
:-moz-placeholder {
|
||||
color: transparent; }
|
||||
|
||||
::-moz-placeholder {
|
||||
color: transparent; }
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: transparent; }
|
||||
|
||||
blockquote {
|
||||
border: 0;
|
||||
border-left: 5px solid #bbb;
|
||||
margin-left: 1px;
|
||||
padding: 12px 1.5rem; }
|
||||
[dir='rtl'] blockquote {
|
||||
border-left: 0;
|
||||
border-right: 5px solid #bbb;
|
||||
margin-left: 0;
|
||||
margin-right: 1px; }
|
||||
blockquote:first-child {
|
||||
margin-top: 0; }
|
||||
blockquote p:last-child,
|
||||
blockquote ul:last-child,
|
||||
blockquote ol:last-child {
|
||||
margin-bottom: 0; }
|
||||
blockquote footer {
|
||||
display: block;
|
||||
font-size: 80%; }
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
display: block;
|
||||
max-width: 100% !important;
|
||||
vertical-align: middle; }
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-bottom: 2px solid #bbb;
|
||||
height: 0;
|
||||
margin: 2.25rem 0;
|
||||
padding: 0; }
|
||||
|
||||
dt {
|
||||
font-weight: bold; }
|
||||
|
||||
dd {
|
||||
margin: 0;
|
||||
margin-bottom: 0.75rem; }
|
||||
|
||||
abbr[title],
|
||||
acronym[title] {
|
||||
border: 0;
|
||||
text-decoration: none; }
|
||||
|
||||
table,
|
||||
blockquote,
|
||||
pre,
|
||||
code,
|
||||
figure,
|
||||
li,
|
||||
hr,
|
||||
ul,
|
||||
ol,
|
||||
a,
|
||||
tr {
|
||||
page-break-inside: avoid; }
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p,
|
||||
a {
|
||||
orphans: 3;
|
||||
widows: 3; }
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
page-break-after: avoid;
|
||||
page-break-inside: avoid; }
|
||||
|
||||
h1 + p,
|
||||
h2 + p,
|
||||
h3 + p {
|
||||
page-break-before: avoid; }
|
||||
|
||||
img {
|
||||
page-break-after: auto;
|
||||
page-break-before: auto;
|
||||
page-break-inside: avoid; }
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap !important;
|
||||
word-wrap: break-word; }
|
||||
|
||||
body {
|
||||
padding-bottom: 2.54cm;
|
||||
padding-left: 1.8cm;
|
||||
padding-right: 1.8cm;
|
||||
padding-top: 2.54cm; }
|
||||
|
||||
a[href^='http']:after, a[href^='ftp']:after {
|
||||
content: " (" attr(href) ")";
|
||||
font-size: 80%; }
|
||||
|
||||
a[href$='.jpg']:after, a[href$='.jpeg']:after, a[href$='.gif']:after, a[href$='.png']:after {
|
||||
display: none; }
|
||||
|
||||
abbr[title]:after,
|
||||
acronym[title]:after {
|
||||
content: " (" attr(title) ")"; }
|
||||
|
||||
.page-break,
|
||||
.break-before,
|
||||
.page-break-before {
|
||||
page-break-before: always; }
|
||||
|
||||
.break-after,
|
||||
.page-break-after {
|
||||
page-break-after: always; }
|
||||
|
||||
.avoid-break-inside {
|
||||
page-break-inside: avoid; }
|
||||
|
||||
.no-print {
|
||||
display: none; }
|
||||
|
||||
a.no-reformat:after {
|
||||
content: ''; }
|
||||
|
||||
abbr[title].no-reformat:after,
|
||||
acronym[title].no-reformat:after {
|
||||
content: ''; }
|
||||
|
||||
.no-reformat abbr:after,
|
||||
.no-reformat acronym:after,
|
||||
.no-reformat a:after {
|
||||
content: ''; }
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<footer class="main-footer">
|
||||
<footer class="main-footer no-print">
|
||||
<nav role="navigation" aria-label="Secondary">
|
||||
<ul>
|
||||
{{ $currentPage := . -}}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,9 @@
|
|||
{{- $styles := resources.Get "scss/main.scss" | toCSS $options | minify -}}
|
||||
<link rel="stylesheet" href="{{ $styles.Permalink }}" media="screen">
|
||||
{{- end }}
|
||||
{{ $options := (dict "targetPath" "print.css" ) -}}
|
||||
{{- $print := resources.Get "css/gutenberg.css" | toCSS $options | minify -}}
|
||||
<link rel="stylesheet" href="{{ $print.Permalink }}" media="print">
|
||||
{{ range .AlternativeOutputFormats }}
|
||||
{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<header class="main-header">
|
||||
<a href="{{ .Site.BaseURL }}" class="title">
|
||||
<img class="avatar" src="{{ .Site.BaseURL }}images/avatar.png">
|
||||
<a href="{{ .Site.BaseURL }}" class="title no-reformat">
|
||||
<img class="avatar no-print" src="{{ .Site.BaseURL }}images/avatar.png">
|
||||
<h1>{{ .Site.Title }}</h1>
|
||||
</a>
|
||||
<nav role="navigation" aria-label="Primary">
|
||||
<nav class="no-print" role="navigation" aria-label="Primary">
|
||||
<ul>
|
||||
{{ $currentPage := . -}}
|
||||
{{ range sort .Site.Menus.main -}}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<details class="post-info">
|
||||
<details class="post-info no-print">
|
||||
<summary>{{ i18n "post-infos" }}</summary>
|
||||
<ul>
|
||||
<li>Publié le : {{ dateFormat "2006-01-02" (default .Date (.PublishDate)) }}</li>
|
||||
|
|
|
|||
|
|
@ -8,5 +8,8 @@
|
|||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"auto-changelog": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"gutenberg-css": "^0.6.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
12
yarn.lock
12
yarn.lock
|
|
@ -18,6 +18,13 @@ commander@^5.0.0:
|
|||
resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
|
||||
integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
|
||||
|
||||
gutenberg-css@^0.6.1:
|
||||
version "0.6.1"
|
||||
resolved "https://registry.yarnpkg.com/gutenberg-css/-/gutenberg-css-0.6.1.tgz#dd06c38ec3a33e6bb05a6d3cd2682c96d8b6eaf4"
|
||||
integrity sha512-6OKs0SsqMhU68sBPYvm0imc2Wa4s7W6QzwSUq5vM3GIqsAcd5hV5RvW7Natp1hbJ3go8B3xDPdYSb7zu3vDkbw==
|
||||
dependencies:
|
||||
normalize.css "^8.0.1"
|
||||
|
||||
handlebars@^4.7.3:
|
||||
version "4.7.7"
|
||||
resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
|
||||
|
|
@ -47,6 +54,11 @@ node-fetch@^2.6.0:
|
|||
dependencies:
|
||||
whatwg-url "^5.0.0"
|
||||
|
||||
normalize.css@^8.0.1:
|
||||
version "8.0.1"
|
||||
resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
|
||||
integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
|
||||
|
||||
parse-github-url@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/parse-github-url/-/parse-github-url-1.0.2.tgz#242d3b65cbcdda14bb50439e3242acf6971db395"
|
||||
|
|
|
|||
Loading…
Reference in New Issue