diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/TerminalBorder.astro | 40 | ||||
| -rw-r--r-- | src/layouts/Terminal.astro | 2 | ||||
| -rw-r--r-- | src/pages/blogs.astro | 9 |
3 files changed, 24 insertions, 27 deletions
diff --git a/src/components/TerminalBorder.astro b/src/components/TerminalBorder.astro index 42cf5af..4e8bfb3 100644 --- a/src/components/TerminalBorder.astro +++ b/src/components/TerminalBorder.astro @@ -8,42 +8,36 @@ interface Props { const { header = "", footer = "", extra = "m-[-0.1vw]" } = Astro.props; --- -<div class=`section ${extra}`> - <span class="tag-top">{header}</span> - <span class="tag-bottom">{footer}</span> +<div + class=`section + p-[0.8em] pt-[1.0625em] border-[0.1vw] text-[3.5vw] + sm:p-[1vw] sm:pt-[1.0625vw] sm:border-[0.1vw] sm:text-[100%] + ${extra}` +> + <span + class="tag px-[0.5em] text-[2.5vw] left-[0.5em] top-[-0.7em] + sm:px-[0.625vw] sm:text-[1vw] sm:left-[0.625vw] sm:top-[-0.75vw]" + >{header}</span + > + <span + class="tag px-[0.5em] text-[2.5vw] left-[0.5em] bottom-[-0.7em] + sm:px-[0.625vw] sm:text-[1vw] sm:left-[0.625vw] sm:bottom-[-0.75vw]" + >{footer}</span + > <slot /> </div> <style> .section { position: relative; - padding: 1vw; - padding-top: 1.0625vw; display: flex; border-style: solid; - border-width: 0.1vw; border-color: var(--alt); } - .tag-top { + .tag { position: absolute; - top: -0.75vw; - left: 0.625vw; background-color: var(--background); - padding-right: 0.625vw; - padding-left: 0.625vw; - font-size: 1vw; - color: var(--alt); - } - - .tag-bottom { - position: absolute; - bottom: -0.75vw; - left: 0.625vw; - background-color: var(--background); - padding-right: 0.625vw; - padding-left: 0.625vw; - font-size: 1vw; color: var(--alt); } </style> diff --git a/src/layouts/Terminal.astro b/src/layouts/Terminal.astro index e4dea03..cb94bd0 100644 --- a/src/layouts/Terminal.astro +++ b/src/layouts/Terminal.astro @@ -15,7 +15,7 @@ const { path: title } = Astro.props; <Head title=`/home/kyren/${title}` description="My personal website" /> <body> <main class=" - w-[95vw] h-[97svh] p-[2.2svh] text-[1.125vh] + w-[95vw] h-[97svh] p-[2.2svh] text-[3vw] sm:w-[68.75vw] sm:h-[35vw] sm:p-[2.2vw] sm:text-[1.125vw] sm:border-[0.2vw] sm:border-solid "> <Nav path={title} /> diff --git a/src/pages/blogs.astro b/src/pages/blogs.astro index ce10eae..45089f6 100644 --- a/src/pages/blogs.astro +++ b/src/pages/blogs.astro @@ -12,15 +12,18 @@ const blogs = (await getCollection("blogs")) date: blog.data.date, href: "/blogs/" + blog.slug, })); +const repeatArray = (arr, times) => Array(times).fill(arr).flat(); +const repeated = repeatArray(blogs, 10); + --- <Terminal path="blogs/"> - <TerminalBorder header="Shell" extra="mt-[0.625vw] mb-[1.5625vw]"> + <TerminalBorder header="Shell" extra="sm:mt-[0.625vw] sm:mb-[1.5625vw]"> <p>$ ls -lah -t --color=auto ~/blogs</p> </TerminalBorder> - <div class="max-h-[24vw] overflow-y-auto"> + <div class="sm:max-h-[24vw] overflow-y-auto"> { - blogs.map((blog) => ( + repeated.map((blog) => ( <> <BlogItem title={blog.title} |