Skip to content

Commit 357c237

Browse files
author
Alex Bikeyev
committed
feat: redesign documentation homepage with hero section, card grid navigation, and enhanced visual styling
Add hero section to index.md with centered logo, title, and subtitle. Replace plain links with Material for MkDocs card grid layout for "Start here" and "Core concepts" sections. Add comprehensive CSS styling in extra.css including brand color variables, gradient header, typography improvements, card shadows, and navigation styling. Update mkdocs.yml theme palette from black to blue/cyan, add attr_list and md_in_html extensions for card grid support, and add pymdownx.emoji
1 parent 761bda0 commit 357c237

4 files changed

Lines changed: 212 additions & 20 deletions

File tree

‎docs/assets/brand/favicon.png‎

464 KB
Loading

‎docs/index.md‎

Lines changed: 63 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,72 @@
1-
<!-- markdownlint-disable MD033 MD041 -->
2-
<p align="center">
3-
<img src="assets/brand/om-core-logo-transparent.png" alt="OM Core" width="400">
4-
</p>
5-
<!-- markdownlint-enable MD033 MD041 -->
1+
<!-- markdownlint-disable -->
2+
<div class="om-hero">
3+
<img src="assets/brand/om-core-logo-transparent.png" alt="OM Core logo" class="om-hero-logo">
4+
<h1>OM Core Documentation</h1>
5+
<p class="om-hero-subtitle">
6+
A multidimensional modeling engine for structured financial, operational, and analytical models.
7+
</p>
8+
</div>
69

7-
# OM Core Documentation
8-
9-
OM Core is a multidimensional modeling engine for building structured financial, operational, and analytical models.
1010

1111
Instead of treating the spreadsheet grid as the model, OM Core represents the model using dimensions, cubes, groups, and rules. The grid is a view of the model, not the model itself.
1212

1313
## Start here
1414

15-
- [What is OM Core?](start/what-is-om-core.md)
16-
- [Why not spreadsheets?](start/why-not-spreadsheets.md)
17-
- [Quickstart](start/quickstart.md)
15+
<div class="grid cards" markdown>
16+
17+
- **What is OM Core?**
18+
19+
Understand the core idea: dimensions, cubes, groups, rules, and views.
20+
21+
[:octicons-arrow-right-24: Read more](start/what-is-om-core.md)
22+
23+
- **Why not spreadsheets?**
24+
25+
Learn why the grid is a view of the model, not the model itself.
26+
27+
[:octicons-arrow-right-24: Read more](start/why-not-spreadsheets.md)
28+
29+
- **Quickstart**
30+
31+
Build and calculate a small OM Core model.
32+
33+
[:octicons-arrow-right-24: Start now](start/quickstart.md)
34+
35+
</div>
1836

1937
## Core concepts
2038

21-
- [Dimensions](concepts/dimensions.md)
22-
- [Cubes](concepts/cubes.md)
23-
- [Rules](concepts/rules.md)
24-
- [Groups and Hierarchies](concepts/groups-and-hierarchies.md)
25-
- [Views](concepts/views.md)
39+
<div class="grid cards" markdown>
40+
41+
- **Dimensions**
42+
43+
Define the business axes of a model.
44+
45+
[:octicons-arrow-right-24: Open](concepts/dimensions.md)
46+
47+
- **Cubes**
48+
49+
Store model values over dimensions.
50+
51+
[:octicons-arrow-right-24: Open](concepts/cubes.md)
52+
53+
- **Rules**
54+
55+
Express business logic over semantic addresses.
56+
57+
[:octicons-arrow-right-24: Open](concepts/rules.md)
58+
59+
- **Groups and Hierarchies**
60+
61+
Organize model structure for navigation and presentation.
62+
63+
[:octicons-arrow-right-24: Open](concepts/groups-and-hierarchies.md)
64+
65+
- **Views**
66+
67+
Project cubes into grids for inspection and interaction.
68+
69+
[:octicons-arrow-right-24: Open](concepts/views.md)
70+
71+
</div>
72+
<!-- markdownlint-enable -->

