From ccd152bb05251eedf9b86953e1c70fe43698cd76 Mon Sep 17 00:00:00 2001
From: Yeghro <130201060+Yeghro@users.noreply.github.com>
Date: Sat, 25 Jan 2025 01:19:07 -0800
Subject: [PATCH] add a nice touch to logo

---
 index.html |  3 ++-
 styles.css | 22 +++++++++++++---------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index 789a8d0..aa676a0 100644
--- a/index.html
+++ b/index.html
@@ -30,7 +30,8 @@
         <div class="nav-content">
             <h1>
                 <div class="logo-container">
-                    <img src="Logo.png" alt="Nostr.net Logo" class="nav-logo">
+                    <img src="Logo.png" alt="Nostr Logo" class="nav-logo">
+                    <span class="logo-text">.NET</span>
                 </div>
             </h1>
             <div class="search-box">
diff --git a/styles.css b/styles.css
index 38c6037..8d7d27c 100644
--- a/styles.css
+++ b/styles.css
@@ -564,29 +564,33 @@ button:focus {
 
 .logo-container {
     height: 50px;
-    width: 200px; /* Adjust this value to your preferred width */
+    width: 200px;
     display: flex;
     align-items: center;
-    justify-content: center;
-    overflow: hidden;
+    gap: 4px;
 }
 
 .nav-logo {
     height: 100%;
-    width: 100%;
-    object-fit: cover; /* This will maintain aspect ratio while fitting within the container */
+    width: auto;
+    object-fit: contain;
+}
+
+.logo-text {
+    color: white;
+    font-weight: bold;
+    font-size: 1.2rem;
 }
 
 /* Adjust container size for mobile */
 @media (max-width: 768px) {
     .logo-container {
         height: 40px;
-        width: 160px; /* Proportionally smaller for mobile */
+        width: 160px;
     }
     
-    .nav-content h1 {
-        width: auto;
-        text-align: left;
+    .logo-text {
+        font-size: 1rem;
     }
 }