Unified pages navigation
This commit is contained in:
Josh-Dev-Quest
parent
e07547c449
commit
4b09f09ccf
290
blog-page.html
290
blog-page.html
@ -3,33 +3,303 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Blog Post</title>
|
||||
<title>Blog Post – Journey Mapper</title>
|
||||
|
||||
<!-- Open Props CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/open-props"/>
|
||||
<!-- optional: normalize / additional props -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css"/>
|
||||
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
|
||||
<!-- Google Fonts: Poppins -->
|
||||
<!-- Google Fonts: Poppins (matching map page) -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/blog.css">
|
||||
<style>
|
||||
/* ===== GLOBAL RESET USING OPEN PROPS ===== */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
background: var(--gray-0);
|
||||
color: var(--gray-9);
|
||||
line-height: var(--font-lineheight-3);
|
||||
}
|
||||
|
||||
/* ===== HEADER ===== */
|
||||
.site-header {
|
||||
background: var(--gray-9);
|
||||
padding: var(--size-4) var(--size-6);
|
||||
border-bottom: 1px solid var(--surface-4);
|
||||
}
|
||||
.site-header .container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--size-2);
|
||||
}
|
||||
.site-title {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-4);
|
||||
font-weight: var(--font-weight-6);
|
||||
}
|
||||
.site-title a {
|
||||
color: var(--indigo-4);
|
||||
text-decoration: none;
|
||||
}
|
||||
.site-nav {
|
||||
display: flex;
|
||||
gap: var(--size-4);
|
||||
}
|
||||
.site-nav a {
|
||||
color: var(--gray-2);
|
||||
text-decoration: none;
|
||||
font-weight: var(--font-weight-5);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.site-nav a:hover {
|
||||
color: var(--indigo-4);
|
||||
}
|
||||
|
||||
/* ===== MAIN LAYOUT (two‑column) ===== */
|
||||
.post-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--size-6);
|
||||
padding: var(--size-6) var(--size-4);
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.post {
|
||||
background: var(--surface-1);
|
||||
border-radius: var(--radius-3);
|
||||
padding: var(--size-6);
|
||||
box-shadow: var(--shadow-2);
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: var(--font-size-6);
|
||||
font-weight: var(--font-weight-7);
|
||||
margin: 0 0 var(--size-2) 0;
|
||||
color: var(--gray-9);
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
color: var(--gray-6);
|
||||
font-size: var(--font-size-1);
|
||||
margin-bottom: var(--size-4);
|
||||
border-bottom: 1px solid var(--surface-4);
|
||||
padding-bottom: var(--size-2);
|
||||
}
|
||||
|
||||
.post-hero {
|
||||
margin: var(--size-4) 0;
|
||||
}
|
||||
.post-hero img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--radius-2);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.post-content {
|
||||
line-height: var(--font-lineheight-4);
|
||||
color: var(--gray-7);
|
||||
}
|
||||
.post-content p {
|
||||
margin-bottom: var(--size-4);
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
background: var(--surface-1);
|
||||
border-radius: var(--radius-3);
|
||||
padding: var(--size-4);
|
||||
box-shadow: var(--shadow-2);
|
||||
}
|
||||
.sidebar section {
|
||||
margin-bottom: var(--size-6);
|
||||
}
|
||||
.sidebar h3 {
|
||||
font-size: var(--font-size-3);
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--size-3);
|
||||
color: var(--indigo-7);
|
||||
border-left: 3px solid var(--indigo-6);
|
||||
padding-left: var(--size-2);
|
||||
}
|
||||
|
||||
/* Posts list */
|
||||
#posts-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--size-3);
|
||||
}
|
||||
.post-preview {
|
||||
background: var(--surface-2);
|
||||
border-radius: var(--radius-2);
|
||||
padding: var(--size-3);
|
||||
transition: background 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.post-preview:hover {
|
||||
background: var(--surface-3);
|
||||
}
|
||||
.post-preview-title {
|
||||
font-weight: var(--font-weight-6);
|
||||
color: var(--gray-9);
|
||||
margin: 0 0 var(--size-1) 0;
|
||||
}
|
||||
.post-preview-meta {
|
||||
font-size: var(--font-size-0);
|
||||
color: var(--gray-6);
|
||||
}
|
||||
|
||||
/* Form for creating/editing posts */
|
||||
.form-group {
|
||||
margin-bottom: var(--size-3);
|
||||
}
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: var(--size-1);
|
||||
font-weight: var(--font-weight-5);
|
||||
color: var(--gray-7);
|
||||
}
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: var(--size-2) var(--size-3);
|
||||
border: 1px solid var(--surface-4);
|
||||
border-radius: var(--radius-2);
|
||||
background: var(--surface-2);
|
||||
color: var(--text-1);
|
||||
font-family: inherit;
|
||||
font-size: var(--font-size-2);
|
||||
}
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--indigo-6);
|
||||
box-shadow: 0 0 0 3px var(--indigo-2);
|
||||
}
|
||||
|
||||
/* Buttons (reuse map page classes) */
|
||||
.btn {
|
||||
padding: var(--size-2) var(--size-4);
|
||||
border: none;
|
||||
border-radius: var(--radius-2);
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-2);
|
||||
font-weight: var(--font-weight-5);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--size-2);
|
||||
transition: all 0.2s var(--ease-2);
|
||||
box-shadow: var(--shadow-2);
|
||||
}
|
||||
.btn-primary {
|
||||
background: var(--indigo-7);
|
||||
color: white;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--indigo-8);
|
||||
box-shadow: var(--shadow-3);
|
||||
}
|
||||
.btn-secondary {
|
||||
background: var(--gray-7);
|
||||
color: white;
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: var(--gray-8);
|
||||
}
|
||||
.btn-danger {
|
||||
background: var(--red-7);
|
||||
color: white;
|
||||
}
|
||||
.btn-danger:hover {
|
||||
background: var(--red-8);
|
||||
}
|
||||
|
||||
/* Comments section */
|
||||
.comments {
|
||||
max-width: 1200px;
|
||||
margin: var(--size-6) auto 0;
|
||||
padding: 0 var(--size-4);
|
||||
}
|
||||
.comments h3 {
|
||||
font-size: var(--font-size-4);
|
||||
margin-bottom: var(--size-4);
|
||||
color: var(--indigo-7);
|
||||
}
|
||||
.comments-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--size-4);
|
||||
}
|
||||
.comment-item {
|
||||
background: var(--surface-1);
|
||||
border-radius: var(--radius-2);
|
||||
padding: var(--size-4);
|
||||
box-shadow: var(--shadow-1);
|
||||
}
|
||||
.comment-item .meta {
|
||||
color: var(--gray-6);
|
||||
font-size: var(--font-size-0);
|
||||
margin-bottom: var(--size-2);
|
||||
}
|
||||
.comment-item p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.site-footer {
|
||||
background: var(--surface-2);
|
||||
padding: var(--size-4);
|
||||
margin-top: var(--size-6);
|
||||
text-align: center;
|
||||
color: var(--gray-6);
|
||||
font-size: var(--font-size-1);
|
||||
border-top: 1px solid var(--surface-4);
|
||||
}
|
||||
|
||||
/* Responsive two‑column layout */
|
||||
@media (min-width: 768px) {
|
||||
.post-page {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
gap: var(--size-6);
|
||||
padding: var(--size-6);
|
||||
}
|
||||
.post {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
}
|
||||
.sidebar {
|
||||
width: 320px;
|
||||
flex-shrink: 0;
|
||||
position: sticky;
|
||||
top: var(--size-4);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<div class="container">
|
||||
<h1 class="site-title"><a href="/">My Blog</a></h1>
|
||||
<h1 class="site-title"><a href="map-page.html">Journey Mapper</a></h1>
|
||||
<nav class="site-nav">
|
||||
<a href="map-page.html">Map</a>
|
||||
<a href="blog-page.html">Blog</a>
|
||||
<a href="blog-page.html" class="active">Blog</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container post-page">
|
||||
<main class="post-page">
|
||||
<article class="post">
|
||||
<h2 class="post-title">Post Title</h2>
|
||||
<div class="post-meta">By <span class="author">Author</span> — <time datetime="2026-01-01">Jan 1, 2026</time></div>
|
||||
@ -40,6 +310,7 @@
|
||||
<p>This is a placeholder paragraph for the blog post content. Replace with real content.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<aside class="sidebar">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
|
||||
<h3 style="margin:0">Posts</h3>
|
||||
@ -83,7 +354,7 @@
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<section class="comments container">
|
||||
<section class="comments">
|
||||
<h3>Comments</h3>
|
||||
<div class="comments-list"></div>
|
||||
</section>
|
||||
@ -92,6 +363,7 @@
|
||||
<div class="container">© 2026 My Blog</div>
|
||||
</footer>
|
||||
|
||||
<!-- JavaScript (keep your existing logic) -->
|
||||
<script src="js/main.js"></script>
|
||||
<script src="js/blog-posts.js"></script>
|
||||
</body>
|
||||
|
||||
@ -479,9 +479,64 @@
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
.site-header {
|
||||
background: var(--gray-9);
|
||||
padding: var(--size-4) var(--size-6);
|
||||
border-bottom: 1px solid var(--surface-4);
|
||||
}
|
||||
.site-header .container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--size-2);
|
||||
}
|
||||
.site-title {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-4);
|
||||
font-weight: var(--font-weight-6);
|
||||
}
|
||||
.site-title a {
|
||||
color: var(--indigo-4);
|
||||
text-decoration: none;
|
||||
}
|
||||
.site-nav {
|
||||
display: flex;
|
||||
gap: var(--size-4);
|
||||
}
|
||||
.site-nav a {
|
||||
color: var(--gray-2);
|
||||
text-decoration: none;
|
||||
font-weight: var(--font-weight-5);
|
||||
transition: color 0.2s;
|
||||
padding: var(--size-1) var(--size-2);
|
||||
border-radius: var(--radius-2);
|
||||
}
|
||||
.site-nav a:hover,
|
||||
.site-nav a.active {
|
||||
color: var(--indigo-4);
|
||||
background: var(--surface-2);
|
||||
}
|
||||
.app-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<body style="display: flex; flex-direction: column; min-height: 100vh;">
|
||||
<header class="site-header">
|
||||
<div class="container">
|
||||
<h1 class="site-title"><a href="/">Journey Mapper</a></h1>
|
||||
<nav class="site-nav">
|
||||
<a href="map-page.html" class="active">Map</a>
|
||||
<a href="blog-page.html">Blog</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="app-container">
|
||||
<!-- SIDEBAR -->
|
||||
<aside class="sidebar">
|
||||
@ -584,7 +639,7 @@
|
||||
<div class="sidebar-footer">
|
||||
<div class="navigation">
|
||||
<a href="#" class="nav-link"><i class="fas fa-list"></i> All Journeys</a>
|
||||
<a href="#" class="nav-link"><i class="fas fa-question-circle"></i> Help</a>
|
||||
<a href="blog-page.html" class="nav-link"><i class="fas fa-blog"></i> Blog</a>
|
||||
</div>
|
||||
<p class="footer-text">Journey Mapper v1.0</p>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user