diff --git a/static/css/paged_interface.css b/static/css/paged_interface.css new file mode 100644 index 0000000..4450cf3 --- /dev/null +++ b/static/css/paged_interface.css @@ -0,0 +1,104 @@ +/* CSS for Paged.js interface */ + +/* Change the look */ +:root { + --color-background: whitesmoke; + --color-pageBox: #666; + --color-paper: white; + --color-marginBox: transparent; +} + +/* To define how the book look on the screen: */ +@media screen { + body { + background-color: var(--color-background); + } + + .pagedjs_pages { + display: flex; + width: calc(var(--pagedjs-width) * 2); + flex: 0; + flex-wrap: wrap; + margin: 0 auto; + } + + .pagedjs_page { + background-color: var(--color-paper); + box-shadow: 0 0 0 1px var(--color-pageBox); + margin: 0; + flex-shrink: 0; + flex-grow: 0; + margin-top: 10mm; + } + + .pagedjs_first_page { + margin-left: var(--pagedjs-width); + } + + .pagedjs_page:last-of-type { + margin-bottom: 10mm; + } + + /* show the margin-box */ + + .pagedjs_margin-top-left-corner-holder, + .pagedjs_margin-top, + .pagedjs_margin-top-left, + .pagedjs_margin-top-center, + .pagedjs_margin-top-right, + .pagedjs_margin-top-right-corner-holder, + .pagedjs_margin-bottom-left-corner-holder, + .pagedjs_margin-bottom, + .pagedjs_margin-bottom-left, + .pagedjs_margin-bottom-center, + .pagedjs_margin-bottom-right, + .pagedjs_margin-bottom-right-corner-holder, + .pagedjs_margin-right, + .pagedjs_margin-right-top, + .pagedjs_margin-right-middle, + .pagedjs_margin-right-bottom, + .pagedjs_margin-left, + .pagedjs_margin-left-top, + .pagedjs_margin-left-middle, + .pagedjs_margin-left-bottom { + box-shadow: 0 0 0 1px inset var(--color-marginBox); + } + + /* uncomment this part for recto/verso book : ------------------------------------ */ + + + .pagedjs_pages { + flex-direction: column; + width: 100%; + } + + .pagedjs_first_page { + margin-left: 0; + } + + .pagedjs_page { + margin: 0 auto; + margin-top: 10mm; + } + + /*--------------------------------------------------------------------------------------*/ + + + + /* uncomment this par to see the baseline : -------------------------------------------*/ + + /* + .pagedjs_pagebox { + --pagedjs-baseline: 11px; + --pagedjs-baseline-position: -4px; + --pagedjs-baseline-color: cyan; + background: linear-gradient(var(--color-paper) 0%, var(--color-paper) calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) var(--pagedjs-baseline)), transparent; + background-size: 100% var(--pagedjs-baseline); + background-repeat: repeat-y; + background-position-y: var(--pagedjs-baseline-position); + } + */ + + /*--------------------------------------------------------------------------------------*/ +} + diff --git a/themes/piratecare/assets/css/bla.css b/themes/piratecare/assets/css/bla.css deleted file mode 100644 index 74eba09..0000000 --- a/themes/piratecare/assets/css/bla.css +++ /dev/null @@ -1,560 +0,0 @@ -/* Tailwind base - put variables under: tailwind.config.js */ - -/*! 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. - */ - -/* Grouping content - ========================================================================== */ - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -/* 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. - */ - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -/** - * Add the correct font size in all browsers. - */ - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -/* Embedded content - ========================================================================== */ - -/** - * Remove the border on images inside links in IE 10. - */ - -/* Forms - ========================================================================== */ - -/** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ - -button { - 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 { /* 1 */ - overflow: visible; -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button { /* 1 */ - text-transform: none; -} - -/** - * Correct the inability to style clickable types in iOS and Safari. - */ - -button, -[type="button"] { - -webkit-appearance: button; -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type="button"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Correct the padding in Firefox. - */ - -/** - * 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. - */ - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -/** - * Remove the default vertical scrollbar in IE 10+. - */ - -/** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -/** - * Remove the inner padding in Chrome and Safari on macOS. - */ - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -/* Interactive - ========================================================================== */ - -/* - * Add the correct display in Edge, IE 10+, and Firefox. - */ - -/* - * Add the correct display in all browsers. - */ - -/* Misc - ========================================================================== */ - -/** - * Add the correct display in IE 10+. - */ - -/** - * Add the correct display in IE 10. - */ - -/** - * Manually forked from SUIT CSS Base: https://github.com/suitcss/base - * A thin layer on top of normalize.css that provides a starting point more - * suitable for web applications. - */ - -/** - * Removes the default spacing and border for appropriate elements. - */ - - -p { - margin: 0; -} - -button { - background-color: transparent; - background-image: none; - padding: 0; -} - -/** - * Work around a Firefox/IE bug where the transparent `button` background - * results in a loss of the default `button` focus styles. - */ - -button:focus { - outline: 1px dotted; - outline: 5px auto -webkit-focus-ring-color; -} - - -ul { - list-style: none; - margin: 0; - padding: 0; -} - -/** - * Tailwind custom reset styles - */ - -/** - * 1. Use the user's configured `sans` font-family (with Tailwind's default - * sans-serif font stack as a fallback) as a sane default. - * 2. Use Tailwind's default "normal" line-height so the user isn't forced - * to override it to ensure consistency even when using the default theme. - */ - -html { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */ - line-height: 1.5; /* 2 */ -} - -/** - * 1. Prevent padding and border from affecting element width. - * - * We used to set this in the html element and inherit from - * the parent element for everything else. This caused issues - * in shadow-dom-enhanced elements like
where the content - * is wrapped by a div with box-sizing set to `content-box`. - * - * https://github.com/mozdevs/cssremedy/issues/4 - * - * - * 2. Allow adding a border to an element by just adding a border-width. - * - * By default, the way the browser specifies that an element should have no - * border is by setting it's border-style to `none` in the user-agent - * stylesheet. - * - * In order to easily add borders to elements by just setting the `border-width` - * property, we change the default border-style for all elements to `solid`, and - * use border-width to hide them instead. This way our `border` utilities only - * need to set the `border-width` property instead of the entire `border` - * shorthand, making our border utilities much more straightforward to compose. - * - * https://github.com/tailwindcss/tailwindcss/pull/116 - */ - -*, -::before, -::after { - box-sizing: border-box; /* 1 */ - border-width: 0; /* 2 */ - border-style: solid; /* 2 */ - border-color: currentColor; /* 2 */ -} - -/* - * Ensure horizontal rules are visible by default - */ - -/** - * Undo the `border-style: none` reset that Normalize applies to images so that - * our `border-{width}` utilities have the expected effect. - * - * The Normalize reset is unnecessary for us since we default the border-width - * to 0 on all elements. - * - * https://github.com/tailwindcss/tailwindcss/issues/362 - */ - -button { - cursor: pointer; -} - -/** - * Reset links to optimize for opt-in styling instead of - * opt-out. - */ - -a { - color: inherit; - text-decoration: inherit; -} - -/** - * Reset form element properties that are easy to forget to - * style explicitly so you don't inadvertently introduce - * styles that deviate from your design system. These styles - * supplement a partial reset that is already applied by - * normalize.css. - */ - -button { - padding: 0; - line-height: inherit; - color: inherit; -} - -/** - * Use the configured 'mono' font family for elements that - * are expected to be rendered with a monospace font, falling - * back to the system monospace stack if there is no configured - * 'mono' font family. - */ - -/** - * Make replaced elements `display: block` by default as that's - * the behavior you want almost all of the time. Inspired by - * CSS Remedy, with `svg` added as well. - * - * https://github.com/mozdevs/cssremedy/issues/14 - */ - -/** - * Constrain images and videos to the parent width and preserve - * their instrinsic aspect ratio. - * - * https://github.com/mozdevs/cssremedy/issues/14 - */ - -/* Tailwind component classes registered by plugins*/ - -/* Site Specific */ - -@font-face { - font-family: 'PlayfairDisplay Regular'; - - font-weight: 400; - - src: url("../fonts/PlayfairDisplay-Regular.woff") format('woff'); -} - -@font-face { - font-family: 'VG5000-Regular'; - - font-weight: 400; - - src: url("../fonts/VG5000-Regular_web.woff") format('woff'); -} - -html { - font-size: 1.5em; - background-color: #F2F6D5; -} - -footer { - font-family: "VG5000-Regular", sans; - font-size: 0.75rem; - color: #29102F; -} - -.title-text { - font-family: "PlayfairDisplay Regular", sans; - font-size: 2.25rem; - color: #996561; -} - -.title-pretext { - font-family: "VG5000-Regular", sans; - font-size: 1rem; - color: #996561; -} - -.content-text { - font-family: "PlayfairDisplay Regular", sans; - font-size: 1.25rem; - color: #29102F; -} - -.sidebar-title { - font-family: "VG5000-Regular", sans; - font-size: 1rem; - color: #996561; -} - -.sidebar-list { - font-family: "VG5000-Regular", sans; - font-size: 1.25rem; - color: #996561; -} - -.logo { - font-family: "VG5000-Regular", sans; - font-size: 1.25rem; - color: #996561; - padding-top: 0.5rem; -} - -a { - color: #996561; -} - -a:hover { - text-decoration: underline; -} - -/* Tailwind's utility classes - generated based on config file */ - -.bg-CoconutCream { - background-color: #F2F6D5; -} - -.cursor-pointer { - cursor: pointer; -} - -.block { - display: block; -} - -.flex { - display: flex; -} - -.justify-between { - justify-content: space-between; -} - -.font-vg5000 { - font-family: "VG5000-Regular", sans; -} - -.font-playfair { - font-family: "PlayfairDisplay Regular", sans; -} - -.h-full { - height: 100%; -} - -.leading-none { - line-height: 1; -} - -.mx-4 { - margin-left: 1rem; - margin-right: 1rem; -} - -.mb-1 { - margin-bottom: 0.25rem; -} - -.mt-4 { - margin-top: 1rem; -} - -.mb-4 { - margin-bottom: 1rem; -} - -.mb-6 { - margin-bottom: 1.5rem; -} - -.mb-12 { - margin-bottom: 3rem; -} - -.pt-2 { - padding-top: 0.5rem; -} - -.pt-3 { - padding-top: 0.75rem; -} - -.pr-4 { - padding-right: 1rem; -} - -.pt-6 { - padding-top: 1.5rem; -} - -.pt-8 { - padding-top: 2rem; -} - -.pt-32 { - padding-top: 8rem; -} - -.fixed { - position: fixed; -} - -.sticky { - position: -webkit-sticky; - position: sticky; -} - -.top-0 { - top: 0; -} - -.text-base { - font-size: 1rem; -} - -.w-2\/5 { - width: 40%; -} - -.w-3\/5 { - width: 60%; -} diff --git a/themes/piratecare/assets/css/print.css b/themes/piratecare/assets/css/print.css new file mode 100644 index 0000000..68d73c6 --- /dev/null +++ b/themes/piratecare/assets/css/print.css @@ -0,0 +1,66 @@ +/* paged.js style */ + +@page { + size: A4; +} + +@page :first { + @bottom { + content: none; + } +} + +@page { + margin-bottom: 5mm; + @top { + color: #996561; + font-size: 1rem; + font-family: 'VG5000-Regular'; + content: element(topic); + } + + @bottom { + color: #996561; + font-size: 0.5rem; + font-family: 'VG5000-Regular'; + content: "▒▒ 🐟 ▒ ▒▒▒ 🐙 ▒▒▒🏃 ▒▒☄▒ PAGE: " counter(page) " ▒ ▒▒▒▒ ⚡ ▒🔍▒ ☠ ▒ ▒▒▒"; + } +} + + +@media print { + body { + @apply bg-CoconutCream; + } + + .runningTopic { + position: running(topic); + } + + .topic { + break-before: page; + } + + .title-text { + @apply font-playfair text-6xl text-AuChico mb-20; + } + + .title-pretext { + @apply font-vg5000 text-2xl text-AuChico; + } + + .topic-text { + @apply font-playfair text-4xl text-AuChico mb-20; + } + + .topic-pretext { + @apply font-vg5000 text-2xl text-AuChico; + } + + .ddmenu { + @apply pt-16; + } + article ul li:before { + content: ""; + } +} diff --git a/themes/piratecare/assets/css/styles.css b/themes/piratecare/assets/css/styles.css index 415e762..cf37010 100644 --- a/themes/piratecare/assets/css/styles.css +++ b/themes/piratecare/assets/css/styles.css @@ -3,3 +3,4 @@ @import "node_modules/tailwindcss/components"; @import "node_modules/tailwindcss/utilities"; @import "assets/css/site.css"; +@import "assets/css/print.css"; diff --git a/themes/piratecare/layouts/partials/pagedjs.html b/themes/piratecare/layouts/partials/pagedjs.html new file mode 100644 index 0000000..2c1f980 --- /dev/null +++ b/themes/piratecare/layouts/partials/pagedjs.html @@ -0,0 +1,2 @@ + + diff --git a/themes/piratecare/layouts/print/baseof.html b/themes/piratecare/layouts/print/baseof.html new file mode 100644 index 0000000..4281253 --- /dev/null +++ b/themes/piratecare/layouts/print/baseof.html @@ -0,0 +1,13 @@ + +{{- $filePath := .File -}} +{{- $gitUrl := .Site.Data.myvars.giturl -}} + + {{- partial "head.html" . -}} + {{ partialCached "css.html" . }} + {{- partial "pagedjs.html" . -}} + +
+ {{- block "main" . }}{{- end }} +
+ + diff --git a/themes/piratecare/layouts/print/list.html b/themes/piratecare/layouts/print/list.html new file mode 100644 index 0000000..9b02b1b --- /dev/null +++ b/themes/piratecare/layouts/print/list.html @@ -0,0 +1,47 @@ +{{ define "main" }} +
+syllabus ⦚ {{ .Site.Home.Title }} + +
+ + +
+
    + {{ range .Site.Home.Params.has_topics }} + {{ with $.GetPage (printf "%s%s" "/topic/" . ) }} +
  • > {{ .Title }}
    • + {{ end }} + {{ end }} +
+
+
+
+ + +{{ range .Site.Home.Params.has_topics }} + + +{{ with $.GetPage (printf "%s%s" "/topic/" . ) }} +
topic ⦚ {{ .Title }}
+ topic ⦚ {{ .Title }} +
+ + +
+
    + {{ range .Params.has_sessions }} + {{ with $.GetPage (printf "%s%s" "/session/" . ) }} +
  • > {{ .Title }}
    • + {{ end }} + {{ end }} +
+
+
+ + +
{{ .Content }}
+{{ end }} + +{{ end }} + +{{ end }}