dcovington
/
ASPBlogBrainOrdure
1
0
Fork 0
Code Issues 6 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Polish UI: navbar, homepage, and site CSS 

- Navbar: BrainOrdure branding, Posts/Categories links, active-link highlighting, fix VBScript comment bleed-through
- Homepage: replace framework starter template with clean blog hero
- site.css: custom stylesheet (dark brand, card shadows, readable typography)
- Footer: year and site name

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
pull/5/head
Nano 6 days ago
parent
e379eec766
commit
bdcd2e9b62
4 changed files with 126 additions and 130 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +6
    -83
      app/views/Home/index.asp
  2. +7
    -2
      app/views/shared/footer.asp
  3. +32
    -45
      app/views/shared/header.asp
  4. +81
    -0
      public/css/site.css

+ 6
- 83
app/views/Home/index.asp View File

@@ -1,85 +1,8 @@


<div class="row mb-4">
<div class="col-lg-8">
<div class="card shadow-sm mb-3">
<div class="card-body">
<h1 class="h3 mb-3">Welcome to RouteKit Classic ASP</h1>
<p class="text-muted">
Your lightweight, opinionated MVC-style framework for Classic ASP.
</p>
<p>
This <code>Home.Index</code> view is using the shared
<code>Header.asp</code> and <code>Footer.asp</code> layout files.
</p>
<p class="mb-0">
Start by wiring up your controllers, repositories, and views — this page is just a
friendly placeholder so you know everything is hooked up correctly.
</p>
</div>
</div>
</div>

<div class="col-lg-4">
<div class="card border-0 bg-light mb-3">
<div class="card-body">
<h2 class="h5 mb-3">Quick info</h2>
<ul class="list-unstyled mb-0 small">
<li class="mb-1">
<strong>View:</strong>
<code>app/Views/Home.Index.asp</code>
</li>
<li class="mb-1">
<strong>Layout:</strong>
<code>Shared/Header.asp</code> &amp; <code>Shared/Footer.asp</code>
</li>
<li class="mb-1">
<strong>Default route:</strong>
typically <code>/Home/Index</code> or <code>/</code> via the dispatcher.
</li>
</ul>
</div>
</div>
</div>
</div>

<div class="row gy-3">
<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h2 class="h5">Next step: Controllers</h2>
<p class="small text-muted">
Use your <code>generateController.vbs</code> script to scaffold new controllers.
</p>
<pre class="small mb-0"><code>cscript //nologo Scripts\generateController.vbs ^
Home "Index"</code></pre>
</div>
</div>
</div>

<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h2 class="h5">POBO &amp; Repository</h2>
<p class="small text-muted">
Generate strongly-typed POBOs and repositories from your Access/SQL schema.
</p>
<pre class="small mb-0"><code>cscript //nologo Scripts\GenerateRepo.vbs ^
/table:Users /pk:UserId</code></pre>
</div>
</div>
</div>

<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h2 class="h5">Where to put stuff</h2>
<ul class="small mb-0">
<li><code>/core/</code> – framework libs (DAL, routing, helpers)</li>
<li><code>/app/Views/</code> – pages like this one</li>
<li><code>/public/</code> – IIS root (Default.asp, web.config)</li>
</ul>
</div>
</div>
<div class="hero py-5 mb-5">
<h1 class="display-5 fw-bold mb-2">BrainOrdure</h1>
<p class="lead text-muted mb-4">Thoughts, notes, and things worth writing down.</p>
<div class="d-flex gap-2">
<a href="/posts" class="btn btn-dark px-4">Read Posts</a>
<a href="/categories" class="btn btn-outline-secondary px-4">Browse Categories</a>
</div> </div>
</div> </div>

+ 7
- 2
app/views/shared/footer.asp View File

@@ -1,7 +1,12 @@
</div>
</div>
</main> </main>


<!-- Bootstrap bundle (with Popper) -->
<footer class="border-top py-3 mt-auto">
<div class="container">
<p class="text-muted small mb-0">&copy; <%= Year(Now()) %> BrainOrdure</p>
</div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>


</body> </body>


+ 32
- 45
app/views/shared/header.asp View File

@@ -3,81 +3,68 @@
Response.Charset = "utf-8" Response.Charset = "utf-8"
Response.CodePage = 65001 Response.CodePage = 65001