‎docs/stylesheets/extra.css‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,143 @@
1+
:root {
2+
--om-navy: #071833;
3+
--om-blue: #1268ff;
4+
--om-cyan: #15b8d4;
5+
--om-green: #20c45a;
6+
--om-muted: #5f6b7a;
7+
--om-soft-bg: #f6f9fc;
8+
--om-border: #dbe7f0;
9+
}
10+
11+
.md-header {
12+
background: linear-gradient(90deg, var(--om-navy), #0b3d91 55%, #0f9f8f);
13+
}
14+
15+
.md-tabs {
16+
background: var(--om-navy);
17+
}
18+
19+
.md-header__title {
20+
font-weight: 700;
21+
letter-spacing: -0.02em;
22+
}
23+
124
.md-header__button.md-logo img,
225
.md-header__button.md-logo svg {
326
height: 1.5rem;
427
width: 1.5rem;
528
}
29+
30+
.md-main__inner {
31+
margin-top: 1.2rem;
32+
}
33+
34+
.md-content {
35+
max-width: 980px;
36+
}
37+
38+
.md-content__inner {
39+
padding-top: 0.5rem;
40+
}
41+
42+
.md-typeset h1 {
43+
color: var(--om-navy);
44+
font-weight: 700;
45+
letter-spacing: -0.035em;
46+
}
47+
48+
.md-typeset h2 {
49+
color: var(--om-navy);
50+
font-weight: 650;
51+
letter-spacing: -0.025em;
52+
margin-top: 2.2rem;
53+
}
54+
55+
.md-typeset p,
56+
.md-typeset li {
57+
font-size: 0.94rem;
58+
line-height: 1.72;
59+
}
60+
61+
.md-typeset a {
62+
color: #244bd8;
63+
}
64+
65+
.md-typeset a:hover {
66+
color: var(--om-cyan);
67+
}
68+
69+
.om-hero {
70+
text-align: center;
71+
padding: 2.2rem 1rem 2.4rem;
72+
margin: 0 0 2rem;
73+
border: 1px solid var(--om-border);
74+
border-radius: 22px;
75+
background:
76+
radial-gradient(circle at 20% 20%, rgba(18, 104, 255, 0.10), transparent 28%),
77+
radial-gradient(circle at 80% 30%, rgba(32, 196, 90, 0.10), transparent 24%),
78+
linear-gradient(180deg, #ffffff, var(--om-soft-bg));
79+
}
80+
81+
.om-hero-logo {
82+
width: min(360px, 80%);
83+
height: auto;
84+
margin-bottom: 1.2rem;
85+
}
86+
87+
.om-hero h1 {
88+
margin: 0;
89+
font-size: clamp(2rem, 4vw, 3.2rem);
90+
color: var(--om-navy);
91+
}
92+
93+
.om-hero-subtitle {
94+
max-width: 720px;
95+
margin: 1rem auto 0;
96+
color: var(--om-muted);
97+
font-size: 1.05rem;
98+
line-height: 1.65;
99+
}
100+
101+
.md-typeset .grid.cards > ul > li,
102+
.md-typeset .grid > .card {
103+
border: 1px solid var(--om-border);
104+
border-radius: 16px;
105+
box-shadow: 0 8px 24px rgba(7, 24, 51, 0.06);
106+
}
107+
108+
.md-nav__title {
109+
color: var(--om-navy);
110+
font-weight: 700;
111+
}
112+
113+
.md-nav__item--nested > .md-nav__link {
114+
color: var(--om-navy);
115+
font-weight: 700;
116+
}
117+
118+
.md-nav__item .md-nav__link--active {
119+
color: var(--om-blue);
120+
font-weight: 700;
121+
}
122+
123+
.md-sidebar .md-nav__title {
124+
background: transparent;
125+
}
126+
127+
.md-typeset code {
128+
border-radius: 6px;
129+
}
130+
131+
.md-typeset pre > code {
132+
border-radius: 12px;
133+
}
134+
135+
.md-typeset .headerlink {
136+
color: var(--om-cyan);
137+
opacity: 0;
138+
transition: opacity 0.15s ease;
139+
}
140+
141+
.md-typeset .headerlink:hover {
142+
opacity: 1;
143+
}

‎mkdocs.yml‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ theme:
1010
logo: assets/brand/om-core-icon.png
1111
favicon: assets/brand/om-core-icon.png
1212
palette:
13-
primary: black
13+
- scheme: default
14+
primary: blue
15+
accent: cyan
1416
features:
1517
- navigation.sections
1618
- navigation.expand
@@ -24,12 +26,17 @@ extra_css:
2426

2527
markdown_extensions:
2628
- admonition
27-
- toc:
28-
permalink: true
29+
- attr_list
30+
- md_in_html
2931
- tables
3032
- fenced_code
31-
- pymdownx.superfences
33+
- toc:
34+
permalink: true
3235
- pymdownx.details
36+
- pymdownx.emoji:
37+
emoji_index: !!python/name:material.extensions.emoji.twemoji
38+
emoji_generator: !!python/name:material.extensions.emoji.to_svg
39+
- pymdownx.superfences
3340

3441
nav:
3542
- Home: index.md

0 commit comments

Comments
 (0)