Skip to content

Commit e86543c

Browse files
julioestjulioest
committed
style: update feature panels and improve layout
1 parent 95638c7 commit e86543c

File tree

4 files changed

+121
-35
lines changed

4 files changed

+121
-35
lines changed

‎docs/website/data.json

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -90,25 +90,26 @@
9090
"description": "MrDocs understands C++ features such as attributes and noexcept functions.",
9191
"source": "terminate.cpp",
9292
"imageClass": "mrdocs",
93-
"boxClass": "box1 box-shape3 box270"
93+
"boxClass": "box3 box-shape3 box270",
94+
"alignClass": "align-center"
9495
},
9596
{
9697
"description": "Specially formatted comments are rendered to form a reference as part of documentation.",
9798
"source": "distance.cpp",
9899
"imageClass": "cards",
99-
"boxClass": "box1 box-shape1 box0"
100+
"boxClass": "box3 box-shape3 box0"
100101
},
101102
{
102103
"description": "Special directives are used to describe details about the symbols.",
103104
"source": "is_prime.cpp",
104105
"imageClass": "shouting",
105-
"boxClass": "box1 box-shape2 box90"
106+
"boxClass": "box3 box-shape3 box90"
106107
},
107108
{
108109
"description": "It understands concepts, constraints and SFINAE.",
109110
"source": "sqrt.cpp",
110111
"imageClass": "thinking",
111-
"boxClass": "box1 box-shape1 box180"
112+
"boxClass": "box3 box-shape3 box180"
112113
}
113114
]
114115
}

‎docs/website/index.html

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ <h4>Customizable</h4>
134134
</div>
135135
</div>
136136
</section>
137-
<section id="features">
137+
<section id="features" class="features">
138138
<div class="container">
139139
<hgroup>
140140
<h2>More Code, Fewer Workarounds</h2>
@@ -155,8 +155,10 @@ <h3>MrDocs let's you keep the code simple and maintainable.</h3>
155155
[[noreturn]]
156156
<span class="hljs-function"><span class="hljs-type">void</span>
157157
<span class="hljs-title">terminate</span><span class="hljs-params">()</span> <span class="hljs-keyword">noexcept</span></span>;</code></pre>
158-
<div class="box1 box-shape3 box270">
159-
<div class="inner-box mrdocs"></div>
158+
<div class="snippet-image">
159+
<div class="box3 box-shape3 box270">
160+
<div class="inner-box mrdocs"></div>
161+
</div>
160162
</div>
161163
</div>
162164
<div class="documentation-panel">
@@ -212,8 +214,10 @@ <h4>NOTE</h4>
212214
*/</span>
213215
<span class="hljs-function"><span class="hljs-type">double</span>
214216
<span class="hljs-title">distance</span><span class="hljs-params">(<span class="hljs-type">double</span> x0, <span class="hljs-type">double</span> y0, <span class="hljs-type">double</span> x1, <span class="hljs-type">double</span> y1)</span></span>;</code></pre>
215-
<div class="box1 box-shape1 box0">
216-
<div class="inner-box cards"></div>
217+
<div class="snippet-image">
218+
<div class="box3 box-shape3 box0">
219+
<div class="inner-box cards"></div>
220+
</div>
217221
</div>
218222
</div>
219223
<div class="documentation-panel">
@@ -300,8 +304,10 @@ <h3>Parameters</h3>
300304
*/</span>
301305
<span class="hljs-function"><span class="hljs-type">bool</span>
302306
<span class="hljs-title">is_prime</span><span class="hljs-params">(<span class="hljs-type">unsigned</span> <span class="hljs-type">long</span> <span class="hljs-type">long</span> n)</span> <span class="hljs-keyword">noexcept</span></span>;</code></pre>
303-
<div class="box1 box-shape2 box90">
304-
<div class="inner-box shouting"></div>
307+
<div class="snippet-image">
308+
<div class="box3 box-shape3 box90">
309+
<div class="inner-box shouting"></div>
310+
</div>
305311
</div>
306312
</div>
307313
<div class="documentation-panel">
@@ -396,8 +402,10 @@ <h3>Parameters</h3>
396402
<span class="hljs-keyword">return</span> result;
397403
}
398404
</code></pre>
399-
<div class="box1 box-shape1 box180">
400-
<div class="inner-box thinking"></div>
405+
<div class="snippet-image">
406+
<div class="box3 box-shape3 box180">
407+
<div class="inner-box thinking"></div>
408+
</div>
401409
</div>
402410
</div>
403411
<div class="documentation-panel">

