Skip to content

Commit 64fc9bd

Browse files
julioestjulioest
committed
style: update principles section layout and styles
1 parent 49f147d commit 64fc9bd

File tree

3 files changed

+112
-59
lines changed

3 files changed

+112
-59
lines changed

‎docs/website/index.html‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -57,21 +57,31 @@ <h1>MrDocs</h1>
5757
</div>
5858
<div class="header-image">
5959
<div class="box1 box-shape2 box270">
60-
<div class="inner-box thinking"></div>
60+
<div class="inner-box mrdocs"></div>
6161
</div>
6262
</div>
6363
</div>
6464
</header>
6565
<main>
6666
<div class="dotted"></div>
6767
<div class="dotted-right"></div>
68-
<section id="principles">
68+
<section class="principles">
6969
<div class="container">
70-
<hgroup>
71-
<h2>Simple code, simple documentation</h2>
72-
<h3>MrDocs understands C++ so you can focus on keeping the code simple.</h3>
73-
</hgroup>
74-
<div class="grid">
70+
<div class="grid principles-banner">
71+
<div class="principles-image">
72+
<div class="box1 box-shape2 box270">
73+
<div class="inner-box thinking"></div>
74+
</div>
75+
</div>
76+
<div class="principles-content">
77+
<hgroup>
78+
<h2>Simple code, simple documentation</h2>
79+
<h3>MrDocs understands C++ so you can focus on keeping the code simple.</h3>
80+
</hgroup>
81+
</div>
82+
</div>
83+
84+
<div class="grid principles-features">
7585
<div>
7686
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg"
7787
viewBox="0 0 640 512" height="16px">
@@ -502,7 +512,7 @@ <h3>Parameters</h3>
502512
document.addEventListener('DOMContentLoaded', function() {
503513
const nav = document.querySelector('.nav');
504514
const body = document.body;
505-
const scrollThreshold = 100; // Show nav after 100px scroll
515+
const scrollThreshold = 300;
506516

507517
function handleScroll() {
508518
const currentScrollY = window.scrollY;

‎docs/website/index.html.hbs‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -68,21 +68,31 @@
6868
</div>
6969
<div class="header-image">
7070
<div class="box1 box-shape2 box270">
71-
<div class="inner-box thinking"></div>
71+
<div class="inner-box mrdocs"></div>
7272
</div>
7373
</div>
7474
</div>
7575
</header>
7676
<main>
7777
<div class="dotted"></div>
7878
<div class="dotted-right"></div>
79-
<section id="principles">
79+
<section class="principles">
8080
<div class="container">
81-
<hgroup>
82-
<h2>{{ banner.header }}</h2>
83-
<h3>{{ banner.subheader }}</h3>
84-
</hgroup>
85-
<div class="grid">
81+
<div class="grid principles-banner">
82+
<div class="principles-image">
83+
<div class="box1 box-shape2 box270">
84+
<div class="inner-box thinking"></div>
85+
</div>
86+
</div>
87+
<div class="principles-content">
88+
<hgroup>
89+
<h2>{{ banner.header }}</h2>
90+
<h3>{{ banner.subheader }}</h3>
91+
</hgroup>
92+
</div>
93+
</div>
94+
95+
<div class="grid principles-features">
8696
{{#each features}}
8797
<div>
8898
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg"
@@ -188,7 +198,7 @@
188198
document.addEventListener('DOMContentLoaded', function() {
189199
const nav = document.querySelector('.nav');
190200
const body = document.body;
191-
const scrollThreshold = 100; // Show nav after 100px scroll
201+
const scrollThreshold = 300;
192202
193203
function handleScroll() {
194204
const currentScrollY = window.scrollY;

‎docs/website/styles.css‎

Lines changed: 76 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -473,6 +473,25 @@ kbd {
473473
}
474474
}
475475

476+
/** * Grid * Minimal grid system with auto-layout columns */
477+
478+
.grid {
479+
grid-column-gap: var(--pico-grid-column-gap);
480+
grid-row-gap: var(--pico-grid-row-gap);
481+
display: grid;
482+
grid-template-columns: 1fr;
483+
}
484+
485+
@media (min-width: 768px) {
486+
.grid {
487+
grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
488+
}
489+
}
490+
491+
.grid>* {
492+
min-width: 0;
493+
}
494+
476495
b, strong {
477496
font-weight: bolder
478497
}
@@ -584,7 +603,7 @@ h6 {
584603
margin-top: var(--typography-spacing-vertical)
585604
}
586605

587-
.headings, hgroup {
606+
.headings {
588607
margin-bottom: var(--typography-spacing-vertical)
589608
}
590609

@@ -2018,24 +2037,6 @@ h2 {
20182037
}
20192038
}
20202039

2021-
hgroup {
2022-
margin-bottom: var(--block-spacing-vertical)
2023-
}
2024-
2025-
hgroup:after {
2026-
display: block;
2027-
max-width: 100px;
2028-
margin-top: 1rem;
2029-
border-bottom: .125rem solid var(--primary);
2030-
content: ""
2031-
}
2032-
2033-
#principles hgroup, header h1, header p {
2034-
max-width: 60ch;
2035-
margin-left: auto;
2036-
margin-right: auto
2037-
}
2038-
20392040
ul.check {
20402041
padding: 0
20412042
}
@@ -2098,7 +2099,7 @@ footer, header, main > section {
20982099

20992100
@media (min-width: 1200px) {
21002101
footer, header, main > section {
2101-
--block-spacing-vertical: 7rem;
2102+
--block-spacing-vertical: 4rem;
21022103
--demo-height: calc(10.5rem + 540px)
21032104
}
21042105
}
@@ -2361,54 +2362,39 @@ input:not([type=submit]):not([type=button]):not([type=reset]):not([type=range]):
23612362
transform: scale(1.25)
23622363
}
23632364

2364-
#principles .grid {
2365-
grid-gap: 2rem;
2366-
display: grid;
2367-
grid-template-columns:1fr;
2368-
margin: 0
2369-
}
23702365

2371-
@media (min-width: 768px) {
2372-
#principles .grid {
2373-
grid-template-columns:1fr 1fr
2374-
}
2375-
}
23762366

2377-
@media (min-width: 1200px) {
2378-
#principles .grid {
2379-
grid-template-columns:1fr 1fr 1fr 1fr
2380-
}
2381-
}
23822367

2383-
#principles hgroup {
2368+
2369+
hgroup {
23842370
text-align: center
23852371
}
23862372

2387-
#principles hgroup h2 {
2373+
hgroup h2 {
23882374
margin-bottom: var(--spacing)
23892375
}
23902376

2391-
#principles hgroup:after {
2377+
hgroup:after {
23922378
display: none
23932379
}
23942380

2395-
#principles h3 {
2381+
h3 {
23962382
--font-weight: 400
23972383
}
23982384

2399-
#principles svg {
2385+
svg {
24002386
color: var(--primary);
24012387
width: auto;
24022388
height: 1.25rem
24032389
}
24042390

2405-
#principles h4 {
2391+
h4 {
24062392
--font-size: 1rem;
24072393
--font-weight: 400;
24082394
margin-bottom: .5rem
24092395
}
24102396

2411-
#principles p {
2397+
p {
24122398
--color: var(--muted-color)
24132399
}
24142400

@@ -3084,8 +3070,55 @@ header .header-image {
30843070
flex-direction: column;
30853071
align-items: center;
30863072
}
3073+
30873074
.header-cta a[aria-label="Documentation"] {
30883075
color: #fff;
30893076
background-color: rgba(255, 255, 255, 0.25);
30903077
}
30913078

3079+
/* ===========================
3080+
Principles Styles
3081+
=========================== */
3082+
3083+
.principles-banner {
3084+
align-items: center;
3085+
justify-items: center;
3086+
}
3087+
3088+
.principles-content {
3089+
text-align: center;
3090+
order: 1
3091+
}
3092+
3093+
.principles-image {
3094+
order: 2;
3095+
}
3096+
3097+
@media (min-width: 768px) {
3098+
.principles-image {
3099+
justify-self: end;
3100+
align-self: center;
3101+
order: 1;
3102+
}
3103+
}
3104+
3105+
@media (min-width: 768px) {
3106+
.principles .container {
3107+
display: flex;
3108+
flex-direction: column;
3109+
gap: 2.5rem;
3110+
}
3111+
3112+
.principles-banner {
3113+
grid-template-columns: 35% 65%;
3114+
align-items: center;
3115+
justify-items: center;
3116+
}
3117+
3118+
.principles-features {
3119+
display: grid;
3120+
grid-template-columns: 1fr 1fr;
3121+
gap: 5rem;
3122+
row-gap: 1rem;
3123+
}
3124+
}

0 commit comments

Comments
 (0)