' Safe title resolution
Dim pageTitle Dim pageTitle
If IsObject(CurrentController) Then If IsObject(CurrentController) Then
On Error Resume Next On Error Resume Next
pageTitle = CurrentController.Title pageTitle = CurrentController.Title
If Err.Number <> 0 Then If Err.Number <> 0 Then
pageTitle = "RouteKit Classic ASP"
pageTitle = "BrainOrdure"
Err.Clear Err.Clear
End If End If
On Error GoTo 0 On Error GoTo 0
End If End If


If Len(pageTitle) = 0 Then pageTitle = "Classic ASP Starter Template"
If Len(pageTitle) = 0 Then pageTitle = "BrainOrdure"

Dim currentPath
currentPath = LCase(Request.ServerVariables("HTTP_X_ORIGINAL_URL"))
If InStr(currentPath, "?") > 0 Then currentPath = Left(currentPath, InStr(currentPath, "?") - 1)

Function NavClass(ByVal prefix)
If Left(currentPath, Len(prefix)) = prefix Then
NavClass = "nav-link active"
Else
NavClass = "nav-link"
End If
End Function
%> %>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title><%= pageTitle %></title>
<title><%= H(pageTitle) %> &mdash; BrainOrdure</title>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Bootstrap Icons (optional) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet" />

<!-- App CSS -->
<link href="/css/site.css" rel="stylesheet" /> <link href="/css/site.css" rel="stylesheet" />

<style>
body {
background-color: #f5f5f5;
}
.rk-navbar-brand {
font-weight: 600;
letter-spacing: 0.03em;
}
main.routekit-main {
padding-top: 1.5rem;
padding-bottom: 2rem;
}
</style>
</head> </head>
<body> <body>
<!-- Top navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand rk-navbar-brand" href="/">
Classic ASP
<span class="text-secondary small">Starter</span>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm">
<div class="container">
<a class="navbar-brand brand" href="/">
BrainOrdure<span class="brand-tagline">a blog</span>
</a> </a>


<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#rkMainNav" aria-controls="rkMainNav" aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>


<div class="collapse navbar-collapse" id="rkMainNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/home">Home</a>
<a class="<%= NavClass("/") %>" href="/">Home</a>
</li>
<li class="nav-item">
<a class="<%= NavClass("/posts") %>" href="/posts">Posts</a>
</li>
<li class="nav-item">
<a class="<%= NavClass("/categories") %>" href="/categories">Categories</a>
</li> </li>
</ul>

' Right-side area (e.g., user info / login)
' You can wire this up to your auth later.
<ul class="navbar-nav mb-2 mb-lg-0">
' <li class="nav-item">
' <a class="nav-link" href="/login">Login</a>
' </li>
</ul> </ul>
</div> </div>
</div> </div>
</nav> </nav>


<!-- Main container for views -->
<main class="routekit-main">
<main class="site-main">
<div class="container"> <div class="container">

<% Flash().ShowErrorsIfPresent : Flash().ShowSuccessIfPresent %>
<% Flash().ShowErrorsIfPresent : Flash().ShowSuccessIfPresent %>

+ 81
- 0
public/css/site.css View File

@@ -0,0 +1,81 @@
:root {
--brand-dark: #1a1a2e;
--text-muted-soft: #6c757d;
}

body {
background-color: #f8f9fa;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: #212529;
}

/* Navbar */
.navbar.bg-dark {
background-color: var(--brand-dark) !important;
}

.brand {
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.01em;
color: #fff !important;
}

.brand-tagline {
display: inline-block;
font-size: 0.65rem;
font-weight: 400;
color: rgba(255,255,255,0.45);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-left: 0.5rem;
vertical-align: middle;
}

.navbar .nav-link {
font-size: 0.9rem;
font-weight: 500;
color: rgba(255,255,255,0.7) !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
transition: color 0.15s;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
color: #fff !important;
}

/* Main content */
.site-main {
padding-top: 2.5rem;
padding-bottom: 3rem;
min-height: calc(100vh - 60px);
}

/* Hero */
.hero {
border-bottom: 1px solid #e9ecef;
}

/* Cards */
.card {
border: 1px solid rgba(0,0,0,0.07);
border-radius: 0.5rem;
}

.card.shadow-sm {
box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* Alerts (flash messages) */
.alert {
border-radius: 0.5rem;
font-size: 0.9rem;
}

/* Post/article cards */
article.card:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
transition: box-shadow 0.2s;
}

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.