Journal — Editorial Blog Homepage

<nav class="jn-top py-3"><div class="container d-flex flex-wrap align-items-center gap-3">
  <span class="fw-bold fs-3" style="letter-spacing:-.02em">Atlas Journal<span style="color:var(--jn-cyan)">.</span></span>
  <div class="ms-auto d-none d-md-flex gap-4 jn-sans small"><a class="text-dark text-decoration-none fw-semibold" href="#">Latest</a><a class="text-secondary text-decoration-none" href="#">Engineering</a><a class="text-secondary text-decoration-none" href="#">Design</a><a class="text-secondary text-decoration-none" href="#">Culture</a></div>
  <button class="btn btn-dark btn-sm jn-sans rounded-pill px-3">Subscribe</button>
</div></nav>
<main class="container py-4"><div class="row g-4">
  <div class="col-lg-8">
    <a class="jn-feat mb-4" href="#"><span class="bg"></span><span class="veil"></span>
      <div class="body"><span class="jn-cat jn-sans mb-2" style="color:#5dd6ff">Engineering</span>
        <h1 class="fw-bold" style="font-size:clamp(1.6rem,3.6vw,2.4rem)">How we built 435 UI snippets without a database</h1>
        <div class="jn-sans small opacity-75 mt-2"><i class="bi bi-person-circle me-1"></i>ConvertAtlas · Jun 10, 2026 · 12 min read</div>
      </div>
    </a>
    <div class="jn-card d-flex gap-3"><div class="jn-thumb" style="background:linear-gradient(135deg,#7c3aed,#ec4899)"></div><div><span class="jn-cat jn-sans">Design</span><h3 class="mb-1 mt-1">Why our dashboards never fill the whole screen</h3><p class="jn-meta jn-sans mb-1">How AdSense content rules quietly shaped the ConvertAtlas layout.</p><span class="jn-meta jn-sans">Atlas Team · Jun 8 · 7 min</span></div></div>
    <div class="jn-card d-flex gap-3"><div class="jn-thumb" style="background:linear-gradient(135deg,#0f5132,#52b788)"></div><div><span class="jn-cat jn-sans">Engineering</span><h3 class="mb-1 mt-1">PHP in 2026: boring, fast, and everywhere</h3><p class="jn-meta jn-sans mb-1">The language everyone mocks quietly powers half the web — and it's getting better.</p><span class="jn-meta jn-sans">Rihards O. · Jun 5 · 9 min</span></div></div>
    <div class="jn-card d-flex gap-3"><div class="jn-thumb" style="background:linear-gradient(135deg,#f59e0b,#ef4444)"></div><div><span class="jn-cat jn-sans">Culture</span><h3 class="mb-1 mt-1">Shipping 18 templates as single HTML files</h3><p class="jn-meta jn-sans mb-1">Why every ConvertAtlas template is one downloadable file — and how.</p><span class="jn-meta jn-sans">Atlas Team · Jun 2 · 6 min</span></div></div>
    <div class="text-center mt-4"><button class="btn btn-outline-dark jn-sans rounded-pill px-4">Load more stories</button></div>
  </div>
  <aside class="col-lg-4 jn-side jn-sans">
    <h5>Popular this week</h5>
    <a class="jn-pop" href="#"><b>01</b><div><div class="fw-semibold small">The case against microservices (again)</div><span class="jn-meta">18k reads</span></div></a>
    <a class="jn-pop" href="#"><b>02</b><div><div class="fw-semibold small">CSS has-: the selector that changed everything</div><span class="jn-meta">12k reads</span></div></a>
    <a class="jn-pop" href="#"><b>03</b><div><div class="fw-semibold small">A love letter to boring technology</div><span class="jn-meta">9k reads</span></div></a>
    <div class="jn-news p-4 my-4">
      <h6 class="fw-bold mb-1">The Atlas dispatch</h6>
      <p class="small opacity-75 mb-3">One essay, three links, zero spam. Every Sunday morning.</p>
      <div class="d-flex gap-2"><input class="form-control form-control-sm" placeholder="you@email.com"><button class="btn btn-sm fw-semibold" style="background:#5dd6ff;color:#06121f">Join</button></div>
    </div>
    <h5>Browse topics</h5>
    <div class="mt-3"><a class="jn-tag" href="#">#php</a><a class="jn-tag" href="#">#css</a><a class="jn-tag" href="#">#performance</a><a class="jn-tag" href="#">#design-systems</a><a class="jn-tag" href="#">#career</a><a class="jn-tag" href="#">#remote</a></div>
  </aside>
</div></main>
<footer class="py-4 text-center small text-secondary jn-sans border-top">Atlas Journal © 2026 · Template by <a href="https://convertatlas.org" class="fw-semibold text-decoration-none" style="color:var(--jn-cyan)">ConvertAtlas</a> · Developer Tools</footer>

:root{--jn-ink:#13202e;--jn-cyan:#0c8fc4;--jn-line:#e6edf2;--jn-paper:#fcfdfe}
body{background:var(--jn-paper);color:var(--jn-ink);font-family:Georgia,'Times New Roman',serif}
.jn-sans{font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.jn-mono{font-family:ui-monospace,'JetBrains Mono',monospace}
.jn-top{border-bottom:3px double var(--jn-ink)}
.jn-cat{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--jn-cyan);font-weight:700}
.jn-feat{border-radius:18px;overflow:hidden;position:relative;display:block;text-decoration:none;color:#fff;min-height:380px}
.jn-feat .bg{position:absolute;inset:0;background:linear-gradient(135deg,#07243a,#0c8fc4);transition:transform .35s}
.jn-feat:hover .bg{transform:scale(1.04)}
.jn-feat .veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(7,18,31,.85))}
.jn-feat .body{position:relative;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;min-height:380px}
.jn-card{text-decoration:none;color:inherit;display:block;border-bottom:1px solid var(--jn-line);padding:18px 0;transition:.15s}
.jn-card:hover{color:inherit;padding-left:8px}
.jn-card h3{font-size:1.15rem;font-weight:700}
.jn-thumb{width:92px;height:92px;border-radius:14px;flex-shrink:0}
.jn-meta{font-size:.78rem;color:#7b8a96}
.jn-side h5{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;border-bottom:2px solid var(--jn-ink);padding-bottom:8px}
.jn-pop{display:flex;gap:12px;text-decoration:none;color:inherit;padding:10px 0;border-bottom:1px solid var(--jn-line)}
.jn-pop:hover{color:var(--jn-cyan)}
.jn-pop b{font-size:1.4rem;color:#cfdbe4;font-family:Georgia,serif;line-height:1}
.jn-news{background:var(--jn-ink);color:#fff;border-radius:16px}
.jn-news input{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:10px}
.jn-news input::placeholder{color:rgba(255,255,255,.55)}
.jn-tag{border:1px solid var(--jn-line);border-radius:999px;padding:5px 13px;font-size:.78rem;text-decoration:none;color:#5c6f80;display:inline-block;margin:0 6px 8px 0}
.jn-tag:hover{border-color:var(--jn-cyan);color:var(--jn-cyan)}