From 59f9068bd64c0e93ff5ebe578116eba5323ab220 Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Sun, 7 Dec 2025 00:31:08 -0800 Subject: add main page navbar --- pinapelz.moe/about.html | 47 ++++++++--------------- pinapelz.moe/projects.html | 66 ++++++-------------------------- pinapelz.moe/styles/styles.css | 87 ++++++++++++++++++++++++++++++++++++------ 3 files changed, 103 insertions(+), 97 deletions(-) diff --git a/pinapelz.moe/about.html b/pinapelz.moe/about.html index 3c2f305..15ae82b 100644 --- a/pinapelz.moe/about.html +++ b/pinapelz.moe/about.html @@ -9,20 +9,6 @@ +
+ +
- ☆゜・。。・゜゜・。。・゜★ About Me - ★゜・。。・゜゜・。。・゜☆
-

Navigation

- - Profile Picture
+ Profile Picture

📧 Contact Me 📧

idk maybe you need to reach me for some reason

    @@ -184,10 +171,8 @@ read slice of life... yuru camp, k-on, nichijou that sorta thing

    - ♪ ♫ ♪ Not much else to say... if you want some random technical rambling go to my blog - ♪ ♫ ♪
    diff --git a/pinapelz.moe/projects.html b/pinapelz.moe/projects.html index 94c4c53..a57307c 100644 --- a/pinapelz.moe/projects.html +++ b/pinapelz.moe/projects.html @@ -37,69 +37,27 @@ max-width: 90%; max-height: 90%; } + + -
    -
    - - fun stuff (maybe) - -
    -
    -

    Navigation

    +
    + +
    -
    - Cute Anime GIF -
    - -
    -

    Contact Me

    -

    idk maybe you need to reach me for some reason

    - -
    -
    - Discord Avatar -
    -

    -
    - -
    -

    +
    +
    + + fun stuff (maybe) +
    -

    cool and interesting stuff

    diff --git a/pinapelz.moe/styles/styles.css b/pinapelz.moe/styles/styles.css index a2999ea..a8a4f48 100644 --- a/pinapelz.moe/styles/styles.css +++ b/pinapelz.moe/styles/styles.css @@ -251,34 +251,34 @@ blink { width: 30px; height: 30px; } - + .discord-status { flex-direction: column; align-items: flex-start; } - + .discord-status img { margin-right: 0; margin-bottom: 10px; } - + .discord-status h2 { font-size: 1rem; } - + .discord-status p { font-size: 0.9rem; } - + .crazy-image { max-width: 200px; } - + /* Ensure no horizontal overflow */ body { overflow-x: hidden; } - + .container { max-width: 100%; overflow-x: hidden; @@ -290,22 +290,22 @@ blink { width: 25px; height: 25px; } - + .crazy-image { max-width: 150px; } - + /* Further mobile optimizations */ .general-section { padding: 8px; margin-top: 15px; } - + .sidebar { padding: 8px; margin-top: 20px; } - + .content { padding: 8px; } @@ -409,4 +409,67 @@ blink { max-width: 100%; height: auto; display: block; -} \ No newline at end of file +} +.top-navbar { + background-color: rgba(0, 0, 0, 0.8); + padding: 10px 0; + position: sticky; + top: 0; + z-index: 100; + backdrop-filter: blur(5px); +} + +.top-navbar nav { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +.top-navbar ul { + display: flex; + justify-content: center; + align-items: center; + gap: 30px; + list-style: none; + margin: 0; + padding: 0; +} + +.top-navbar li { + margin: 0; +} + +.top-navbar a { + color: white; + text-decoration: none; + padding: 8px 16px; + border-radius: 20px; + transition: all 0.3s ease; + font-weight: 500; + display: block; +} + +.top-navbar a:hover, +.top-navbar a:focus { + background-color: #ff69b4; + outline: none; + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(255, 105, 180, 0.3); +} + +.top-navbar a[aria-current="page"] { + background-color: #ff69b4; + color: white; + font-weight: bold; +} + +@media (max-width: 768px) { + .top-navbar ul { + flex-direction: column; + gap: 10px; + } + + .top-navbar { + padding: 15px 0; + } +} -- cgit v1.2.3