‎docs/website/index.html.hbs

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@
139139
</div>
140140
</div>
141141
</section> --}}
142-
<section id="features">
142+
<section id="features" class="features">
143143
<div class="container">
144144
<hgroup>
145145
<h2>More Code, Fewer Workarounds</h2>
@@ -153,8 +153,10 @@
153153
<div class="panel-container">
154154
<div class="snippet-panel">
155155
<pre><code>{{{ snippet }}}</code></pre>
156-
<div class="{{boxClass}}">
157-
<div class="inner-box {{imageClass}}"></div>
156+
<div class="snippet-image">
157+
<div class="{{boxClass}}">
158+
<div class="inner-box {{imageClass}}"></div>
159+
</div>
158160
</div>
159161
</div>
160162
<div class="documentation-panel">

‎docs/website/styles.css

Lines changed: 94 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
--font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
44
--line-height: 1.5;
55
--font-weight: 400;
6+
--font-weight-bold: 700;
67
--font-size: 16px;
78
--border-radius: 0.25rem;
89
--border-width: 1px;
@@ -20,7 +21,9 @@
2021
--nav-link-spacing-vertical: 0.5rem;
2122
--nav-link-spacing-horizontal: 0.5rem;
2223
--form-label-font-weight: var(--font-weight);
23-
--transition: 0.2s ease-in-out
24+
--transition: 0.2s ease-in-out;
25+
--function-name-color: #1de9b6;
26+
--function-name-color-hover: #0091ea;
2427
}
2528

2629
@media (min-width: 576px) {
@@ -923,6 +926,8 @@ input, select, textarea {
923926
box-shadow: var(--box-shadow);
924927
color: var(--color);
925928
font-weight: var(--font-weight);
929+
font-size: 1rem;
930+
line-height: var(--line-height);
926931
transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)
927932
}
928933

@@ -1476,7 +1481,8 @@ pre > code {
14761481
padding: var(--spacing);
14771482
background-color: rgba(0, 0, 0, 0.55);
14781483
font-size: 14px;
1479-
line-height: var(--line-height)
1484+
line-height: var(--line-height);
1485+
overflow-x: auto;
14801486
}
14811487

