fichiers sass communs

assets/styles/a11y.sass

@@ -0,0 +1,25 @@
+/* A11y */
+
+a.skip-main
+  left: -999px
+  position: absolute
+  top: auto
+  width: 1px
+  height: 1px
+  overflow: hidden
+  z-index: -999
+
+a.skip-main:focus, a.skip-main:active
+  color: $color-primary
+  background-color: $color-secondary
+  left: auto
+  top: auto
+  width: 20%
+  height: auto
+  overflow: auto
+  padding: 3px
+  border-radius: 10px
+  border: 2px solid $color-primary
+  text-align: center
+  font-size: 1.2em
+  z-index: 999

assets/styles/content.sass

@@ -0,0 +1,2 @@
+.container
+  padding: 1rem

assets/styles/html.sass

@@ -0,0 +1,19 @@
+html
+  /*-webkit-font-smoothing: antialiased*/
+  /*--moz-osx-font-smoothing: grayscale*/
+  scroll-behavior: smooth
+  /* In most browsers, this defaults to 16 pixels */
+  font-size: 100%
+
+body
+  color: $color-primary
+  background-color: $color-secondary
+  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
+
+p,
+ul:not([class]),
+ol[class],
+dl,
+table
+  margin-bottom: -webkit-calc(1.115rem + 0.1vw)
+  margin-bottom: calc(1.115rem + 0.1vw)

assets/styles/main.sass

@@ -1,5 +1,4 @@
 @import "./variables"
-
-body
-  color: $color-primary
-  background-color: $color-secondary
+@import "./html"
+@import "./a11y"
+@import "./content"

assets/styles/print.sass

@@ -0,0 +1,84 @@
+/* Print */
+
+@media print
+*
+  background: transparent !important
+  box-shadow: none !important
+  text-shadow: none !important
+
+body
+  width: auto
+  margin: auto
+  font-family: serif
+  font-size: 12pt
+
+nav,
+footer
+  display: none
+
+p,
+.p-like,
+h1,
+.h1-like,
+h2,
+.h2-like,
+h3,
+.h3-like,
+h4,
+.h4-like,
+h5,
+.h5-like,
+h6,
+.h6-like,
+blockquote,
+ul,
+ol
+  color: #000
+  margin: auto
+
+img
+ max-width: 100% !important
+
+.print
+  display: block
+
+.no-print
+  display: none
+
+p,
+.p-like,
+blockquote
+  orphans: 3
+  widows: 3
+
+blockquote,
+ul,
+ol,
+img
+  page-break-inside: avoid
+
+h1,
+.h1-like
+  page-break-before: always
+
+h1,
+.h1-like,
+h2,
+.h2-like,
+h3,
+.h3-like,
+caption
+  page-break-after: avoid
+
+a
+  color: #000
+
+a[href^="http"]:not([href*="pikselkraft.com"]):after
+  content: " (" attr(href) ")"
+
+a[href^="javascript:"]::after,
+a[href^="#"]::after
+  content: ""
+
+abbr[title]:after
+  content: " (" attr(title) ")"

assets/styles/reset.sass

@@ -0,0 +1,55 @@
+/* Reset CSS */
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+p,
+ul[class]
+ol[class],
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  margin: 0
+}
+
+/* Make images easier to work with */
+img {
+  max-width: 100%
+  display: block
+}
+
+/* Natural flow and rhythm in articles by default */
+article > * + * {
+  margin-top: 1em
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit
+}
+
+/* Remove all animations and transitions for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important
+    animation-iteration-count: 1 !important
+    transition-duration: 0.01ms !important
+    scroll-behavior: auto !important
+  }
+}