Skip to content

Commit 649723c

Browse files
jsneljsnel
authored
👌 Make Astro and GH pages play nice 🎨 (#9)
* Make Astro and GH pages play nice * Some more styling fixes
1 parent c75d13a commit 649723c

3 files changed

Lines changed: 84 additions & 83 deletions

File tree

‎src/content/software/glotaran-legacy.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ badges:
1313
- v1.5.1
1414
---
1515

16-
# About glotaran-legacy (Glotaran 1.x)
16+
# About glotaran-legacy
1717

1818
The original — and still the most-cited — tool for global and target
1919
analysis of time-resolved spectroscopy data. With over 1,500 citations

‎src/layouts/Base.astro‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ const {
3030
href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:ital,wght@0,300;0,400;0,600;1,300&family=DM+Sans:wght@300;400;500&display=swap"
3131
rel="stylesheet"
3232
/>
33+
34+
<slot name="head" />
3335
</head>
3436
<body>
3537
<slot />

‎src/pages/software/[slug].astro‎

Lines changed: 81 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,87 @@ const activeNav = pkg.slug === 'glotaran-legacy'
3737
---
3838

3939
<Base title={`${pkg.data.name} — GloTarAn`} description={pkg.data.summary}>
40+
<style is:inline slot="head">
41+
.spectrum-bar { height: 3px; background: linear-gradient(90deg, #9c27b0,#3f51b5,#03a9f4,#00bcd4,#4caf50,#cddc39,#ffc107,#ff5722,#f44336); }
42+
43+
nav { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 2.5rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: rgba(12,14,18,0.92); backdrop-filter: blur(12px); z-index: 100; }
44+
.nav-logo { display: flex; align-items: baseline; gap: 0.1em; text-decoration: none; }
45+
.nav-logo-glo { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: var(--text); letter-spacing: -0.02em; }
46+
.nav-logo-tar { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: 1.4rem; color: var(--text-muted); }
47+
.nav-logo-an { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: var(--text); }
48+
.nav-links { display: flex; gap: 2rem; list-style: none; }
49+
.nav-links a { color: var(--text-muted); text-decoration: none; font-size: 0.875rem; transition: color 0.15s; }
50+
.nav-links a:hover { color: var(--text); }
51+
.nav-cta { background: transparent; border: 1px solid var(--border-hover); color: var(--text); padding: 0.45rem 1.1rem; border-radius: 6px; font-size: 0.875rem; text-decoration: none; }
52+
.nav-cta:hover { background: rgba(255,255,255,0.05); }
53+
54+
main { max-width: 800px; margin: 0 auto; padding: 0 2.5rem 5rem; }
55+
56+
.pkg-hero { padding: 4rem 0 3rem; border-bottom: 1px solid var(--border); margin-bottom: 3rem; }
57+
.pkg-hero-meta { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
58+
.lang-badge { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; padding: 0.2rem 0.6rem; border-radius: 4px; }
59+
.lang-badge.python { background: rgba(74,222,128,0.12); color: var(--accent-py); }
60+
.lang-badge.r { background: rgba(117,170,219,0.12); color: var(--accent-r); }
61+
.lang-badge.java { background: rgba(248,152,32,0.12); color: var(--accent-java); }
62+
.status-badge { font-family: var(--font-mono); font-size: 0.72rem; padding: 0.2rem 0.6rem; border-radius: 4px; }
63+
.status-badge.archived { background: rgba(255,255,255,0.05); color: var(--text-dim); }
64+
.status-badge.stable { background: rgba(165,214,167,0.08); color: #a5d6a7; }
65+
.status-badge.wip { background: rgba(255,214,0,0.08); color: #ffd54f; }
66+
67+
h1 { font-family: var(--font-mono); font-size: 2rem; font-weight: 500; color: var(--text); margin-bottom: 0.75rem; }
68+
.pkg-summary { font-size: 1.05rem; color: var(--text-muted); max-width: 600px; line-height: 1.6; margin-bottom: 2rem; }
69+
70+
.pkg-links { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
71+
.link-btn { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); text-decoration: none; border: 1px solid var(--border); padding: 0.4rem 1rem; border-radius: 6px; transition: color 0.15s, border-color 0.15s; }
72+
.link-btn:hover { color: var(--text); border-color: var(--border-hover); }
73+
.link-btn.primary { background: var(--text); color: var(--bg); border-color: transparent; }
74+
.link-btn.primary:hover { opacity: 0.85; }
75+
76+
.pkg-version { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-dim); }
77+
.pkg-version code { color: var(--text-muted); }
78+
79+
.pkg-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
80+
.pkg-badge { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-dim); border: 1px solid var(--border); padding: 0.15rem 0.55rem; border-radius: 10rem; letter-spacing: 0.01em; }
81+
82+
.pkg-body { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 2.5rem 2.5rem 2rem; }
83+
84+
.prose { color: var(--text-muted); line-height: 1.75; font-size: 0.95rem; }
85+
.prose h2 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 300; color: var(--text); margin: 3rem 0 1rem; letter-spacing: -0.01em; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
86+
.prose h2:first-child { margin-top: 0; }
87+
.prose h3 { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 500; color: var(--text); margin: 2rem 0 0.6rem; }
88+
.prose p { margin-bottom: 1rem; }
89+
.prose a { color: var(--accent-py); text-decoration: none; }
90+
.prose a:hover { text-decoration: underline; }
91+
92+
.prose ul, .prose ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
93+
.prose ul { list-style: disc; }
94+
.prose ul li::marker { color: var(--text-dim); }
95+
.prose ol { list-style-position: outside; }
96+
.prose li { margin-bottom: 0.5rem; line-height: 1.7; padding-left: 0.35rem; }
97+
98+
.prose strong { color: var(--text); font-weight: 500; }
99+
.prose blockquote { border-left: 2px solid var(--accent-py); padding: 0.75rem 1.25rem; color: var(--text-dim); font-style: italic; margin: 1.5rem 0; background: rgba(79,195,247,0.04); border-radius: 0 6px 6px 0; }
100+
101+
.prose pre { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem 1.5rem; overflow-x: auto; margin: 1.75rem 0; position: relative; }
102+
.prose code { font-family: var(--font-mono); font-size: 0.85em; }
103+
.prose pre code { font-size: 0.82rem; color: var(--text); background: none; }
104+
.prose :not(pre) > code { background: rgba(255,255,255,0.06); padding: 0.15em 0.4em; border-radius: 3px; color: var(--accent-py); }
105+
.prose hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; }
106+
107+
footer { max-width: 800px; margin: 0 auto; padding: 2rem 2.5rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
108+
.footer-copy { font-size: 0.78rem; color: var(--text-dim); }
109+
.footer-back { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-dim); text-decoration: none; transition: color 0.15s; }
110+
.footer-back:hover { color: var(--text-muted); }
111+
112+
@media (max-width: 640px) {
113+
main { padding: 0 1.25rem 3rem; }
114+
.pkg-hero { padding: 2.5rem 0 2rem; }
115+
.pkg-body { padding: 1.5rem 1.25rem 1.25rem; }
116+
h1 { font-size: 1.5rem; }
117+
footer { padding: 1.5rem 1.25rem; }
118+
}
119+
</style>
120+
40121
<div class="spectrum-bar"></div>
41122

42123
<SiteNav active={activeNav} />
@@ -92,85 +173,3 @@ const activeNav = pkg.slug === 'glotaran-legacy'
92173
<a href="/" class="footer-back">← All packages</a>
93174
</footer>
94175
</Base>
95-
96-
<style>
97-
.spectrum-bar { height: 3px; background: linear-gradient(90deg, #9c27b0,#3f51b5,#03a9f4,#00bcd4,#4caf50,#cddc39,#ffc107,#ff5722,#f44336); }
98-
99-
nav { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 2.5rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: rgba(12,14,18,0.92); backdrop-filter: blur(12px); z-index: 100; }
100-
.nav-logo { display: flex; align-items: baseline; gap: 0.1em; text-decoration: none; }
101-
.nav-logo-glo { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: var(--text); letter-spacing: -0.02em; }
102-
.nav-logo-tar { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: 1.4rem; color: var(--text-muted); }
103-
.nav-logo-an { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: var(--text); }
104-
.nav-links { display: flex; gap: 2rem; list-style: none; }
105-
.nav-links a { color: var(--text-muted); text-decoration: none; font-size: 0.875rem; transition: color 0.15s; }
106-
.nav-links a:hover { color: var(--text); }
107-
.nav-cta { background: transparent; border: 1px solid var(--border-hover); color: var(--text); padding: 0.45rem 1.1rem; border-radius: 6px; font-size: 0.875rem; text-decoration: none; }
108-
.nav-cta:hover { background: rgba(255,255,255,0.05); }
109-
110-
main { max-width: 800px; margin: 0 auto; padding: 0 2.5rem 5rem; }
111-
112-
.pkg-hero { padding: 4rem 0 3rem; border-bottom: 1px solid var(--border); margin-bottom: 3rem; }
113-
.pkg-hero-meta { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
114-
.lang-badge { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; padding: 0.2rem 0.6rem; border-radius: 4px; }
115-
.lang-badge.python { background: rgba(74,222,128,0.12); color: var(--accent-py); }
116-
.lang-badge.r { background: rgba(117,170,219,0.12); color: var(--accent-r); }
117-
.lang-badge.java { background: rgba(248,152,32,0.12); color: var(--accent-java); }
118-
.status-badge { font-family: var(--font-mono); font-size: 0.72rem; padding: 0.2rem 0.6rem; border-radius: 4px; }
119-
.status-badge.archived { background: rgba(255,255,255,0.05); color: var(--text-dim); }
120-
.status-badge.stable { background: rgba(165,214,167,0.08); color: #a5d6a7; }
121-
.status-badge.wip { background: rgba(255,214,0,0.08); color: #ffd54f; }
122-
123-
h1 { font-family: var(--font-mono); font-size: 2rem; font-weight: 500; color: var(--text); margin-bottom: 0.75rem; }
124-
.pkg-summary { font-size: 1.05rem; color: var(--text-muted); max-width: 600px; line-height: 1.6; margin-bottom: 2rem; }
125-
126-
.pkg-links { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
127-
.link-btn { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); text-decoration: none; border: 1px solid var(--border); padding: 0.4rem 1rem; border-radius: 6px; transition: color 0.15s, border-color 0.15s; }
128-
.link-btn:hover { color: var(--text); border-color: var(--border-hover); }
129-
.link-btn.primary { background: var(--text); color: var(--bg); border-color: transparent; }
130-
.link-btn.primary:hover { opacity: 0.85; }
131-
132-
.pkg-version { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-dim); }
133-
.pkg-version code { color: var(--text-muted); }
134-
135-
.pkg-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
136-
.pkg-badge { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-dim); border: 1px solid var(--border); padding: 0.15rem 0.55rem; border-radius: 10rem; letter-spacing: 0.01em; }
137-
138-
/* ─── PROSE ─── */
139-
.pkg-body { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 2.5rem 2.5rem 2rem; }
140-
141-
.prose { color: var(--text-muted); line-height: 1.75; font-size: 0.95rem; }
142-
.prose :global(h2) { font-family: var(--font-display); font-size: 1.4rem; font-weight: 300; color: var(--text); margin: 3rem 0 1rem; letter-spacing: -0.01em; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
143-
.prose :global(h2:first-child) { margin-top: 0; }
144-
.prose :global(h3) { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 500; color: var(--text); margin: 2rem 0 0.6rem; }
145-
.prose :global(p) { margin-bottom: 1rem; }
146-
.prose :global(a) { color: var(--accent-py); text-decoration: none; }
147-
.prose :global(a:hover) { text-decoration: underline; }
148-
149-
.prose :global(ul), .prose :global(ol) { padding-left: 1.5rem; margin-bottom: 1.25rem; }
150-
.prose :global(ul) { list-style: disc; }
151-
.prose :global(ul li::marker) { color: var(--text-dim); }
152-
.prose :global(ol) { list-style-position: outside; }
153-
.prose :global(li) { margin-bottom: 0.5rem; line-height: 1.7; padding-left: 0.35rem; }
154-
155-
.prose :global(strong) { color: var(--text); font-weight: 500; }
156-
.prose :global(blockquote) { border-left: 2px solid var(--accent-py); padding: 0.75rem 1.25rem; color: var(--text-dim); font-style: italic; margin: 1.5rem 0; background: rgba(79,195,247,0.04); border-radius: 0 6px 6px 0; }
157-
158-
.prose :global(pre) { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem 1.5rem; overflow-x: auto; margin: 1.75rem 0; position: relative; }
159-
.prose :global(code) { font-family: var(--font-mono); font-size: 0.85em; }
160-
.prose :global(pre code) { font-size: 0.82rem; color: var(--text); background: none; }
161-
.prose :global(:not(pre) > code) { background: rgba(255,255,255,0.06); padding: 0.15em 0.4em; border-radius: 3px; color: var(--accent-py); }
162-
.prose :global(hr) { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; }
163-
164-
footer { max-width: 800px; margin: 0 auto; padding: 2rem 2.5rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
165-
.footer-copy { font-size: 0.78rem; color: var(--text-dim); }
166-
.footer-back { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-dim); text-decoration: none; transition: color 0.15s; }
167-
.footer-back:hover { color: var(--text-muted); }
168-
169-
@media (max-width: 640px) {
170-
main { padding: 0 1.25rem 3rem; }
171-
.pkg-hero { padding: 2.5rem 0 2rem; }
172-
.pkg-body { padding: 1.5rem 1.25rem 1.25rem; }
173-
h1 { font-size: 1.5rem; }
174-
footer { padding: 1.5rem 1.25rem; }
175-
}
176-
</style>

0 commit comments

Comments
 (0)