Skip to content

Commit e58e5a4

Browse files
rian-berian-be
committed
docs: homepage and mobile docfx layout
1 parent 453de41 commit e58e5a4

4 files changed

Lines changed: 282 additions & 63 deletions

File tree

‎templates/modularitykit/partials/footer.tmpl.partial‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929

3030
if (path === '/' || /\/index\.html?$/.test(path) || isPrefix('/Docs/Home')) {
3131
match = 'index.html';
32+
document.body.classList.add('is-homepage');
3233
} else if (isPrefix('/src/Redis')) {
3334
match = 'src/Redis/README.html';
3435
} else if (isPrefix('/src/Governance')) {

‎templates/modularitykit/partials/head.tmpl.partial‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
<link rel="stylesheet" href="{{_rel}}styles/docfx.vendor.min.css">
2828
<link rel="stylesheet" href="{{_rel}}styles/docfx.css">
2929
<link rel="stylesheet" href="{{_rel}}styles/main.css">
30+
<link rel="stylesheet" href="{{_rel}}styles/mobile.css">
3031
<meta property="docfx:navrel" content="{{_navRel}}">
3132
<meta property="docfx:tocrel" content="{{_tocRel}}">
3233
{{#_noindex}}<meta name="searchOption" content="noindex">{{/_noindex}}

‎templates/modularitykit/styles/main.css‎

Lines changed: 8 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -342,6 +342,14 @@ a:focus {
342342
margin-top: 0;
343343
}
344344

345+
body.is-homepage .article.row.grid > .col-md-10 {
346+
width: 100%;
347+
}
348+
349+
body.is-homepage .article.row.grid > .hidden-sm.col-md-2[role="complementary"] {
350+
display: none;
351+
}
352+
345353
/* Managed reference / API pages */
346354
.article.row.grid-right {
347355
align-items: flex-start;
@@ -1173,66 +1181,3 @@ body.api-sidebar-collapsed .api-layout-tools {
11731181
padding: 0.2rem 0.4rem;
11741182
border-radius: 4px;
11751183
}
1176-
1177-
@media (max-width: 767px) {
1178-
.site-footer__inner,
1179-
.site-navbar .container {
1180-
flex-direction: column;
1181-
align-items: flex-start;
1182-
}
1183-
1184-
.site-search {
1185-
width: 100%;
1186-
}
1187-
1188-
.site-search .form-control {
1189-
width: 100%;
1190-
}
1191-
1192-
.site-navbar__actions {
1193-
width: 100%;
1194-
margin-left: 0;
1195-
}
1196-
1197-
.site-nav {
1198-
margin-left: 0;
1199-
}
1200-
1201-
.site-brand {
1202-
padding-bottom: 0.25rem;
1203-
}
1204-
1205-
.content {
1206-
padding: 1rem;
1207-
}
1208-
1209-
.content .hero {
1210-
grid-template-columns: 1fr;
1211-
}
1212-
1213-
.home-hero__copy h1 {
1214-
font-size: 2rem;
1215-
}
1216-
1217-
.content .section-grid,
1218-
.section-grid {
1219-
grid-template-columns: 1fr;
1220-
}
1221-
1222-
.sidefilter,
1223-
.sidetoc {
1224-
position: static;
1225-
width: auto;
1226-
border-radius: 0;
1227-
}
1228-
1229-
.sidefilter {
1230-
border-top-left-radius: 8px;
1231-
border-top-right-radius: 8px;
1232-
}
1233-
1234-
.sidetoc {
1235-
border-bottom-left-radius: 8px;
1236-
border-bottom-right-radius: 8px;
1237-
}
1238-
}

‎templates/modularitykit/styles/mobile.css‎

Lines changed: 272 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,272 @@
1+
@media (max-width: 991px) {
2+
.site-footer__inner {
3+
flex-direction: column;
4+
align-items: flex-start;
5+
}
6+
7+
.site-navbar .container {
8+
display: block;
9+
padding-top: 0.75rem;
10+
padding-bottom: 0.75rem;
11+
}
12+
13+
.site-navbar__header {
14+
display: grid;
15+
grid-template-columns: auto minmax(0, 1fr);
16+
align-items: center;
17+
column-gap: 0.75rem;
18+
width: 100%;
19+
}
20+
21+
.site-navbar__header .navbar-toggle {
22+
display: inline-flex;
23+
flex-direction: column;
24+
justify-content: center;
25+
gap: 0.22rem;
26+
margin: 0;
27+
padding: 0.7rem;
28+
border: 1px solid var(--site-border);
29+
border-radius: 10px;
30+
background: rgba(13, 23, 48, 0.96);
31+
float: none;
32+
justify-self: start;
33+
}
34+
35+
.site-navbar__header .navbar-toggle .icon-bar {
36+
width: 1.1rem;
37+
height: 2px;
38+
border-radius: 999px;
39+
background: var(--site-text);
40+
}
41+
42+
.site-navbar__header .site-brand {
43+
display: flex;
44+
align-items: center;
45+
min-width: 0;
46+
margin: 0;
47+
padding: 0;
48+
float: none;
49+
}
50+
51+
.site-navbar__header .site-brand__copy {
52+
min-width: 0;
53+
}
54+
55+
.site-navbar__header .site-brand__title {
56+
white-space: nowrap;
57+
overflow: hidden;
58+
text-overflow: ellipsis;
59+
}
60+
61+
#navbar.navbar-collapse {
62+
clear: both;
63+
margin-top: 0.85rem;
64+
padding: 0.9rem;
65+
width: 100%;
66+
border: 1px solid var(--site-border);
67+
border-radius: 12px;
68+
background: linear-gradient(180deg, rgba(17, 26, 47, 0.98), rgba(12, 19, 35, 0.98));
69+
box-shadow: 0 18px 44px rgba(3, 8, 20, 0.22);
70+
}
71+
72+
.site-nav {
73+
width: 100%;
74+
margin-left: 0;
75+
margin-bottom: 0.85rem;
76+
display: grid;
77+
grid-template-columns: repeat(2, minmax(0, 1fr));
78+
gap: 0.5rem;
79+
}
80+
81+
.site-nav > li {
82+
float: none;
83+
width: 100%;
84+
}
85+
86+
.site-nav > li > a {
87+
display: flex;
88+
align-items: center;
89+
min-height: 2.75rem;
90+
padding: 0.7rem 0.85rem;
91+
border: 1px solid rgba(53, 80, 122, 0.75);
92+
background: rgba(45, 115, 255, 0.06);
93+
}
94+
95+
.site-nav > li.active > a,
96+
.site-nav > li > a[aria-current="page"] {
97+
border-color: rgba(66, 224, 216, 0.42);
98+
}
99+
100+
.site-navbar__actions {
101+
width: 100%;
102+
margin-left: 0;
103+
display: grid;
104+
grid-template-columns: minmax(0, 1fr) auto;
105+
align-items: center;
106+
gap: 0.75rem;
107+
}
108+
109+
.site-search {
110+
width: 100%;
111+
margin: 0;
112+
}
113+
114+
.site-search.navbar-form {
115+
padding: 0;
116+
border: 0;
117+
box-shadow: none;
118+
}
119+
120+
.site-search .form-group,
121+
.site-search .form-control {
122+
width: 100%;
123+
}
124+
125+
.site-github-link {
126+
width: 3rem;
127+
height: 3rem;
128+
}
129+
130+
body .body-content.hide-when-search {
131+
padding-top: 1.5rem;
132+
}
133+
134+
body .sidenav.hide-when-search {
135+
float: none !important;
136+
width: auto !important;
137+
margin-right: 0;
138+
margin-bottom: 1rem;
139+
}
140+
141+
body .article.row.grid-right,
142+
body.api-sidebar-collapsed .article.row.grid-right {
143+
margin-left: 0 !important;
144+
}
145+
146+
body .article.row.grid-right > .col-md-10,
147+
body.api-sidebar-collapsed .article.row.grid-right > .col-md-10 {
148+
width: 100% !important;
149+
}
150+
151+
.article.row.grid-right > .col-md-10 {
152+
margin-top: 0;
153+
padding: 1rem;
154+
}
155+
156+
body .article.row.grid-right > .hidden-sm.col-md-2 {
157+
width: 100%;
158+
padding-top: 1rem;
159+
}
160+
161+
.api-layout-tools {
162+
position: static;
163+
min-height: 0;
164+
padding: 0 0 0.85rem;
165+
margin-bottom: 0.5rem;
166+
background: transparent;
167+
border: 0;
168+
border-radius: 0;
169+
box-shadow: none;
170+
backdrop-filter: none;
171+
}
172+
173+
.api-layout-toggle {
174+
width: 100%;
175+
min-width: 0;
176+
}
177+
178+
.sideaffix {
179+
position: static;
180+
padding-left: 0;
181+
}
182+
183+
.sidefilter,
184+
.sidetoc {
185+
position: static;
186+
width: auto;
187+
border-radius: 0;
188+
}
189+
190+
.sidefilter {
191+
border-top-left-radius: 8px;
192+
border-top-right-radius: 8px;
193+
}
194+
195+
.sidetoc {
196+
border-bottom-left-radius: 8px;
197+
border-bottom-right-radius: 8px;
198+
max-height: none;
199+
}
200+
201+
.content,
202+
.surface-card,
203+
.home-strip {
204+
padding: 1rem;
205+
}
206+
207+
.content .hero {
208+
grid-template-columns: 1fr;
209+
}
210+
211+
.home-hero__copy,
212+
.home-hero__visual-copy {
213+
padding: 1rem;
214+
}
215+
216+
.home-hero__copy h1 {
217+
font-size: 2rem;
218+
}
219+
220+
.content .section-grid,
221+
.section-grid {
222+
grid-template-columns: 1fr;
223+
}
224+
}
225+
226+
@media (max-width: 767px) {
227+
#navbar.navbar-collapse {
228+
padding: 0.8rem;
229+
}
230+
231+
.site-nav {
232+
grid-template-columns: 1fr;
233+
}
234+
235+
.site-brand__title {
236+
font-size: 1rem;
237+
}
238+
239+
.site-brand__subtitle {
240+
font-size: 0.72rem;
241+
}
242+
243+
.site-navbar__actions {
244+
grid-template-columns: 1fr;
245+
}
246+
247+
.site-github-link {
248+
width: 100%;
249+
height: 2.85rem;
250+
border-radius: 8px;
251+
}
252+
253+
.site-github-link svg {
254+
width: 1.3rem;
255+
height: 1.3rem;
256+
}
257+
258+
.content h1,
259+
.article.row.grid-right > .col-md-10 > article.content h1,
260+
.home-hero__copy h1 {
261+
font-size: 1.8rem;
262+
}
263+
264+
.home-actions {
265+
flex-direction: column;
266+
}
267+
268+
.home-actions .btn {
269+
width: 100%;
270+
justify-content: center;
271+
}
272+
}

0 commit comments

Comments
 (0)