jimeh/commonflow.org
1
0
Fork 0
mirror of https://github.com/jimeh/commonflow.org.git synced 2026-02-19 05:46:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip: simplify CSS

Browse Source
This commit is contained in:
Jim Myhrberg
2026-01-10 22:47:42 +00:00
parent b22cf35953
commit 4722094f0c
3 changed files with 59 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AboutSection.astro
View File

@@ -10,7 +10,7 @@ interface Props {
const { introduction, summary, license } = Astro.props;
---
<section id="about" class="py-20 sm:py-28">
<section id="about" class="py-20 sm:py-28 bg-gray-100 dark:bg-slate-900/30">
<div class="section-container">
<div class="max-w-3xl mx-auto">
<!-- Section header -->

126
src/components/SpecSection.astro
View File

@@ -31,7 +31,7 @@ const { terminology, terminologyTitle, specification, tocItems } = Astro.props;
<!-- Main content -->
<div class="flex-1 min-w-0">
<article class="prose-spec spec-content">
<article class="prose-spec">
<!-- Terminology -->
<section id="terminology">
<h2>{terminologyTitle}</h2>
@@ -48,127 +48,3 @@ const { terminology, terminologyTitle, specification, tocItems } = Astro.props;
</div>
</div>
</section>
<style>
.spec-content {
max-width: var(--content-max-width);
}
.spec-content :global(h2) {
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 700;
margin-top: 3rem;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
scroll-margin-top: calc(var(--header-height) + 2rem);
border-bottom: 1px solid #e5e5e5;
color: #0a0a0a;
}
:global(.dark) .spec-content :global(h2) {
border-bottom-color: #1e293b;
color: #f8fafc;
}
.spec-content :global(h2:first-child) {
margin-top: 0;
}
.spec-content :global(h3) {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 600;
margin-top: 2rem;
margin-bottom: 1rem;
color: #525252;
}
:global(.dark) .spec-content :global(h3) {
color: #94a3b8;
}
.spec-content :global(p) {
margin-bottom: 1.25rem;
color: #525252;
}
:global(.dark) .spec-content :global(p) {
color: #94a3b8;
}
.spec-content :global(strong) {
font-weight: 600;
color: #0a0a0a;
}
:global(.dark) .spec-content :global(strong) {
color: #f8fafc;
}
.spec-content :global(ul) {
margin-bottom: 1.25rem;
padding-left: 1.5rem;
}
.spec-content :global(ol) {
margin-bottom: 1.25rem;
padding-left: 2.5rem;
counter-reset: item;
list-style: none;
}
.spec-content :global(ol > li) {
counter-increment: item;
position: relative;
}
.spec-content :global(ol > li::before) {
content: counters(item, ".") ".";
position: absolute;
left: -2.5rem;
width: 2rem;
text-align: right;
font-weight: 500;
color: #737373;
}
/* Scroll margin for anchored spec sections */
.spec-content :global(ol > li[id]) {
scroll-margin-top: calc(var(--header-height) + 2rem);
}
.spec-content :global(li) {
margin-bottom: 0.5rem;
color: #525252;
}
:global(.dark) .spec-content :global(li) {
color: #94a3b8;
}
.spec-content :global(a) {
color: var(--color-accent);
text-decoration: none;
transition: color 150ms ease;
}
.spec-content :global(a:hover) {
color: var(--color-accent-light);
}
.spec-content :global(blockquote) {
border-left: 3px solid var(--color-accent);
padding-left: 1.5rem;
margin: 1.5rem 0;
font-style: italic;
color: #737373;
}
.spec-content :global(img) {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 2rem 0;
}
</style>

58
src/styles/global.css
View File

@@ -353,8 +353,10 @@ html {
}
.prose-spec h2 {
font-size: 1.75rem;
margin-top: 3rem;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
margin-top: 4rem;
border-bottom: 1px solid #e5e5e5;
}
@@ -362,7 +364,15 @@ html {
border-bottom-color: #1e293b;
}
.prose-spec h2:first-child {
margin-top: 0;
}
.prose-spec h3 {
font-size: 1.25rem;
font-weight: 600;
margin-top: 2rem;
margin-bottom: 1rem;
color: #525252;
}
@@ -370,6 +380,52 @@ html {
color: #94a3b8;
}
.prose-spec p {
color: #525252;
}
.dark .prose-spec p {
color: #94a3b8;
}
.prose-spec strong {
color: #0a0a0a;
}
.dark .prose-spec strong {
color: #f8fafc;
}
.prose-spec li {
color: #525252;
}
.dark .prose-spec li {
color: #94a3b8;
}
/* Nested ordered list counters (spec numbering: 1., 1.1., 1.2.) */
.prose-spec ol {
padding-left: 2.5rem;
counter-reset: item;
list-style: none;
}
.prose-spec ol > li {
counter-increment: item;
position: relative;
}
.prose-spec ol > li::before {
content: counters(item, ".") ".";
position: absolute;
left: -2.5rem;
width: 2rem;
text-align: right;
font-weight: 500;
color: #737373;
}
.prose-spec img {
max-width: 100%;
height: auto;