Skip to content

Commit 83a027a

Browse files
reakaleekreakaleek
authored
Max width layout (#1183)
* Full width layout PoC * Also set max width for other elements * Fixes and fine-tuning * Cleanup * Fix isolated build header position * Formatting * Prettier * Limited max width PoC * Use common resolution width * Also apply max width to isolated header and footer
1 parent 0c9c134 commit 83a027a

File tree

9 files changed

+61
-43
lines changed

9 files changed

+61
-43
lines changed

‎src/Elastic.Markdown/Assets/markdown/code.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
background-color: #22272e;
1111
mix-blend-mode: unset;
1212
line-height: 1.5em;
13+
word-break: normal;
1314
}
1415
code:first-child {
1516
@apply rounded-t-sm;
@@ -63,6 +64,7 @@
6364
text-decoration: inherit;
6465
font-weight: inherit;
6566
mix-blend-mode: multiply;
67+
word-break: break-word;
6668
}
6769

6870
.hljs-built_in,

‎src/Elastic.Markdown/Assets/styles.css

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
--banner-height: calc(var(--spacing) * 9);
2525
/*--offset-top: calc(var(--header-height) + var(--banner-height));*/
2626
--offset-top: 72px;
27+
--max-layout-width: 1920px;
2728
}
2829

2930
@media screen and (min-width: 767px) {
@@ -97,10 +98,6 @@
9798
}
9899
}
99100

100-
.content-container {
101-
@apply w-full max-w-[80ch];
102-
}
103-
104101
.applies {
105102
@apply font-sans;
106103
border-bottom: 1px solid var(--color-grey-20);
@@ -233,12 +230,31 @@
233230

234231
.container {
235232
@apply lg:px-3;
236-
237233
max-width: 1250px !important;
238234
}
239235

240236
#elastic-nav {
241237
min-height: var(--offset-top);
238+
239+
@media screen and (min-width: 1200px) {
240+
.oldNav {
241+
& > div {
242+
width: 100%;
243+
max-width: var(--max-layout-width);
244+
}
245+
div:has(> div > nav) {
246+
flex-grow: 1;
247+
justify-content: center;
248+
}
249+
}
250+
}
251+
@media screen and (min-width: 1536px) {
252+
.oldNav {
253+
nav {
254+
margin-left: -74px;
255+
}
256+
}
257+
}
242258
}
243259

