Kyren223/github-website
1
0
Fork 0
mirror of https://github.com/Kyren223/website.git synced 2025-12-28 17:04:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed terminal border to scale nicely on mobile

Browse Source
This commit is contained in:
Kyren223
2025-01-03 15:36:45 +02:00
parent 3fd17c84be
commit 0aeaee4076
3 changed files with 24 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/TerminalBorder.astro
View File

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

2
src/layouts/Terminal.astro
View File

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

9
src/pages/blogs.astro
View File

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