Mirror/awesome-nostr
1
0
Fork 0
mirror of https://github.com/aljazceru/awesome-nostr.git synced 2025-02-23 15:18:58 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

added top nav bar

Browse Source
This commit is contained in:
Yeghro 2025-01-24 23:28:49 -08:00
parent cc89534da6
commit 3d44f538ae
2 changed files with 71 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -26,6 +26,14 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head> </head>
<body> <body>
<nav class="top-nav">
<div class="nav-content">
<h1>Awesome Nostr.net</h1>
<button id="darkModeToggle" class="theme-toggle" aria-label="Toggle dark mode">
<i class="fas fa-moon"></i>
</button>
</div>
</nav>
<div class="container"> <div class="container">
<!-- Sidebar Navigation --> <!-- Sidebar Navigation -->
<nav class="sidebar" aria-label="Main navigation"> <nav class="sidebar" aria-label="Main navigation">
@ -50,9 +58,7 @@
<main class="main-content" role="main"> <main class="main-content" role="main">
<header class="content-header"> <header class="content-header">
<div class="view-controls"> <div class="view-controls">
<button id="darkModeToggle" class="theme-toggle" aria-label="Toggle dark mode"> <!-- Dark mode toggle has been moved to top nav -->
<i class="fas fa-moon"></i>
</button>
</div> </div>
</header> </header>

66
styles.css
View File

@ -36,6 +36,7 @@ body {
.container { .container {
display: flex; display: flex;
min-height: 100vh; min-height: 100vh;
margin-top: 60px; /* Height of top nav */
} }
/* Sidebar Styles */ /* Sidebar Styles */
@ -44,11 +45,12 @@ body {
background-color: var(--sidebar-background); background-color: var(--sidebar-background);
padding: 1rem; padding: 1rem;
position: fixed; position: fixed;
height: 100vh; height: calc(100vh - 60px);
overflow-y: auto; overflow-y: auto;
transition: transform 0.3s ease; transition: transform 0.3s ease;
border-right: 1px solid rgba(110, 84, 148, 0.15); border-right: 1px solid rgba(110, 84, 148, 0.15);
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05); box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
top: 60px; /* Start below top nav */
} }
.sidebar-header { .sidebar-header {
@ -142,12 +144,11 @@ body {
flex: 1; flex: 1;
min-height: 100vh; min-height: 100vh;
overflow: auto; overflow: auto;
margin-top: 0;
} }
.content-header { .content-header {
display: flex; display: none;
justify-content: flex-end;
margin-bottom: 2rem;
} }
.view-controls { .view-controls {
@ -255,6 +256,14 @@ body {
.menu-toggle { .menu-toggle {
display: block; display: block;
} }
.top-nav {
padding: 0.75rem;
}
.top-nav h1 {
font-size: 1.25rem;
}
} }
.markdown-content { .markdown-content {
@ -468,3 +477,52 @@ button:focus {
padding: 1rem; padding: 1rem;
margin-top: auto; margin-top: auto;
} }
/* Add top navigation styles */
.top-nav {
background-color: var(--primary-color);
color: white;
padding: 1rem;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1001;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.nav-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-content h1 {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
flex-grow: 1;
text-align: center;
}
.theme-toggle {
background: none;
border: none;
color: white;
cursor: pointer;
padding: 0.5rem;
font-size: 1.2rem;
transition: opacity 0.2s;
}
.theme-toggle:hover {
opacity: 0.8;
}
/* Remove old view-controls styling if no longer needed */
.content-header {
display: none;
}