diff options
| author | Kyren223 <Kyren223@proton.me> | 2025-01-03 11:29:39 +0200 |
|---|---|---|
| committer | Kyren223 <Kyren223@proton.me> | 2025-01-03 11:29:39 +0200 |
| commit | be3fcd8f9313c05ae1fd4293b1f4dbeb2b23c9c8 (patch) | |
| tree | 1522585be51a87040726467017db763d331c694b | |
| parent | 6e5321a779b533e8d4949181eecd1b9cf1f0973f (diff) | |
Fixed index and skills
| -rw-r--r-- | src/components/Nav.astro | 12 | ||||
| -rw-r--r-- | src/components/TerminalBorder.astro | 24 | ||||
| -rw-r--r-- | src/pages/index.astro | 8 | ||||
| -rw-r--r-- | src/pages/skills.astro | 10 |
4 files changed, 27 insertions, 27 deletions
diff --git a/src/components/Nav.astro b/src/components/Nav.astro index 8148a81..17f6565 100644 --- a/src/components/Nav.astro +++ b/src/components/Nav.astro @@ -28,13 +28,13 @@ const directories = ["skills", "projects", "blogs"]; justify-content: space-between; border: 0.125vw var(--alt); border-style: solid; - margin-bottom: 1.25em; - padding: 0.75em; + margin-bottom: 1.5625vw; + padding: 0.9375vw; } #nav-links a { - margin-bottom: 0px; - margin-right: 0.15em; - margin-left: 0.15em; + margin-bottom: 0; + margin-right: 0.1875vw; + margin-left: 0.1875vw; font-size: 1.375vw; color: var(--primary); } @@ -42,7 +42,7 @@ const directories = ["skills", "projects", "blogs"]; color: var(--accent); } #nav-path { - margin-right: 2em; + margin-right: 2.5vw; font-size: 1.375vw; } </style> diff --git a/src/components/TerminalBorder.astro b/src/components/TerminalBorder.astro index 10b973e..eae9cc0 100644 --- a/src/components/TerminalBorder.astro +++ b/src/components/TerminalBorder.astro @@ -17,8 +17,8 @@ const { header = "", footer = "", margin = "-0.1vw" } = Astro.props; <style> .section { position: relative; - padding: 0.8em; - padding-top: 0.85em; + padding: 1vw; + padding-top: 1.0625vw; display: flex; border-style: solid; border-width: 0.1vw; @@ -27,23 +27,23 @@ const { header = "", footer = "", margin = "-0.1vw" } = Astro.props; .tag-top { position: absolute; - top: -0.6em; - left: 0.5em; + top: -0.75vw; + left: 0.625vw; background-color: var(--background); - padding-right: 0.5em; - padding-left: 0.5em; - font-size: 0.8em; + padding-right: 0.625vw; + padding-left: 0.625vw; + font-size: 1vw; color: var(--alt); } .tag-bottom { position: absolute; - bottom: -0.6em; - left: 0.5em; + bottom: -0.75vw; + left: 0.625vw; background-color: var(--background); - padding-right: 0.5em; - padding-left: 0.5em; - font-size: 0.8em; + padding-right: 0.625vw; + padding-left: 0.625vw; + font-size: 1vw; color: var(--alt); } </style> diff --git a/src/pages/index.astro b/src/pages/index.astro index c09609f..816bd91 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -36,7 +36,7 @@ watching Anime or solving Rubik's cubes fast.`.trimStart(); <div id="content"> <div id="left" class="column"> <TerminalBorder header="Profile"> - <div class="flex items-center space-x-[1vw] h-[10vw]"> + <div class="flex items-center space-x-[1.25vw] h-[9.5vw]"> <img src="favicon.svg" alt="picture" @@ -83,7 +83,7 @@ watching Anime or solving Rubik's cubes fast.`.trimStart(); <div class="w-[334%]"> <TerminalBorder header="SSH Key"> <div - class="sshKeyCopy w-[100%] flex items-center space-x-2 group" + class="sshKeyCopy w-[100%] flex items-center group" > <span id="sshKey" @@ -117,7 +117,7 @@ watching Anime or solving Rubik's cubes fast.`.trimStart(); </Link> | Learning Golang & Backend | Available for hire </p> </TerminalBorder> - <TerminalBorder header="About Me" margin="2em 0"> + <TerminalBorder header="About Me" margin="2.5vw 0"> <p>{aboutMe}</p> </TerminalBorder> <BlogItem @@ -176,7 +176,7 @@ watching Anime or solving Rubik's cubes fast.`.trimStart(); <style> #content { - margin-top: 0.625vw; + margin-top: 1.5vw; display: flex; justify-content: space-between; } diff --git a/src/pages/skills.astro b/src/pages/skills.astro index e5a9276..778b3f1 100644 --- a/src/pages/skills.astro +++ b/src/pages/skills.astro @@ -21,22 +21,22 @@ const frameworks = ["Spigot API", "Bubbletea", "Astro"]; <div class="flex"> <div class="w-[60%] flex-column items-center"> <TerminalBorder header="Languages"> - <div class="grid md:grid-cols-3 items-center gap-x-8"> + <div class="grid grid-cols-3 items-center gap-x-[0.625vw]"> {langs.map((lang) => <p>{lang}</p>)} </div> </TerminalBorder> - <TerminalBorder header="Frameworks" margin="30px 0"> - <div class="grid md:grid-cols-1 items-center gap-x-8"> + <TerminalBorder header="Frameworks" margin="2.25vw 0"> + <div class="grid grid-cols-1 items-center gap-x-[0.625vw]"> {frameworks.map((framework) => <p>{framework}</p>)} </div> </TerminalBorder> <TerminalBorder header="Tools"> - <div class="grid md:grid-cols-1 items-center gap-x-8"> + <div class="grid grid-cols-1 items-center gap-x-[0.625vw]"> {tools.map((tool) => <p>{tool}</p>)} </div> </TerminalBorder> </div> - <div class="w-[40%] pl-4"> + <div class="w-[40%] pl-[1.25vw]"> <RadarChart max={max} data={data} /> </div> </div> |