244260
body {

‎src/Elastic.Markdown/Assets/theme.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
--breakpoint-sm: 640px;
33
--breakpoint-md: 768px;
44
--breakpoint-lg: 1280px;
5-
--breakpoint-xl: 1920px;
6-
--breakpoint-2xl: 2000px;
5+
--breakpoint-xl: 1536px;
6+
--breakpoint-2xl: 1920px;
77

88
--font-sans:
99
'Mier B', 'Inter', ui-sans-serif, system-ui, sans-serif,

‎src/Elastic.Markdown/Slices/Layout/_Footer.cshtml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22

33

44
<footer class="text-grey-20 text-[12px] bg-ink-dark py-12 px-6">
5-
<div class="container mx-auto">
5+
<div class="max-w-(--max-layout-width) w-full mx-auto">
66
<a href="https://www.elastic.co/">
77
<img class="block" alt="Elastic logo" src="@Model.Static("logo-elastic-horizontal-white.svg")" width="120"/>
88
</a>
99
</div>
10-
<div class="container mx-auto grid grid-cols-1 md:grid-cols-2 gap-2 rounded-tl-4xl rounded-tr-4xl items-center">
10+
<div class="max-w-(--max-layout-width) w-full mx-auto grid grid-cols-1 md:grid-cols-2 gap-2 rounded-tl-4xl rounded-tr-4xl items-center">
1111
<div>
1212
<ul class="mt-4 flex gap-3">
1313
<li>

‎src/Elastic.Markdown/Slices/Layout/_Header.cshtml

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,17 @@
88
else
99
{
1010
<header class="sticky top-0 z-50 bg-blue-developer text-white text-lg font-semibold h-(--offset-top) flex items-center px-6">
11-
<div class="container mx-auto">
12-
<div class="flex justify-between items-center">
13-
@* ReSharper disable once Html.IdNotResolved *@
14-
<label role="button" class="md:hidden cursor-pointer" for="pages-nav-hamburger">
15-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-8">
16-
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"/>
17-
</svg>
18-
</label>
19-
<a href="@Model.Link("/")" class="flex items-center gap-2">
20-
<img src="@Model.Static("logo-elastic-glyph-color.svg")" alt="" width="32" height="32">
21-
@Model.DocSetName
22-
</a>
23-
</div>
11+
<div class="max-w-(--max-layout-width) w-full mx-auto flex justify-between items-center">
12+
@* ReSharper disable once Html.IdNotResolved *@
13+
<label role="button" class="md:hidden cursor-pointer" for="pages-nav-hamburger">
14+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-8">
15+
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"/>
16+
</svg>
17+
</label>
18+
<a href="@Model.Link("/")" class="flex items-center gap-2">
19+
<img src="@Model.Static("logo-elastic-glyph-color.svg")" alt="" width="32" height="32">
20+
@Model.DocSetName
21+
</a>
2422
</div>
2523
</header>
2624
}

‎src/Elastic.Markdown/Slices/Layout/_PrevNextNav.cshtml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@using Elastic.Markdown.Helpers
22
@inherits RazorSlice<LayoutViewModel>
3-
<footer id="prev-next-nav" class="content-container mt-20 px-6">
3+
<footer id="prev-next-nav" class="content-container mt-20 px-4">
44
<div class="flex flex-wrap lg:flex-nowrap gap-2 mt-2">
55
<div class="w-full">
66
@if (Model.Previous != null)

‎src/Elastic.Markdown/Slices/Layout/_SecondaryNav.cshtml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
@using Elastic.Markdown.Helpers
22
@using Elastic.Markdown.Myst.FrontMatter
33
@inherits RazorSlice<LayoutViewModel>
4-
<nav id="secondary-nav" class="bg-grey-10 border-t-1 border-grey-20 font-sans font-semibold text-sm text-ink-light md:text-base p-6">
5-
<div class="container flex mx-auto justify-between items-center">
4+
<nav id="secondary-nav" class="bg-grey-10 border-t-1 border-grey-20 font-sans font-semibold text-sm text-ink-light md:text-base">
5+
<div class="max-w-(--max-layout-width) flex mx-auto justify-between items-center p-6">
66
<div class="flex gap-2 flex-nowrap items-center">
77
@if (Model.CurrentDocument.YamlFrontMatter?.Layout != LayoutName.LandingPage)
88
{

‎src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@using Elastic.Markdown.Helpers;
22
@inherits RazorSlice<LayoutViewModel>
3-
<aside class="sidebar hidden lg:block order-3">
3+
<aside class="sidebar hidden lg:block order-2 max-w-65">
44
<nav id="toc-nav" class="sidebar-nav">
55
<div id="page-version-dropdown" tabindex="1"
66
class="mt-6 block group font-sans text-sm relative z-50">

‎src/Elastic.Markdown/Slices/_Layout.cshtml

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -23,25 +23,27 @@
2323

2424
private async Task DefaultLayout()
2525
{
26-
<div class="container h-full grid gap-2 grid-cols-1 md:grid-cols-[calc(var(--spacing)*65)_1fr] lg:grid-cols-[calc(var(--spacing)*65)_1fr_calc(var(--spacing)*50)] px-6">
26+
<div class="max-w-(--max-layout-width) w-full h-full grid grid-cols-1 md:grid-cols-[calc(var(--spacing)*65)_1fr] px-6">
2727
@await RenderPartialAsync(_PagesNav.Create(Model))
28-
@await RenderPartialAsync(_TableOfContents.Create(Model))
29-
<main id="content-container" class="w-full flex flex-col order-2 relative pb-30 overflow-x-hidden">
30-
<div class="w-full absolute top-0 left-0 right-0 htmx-indicator" id="htmx-indicator" role="status">
31-
<div class="h-[2px] w-full overflow-hidden">
32-
<div class="progress w-full h-full bg-pink-70 left-right"></div>
28+
<div class="order-2 grid grid-cols-1 md:grid-cols-[clamp(40ch,80ch,100%)] lg:grid-cols-[80ch_1fr] xl:grid-cols-[90ch_calc(var(--spacing)*65)] justify-center">
29+
@await RenderPartialAsync(_TableOfContents.Create(Model))
30+
<main id="content-container" class="w-full flex flex-col order-1 relative pb-30 overflow-x-hidden">
31+
<div class="w-full absolute top-0 left-0 right-0 htmx-indicator" id="htmx-indicator" role="status">
32+
<div class="h-[2px] w-full overflow-hidden">
33+
<div class="progress w-full h-full bg-pink-70 left-right"></div>
34+
</div>
35+
<div class="sr-only">Loading</div>
3336
</div>
34-
<div class="sr-only">Loading</div>
35-
</div>
36-
<div class="content-container md:px-4">
37-
@await RenderPartialAsync(_Breadcrumbs.Create(Model))
38-
</div>
39-
<article id="markdown-content" class="content-container markdown-content md:px-4">
40-
<input type="checkbox" class="hidden" id="pages-nav-hamburger">
41-
@await RenderBodyAsync()
42-
</article>
43-
@await RenderPartialAsync(_PrevNextNav.Create(Model))
44-
</main>
37+
<div class="content-container md:px-4">
38+
@await RenderPartialAsync(_Breadcrumbs.Create(Model))
39+
</div>
40+
<article id="markdown-content" class="content-container markdown-content md:px-4">
41+
<input type="checkbox" class="hidden" id="pages-nav-hamburger">
42+
@await RenderBodyAsync()
43+
</article>
44+
@await RenderPartialAsync(_PrevNextNav.Create(Model))
45+
</main>
46+
</div>
4547
</div>
4648
}
4749

0 commit comments

Comments
 (0)