diff options
| -rw-r--r-- | src/components/Nav.astro | 36 | ||||
| -rw-r--r-- | src/layouts/Terminal.astro | 21 | ||||
| -rw-r--r-- | src/styles/terminal.css | 20 |
3 files changed, 37 insertions, 40 deletions
diff --git a/src/components/Nav.astro b/src/components/Nav.astro index 17f6565..5b9a73d 100644 --- a/src/components/Nav.astro +++ b/src/components/Nav.astro @@ -8,9 +8,23 @@ const { path } = Astro.props; const directories = ["skills", "projects", "blogs"]; --- -<nav> - <span id="nav-path">/home/kyren/{path}</span> - <span id="nav-links"> +<nav + class="grid sm:flex + justify-between + border-[0.25vh] sm:border-[0.125vw] + border-[var(--alt)] + border-solid + mb-[7vw] sm:mb-[1.5625vw] + p-[3vw] sm:p-[1vw]" +> + <span class="mr-[2.5vh] text-[5vw] sm:mr-[2.5vw] sm:text-[1.375vw]" + >/home/kyren/{path}</span + > + <span + id="nav-links" + class="mb-0 mx-[0.2vw] text-[5vw] + mx-[0.2vw] sm:text-[1.375vw]" + > <a href="/">home</a> { directories.map((dir) => ( @@ -23,26 +37,10 @@ const directories = ["skills", "projects", "blogs"]; </nav> <style> - nav { - display: flex; - justify-content: space-between; - border: 0.125vw var(--alt); - border-style: solid; - margin-bottom: 1.5625vw; - padding: 0.9375vw; - } #nav-links a { - margin-bottom: 0; - margin-right: 0.1875vw; - margin-left: 0.1875vw; - font-size: 1.375vw; color: var(--primary); } #nav-links a:hover { color: var(--accent); } - #nav-path { - margin-right: 2.5vw; - font-size: 1.375vw; - } </style> diff --git a/src/layouts/Terminal.astro b/src/layouts/Terminal.astro index 890d798..e4dea03 100644 --- a/src/layouts/Terminal.astro +++ b/src/layouts/Terminal.astro @@ -14,9 +14,28 @@ const { path: title } = Astro.props; <html lang="en"> <Head title=`/home/kyren/${title}` description="My personal website" /> <body> - <main> + <main class=" + w-[95vw] h-[97svh] p-[2.2svh] text-[1.125vh] + 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} /> <slot /> </main> </body> </html> +<style> + main { + display: block; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: var(--background); + font-weight: 300; + overflow: hidden; + + /* grid-template-columns: minmax(200px, 1fr); */ + /* max-width: 75%; */ + /* max-height: 80%; */ + } +</style> diff --git a/src/styles/terminal.css b/src/styles/terminal.css index ccb2bd0..0eadd60 100644 --- a/src/styles/terminal.css +++ b/src/styles/terminal.css @@ -27,26 +27,6 @@ body { zoom: 1; } -main { - display: block; - position: absolute; - top: 50%; - left: 50%; - grid-template-columns: minmax(200px, 1fr); - transform: translate(-50%, -50%); - border: 0.2vw; - border-style: solid; - background: var(--background); - padding: 2.2vw; - width: 68.75vw; - height: 35vw; - max-width: 75%; - max-height: 80%; - overflow: hidden; - font-size: 1.125vw; - font-weight: 300; -} - h1, h2, h3 { |