Skip to content

Commit 7e73a63

Browse files
jonphippsclaude
jonphipps
and
claude
committed
feat: enhance ISBDM index page visual design and component styling
- Add attractive hero section with gradient background and improved typography - Restructure navigation menu with "Elements" subheading and indented items - Enhance QuickStart and DownloadPanel components with prominent styling: - Secondary color gradients and 3px borders - Strong drop shadows and colored accent bars - Black headings for maximum contrast - Fix navbar docId reference to match updated frontmatter - Remove duplicate title and improve overall visual hierarchy 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent 70c7cf2 commit 7e73a63

File tree

4 files changed

+137
-61
lines changed

4 files changed

+137
-61
lines changed

‎packages/theme/src/components/DownloadPanel/styles.module.scss‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,28 @@
11
.downloadPanel {
2-
background: var(--ifm-card-background-color);
2+
background: linear-gradient(135deg, var(--ifm-color-secondary-lightest) 0%, rgba(255, 255, 255, 0.8) 100%);
3+
border: 3px solid var(--ifm-color-secondary);
34
border-radius: var(--ifm-card-border-radius);
45
padding: 2rem;
56
margin: 2rem 0;
6-
box-shadow: var(--ifm-global-shadow-lw);
7+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
8+
position: relative;
9+
10+
&::before {
11+
content: '';
12+
position: absolute;
13+
top: 0;
14+
left: 0;
15+
right: 0;
16+
height: 6px;
17+
background: linear-gradient(90deg, var(--ifm-color-secondary-dark) 0%, var(--ifm-color-secondary) 50%, var(--ifm-color-secondary-light) 100%);
18+
border-radius: var(--ifm-card-border-radius) var(--ifm-card-border-radius) 0 0;
19+
}
720

821
h2 {
922
margin-top: 0;
10-
color: var(--ifm-heading-color);
23+
color: #000000;
24+
font-weight: 700;
25+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
1126
}
1227
}
1328

‎packages/theme/src/components/QuickStart/styles.module.scss‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,28 @@
11
.quickstartPanel {
2-
background: var(--ifm-card-background-color);
2+
background: linear-gradient(135deg, var(--ifm-color-secondary-lightest) 0%, rgba(255, 255, 255, 0.8) 100%);
3+
border: 3px solid var(--ifm-color-secondary);
34
border-radius: var(--ifm-card-border-radius);
45
padding: 2rem;
56
margin: 2rem 0;
6-
box-shadow: var(--ifm-global-shadow-lw);
7+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
8+
position: relative;
9+
10+
&::before {
11+
content: '';
12+
position: absolute;
13+
top: 0;
14+
left: 0;
15+
right: 0;
16+
height: 6px;
17+
background: linear-gradient(90deg, var(--ifm-color-secondary-dark) 0%, var(--ifm-color-secondary) 50%, var(--ifm-color-secondary-light) 100%);
18+
border-radius: var(--ifm-card-border-radius) var(--ifm-card-border-radius) 0 0;
19+
}
720

821
h2 {
922
margin-top: 0;
10-
color: var(--ifm-heading-color);
23+
color: #000000;
24+
font-weight: 700;
25+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
1126
}
1227
}
1328

‎standards/ISBDM/docs/index.mdx‎

Lines changed: 100 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,141 @@
11
---
2-
id: index
3-
title: ISBD for Manifestation
2+
id: ISBD for Manifestation
43
slug: /
54
hide_table_of_contents: true
5+
hide_title: true
66
---
77

88
import { Figure } from '@ifla/theme';
99
import { InLink } from '@ifla/theme';
1010
import { OutLink } from '@ifla/theme';
1111
import { QuickStart, DownloadPanel } from '@ifla/theme';
1212

13-
# ISBD for Manifestation
13+
<div className="hero hero--primary" style={{
14+
background: 'linear-gradient(135deg, var(--ifla-color-primary-lightest) 0%, var(--ifla-color-primary-lighter) 100%)',
15+
borderRadius: 'var(--ifm-border-radius)',
16+
marginBottom: '2rem',
17+
padding: '2rem'
18+
}}>
19+
<div className="container">
20+
<div className="row">
21+
<div className="col col--12">
22+
<h1 className="hero__title" style={{
23+
fontSize: '2.5rem',
24+
marginBottom: '1rem',
25+
color: 'var(--ifm-color-primary-darkest)'
26+
}}>
27+
ISBD for Manifestation
28+
</h1>
29+
<p className="hero__subtitle" style={{
30+
fontSize: '1.2rem',
31+
color: 'var(--ifm-color-primary-dark)',
32+
marginBottom: '0'
33+
}}>
34+
International Standard Bibliographic Description for Resource Manifestation
35+
</p>
36+
</div>
37+
</div>
38+
</div>
39+
</div>
1440

