AramJonghu/aramjonghu-site
1
0
Fork 0
mirror of https://git.aramjonghu.dev/AramJonghu/aramjonghu-site.git synced 2026-09-04 06:43:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(mobile): improve mobile view by introducing css for small devices

Browse Source
This commit is contained in:
AramJonghu
2026-07-31 18:30:57 +02:00
parent 6b94a75e30
commit 9edde535bb
3 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Footer.tsx
+19 -13
View File
@@ -15,28 +15,34 @@ export default function Footer() {
};
return (
<footer className="bg-ctp-mantle flex items-center justify-between px-24 py-6 border-t border-ctp-lavender-800 mt-10">
<footer className="bg-ctp-mantle flex flex-col md:flex-row items-center justify-between gap-3 px-4 md:px-24 py-6 border-t border-ctp-lavender-800 mt-10">
<p className="text-sm text-ctp-text">
&copy; {currentYear} AramJonghu. All rights reserved.
</p>
<div className="flex">
<p className="text-sm text-ctp-text">
<div className="flex items-center">
<p className="text-sm text-ctp-text hidden sm:block">
Check out the website repository here:
</p>
<img
src={forgejo}
alt="Forgejo repository"
<button
onClick={goToForgejo}
className="ml-2 w-6 h-6 cursor-pointer hover:opacity-80 transition-opacity"
/>
aria-label="Forgejo repository"
className="ml-2 p-2 cursor-pointer hover:opacity-80 transition-opacity"
>
<img
src={forgejo}
alt="Forgejo repository"
className="w-7 h-7"
/>
</button>
<img
src={gitea}
alt="Gitea mirror"
<button
onClick={goToGitea}
className="ml-2 w-6 h-6 cursor-pointer hover:opacity-80 transition-opacity"
/>
aria-label="Gitea mirror"
className="ml-2 p-2 cursor-pointer hover:opacity-80 transition-opacity"
>
<img src={gitea} alt="Gitea mirror" className="w-7 h-7" />
</button>
</div>
</footer>
);
frontend/src/components/Header.tsx
+3 -3
View File
@@ -31,7 +31,7 @@ export default function Header({ theme }: HeaderProps) {
};
return (
<header className="bg-ctp-mantle flex justify-between items-center px-12 py-6 gap-6 border-b border-ctp-lavender-800">
<header className="bg-ctp-mantle flex justify-between items-center px-4 md:px-12 py-4 md:py-6 gap-4 md:gap-6 border-b border-ctp-lavender-800">
<img
className="size-16 cursor-pointer"
src={Aku}
@@ -39,12 +39,12 @@ export default function Header({ theme }: HeaderProps) {
onClick={goHome}
/>
<nav className="flex flex-wrap gap-3 items-center">
<nav className="flex flex-wrap justify-end gap-2 md:gap-3 items-center">
{navItems.map((item) => (
<a
key={item.label}
href={item.url}
className="ui-btn ui-btn:hover"
className="ui-btn ui-btn:hover px-2 py-1 md:px-3 md:py-1"
>
{item.label}
</a>
frontend/src/components/ProjectInfo.tsx
+4 -4
View File
@@ -10,19 +10,19 @@ export default function ProjectInfo(): ReactElement {
return (
<>
<div className="flex justify-between mx-30 mb-6">
<div className="flex justify-between items-center gap-2 mx-4 md:mx-30 mb-6">
<button
onClick={prevProject}
className="px-3 py-1 rounded ui-btn text-ctp-text"
className="shrink-0 px-3 py-1 rounded ui-btn text-ctp-text"
>
◀︎ Prev
</button>
<span className="self-center mx-6 text-ctp-mauve text-2xl font-bold">
<span className="self-center min-w-0 truncate mx-2 md:mx-6 text-ctp-mauve text-xl md:text-2xl font-bold">
{projects[projIdx].name} ({projIdx + 1}/{projects.length})
</span>
<button
onClick={nextProject}
className="px-3 py-1 rounded ui-btn text-ctp-text"
className="shrink-0 px-3 py-1 rounded ui-btn text-ctp-text"
>
Next ▶︎
</button>