style: redesign article page layout and typography
All checks were successful
Build and Push Docker Container / build-and-push (push) Successful in 48s
All checks were successful
Build and Push Docker Container / build-and-push (push) Successful in 48s
This commit is contained in:
@@ -100,7 +100,7 @@ svg {
|
|||||||
.page-content {
|
.page-content {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
max-width: 800px;
|
max-width: 720px;
|
||||||
margin: 4rem auto;
|
margin: 4rem auto;
|
||||||
padding: 0 2rem;
|
padding: 0 2rem;
|
||||||
}
|
}
|
||||||
@@ -111,6 +111,53 @@ svg {
|
|||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Article Header ── */
|
||||||
|
.article-header {
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-header h1 {
|
||||||
|
font-size: 2.2rem;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
line-height: 1.3;
|
||||||
|
margin: 0.5rem 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: #666;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-sep {
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Article Footer ── */
|
||||||
|
.article-footer {
|
||||||
|
margin-top: 4rem;
|
||||||
|
padding-top: 2rem;
|
||||||
|
padding-bottom: 4rem;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-footer a {
|
||||||
|
color: #888;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-footer a:hover {
|
||||||
|
color: #ff3c3c;
|
||||||
|
}
|
||||||
|
|
||||||
/* ── Project Grid ── */
|
/* ── Project Grid ── */
|
||||||
.project-grid {
|
.project-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -229,48 +276,186 @@ svg {
|
|||||||
|
|
||||||
/* ── Project Detail ── */
|
/* ── Project Detail ── */
|
||||||
.project-links {
|
.project-links {
|
||||||
margin: 1rem 0 2rem;
|
margin: 1rem 0 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-links a {
|
.project-links a {
|
||||||
color: #ff3c3c;
|
color: #ff3c3c;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
margin-right: 1rem;
|
font-size: 0.9rem;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
transition: opacity 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-links a:hover {
|
.project-links a:hover {
|
||||||
text-decoration: underline;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-body {
|
.project-body {
|
||||||
line-height: 1.8;
|
line-height: 1.9;
|
||||||
color: #ddd;
|
color: #ccc;
|
||||||
|
font-size: 1.05rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-body h2 {
|
.project-body h2 {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin-top: 2rem;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Back Link ── */
|
|
||||||
.back-link {
|
|
||||||
margin-top: 3rem;
|
margin-top: 3rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-link a {
|
.project-body h3 {
|
||||||
color: #888;
|
color: #eee;
|
||||||
|
margin-top: 2.5rem;
|
||||||
|
margin-bottom: 0.8rem;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-body h4 {
|
||||||
|
color: #ddd;
|
||||||
|
margin-top: 2rem;
|
||||||
|
margin-bottom: 0.6rem;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-body p {
|
||||||
|
margin-bottom: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-body a {
|
||||||
|
color: #ff3c3c;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
border-bottom: 1px solid rgba(255, 60, 60, 0.3);
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-body a:hover {
|
||||||
|
border-color: #ff3c3c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-body strong {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-body em {
|
||||||
|
color: #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Code Blocks ── */
|
||||||
|
.project-body code {
|
||||||
|
font-family: 'Geist Mono', monospace;
|
||||||
|
font-size: 0.88em;
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
padding: 0.15em 0.4em;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-body pre {
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 1.2rem 1.5rem;
|
||||||
|
overflow-x: auto;
|
||||||
|
margin: 1.5rem 0;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-body pre code {
|
||||||
|
background: none;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
font-size: 0.85em;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Blockquotes ── */
|
||||||
|
.project-body blockquote {
|
||||||
|
margin: 1.5rem 0;
|
||||||
|
padding: 0.8rem 1.5rem;
|
||||||
|
border-left: 3px solid #ff3c3c;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
border-radius: 0 8px 8px 0;
|
||||||
|
color: #aaa;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-body blockquote p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Tables ── */
|
||||||
|
.project-body table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin: 1.5rem 0;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-link a:hover {
|
.project-body thead th {
|
||||||
color: #ff3c3c;
|
text-align: left;
|
||||||
|
padding: 0.6rem 0.8rem;
|
||||||
|
border-bottom: 2px solid rgba(255, 255, 255, 0.15);
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-body tbody td {
|
||||||
|
padding: 0.5rem 0.8rem;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
color: #bbb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-body tbody tr:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Horizontal Rules ── */
|
||||||
|
.project-body hr {
|
||||||
|
border: none;
|
||||||
|
height: 1px;
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
margin: 3rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Lists ── */
|
||||||
|
.project-body ul, .project-body ol {
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
margin-bottom: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-body li {
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Grafana Embeds ── */
|
||||||
|
.grafana-embed {
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grafana-embed iframe {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Responsive ── */
|
/* ── Responsive ── */
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
.centered h1 { font-size: 2rem; }
|
.centered h1 { font-size: 2rem; }
|
||||||
.page-content { margin: 2rem auto; }
|
.page-content { margin: 2rem auto; padding: 0 1.2rem; }
|
||||||
.project-grid { grid-template-columns: 1fr; }
|
.project-grid { grid-template-columns: 1fr; }
|
||||||
|
.article-header h1 { font-size: 1.6rem; }
|
||||||
|
.project-body { font-size: 0.95rem; }
|
||||||
|
.project-body pre { padding: 1rem; }
|
||||||
|
.project-body table { font-size: 0.8rem; }
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,25 +2,30 @@
|
|||||||
{{- partial "background.html" . -}}
|
{{- partial "background.html" . -}}
|
||||||
|
|
||||||
<main class="page-content">
|
<main class="page-content">
|
||||||
<h1>{{ .Title }}</h1>
|
<header class="article-header">
|
||||||
|
<div class="article-meta">
|
||||||
<p class="tags">
|
<time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "Jan 2, 2006" }}</time>
|
||||||
{{ range .Params.tags }}
|
<span class="meta-sep">·</span>
|
||||||
<span class="tag">{{ . }}</span>
|
<span>{{ math.Round (div (countwords .Content) 200.0) }} min read</span>
|
||||||
{{ end }}
|
</div>
|
||||||
</p>
|
<h1>{{ .Title }}</h1>
|
||||||
|
<p class="tags">
|
||||||
<div class="project-links">
|
{{ range .Params.tags }}
|
||||||
{{ with .Params.code }}<a href="{{ . }}">[Code]</a>{{ end }}
|
<span class="tag">{{ . }}</span>
|
||||||
{{ with .Params.demo }}<a href="{{ . }}">[Live Demo]</a>{{ end }}
|
{{ end }}
|
||||||
</div>
|
</p>
|
||||||
|
<div class="project-links">
|
||||||
|
{{ with .Params.code }}<a href="{{ . }}">Code ↗</a>{{ end }}
|
||||||
|
{{ with .Params.demo }}<a href="{{ . }}">Live Demo ↗</a>{{ end }}
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
<article class="project-body">
|
<article class="project-body">
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<div class="back-link">
|
<footer class="article-footer">
|
||||||
<a href="/projects/">← all projects</a>
|
<a href="/projects/">← all projects</a>
|
||||||
</div>
|
</footer>
|
||||||
</main>
|
</main>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|||||||
Reference in New Issue
Block a user