370 lines
12 KiB
HTML
370 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Blog Post – Journey Mapper</title>
|
||
|
||
<!-- Open Props CSS -->
|
||
<link rel="stylesheet" href="https://unpkg.com/open-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 (matching map page) -->
|
||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
|
||
<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="map-page.html">Journey Mapper</a></h1>
|
||
<nav class="site-nav">
|
||
<a href="map-page.html">Map</a>
|
||
<a href="blog-page.html" class="active">Blog</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<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>
|
||
<figure class="post-hero">
|
||
<img src="https://via.placeholder.com/800x350?text=Hero+Image" alt="Post image">
|
||
</figure>
|
||
<div class="post-content">
|
||
<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>
|
||
<button id="create-post-btn" class="btn btn-primary">New</button>
|
||
</div>
|
||
|
||
<div id="posts-list">
|
||
<!-- JS will render list of posts here -->
|
||
</div>
|
||
|
||
<section class="about" id="post-form" style="display:none;margin-top:16px;">
|
||
<h3 id="form-title">New Post</h3>
|
||
<form id="blog-form">
|
||
<div class="form-group">
|
||
<label for="post-title-input">Title</label>
|
||
<input id="post-title-input" name="title" required />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="post-journey-input">Journey ID</label>
|
||
<input id="post-journey-input" name="journeyId" placeholder="optional" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="post-image-input">Image URL</label>
|
||
<input id="post-image-input" name="image" placeholder="https://..." />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="post-content-input">Content</label>
|
||
<textarea id="post-content-input" name="content" rows="6" required></textarea>
|
||
</div>
|
||
<div style="display:flex;gap:8px">
|
||
<button type="submit" class="btn btn-primary">Save</button>
|
||
<button type="button" id="cancel-post-btn" class="btn btn-secondary">Cancel</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
|
||
<section class="about" style="margin-top:18px;">
|
||
<h3>About</h3>
|
||
<p>Short author bio or related links.</p>
|
||
</section>
|
||
</aside>
|
||
</main>
|
||
|
||
<section class="comments">
|
||
<h3>Comments</h3>
|
||
<div class="comments-list"></div>
|
||
</section>
|
||
|
||
<footer class="site-footer">
|
||
<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>
|
||
</html> |