kogakure/website-astro-stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-astro-stefanimhoff.de.git synced 2026-02-03 20:15:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: optimize pages for print layout

Browse Source
This commit is contained in:
Stefan Imhoff
2023-06-12 18:55:25 +02:00
parent a823e2ff9b
commit f5b944833c
13 changed files with 83 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
public/assets/styles/print.css Normal file
View File

@@ -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;
}

2
src/components/GalleryDetail.astro
View File

@@ -29,7 +29,7 @@ const imageLength = entry.data.images.length;
</div>
<div
class={cx(
'grid grid-cols-5 gap-x-[2vw] gap-y-gap grow bg-[#d0cdc8] dark:bg-[#0e0d0c] lg:w-2/3 ',
'grid grid-cols-5 gap-x-[2vw] gap-y-gap grow bg-[#d0cdc8] dark:bg-[#0e0d0c] lg:w-2/3 print:!bg-transparent',
{
'lg:pbs-[calc(100vh_/_2_-_(max(30vh,_250px)_/_2))]': imageLength > 1,
'lg:justify-items-center lg:items-center': imageLength === 1,

2
src/components/NetflixFlag.tsx
View File

@@ -11,7 +11,7 @@ interface Props {
export const NetflixFlag: FunctionalComponent<Props> = ({ 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
);

4
src/components/Pagination.astro
View File

@@ -15,7 +15,7 @@ const { nextText, nextUrl, previousText, previousUrl } = Astro.props;
previousUrl && (
<a
aria-label={previousText || 'Previous'}
class="group fixed rounded-[50%] block-start-[calc(50%_-_20px)] inline-start-[1rem]"
class="group fixed rounded-[50%] block-start-[calc(50%_-_20px)] inline-start-[1rem] print:hidden"
href={previousUrl}
rel="prefetch prev"
title={previousText || 'Previous'}
@@ -30,7 +30,7 @@ const { nextText, nextUrl, previousText, previousUrl } = Astro.props;
nextUrl && (
<a
aria-label={nextText || 'Next'}
class="group fixed rounded-[50%] block-start-[calc(50%_-_20px)] inline-end-[1rem]"
class="group fixed rounded-[50%] block-start-[calc(50%_-_20px)] inline-end-[1rem] print:hidden"
href={nextUrl}
rel="prefetch next"
title={nextText || 'Next'}

2
src/components/PrimeVideoFlag.tsx
View File

@@ -11,7 +11,7 @@ interface Props {
export const PrimeVideoFlag: FunctionalComponent<Props> = ({ 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
);

15
src/components/Sal.astro
View File

@@ -12,17 +12,8 @@ import '../../node_modules/sal.js/dist/sal.css';
</script>
<style is:global>
.no-js [data-sal|='fade'] {
opacity: 1;
}
.no-js [data-sal|='slide'],
.no-js [data-sal|='zoom'] {
opacity: 1;
transform: none;
}
.no-js [data-sal|='flip'] {
transform: none;
.no-js [data-sal|='slide-up'] {
opacity: 1 !important;
transform: none !important;
}
</style>

2
src/components/Tag.tsx
View File

@@ -19,7 +19,7 @@ export const Tag: FunctionalComponent<Props> = ({
...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,

4
src/components/Toolbox.astro
View File

@@ -12,11 +12,11 @@ const { tools } = Astro.props;
---
<ul
class="grid grid-cols-[repeat(auto-fit,_minmax(80px,_1fr))] items-center gap-2 rounded-2 bg-black/5 p-5 mbe-10 dark:bg-white/5"
class="grid grid-cols-[repeat(auto-fit,_minmax(80px,_1fr))] items-center gap-2 rounded-2 bg-black/5 p-5 mbe-10 dark:bg-white/5 print:block"
>
{
tools.map(({ name, url, image }) => (
<li>
<li class="print:[&_img]:!hidden">
<Link href={url} title={name}>
<Img
alt={name}

1
src/layouts/BaseLayout.astro
View File

@@ -72,6 +72,7 @@ const fullImage = site.url + cover;
}}
extend={{
link: [
{ rel: 'stylesheet', href: '/assets/styles/print.css', media: 'print' },
{ rel: 'icon', href: '/favicon.ico' },
{
rel: 'icon',

2
src/pages/[...slug].astro
View File

@@ -67,7 +67,7 @@ const description = entry.data.description;
alt={entry.data.title}
aspect={1.6}
breakpoints={[300, 500, 700, 1000, 1300, 1500, 1800, 2000]}
class="col-span-full aspect-video h-auto !mbe-0 xl:col-start-1 xl:col-end-14 3xl:col-end-13 [&_img]:!w-full [&_img]:!max-w-none [&_picture]:!w-full [&_picture]:!max-w-none"
class="col-span-full aspect-video h-auto !mbe-0 print:hidden xl:col-start-1 xl:col-end-14 3xl:col-end-13 [&_img]:!w-full [&_img]:!max-w-none [&_picture]:!w-full [&_picture]:!max-w-none"
format={['webp', 'avif']}
src={entry.data.cover}
/>

5
src/pages/haiku.astro
View File

@@ -29,7 +29,10 @@ const description =
<Intro components={mapping} />
</article>
<nav class="col-start-1 col-end-17 md:col-start-2 md:col-end-14" aria-label="Haiku">
<nav
class="col-start-1 col-end-17 print:hidden md:col-start-2 md:col-end-14"
aria-label="Haiku"
>
<ol
class="grid list-none grid-cols-[repeat(auto-fill,_minmax(3rem,_1fr))] justify-items-center gap-[1rem]"
{...animationDelay}

8
src/pages/haiku/[...slug].astro
View File

@@ -32,14 +32,14 @@ const description = `Haiku ${entry.slug} in German and English.`;
---
<BaseLayout title={title} description={description} header={false} footer={false}>
<div class="grid-rows-[clamp(3rem,_5.55vw,_9rem) 1fr] grid h-full grid-cols-18">
<div class="grid-rows-[clamp(3rem,_5.55vw,_9rem) 1fr] grid h-full grid-cols-18 print:block">
<PageHeader
class="z-10 col-span-full row-start-1 bg-transparent !mbe-0 dark:bg-transparent"
navigation={false}
backLink="/haiku/"
/>
<div
class="min-[700px]:grid-cols-[repeat(auto-fit,_minmax(25rem,_1fr)] col-span-full row-start-1 row-end-3 grid w-full grid-cols-[repeat(auto-fit,_minmax(15rem,_1fr))]"
class="min-[700px]:grid-cols-[repeat(auto-fit,_minmax(25rem,_1fr)] col-span-full row-start-1 row-end-3 grid w-full grid-cols-[repeat(auto-fit,_minmax(15rem,_1fr))] print:block"
>
<div class="grid h-full w-full items-center">
<div {...animation}>
@@ -50,7 +50,9 @@ const description = `Haiku ${entry.slug} in German and English.`;
</Verse>
</div>
</div>
<div class="grid h-full w-full items-center bg-[#d0cdc8] dark:bg-[#0e0d0c]">
<div
class="grid h-full w-full items-center bg-[#d0cdc8] dark:bg-[#0e0d0c] print:bg-transparent"
>
<div {...animationDelay}>
<Verse
class="justify-center text-center text-3 font-black not-italic !leading-relaxed min-[700px]:text-4"

9
src/pages/sketchnotes.astro
View File

@@ -25,15 +25,18 @@ const description = 'This is a collection of Sketchnotes I’ve drawn.';
<PageTitle grid="wide" innerGrid>Sketchnotes</PageTitle>
<article
class="col-start-1 col-end-17 grid md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11"
class="col-start-1 col-end-17 grid print:block md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11"
{...animation}
>
<Intro components={mapping} />
</article>
<nav class="md:col-start-1 md:col-end-16" aria-label="Sketchnotes">
<nav
class="col-start-1 col-end-18 w-full md:col-start-1 md:col-end-16"
aria-label="Sketchnotes"
>
<ol
class="gap-[max(25px,_2vw)] md:grid md:grid-flow-row-dense md:auto-rows-[50px] md:grid-cols-[repeat(auto-fit,_minmax(50px,_1fr))] md:grid-rows-[50px]"
class="gap-[max(25px,_2vw)] print:block md:grid md:grid-flow-row-dense md:auto-rows-[50px] md:grid-cols-[repeat(auto-fit,_minmax(50px,_1fr))] md:grid-rows-[50px]"
>
{
allSketchnotes.map(({ slug, data }) => (