15-
<div className="row my-2">
41+
<div className="row my-4">
1642
<div className="col-md-5">
1743
<div className="row gx-0 me-4">
1844
<div className="col-md-12">
19-
<nav className="d-flex flex-column" aria-label="Navigation for main sections">
20-
<div className="d-flex align-items-center">
21-
<InLink to="/docs/intro/" className="linkMenuEntry">Introduction</InLink>
45+
<nav className="d-flex flex-column" aria-label="Navigation for main sections" style={{
46+
background: 'var(--ifm-background-surface-color)',
47+
padding: '1.5rem',
48+
borderRadius: 'var(--ifm-border-radius)',
49+
border: '1px solid var(--ifm-color-emphasis-300)'
50+
}}>
51+
<div className="d-flex align-items-center" style={{ marginBottom: '0.75rem' }}>
52+
<InLink href="/docs/intro/">Introduction</InLink>
2253
</div>
2354

24-
<div className="d-flex align-items-center">
25-
<InLink to="/docs/assess/" className="linkMenuEntry">Assessment</InLink>
55+
<div className="d-flex align-items-center" style={{ marginBottom: '0.75rem' }}>
56+
<InLink href="/docs/assess/">Assessment</InLink>
2657
</div>
2758

28-
<div className="d-flex align-items-center">
29-
<InLink to="/docs/statements/" className="linkMenuEntry">Statements</InLink>
59+
<h4 style={{
60+
margin: '1rem 0 0.25rem 0',
61+
fontSize: '1rem',
62+
fontWeight: '600',
63+
color: 'var(--ifm-color-primary-dark)'
64+
}}>
65+
Elements
66+
</h4>
67+
68+
<div className="d-flex align-items-center" style={{ marginBottom: '0.75rem', marginLeft: '1rem' }}>
69+
<InLink href="/docs/statements/">Statements</InLink>
3070
</div>
3171

32-
<div className="d-flex align-items-center">
33-
<InLink to="/docs/notes/" className="linkMenuEntry">Notes</InLink>
72+
<div className="d-flex align-items-center" style={{ marginBottom: '0.75rem', marginLeft: '1rem' }}>
73+
<InLink href="/docs/notes/">Notes</InLink>
3474
</div>
3575

36-
<div className="d-flex align-items-center">
37-
<InLink to="/docs/attributes/" className="linkMenuEntry">Attributes</InLink>
76+
<div className="d-flex align-items-center" style={{ marginBottom: '0.75rem', marginLeft: '1rem' }}>
77+
<InLink href="/docs/attributes/">Attributes</InLink>
3878
</div>
3979

40-
<div className="d-flex align-items-center">
41-
<InLink to="/docs/relationships/" className="linkMenuEntry">Relationships</InLink>
80+
<div className="d-flex align-items-center" style={{ marginBottom: '1rem', marginLeft: '1rem' }}>
81+
<InLink href="/docs/relationships/">Relationships</InLink>
4282
</div>
4383

44-
<div className="d-flex align-items-center">
45-
<InLink to="/docs/ves/" className="linkMenuEntry">Values</InLink>
84+
<div className="d-flex align-items-center" style={{ marginBottom: '0.75rem' }}>
85+
<InLink href="/docs/ves/">Values</InLink>
4686
</div>
4787

48-
<div className="d-flex align-items-center">
49-
<InLink to="/docs/glossary/" className="linkMenuEntry">Glossary</InLink>
88+
<div className="d-flex align-items-center" style={{ marginBottom: '0.75rem' }}>
89+
<InLink href="/docs/glossary/">Glossary</InLink>
5090
</div>
5191

52-
<div className="d-flex align-items-center">
53-
<InLink to="/docs/fullex/" className="linkMenuEntry">Examples</InLink>
92+
<div className="d-flex align-items-center" style={{ marginBottom: '0.75rem' }}>
93+
<InLink href="/docs/fullex/">Examples</InLink>
5494
</div>
5595

