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>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Blog Post</title>
|
<title>Blog Post – Journey Mapper</title>
|
||||||
|
|
||||||
<!-- Open Props CSS -->
|
<!-- Open Props CSS -->
|
||||||
<link rel="stylesheet" href="https://unpkg.com/open-props"/>
|
<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"/>
|
<link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css"/>
|
||||||
|
|
||||||
<!-- Font Awesome -->
|
<!-- Font Awesome -->
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
<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 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">
|
<style>
|
||||||
<link rel="stylesheet" href="css/blog.css">
|
/* ===== 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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header class="site-header">
|
<header class="site-header">
|
||||||
<div class="container">
|
<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">
|
<nav class="site-nav">
|
||||||
<a href="map-page.html">Map</a>
|
<a href="map-page.html">Map</a>
|
||||||
<a href="blog-page.html">Blog</a>
|
<a href="blog-page.html" class="active">Blog</a>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main class="container post-page">
|
<main class="post-page">
|
||||||
<article class="post">
|
<article class="post">
|
||||||
<h2 class="post-title">Post Title</h2>
|
<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>
|
<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>
|
<p>This is a placeholder paragraph for the blog post content. Replace with real content.</p>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<aside class="sidebar">
|
<aside class="sidebar">
|
||||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
|
||||||
<h3 style="margin:0">Posts</h3>
|
<h3 style="margin:0">Posts</h3>
|
||||||
@ -83,7 +354,7 @@
|
|||||||
</aside>
|
</aside>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<section class="comments container">
|
<section class="comments">
|
||||||
<h3>Comments</h3>
|
<h3>Comments</h3>
|
||||||
<div class="comments-list"></div>
|
<div class="comments-list"></div>
|
||||||
</section>
|
</section>
|
||||||
@ -92,6 +363,7 @@
|
|||||||
<div class="container">© 2026 My Blog</div>
|
<div class="container">© 2026 My Blog</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<!-- JavaScript (keep your existing logic) -->
|
||||||
<script src="js/main.js"></script>
|
<script src="js/main.js"></script>
|
||||||
<script src="js/blog-posts.js"></script>
|
<script src="js/blog-posts.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -479,9 +479,64 @@
|
|||||||
flex-direction: row;
|
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>
|
</style>
|
||||||
</head>
|
</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">
|
<div class="app-container">
|
||||||
<!-- SIDEBAR -->
|
<!-- SIDEBAR -->
|
||||||
<aside class="sidebar">
|
<aside class="sidebar">
|
||||||
@ -584,7 +639,7 @@
|
|||||||
<div class="sidebar-footer">
|
<div class="sidebar-footer">
|
||||||
<div class="navigation">
|
<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-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>
|
</div>
|
||||||
<p class="footer-text">Journey Mapper v1.0</p>
|
<p class="footer-text">Journey Mapper v1.0</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user