14821488
code b {
@@ -2370,18 +2376,11 @@ hgroup {
23702376
text-align: center
23712377
}
23722378

2373-
hgroup h2 {
2374-
margin-bottom: var(--spacing)
2375-
}
23762379

23772380
hgroup:after {
23782381
display: none
23792382
}
23802383

2381-
h3 {
2382-
--font-weight: 400
2383-
}
2384-
23852384
svg {
23862385
color: var(--primary);
23872386
width: auto;
@@ -2662,37 +2661,89 @@ section#demo {
26622661
.panel-container {
26632662
display: flex;
26642663
flex-direction: column;
2665-
gap: 1.5rem;
2664+
gap: 1rem;
26662665
}
26672666

26682667
@media (min-width: 768px) {
26692668
.panel-container {
26702669
flex-direction: row;
2671-
gap: 2.5rem;
26722670
}
26732671
}
26742672

26752673
.snippet-panel {
26762674
flex: 1;
2677-
margin-right: 10px; /* adjust as needed */
2675+
}
2676+
2677+
@media (min-width: 768px) {
2678+
.snippet-panel {
2679+
width: 50%;
2680+
}
2681+
}
2682+
2683+
.snippet-documentation-panel {
2684+
margin: var(--block-spacing-vertical) 0;
2685+
}
2686+
2687+
.snippet-documentation-panel h2 {
2688+
font-size: 2.0rem;
26782689
}
26792690

26802691
.documentation-panel {
26812692
background-color: rgba(255, 255, 255, 0.10);
2682-
border-radius: 20px;
2693+
border-radius: var(--border-radius);
26832694
flex: 1;
2684-
padding: 30px;
2695+
height: 100%;
2696+
padding: 1rem;
26852697
backdrop-filter: blur(10px);
26862698
border: 1px solid rgba(255, 255, 255, 0.15);
26872699
}
26882700

2689-
.snippet-documentation-panel {
2690-
margin-top: 20px;
2691-
margin-bottom: 20px;
2701+
.documentation-panel > div:first-child {
2702+
display: flex;
2703+
flex-direction: column;
2704+
gap: 1rem;
26922705
}
26932706

2694-
.snippet-documentation-panel h2 {
2695-
font-size: 2.0rem;
2707+
.documentation-panel h2 {
2708+
margin-bottom: var(--spacing);
2709+
}
2710+
2711+
.documentation-panel h2, .documentation-panel h2 a {
2712+
color: var(--function-name-color);
2713+
}
2714+
2715+
.documentation-panel h3 {
2716+
font-size: 1.25rem;
2717+
color: #fff;
2718+
margin-top: 0;
2719+
margin-bottom: 0;
2720+
}
2721+
2722+
.documentation-panel p {
2723+
font-size: 1rem;
2724+
color: #e0e6ed;
2725+
margin-bottom: 1em;
2726+
}
2727+
2728+
.documentation-panel div pre {
2729+
margin-bottom: 0;
2730+
}
2731+
2732+
.documentation-panel .admonition {
2733+
background: rgba(126, 224, 255, 0.10);
2734+
border: 2px solid rgba(126, 224, 255, 0.10);
2735+
border-radius: var(--border-radius);
2736+
padding: 0.5rem 0.75rem;
2737+
backdrop-filter: blur(10px);
2738+
/* margin: 1em 0; */
2739+
}
2740+
2741+
.documentation-panel .admonition h4 {
2742+
font-size: 0.95rem;
2743+
font-weight: 600;
2744+
color: #7ee0ff;
2745+
margin-bottom: 0.2em;
2746+
letter-spacing: 0.01em;
26962747
}
26972748

26982749
.halign-left {
@@ -2791,6 +2842,7 @@ nav {
27912842
}
27922843

27932844
.banner-snippet code {
2845+
color: #fff;
27942846
margin-top: 0.5rem;
27952847
background-color:rgba(255, 255, 255, 0.10);
27962848
}
@@ -3121,3 +3173,26 @@ header .header-image {
31213173
row-gap: 1rem;
31223174
}
31233175
}
3176+
3177+
.features hgroup {
3178+
margin-bottom: var(--block-spacing-vertical);
3179+
}
3180+
3181+
/* Alignment helpers for flex/grid children */
3182+
.align-left { justify-self: start !important; align-self: start !important; }
3183+
.align-center { justify-self: center !important; align-self: center !important; }
3184+
.align-right { justify-self: end !important; align-self: end !important; }
3185+
3186+
.align-top { align-self: start !important; }
3187+
.align-middle { align-self: center !important; }
3188+
.align-bottom { align-self: end !important; }
3189+
3190+
/* For flex containers (if needed) */
3191+
.flex-align-left { margin-right: auto !important; }
3192+
.flex-align-center { margin-left: auto !important; margin-right: auto !important; }
3193+
.flex-align-right { margin-left: auto !important; }
3194+
3195+
.snippet-image {
3196+
display: flex;
3197+
height: 100%;
3198+
}

0 commit comments

Comments
 (0)