From f5b944833c4decef9cc0ba09520e42572bd9aa14 Mon Sep 17 00:00:00 2001 From: Stefan Imhoff Date: Mon, 12 Jun 2023 18:55:25 +0200 Subject: [PATCH] feat: optimize pages for print layout --- public/assets/styles/print.css | 55 ++++++++++++++++++++++++++++++ src/components/GalleryDetail.astro | 2 +- src/components/NetflixFlag.tsx | 2 +- src/components/Pagination.astro | 4 +-- src/components/PrimeVideoFlag.tsx | 2 +- src/components/Sal.astro | 15 ++------ src/components/Tag.tsx | 2 +- src/components/Toolbox.astro | 4 +-- src/layouts/BaseLayout.astro | 1 + src/pages/[...slug].astro | 2 +- src/pages/haiku.astro | 5 ++- src/pages/haiku/[...slug].astro | 8 +++-- src/pages/sketchnotes.astro | 9 +++-- 13 files changed, 83 insertions(+), 28 deletions(-) create mode 100644 public/assets/styles/print.css diff --git a/public/assets/styles/print.css b/public/assets/styles/print.css new file mode 100644 index 0000000..5409e8d --- /dev/null +++ b/public/assets/styles/print.css @@ -0,0 +1,55 @@ +body { + padding-block-end: 0.5cm; + padding-block-start: 1cm; + padding-inline-end: 0.5cm; + padding-inline-start: 0.5cm; +} + +/* Show all content immediatly */ +[data-sal|='slide-up'] { + opacity: 1 !important; + transform: none !important; +} + +/* Hide content from printing */ +lite-youtube { + display: none !important; +} + +/* Images */ +img { + border: 0; + max-width: 1200px; +} + +/* Links */ +a { + color: #000000; + word-wrap: break-word; + text-decoration: none !important; + font-weight: 100 !important; +} + +a::after { + content: '(' attr(href) ')'; + font-size: 60%; + position: relative; + top: -0.2em; + margin-inline-start: 0.2em; + margin-inline-end: 0.2em; + opacity: 0.95; +} + +a[href^='mailto:']::after { + content: ' (' attr(href) ')'; +} + +a[href^='http://']::after, +a[href^='https://']::after +{ + content: ' (' attr(href) ')'; +} + +a[href^='#']::after { + display: none; +} diff --git a/src/components/GalleryDetail.astro b/src/components/GalleryDetail.astro index efe367c..ee77471 100644 --- a/src/components/GalleryDetail.astro +++ b/src/components/GalleryDetail.astro @@ -29,7 +29,7 @@ const imageLength = entry.data.images.length;
1, 'lg:justify-items-center lg:items-center': imageLength === 1, diff --git a/src/components/NetflixFlag.tsx b/src/components/NetflixFlag.tsx index 107be2b..284d034 100644 --- a/src/components/NetflixFlag.tsx +++ b/src/components/NetflixFlag.tsx @@ -11,7 +11,7 @@ interface Props { export const NetflixFlag: FunctionalComponent = ({ class: className, id, ...props }) => { const classes = cx( - 'rounded-1 border-1 border-solid border-red-600 bg-red-600 font-mono text-[0.7em] text-white decoration-0 pli-[0.3em] pbe-0 pbs-[0.1em]', + 'rounded-1 border-1 border-solid border-red-600 bg-red-600 font-mono text-[0.7em] text-white decoration-0 pli-[0.3em] pbe-0 pbs-[0.1em] print:bg-transparent print:border-gray-500', className ); diff --git a/src/components/Pagination.astro b/src/components/Pagination.astro index d9d42af..f5b4015 100644 --- a/src/components/Pagination.astro +++ b/src/components/Pagination.astro @@ -15,7 +15,7 @@ const { nextText, nextUrl, previousText, previousUrl } = Astro.props; previousUrl && ( = ({ class: className, id, ...props }) => { const classes = cx( - 'rounded-1 border-1 border-solid border-sky-500 bg-sky-500 font-mono text-[0.7em] text-white decoration-0 pli-[0.3em] pbe-0 pbs-[0.1em]', + 'rounded-1 border-1 border-solid border-sky-500 bg-sky-500 font-mono text-[0.7em] text-white decoration-0 pli-[0.3em] pbe-0 pbs-[0.1em] print:bg-transparent print:border-gray-500', className ); diff --git a/src/components/Sal.astro b/src/components/Sal.astro index dd3047a..97c81f1 100644 --- a/src/components/Sal.astro +++ b/src/components/Sal.astro @@ -12,17 +12,8 @@ import '../../node_modules/sal.js/dist/sal.css'; diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx index f2a7440..2f03694 100644 --- a/src/components/Tag.tsx +++ b/src/components/Tag.tsx @@ -19,7 +19,7 @@ export const Tag: FunctionalComponent = ({ ...props }) => { const classes = cx( - 'capitalize border-3 relative inline-flex items-center justify-center rounded-25 border-2 border-shibui-350 bg-shibui-200 px-3 py-1 text-1 font-normal leading-none text-black mie-1 pbs-3 dark:border-shibui-750 dark:bg-shibui-950 dark:text-white min-w-[50px]', + 'capitalize border-3 relative inline-flex items-center justify-center rounded-25 border-2 border-shibui-350 bg-shibui-200 px-3 py-1 text-1 font-normal leading-none text-black mie-1 pbs-3 dark:border-shibui-750 dark:bg-shibui-950 dark:text-white min-w-[50px] print:hidden', { '!bg-shibui-500 !text-white hover:!bg-shibui-700 dark:!border-shibui-500 dark:!bg-shibui-700 hover:dark:!bg-shibui-400': href, diff --git a/src/components/Toolbox.astro b/src/components/Toolbox.astro index 51e6ef8..8ff3dc2 100644 --- a/src/components/Toolbox.astro +++ b/src/components/Toolbox.astro @@ -12,11 +12,11 @@ const { tools } = Astro.props; ---
    { tools.map(({ name, url, image }) => ( -
  • +
  • {name} diff --git a/src/pages/haiku.astro b/src/pages/haiku.astro index 72d0e81..5da2e97 100644 --- a/src/pages/haiku.astro +++ b/src/pages/haiku.astro @@ -29,7 +29,10 @@ const description = -