5696
<div className="d-flex align-items-center">
57-
<InLink to="/docs/about/" className="linkMenuEntry">About</InLink>
97+
<InLink href="/docs/about/">About</InLink>
5898
</div>
5999
</nav>
60100
</div>
61101
</div>
62102
</div>
63103

64-
<div className="col-md-7 border rounded">
65-
<div className="row my-2">
66-
<div className="tptit">
67-
<p>ISBD for Manifestation</p>
68-
</div>
69-
70-
<div className="tpsor">
71-
<p>Developed by the ISBD for Manifestation Task Force</p>
72-
<p>Approved by the ISBD Review Group</p>
73-
<p>Pending approval by the IFLA Committee on Standards</p>
74-
<p>Pending endorsement by the IFLA Professional Committee</p>
75-
</div>
76-
77-
<div className="tppub">
78-
<p>Published as an online resource by IFLA: International Federation of Library Associations and Institutions</p>
79-
<p>First version: March 2025</p>
80-
<p>Current version: March 2025</p>
104+
<div className="col-md-7">
105+
<div className="card" style={{
106+
border: '2px solid var(--ifm-color-primary-lighter)',
107+
borderRadius: 'var(--ifm-border-radius)',
108+
background: 'var(--ifm-card-background-color)',
109+
padding: '2rem'
110+
}}>
111+
<div className="card__body">
112+
113+
<div className="tpsor" style={{ marginBottom: '1.5rem' }}>
114+
<p style={{ marginBottom: '0.5rem', color: 'var(--ifm-color-emphasis-800)' }}>
115+
<strong>Developed by:</strong> ISBD for Manifestation Task Force
116+
</p>
117+
<p style={{ marginBottom: '0.5rem', color: 'var(--ifm-color-emphasis-800)' }}>
118+
<strong>Approved by:</strong> ISBD Review Group
119+
</p>
120+
<p style={{ marginBottom: '0.5rem', color: 'var(--ifm-color-emphasis-700)' }}>
121+
<em>Pending approval by the IFLA Committee on Standards</em>
122+
</p>
123+
<p style={{ marginBottom: '0', color: 'var(--ifm-color-emphasis-700)' }}>
124+
<em>Pending endorsement by the IFLA Professional Committee</em>
125+
</p>
126+
</div>
127+
128+
<div className="tppub">
129+
<p style={{ marginBottom: '0.5rem', color: 'var(--ifm-color-emphasis-800)' }}>
130+
<strong>Published by:</strong> IFLA: International Federation of Library Associations and Institutions
131+
</p>
132+
<p style={{ marginBottom: '0.5rem', color: 'var(--ifm-color-emphasis-800)' }}>
133+
<strong>First version:</strong> March 2025
134+
</p>
135+
<p style={{ marginBottom: '0', color: 'var(--ifm-color-emphasis-800)' }}>
136+
<strong>Current version:</strong> March 2025
137+
</p>
138+
</div>
81139
</div>
82140
</div>
83141
</div>
@@ -96,16 +154,4 @@ import { QuickStart, DownloadPanel } from '@ifla/theme';
96154
xmlUrl="/rdf/xml/isbdm.xml"
97155
/>
98156

99-
<div className="row my-1 py-1 navISBDMMain text-center">
100-
<p className="m-0 p-0">&#10058;<OutLink to="/siteMap" className="linkFooter">Site map</OutLink>&#10058;</p>
101-
<div className="m-1 p-0">
102-
<OutLink to="https://creativecommons.org/licenses/by/4.0/" className="me-1">
103-
<Figure
104-
src="img/cc0_by.png"
105-
alt="Badge for Creative Commons Attribution 4.0 International license"
106-
caption=""
107-
/>
108-
</OutLink>
109-
<p className="m-0">Gordon Dunsire and Mirna Willer (Main design and content editors).</p>
110-
</div>
111-
</div>
157+

‎standards/ISBDM/navbar.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
export default [
33
{
44
type: 'doc',
5-
docId: 'index',
5+
docId: 'ISBD for Manifestation',
66
label: 'Introduction',
77
position: 'left' as const,
88
},

0 commit comments

Comments
 (0)