Move blog ideas section from homepage to dashboard (operations.html)
This commit is contained in:
Oliver
-86
@@ -1621,65 +1621,6 @@
|
|||||||
.story-avatar { width: 72px; height: 72px; font-size: 28px; }
|
.story-avatar { width: 72px; height: 72px; font-size: 28px; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ══════════════════════════════════════════════════════════
|
|
||||||
BLOG IDEAS
|
|
||||||
══════════════════════════════════════════════════════════ */
|
|
||||||
.blog-idea-item {
|
|
||||||
display: flex;
|
|
||||||
gap: 16px;
|
|
||||||
padding: 20px 24px;
|
|
||||||
background: var(--bg-card);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: var(--radius-card);
|
|
||||||
transition: border-color 0.2s, transform 0.2s;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
.blog-idea-item:hover {
|
|
||||||
border-color: var(--border-hi);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
.blog-idea-checkbox {
|
|
||||||
flex-shrink: 0;
|
|
||||||
padding-top: 3px;
|
|
||||||
}
|
|
||||||
.blog-idea-checkbox input[type="checkbox"] {
|
|
||||||
accent-color: var(--accent);
|
|
||||||
width: 17px;
|
|
||||||
height: 17px;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
.blog-idea-body {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
.blog-idea-title {
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 16px;
|
|
||||||
color: var(--text);
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
.blog-idea-desc {
|
|
||||||
font-size: 13px;
|
|
||||||
color: var(--text-muted);
|
|
||||||
line-height: 1.7;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.blog-idea-meta {
|
|
||||||
display: flex;
|
|
||||||
gap: 6px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.blog-idea-tag {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 3px 12px;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 600;
|
|
||||||
border-radius: 12px;
|
|
||||||
background: var(--accent-dim);
|
|
||||||
color: var(--accent);
|
|
||||||
border: 1px solid rgba(0, 245, 255, 0.15);
|
|
||||||
letter-spacing: 0.02em;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
<!-- ── Plausible Analytics ──────────────────────────────────────── -->
|
<!-- ── Plausible Analytics ──────────────────────────────────────── -->
|
||||||
<script defer data-domain="derez.ai" src="https://plausible.odoo4projects.com/js/script.file-downloads.outbound-links.tagged-events.js"></script>
|
<script defer data-domain="derez.ai" src="https://plausible.odoo4projects.com/js/script.file-downloads.outbound-links.tagged-events.js"></script>
|
||||||
@@ -2412,33 +2353,6 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
<!-- ═══════════════════════════════════════════════════════════════
|
|
||||||
BLOG IDEAS
|
|
||||||
═══════════════════════════════════════════════════════════════ -->
|
|
||||||
<section id="blog-ideas">
|
|
||||||
<div class="container">
|
|
||||||
<h2 class="section-title">Blog Post Ideas</h2>
|
|
||||||
<p class="section-sub">Topics I want to write about. Tick them off as they go live.</p>
|
|
||||||
<div class="blog-ideas-list" style="max-width: 760px; margin: 0 auto;">
|
|
||||||
<div class="blog-idea-item">
|
|
||||||
<div class="blog-idea-checkbox">
|
|
||||||
<input type="checkbox" disabled checked />
|
|
||||||
</div>
|
|
||||||
<div class="blog-idea-body">
|
|
||||||
<div class="blog-idea-title">Why backing up an agent is so hard</div>
|
|
||||||
<div class="blog-idea-desc">Modern AI agents install packages everywhere — pip in venvs, npm globally, configs scattered across /etc, ~/.config, /opt, custom paths. A naive filesystem backup misses half the environment. This post explores the real architecture behind 100% agent backup: what lives where, why Borg encrypted deduplication is the right tool, and how we make every backup a full restore.</div>
|
|
||||||
<div class="blog-idea-meta">
|
|
||||||
<span class="blog-idea-tag">Technical</span>
|
|
||||||
<span class="blog-idea-tag">Backups</span>
|
|
||||||
<span class="blog-idea-tag">DevOps</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ═══════════════════════════════════════════════════════════════
|
<!-- ═══════════════════════════════════════════════════════════════
|
||||||
BLOG
|
BLOG
|
||||||
═══════════════════════════════════════════════════════════════ -->
|
═══════════════════════════════════════════════════════════════ -->
|
||||||
|
|||||||
@@ -505,6 +505,62 @@
|
|||||||
@media (max-width: 500px) {
|
@media (max-width: 500px) {
|
||||||
.goals-grid { grid-template-columns: 1fr; }
|
.goals-grid { grid-template-columns: 1fr; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Blog ideas ──────────────────────────── */
|
||||||
|
.blog-idea-item {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 20px 24px;
|
||||||
|
background: #0e0e14;
|
||||||
|
border: 1px solid #1a1a2e;
|
||||||
|
border-radius: 18px;
|
||||||
|
transition: border-color 0.2s, transform 0.2s;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.blog-idea-item:hover {
|
||||||
|
border-color: #6c8cff;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
.blog-idea-checkbox {
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding-top: 3px;
|
||||||
|
}
|
||||||
|
.blog-idea-checkbox input[type="checkbox"] {
|
||||||
|
accent-color: #6c8cff;
|
||||||
|
width: 17px;
|
||||||
|
height: 17px;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.blog-idea-body { flex: 1; min-width: 0; }
|
||||||
|
.blog-idea-title {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #e8e8f0;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
.blog-idea-desc {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #888;
|
||||||
|
line-height: 1.7;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.blog-idea-meta {
|
||||||
|
display: flex;
|
||||||
|
gap: 6px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.blog-idea-tag {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 3px 12px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: rgba(108,140,255,0.1);
|
||||||
|
color: #6c8cff;
|
||||||
|
border: 1px solid rgba(108,140,255,0.15);
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -647,6 +703,31 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- ════════ BLOG IDEAS ════════ -->
|
||||||
|
<div class="section">
|
||||||
|
<div class="section-header" onclick="toggleSection('blog-ideas-section', this)">
|
||||||
|
<h2>📝 Blog Post Ideas</h2>
|
||||||
|
<span class="section-count count">tick when live</span>
|
||||||
|
<span class="section-toggle collapsed">▼</span>
|
||||||
|
</div>
|
||||||
|
<div class="section-body" id="blog-ideas-section">
|
||||||
|
<div class="blog-idea-item">
|
||||||
|
<div class="blog-idea-checkbox">
|
||||||
|
<input type="checkbox" disabled checked />
|
||||||
|
</div>
|
||||||
|
<div class="blog-idea-body">
|
||||||
|
<div class="blog-idea-title">Why backing up an agent is so hard</div>
|
||||||
|
<div class="blog-idea-desc">Modern AI agents install packages everywhere — pip in venvs, npm globally, configs scattered across /etc, ~/.config, /opt, custom paths. A naive filesystem backup misses half the environment.</div>
|
||||||
|
<div class="blog-idea-meta">
|
||||||
|
<span class="blog-idea-tag">Technical</span>
|
||||||
|
<span class="blog-idea-tag">Backups</span>
|
||||||
|
<span class="blog-idea-tag">DevOps</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
Reference in New Issue
Block a user