Fix navbar and simplify templates

- Fix nested anchor tags in navbar (invalid HTML)
- Hardcode app name and author in templates
- Remove hero section from index page
This commit is contained in:
Jeffrey Paul 2025-12-31 15:10:24 -08:00
parent 4284e923a6
commit 58b5333c6c
5 changed files with 50 additions and 61 deletions

View File

@ -30,12 +30,14 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
color: white;
text-decoration: none;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
} }
.navbar-brand:hover { .navbar-brand a {
color: white;
text-decoration: none;
}
.navbar-brand a:hover {
color: #ecf0f1; color: #ecf0f1;
} }
.navbar-brand .by { .navbar-brand .by {
@ -45,7 +47,7 @@
} }
.navbar-brand .author { .navbar-brand .author {
color: #3498db; color: #3498db;
text-decoration: none; font-weight: normal;
} }
.navbar-brand .author:hover { .navbar-brand .author:hover {
text-decoration: underline; text-decoration: underline;
@ -195,11 +197,11 @@
</head> </head>
<body> <body>
<nav class="navbar"> <nav class="navbar">
<a href="/" class="navbar-brand"> <div class="navbar-brand">
<span>{{appName}}</span> <a href="/">routewatch</a>
<span class="by">by</span> <span class="by">by</span>
<a href="{{appAuthorURL}}" class="author">{{appAuthor}}</a> <a href="https://sneak.berlin" class="author">@sneak</a>
</a> </div>
<div class="navbar-links"> <div class="navbar-links">
<a href="/">Home</a> <a href="/">Home</a>
<a href="/status">Status</a> <a href="/status">Status</a>

View File

@ -30,12 +30,14 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
color: white;
text-decoration: none;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
} }
.navbar-brand:hover { .navbar-brand a {
color: white;
text-decoration: none;
}
.navbar-brand a:hover {
color: #ecf0f1; color: #ecf0f1;
} }
.navbar-brand .by { .navbar-brand .by {
@ -45,7 +47,7 @@
} }
.navbar-brand .author { .navbar-brand .author {
color: #3498db; color: #3498db;
text-decoration: none; font-weight: normal;
} }
.navbar-brand .author:hover { .navbar-brand .author:hover {
text-decoration: underline; text-decoration: underline;
@ -76,22 +78,6 @@
padding: 30px 20px; padding: 30px 20px;
} }
/* Hero section */
.hero {
text-align: center;
margin-bottom: 40px;
}
.hero h1 {
font-size: 32px;
color: #2c3e50;
margin: 0 0 10px 0;
}
.hero p {
color: #7f8c8d;
font-size: 16px;
margin: 0;
}
/* Stats overview */ /* Stats overview */
.stats-grid { .stats-grid {
display: grid; display: grid;
@ -258,11 +244,11 @@
</head> </head>
<body> <body>
<nav class="navbar"> <nav class="navbar">
<a href="/" class="navbar-brand"> <div class="navbar-brand">
<span>{{appName}}</span> <a href="/">routewatch</a>
<span class="by">by</span> <span class="by">by</span>
<a href="{{appAuthorURL}}" class="author">{{appAuthor}}</a> <a href="https://sneak.berlin" class="author">@sneak</a>
</a> </div>
<div class="navbar-links"> <div class="navbar-links">
<a href="/" class="active">Home</a> <a href="/" class="active">Home</a>
<a href="/status">Status</a> <a href="/status">Status</a>
@ -270,11 +256,6 @@
</nav> </nav>
<main class="main-content"> <main class="main-content">
<div class="hero">
<h1>RouteWatch</h1>
<p>Real-time BGP route monitoring powered by RIPE RIS Live</p>
</div>
<div class="stats-grid"> <div class="stats-grid">
<div class="stat-card" id="status-card"> <div class="stat-card" id="status-card">
<div class="stat-value" id="stat-status">-</div> <div class="stat-value" id="stat-status">-</div>

View File

@ -30,12 +30,14 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
color: white;
text-decoration: none;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
} }
.navbar-brand:hover { .navbar-brand a {
color: white;
text-decoration: none;
}
.navbar-brand a:hover {
color: #ecf0f1; color: #ecf0f1;
} }
.navbar-brand .by { .navbar-brand .by {
@ -45,7 +47,7 @@
} }
.navbar-brand .author { .navbar-brand .author {
color: #3498db; color: #3498db;
text-decoration: none; font-weight: normal;
} }
.navbar-brand .author:hover { .navbar-brand .author:hover {
text-decoration: underline; text-decoration: underline;
@ -242,11 +244,11 @@
</head> </head>
<body> <body>
<nav class="navbar"> <nav class="navbar">
<a href="/" class="navbar-brand"> <div class="navbar-brand">
<span>{{appName}}</span> <a href="/">routewatch</a>
<span class="by">by</span> <span class="by">by</span>
<a href="{{appAuthorURL}}" class="author">{{appAuthor}}</a> <a href="https://sneak.berlin" class="author">@sneak</a>
</a> </div>
<div class="navbar-links"> <div class="navbar-links">
<a href="/">Home</a> <a href="/">Home</a>
<a href="/status">Status</a> <a href="/status">Status</a>

View File

@ -29,12 +29,14 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
color: white;
text-decoration: none;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
} }
.navbar-brand:hover { .navbar-brand a {
color: white;
text-decoration: none;
}
.navbar-brand a:hover {
color: #ecf0f1; color: #ecf0f1;
} }
.navbar-brand .by { .navbar-brand .by {
@ -44,7 +46,7 @@
} }
.navbar-brand .author { .navbar-brand .author {
color: #3498db; color: #3498db;
text-decoration: none; font-weight: normal;
} }
.navbar-brand .author:hover { .navbar-brand .author:hover {
text-decoration: underline; text-decoration: underline;
@ -141,11 +143,11 @@
</head> </head>
<body> <body>
<nav class="navbar"> <nav class="navbar">
<a href="/" class="navbar-brand"> <div class="navbar-brand">
<span>{{appName}}</span> <a href="/">routewatch</a>
<span class="by">by</span> <span class="by">by</span>
<a href="{{appAuthorURL}}" class="author">{{appAuthor}}</a> <a href="https://sneak.berlin" class="author">@sneak</a>
</a> </div>
<div class="navbar-links"> <div class="navbar-links">
<a href="/">Home</a> <a href="/">Home</a>
<a href="/status">Status</a> <a href="/status">Status</a>

View File

@ -29,12 +29,14 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
color: white;
text-decoration: none;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
} }
.navbar-brand:hover { .navbar-brand a {
color: white;
text-decoration: none;
}
.navbar-brand a:hover {
color: #ecf0f1; color: #ecf0f1;
} }
.navbar-brand .by { .navbar-brand .by {
@ -44,7 +46,7 @@
} }
.navbar-brand .author { .navbar-brand .author {
color: #3498db; color: #3498db;
text-decoration: none; font-weight: normal;
} }
.navbar-brand .author:hover { .navbar-brand .author:hover {
text-decoration: underline; text-decoration: underline;
@ -159,11 +161,11 @@
</head> </head>
<body> <body>
<nav class="navbar"> <nav class="navbar">
<a href="/" class="navbar-brand"> <div class="navbar-brand">
<span>{{appName}}</span> <a href="/">routewatch</a>
<span class="by">by</span> <span class="by">by</span>
<a href="{{appAuthorURL}}" class="author">{{appAuthor}}</a> <a href="https://sneak.berlin" class="author">@sneak</a>
</a> </div>
<div class="navbar-links"> <div class="navbar-links">
<a href="/">Home</a> <a href="/">Home</a>
<a href="/status" class="active">Status</a> <a href="/status" class="active">Status</a>