mirror of
https://github.com/aljazceru/awesome-nostr.git
synced 2025-02-22 06:39:00 +00:00
added logo to Ui improvements
This commit is contained in:
parent
7d2bfa0254
commit
79e894ed79
@ -28,7 +28,11 @@
|
||||
<body>
|
||||
<nav class="top-nav">
|
||||
<div class="nav-content">
|
||||
<h1>Awesome Nostr.net</h1>
|
||||
<h1>
|
||||
<div class="logo-container">
|
||||
<img src="Logo.png" alt="Nostr.net Logo" class="nav-logo">
|
||||
</div>
|
||||
</h1>
|
||||
<div class="search-box">
|
||||
<input type="text" id="search" placeholder="Search resources...">
|
||||
<i class="fas fa-search"></i>
|
||||
|
28
styles.css
28
styles.css
@ -560,4 +560,32 @@ button:focus {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
height: 50px;
|
||||
width: 200px; /* Adjust this value to your preferred width */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover; /* This will maintain aspect ratio while fitting within the container */
|
||||
}
|
||||
|
||||
/* Adjust container size for mobile */
|
||||
@media (max-width: 768px) {
|
||||
.logo-container {
|
||||
height: 40px;
|
||||
width: 160px; /* Proportionally smaller for mobile */
|
||||
}
|
||||
|
||||
.nav-content h1 {
|
||||
width: auto;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user