From e5761c82c96668c09cf0d9d185783e05879cd923 Mon Sep 17 00:00:00 2001 From: Christophe Peugnet Date: Wed, 18 Oct 2023 15:26:20 +0200 Subject: [PATCH 1/7] Update InputFileByCode.razor --- .../Demo/Shared/Pages/InputFile/Examples/InputFileByCode.razor | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/examples/Demo/Shared/Pages/InputFile/Examples/InputFileByCode.razor b/examples/Demo/Shared/Pages/InputFile/Examples/InputFileByCode.razor index c4823f8915..fac0104eef 100644 --- a/examples/Demo/Shared/Pages/InputFile/Examples/InputFileByCode.razor +++ b/examples/Demo/Shared/Pages/InputFile/Examples/InputFileByCode.razor @@ -1,5 +1,6 @@  Date: Mon, 23 Oct 2023 17:27:01 +0200 Subject: [PATCH 2/7] WIP update layout --- examples/Demo/Server/Pages/_Layout.cshtml | 2 +- .../Microsoft.Fast.Components.FluentUI.xml | 14 ++ .../Demo/Shared/Shared/DemoMainLayout.razor | 83 ++++--- .../Shared/Shared/DemoMainLayout.razor.cs | 3 + examples/Demo/Shared/Shared/DemoNavMenu.razor | 225 +++++++++--------- .../Demo/Shared/Shared/DemoNavMenu.razor.cs | 8 + .../Demo/Shared/Shared/DemoNavMenu.razor.css | 76 +++++- examples/Demo/Shared/wwwroot/css/site.css | 161 +++++-------- 8 files changed, 318 insertions(+), 254 deletions(-) create mode 100644 examples/Demo/Shared/Shared/DemoNavMenu.razor.cs diff --git a/examples/Demo/Server/Pages/_Layout.cshtml b/examples/Demo/Server/Pages/_Layout.cshtml index 7b1f90264e..6d3eb6013b 100644 --- a/examples/Demo/Server/Pages/_Layout.cshtml +++ b/examples/Demo/Server/Pages/_Layout.cshtml @@ -36,8 +36,8 @@ background-color: var(--neutral-fill-layer-rest); } - + diff --git a/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml b/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml index ad93779384..6ca2b3ac69 100644 --- a/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml +++ b/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml @@ -2938,12 +2938,26 @@ + + + Defines how the browser distributes space between and around content items. + + + + + Defines the gaps (gutters) between rows and columns. + See https://developer.mozilla.org/en-US/docs/Web/CSS/gap + + + + + Gets or sets the height of the header (in pixels). diff --git a/examples/Demo/Shared/Shared/DemoMainLayout.razor b/examples/Demo/Shared/Shared/DemoMainLayout.razor index 6e9fd3929e..1157c27508 100644 --- a/examples/Demo/Shared/Shared/DemoMainLayout.razor +++ b/examples/Demo/Shared/Shared/DemoMainLayout.razor @@ -3,12 +3,11 @@ @using Microsoft.AspNetCore.Components @using System.Runtime.InteropServices @namespace FluentUI.Demo.Shared -@inherits LayoutComponentBase Fluent UI Blazor components demo page -
-
+ + +
-
-
- + + + -
- - - - -
\ No newline at end of file + + + \ No newline at end of file diff --git a/examples/Demo/Shared/Shared/DemoMainLayout.razor.cs b/examples/Demo/Shared/Shared/DemoMainLayout.razor.cs index 8d51a7dd64..51c68d38e4 100644 --- a/examples/Demo/Shared/Shared/DemoMainLayout.razor.cs +++ b/examples/Demo/Shared/Shared/DemoMainLayout.razor.cs @@ -11,6 +11,9 @@ namespace FluentUI.Demo.Shared; public partial class DemoMainLayout : IAsyncDisposable { + [Parameter] + public RenderFragment? Body { get; set; } + private OfficeColor _selectedColorOption; private string? _version; diff --git a/examples/Demo/Shared/Shared/DemoNavMenu.razor b/examples/Demo/Shared/Shared/DemoNavMenu.razor index 49a305eba8..bd4767e34d 100644 --- a/examples/Demo/Shared/Shared/DemoNavMenu.razor +++ b/examples/Demo/Shared/Shared/DemoNavMenu.razor @@ -1,131 +1,122 @@ -
- + +

Home

 - - -

More information

- - - What's new - Upgrade guide - Code setup - Design tokens - Reboot - Icons and Emoji - DialogService - MessageService - ToastService - Project templates - Fluent UI Form - Blazor Form - + + What's new + Upgrade guide + Code setup + Design tokens + Reboot + Icons and Emoji + DialogService + MessageService + ToastService + Project templates + Fluent UI Form + Blazor Form - - -

Base classes & Utilities

- - - FluentComponentBase - FluentInputBase - Clear cache - + + FluentComponentBase + FluentInputBase + Clear cache - - -

Layout components

- - - Header - Footer - BodyContent - Grid - Layout - MainLayout - Spacer - Splitter - Stack - + + Header + Footer + BodyContent + Grid + Layout + MainLayout + Spacer + Splitter + Stack - - -

Components

- - - Accordion - Anchor - Anchored Region - - Badge - CounterBadge - PresenceBadge - - Autocomplete - Breadcrumb - Button - Card - Checkbox - CodeEditor - Combobox - Data grid - Date & Time - Dialog - Divider - Drag and Drop - Emoji - Flipper - Highlighter - Horizontal Scroll - Icon - InputFile - Label - Listbox - Menu - MenuButton - MessageBar - MessageBox - NavMenu - NavMenuTree - Number Field - Option - Overflow - Overlay - Panel - Persona - Popover - Progress - Progress Ring - Radio - Radio Group - Search - Select - Skeleton - Slider - SplashScreen - Switch - Tabs - TextArea - Text Field - Toast - Toolbar - Tooltip - Tree View - + + Accordion + Anchor + Anchored Region + + Badge + CounterBadge + PresenceBadge + + Autocomplete + Breadcrumb + Button + Card + Checkbox + CodeEditor + Combobox + Data grid + Date & Time + Dialog + Divider + Drag and Drop + Emoji + Flipper + Highlighter + Horizontal Scroll + Icon + InputFile + Label + Listbox + Menu + MenuButton + MessageBar + MessageBox + NavMenu + NavMenuTree + Number Field + Option + Overflow + Overlay + Panel + Persona + Popover + Progress + Progress Ring + Radio + Radio Group + Search + Select + Skeleton + Slider + SplashScreen + Switch + Tabs + TextArea + Text Field + Toast + Toolbar + Tooltip + Tree View - - -

Incubation lab

- - - MarkdownSection - TableOfContents - + + MarkdownSection + TableOfContents -
\ No newline at end of file + diff --git a/examples/Demo/Shared/Shared/DemoNavMenu.razor.cs b/examples/Demo/Shared/Shared/DemoNavMenu.razor.cs new file mode 100644 index 0000000000..1179a05deb --- /dev/null +++ b/examples/Demo/Shared/Shared/DemoNavMenu.razor.cs @@ -0,0 +1,8 @@ +using Microsoft.AspNetCore.Components; + +namespace FluentUI.Demo.Shared.Shared; + +public partial class DemoNavMenu +{ + private bool Expanded = true; +} diff --git a/examples/Demo/Shared/Shared/DemoNavMenu.razor.css b/examples/Demo/Shared/Shared/DemoNavMenu.razor.css index 7348dbe7be..aa53ecdec7 100644 --- a/examples/Demo/Shared/Shared/DemoNavMenu.razor.css +++ b/examples/Demo/Shared/Shared/DemoNavMenu.razor.css @@ -1,3 +1,75 @@ -::deep fluent-tree-item { - margin: 5px 0; +/*::deep .fluent-nav-menu { + height: Calc(100dvh - 100px); + overflow-y: overlay; + overflow-x: hidden; +}*/ + +::deep .fluent-nav-link.notactive { + grid-template-columns: 4px auto 40px !important; } + + +::deep .fluent-nav-link > .fluent-nav-text { + /*font-weight: 500 !important; */ +} + + +/* + ##Device = Desktops + ##Screen = 1281px to higher resolution desktops +*/ +@media (min-width: 1281px) { + + /* CSS */ + +} + +/* + ##Device = Laptops, Desktops + ##Screen = B/w 1025px to 1280px +*/ +@media (min-width: 1025px) and (max-width: 1280px) { + + /* CSS */ + +} + +/* + ##Device = Tablets, Ipads (portrait) + ##Screen = B/w 768px to 1024px +*/ +@media (min-width: 768px) and (max-width: 1024px) { + + /* CSS */ + +} + +/* + ##Device = Tablets, Ipads (landscape) + ##Screen = B/w 768px to 1024px +*/ +@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { + + /* CSS */ + +} + +/* + ##Device = Low Resolution Tablets, Mobiles (Landscape) + ##Screen = B/w 481px to 767px +*/ +@media (min-width: 481px) and (max-width: 767px) { + + /* CSS */ + +} + +/* + ##Device = Most of the Smartphones Mobiles (Portrait) + ##Screen = B/w 320px to 479px +*/ +@media (min-width: 320px) and (max-width: 480px) { + + /* CSS */ + +} \ No newline at end of file diff --git a/examples/Demo/Shared/wwwroot/css/site.css b/examples/Demo/Shared/wwwroot/css/site.css index 3da943875b..05cedf873a 100644 --- a/examples/Demo/Shared/wwwroot/css/site.css +++ b/examples/Demo/Shared/wwwroot/css/site.css @@ -20,110 +20,71 @@ body { 'footer'; } -header { - padding: 12px 0; - background-color: var(--neutral-layer-4); - grid-area: header; - display: grid; - grid-template-columns: 280px 1fr auto auto; - grid-template-rows: 1fr; - align-items: center; - justify-content: flex-start; - border-bottom: calc(var(--stroke-width) * 3px) solid var(--accent-fill-rest) +.header { + background-color: var(--neutral-layer-4) !important; + border-bottom: calc(var(--stroke-width) * 3px) solid var(--accent-fill-rest); + margin-bottom: 0 !important; } - header .logo { + .header .logo { width: 108px; height: 23px; padding: 0 30px; grid-column: 1; } - header .notifications { - grid-column: 3; - justify-self: end; + .header .notifications { padding: 0 20px 0 0; display: flex; align-items: center; } - header .settings { - grid-column: 4; - justify-self: end; + .header .settings { padding: 0 20px 0 0; display: flex; align-items: center; } - [dir="rtl"] header .settings { + [dir="rtl"] .header .settings { padding: 0 0 0 20px; } - [dir="rtl"] header .notifications { + [dir="rtl"] .header .notifications { padding: 0 0 0 20px; } - -footer { - display: grid; - grid-template-columns: 10px auto auto 10px; +.stack-horizontal { + flex-direction: row; +} + +.footer { + display: flex !important; + flex-direction: row !important; background: var(--neutral-layer-4); - color: var(--neutral-foreground-rest); - align-items: center; - grid-area: footer; + color: var(--neutral-foreground-rest) !important; padding: 10px 10px; + margin-top: 0px !important; } - footer .version { - grid-column: 2; - justify-content: start; - } - - footer .version a { + .footer .version a { color: var(--neutral-foreground-rest); text-decoration: none; } - footer .version a:focus { + .footer .version a:focus { outline: 1px dashed; outline-offset: 3px; } - footer .version a:hover { + .footer .version a:hover { text-decoration: underline; } - footer .copy { - grid-column: 3; - justify-self: end; - } - -main { - grid-area: main; - background-color: var(--neutral-layer-1); - color: var(--neutral-foreground-rest); - display: grid; - grid-template-columns: 280px 1fr; - grid-template-rows: 1fr; -} nav { - z-index: 1; - padding: 2.5rem 1.5rem; background-color: var(--neutral-layer-3); - transition: all 300ms ease-in-out; - grid-column: 1 / 2; + padding: 10px; } - nav ul { - list-style: none; - margin: 0; - padding: 0; - } - - nav ul li { - padding: 2px 0; - } - nav h2 { font-size: var(--type-ramp-plus-1-font-size); line-height: var(--type-ramp-plus-1-line-height); @@ -151,6 +112,18 @@ nav { background: var(--accent-fill-rest); } +.fluent-nav-menu { + width: 250px !important; +} + +.fluent-nav-item { + max-width: 99%; +} + +.fluent-nav-link.notactive { + grid-template-columns: 4px auto 40px !important; +} + .content { display: grid; grid-template-columns: 3fr 280px; @@ -286,68 +259,64 @@ code { @media (max-width: 767px) { - header { + .header { grid-area: header; grid-template-columns: 150px 1fr; align-items: center; justify-content: flex-start; } - header .logo { + .header .logo { width: 160px; height: 23px; padding: 0 25px; } - header .switches { + .header .switches { flex-direction: column; grid-column: 2 } - header .switches .label { + .header .switches .label { padding-inline-end: 14px; } - header .colorgroup { + .header .colorgroup { display: none; } - main { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: 40px 1fr; + .stack-horizontal { + flex-direction:column !important; } aside { - grid-area: 1 / 1 / 2 / 3; + grid-area: 2 / 1 / 3 / 3; padding: 1em 0.75em; } article { - grid-area: 2 / 1 / 3 / 3; + grid-area: 1 / 1 / 2 / 3; padding-top: 0px; } - #menu-toggle:checked ~ article { - padding-left: 0; - grid-area: 1 / 1 / 3 / 3; + + nav { + display: none; + width:100%; } - nav ul { - text-align: center; - max-width: 100%; + .fluent-nav-menu { + width: 100% !important; } .menu-icon { - padding: 10px 0.75em; - z-index: 2; - transition: all 300ms ease-in-out; + z-index: 10; display: block; visibility: visible; - grid-row: 1 / 2; - grid-column: 1 / 2; - width: 4rem; + position: absolute; + top: 0.7rem; + right: 1rem; } #menu-toggle ~ nav { @@ -356,7 +325,6 @@ code { #menu-toggle:checked ~ nav { display: block; - grid-area: 1 / 1 / 3 / 3; } #menu-toggle ~ article { @@ -367,24 +335,21 @@ code { display: none; } - #menu-toggle:checked + .menu-icon { - padding-left: 89%; - } [dir="rtl"] #menu-toggle:checked + .menu-icon { } - footer { + .footer { display: grid; grid-template-columns: 10px auto 10px; } - footer .version { + .footer .version { grid-column: 2; justify-content: start; } - footer .copy { + .footer .copy { grid-column: 2; grid-row: 2; justify-self: end; @@ -417,12 +382,12 @@ code { grid-template-rows: max-content; } aside { - grid-area: 1 / 1 / 2 / 2; + grid-area: 2 / 1 / 2 / 2; padding: 1.5em 0.75em 1em 0.75em; } article { - grid-area: 2 / 1 / 2 / 2; + grid-area: 1 / 1 / 2 / 2; padding-top: 0px; } } @@ -431,7 +396,7 @@ code { /* Surface Duo specific styling */ @media (horizontal-viewport-segments: 2) { - header { + .header { grid-area: header; display: grid; grid-template-columns: 150px calc(env(viewport-segment-width 0 0) - 160px) 1fr; @@ -442,26 +407,26 @@ code { background-color: var(--neutral-layer-4); } - header a { + .header a { padding: 0px 15px; color: var(--neutral-foreground-rest); } - header .logo { + .header .logo { grid-column: 1; width: 108px; height: 23px; padding: 0 30px; } - header .switches { + .header .switches { margin-inline-start: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)); /* hinge width */ grid-column: 3; justify-self: end; padding-left: 20px; } - header .colorgroup { + .header .colorgroup { grid-column: 2; justify-self: end; z-index: 10; From 526f7cd1fdae5eb71256c0022a35bc1b4961c7f9 Mon Sep 17 00:00:00 2001 From: Christophe Peugnet Date: Tue, 24 Oct 2023 15:20:04 +0200 Subject: [PATCH 3/7] use of new components tels FluentLayout, FluentHeader.. --- examples/Demo/Shared/Shared/DemoMainLayout.razor | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/examples/Demo/Shared/Shared/DemoMainLayout.razor b/examples/Demo/Shared/Shared/DemoMainLayout.razor index 1157c27508..ea5325ca74 100644 --- a/examples/Demo/Shared/Shared/DemoMainLayout.razor +++ b/examples/Demo/Shared/Shared/DemoMainLayout.razor @@ -6,6 +6,7 @@ Fluent UI Blazor components demo page +
- \ No newline at end of file + +
\ No newline at end of file From 1dcd075d1ab75c19f8890832122c93f0422ae909 Mon Sep 17 00:00:00 2001 From: Christophe Peugnet Date: Tue, 24 Oct 2023 16:28:57 +0200 Subject: [PATCH 4/7] delete unused css --- .../Demo/Shared/Shared/DemoNavMenu.razor.css | 74 +------------------ 1 file changed, 1 insertion(+), 73 deletions(-) diff --git a/examples/Demo/Shared/Shared/DemoNavMenu.razor.css b/examples/Demo/Shared/Shared/DemoNavMenu.razor.css index aa53ecdec7..a8a87f5a17 100644 --- a/examples/Demo/Shared/Shared/DemoNavMenu.razor.css +++ b/examples/Demo/Shared/Shared/DemoNavMenu.razor.css @@ -1,75 +1,3 @@ -/*::deep .fluent-nav-menu { - height: Calc(100dvh - 100px); - overflow-y: overlay; - overflow-x: hidden; -}*/ - -::deep .fluent-nav-link.notactive { +::deep .fluent-nav-link.notactive { grid-template-columns: 4px auto 40px !important; -} - - -::deep .fluent-nav-link > .fluent-nav-text { - /*font-weight: 500 !important; */ -} - - -/* - ##Device = Desktops - ##Screen = 1281px to higher resolution desktops -*/ -@media (min-width: 1281px) { - - /* CSS */ - -} - -/* - ##Device = Laptops, Desktops - ##Screen = B/w 1025px to 1280px -*/ -@media (min-width: 1025px) and (max-width: 1280px) { - - /* CSS */ - -} - -/* - ##Device = Tablets, Ipads (portrait) - ##Screen = B/w 768px to 1024px -*/ -@media (min-width: 768px) and (max-width: 1024px) { - - /* CSS */ - -} - -/* - ##Device = Tablets, Ipads (landscape) - ##Screen = B/w 768px to 1024px -*/ -@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { - - /* CSS */ - -} - -/* - ##Device = Low Resolution Tablets, Mobiles (Landscape) - ##Screen = B/w 481px to 767px -*/ -@media (min-width: 481px) and (max-width: 767px) { - - /* CSS */ - -} - -/* - ##Device = Most of the Smartphones Mobiles (Portrait) - ##Screen = B/w 320px to 479px -*/ -@media (min-width: 320px) and (max-width: 480px) { - - /* CSS */ - } \ No newline at end of file From 96f4155e9584503d21c07730e880be1bd43f11dc Mon Sep 17 00:00:00 2001 From: Christophe Peugnet Date: Tue, 24 Oct 2023 16:50:16 +0200 Subject: [PATCH 5/7] changes based on comments --- examples/Demo/Shared/Shared/DemoNavMenu.razor.cs | 8 -------- 1 file changed, 8 deletions(-) delete mode 100644 examples/Demo/Shared/Shared/DemoNavMenu.razor.cs diff --git a/examples/Demo/Shared/Shared/DemoNavMenu.razor.cs b/examples/Demo/Shared/Shared/DemoNavMenu.razor.cs deleted file mode 100644 index 1179a05deb..0000000000 --- a/examples/Demo/Shared/Shared/DemoNavMenu.razor.cs +++ /dev/null @@ -1,8 +0,0 @@ -using Microsoft.AspNetCore.Components; - -namespace FluentUI.Demo.Shared.Shared; - -public partial class DemoNavMenu -{ - private bool Expanded = true; -} From cd6e7c52fc833a615b979fd09e304156205e6be8 Mon Sep 17 00:00:00 2001 From: Christophe Peugnet Date: Thu, 26 Oct 2023 11:08:51 +0200 Subject: [PATCH 6/7] fixe the aside element regardless the Y scroll position --- .../Demo/Shared/Shared/DemoNavMenu.razor.css | 3 --- examples/Demo/Shared/wwwroot/css/site.css | 20 +++++++++++-------- 2 files changed, 12 insertions(+), 11 deletions(-) delete mode 100644 examples/Demo/Shared/Shared/DemoNavMenu.razor.css diff --git a/examples/Demo/Shared/Shared/DemoNavMenu.razor.css b/examples/Demo/Shared/Shared/DemoNavMenu.razor.css deleted file mode 100644 index a8a87f5a17..0000000000 --- a/examples/Demo/Shared/Shared/DemoNavMenu.razor.css +++ /dev/null @@ -1,3 +0,0 @@ -::deep .fluent-nav-link.notactive { - grid-template-columns: 4px auto 40px !important; -} \ No newline at end of file diff --git a/examples/Demo/Shared/wwwroot/css/site.css b/examples/Demo/Shared/wwwroot/css/site.css index 05cedf873a..f00bcef1bf 100644 --- a/examples/Demo/Shared/wwwroot/css/site.css +++ b/examples/Demo/Shared/wwwroot/css/site.css @@ -7,6 +7,7 @@ body { height: 100%; + overflow: hidden; } #container { @@ -32,15 +33,15 @@ body { padding: 0 30px; grid-column: 1; } - + .header .notifications { - padding: 0 20px 0 0; + padding-right: 20px; display: flex; align-items: center; } .header .settings { - padding: 0 20px 0 0; + padding-right: 20px; display: flex; align-items: center; } @@ -117,13 +118,13 @@ nav { } .fluent-nav-item { - max-width: 99%; + max-width: 99% !important; } -.fluent-nav-link.notactive { - grid-template-columns: 4px auto 40px !important; +.fluent-nav-link.notactive .fluent-nav-text { + font-weight:600 !important; } - + .content { display: grid; grid-template-columns: 3fr 280px; @@ -141,6 +142,8 @@ article { aside { padding: 2rem 0.75rem; border-left: 1px solid var(--neutral-stroke-divider-rest); + position: fixed; + right: 0.5rem; } #menu-toggle { @@ -293,6 +296,7 @@ code { aside { grid-area: 2 / 1 / 3 / 3; padding: 1em 0.75em; + position: relative; } article { @@ -316,7 +320,7 @@ code { visibility: visible; position: absolute; top: 0.7rem; - right: 1rem; + right: 0.7rem; } #menu-toggle ~ nav { From d7300e90e02150c0c5597e66810a76ae7d4d5dfd Mon Sep 17 00:00:00 2001 From: Christophe Peugnet Date: Fri, 27 Oct 2023 12:16:30 +0200 Subject: [PATCH 7/7] improve Aside element --- .../Demo/Shared/Shared/DemoMainLayout.razor | 2 +- examples/Demo/Shared/wwwroot/css/site.css | 49 ++++++------------- 2 files changed, 15 insertions(+), 36 deletions(-) diff --git a/examples/Demo/Shared/Shared/DemoMainLayout.razor b/examples/Demo/Shared/Shared/DemoMainLayout.razor index ea5325ca74..0cdf94fd7f 100644 --- a/examples/Demo/Shared/Shared/DemoMainLayout.razor +++ b/examples/Demo/Shared/Shared/DemoMainLayout.razor @@ -46,7 +46,7 @@ - +
diff --git a/examples/Demo/Shared/wwwroot/css/site.css b/examples/Demo/Shared/wwwroot/css/site.css index f00bcef1bf..074388d58e 100644 --- a/examples/Demo/Shared/wwwroot/css/site.css +++ b/examples/Demo/Shared/wwwroot/css/site.css @@ -10,17 +10,6 @@ body { overflow: hidden; } -#container { - height: 100vh; - display: grid; - grid-template-columns: 1fr; - grid-template-rows: auto 1fr auto; - grid-template-areas: - 'header' - 'main' - 'footer'; -} - .header { background-color: var(--neutral-layer-4) !important; border-bottom: calc(var(--stroke-width) * 3px) solid var(--accent-fill-rest); @@ -126,12 +115,10 @@ nav { } .content { - display: grid; - grid-template-columns: 3fr 280px; + display: flex; } article { - grid-area: 1 / 1; padding: 2.2rem 1.5rem; margin: 0 0; overflow-x: hidden; @@ -142,8 +129,11 @@ article { aside { padding: 2rem 0.75rem; border-left: 1px solid var(--neutral-stroke-divider-rest); - position: fixed; right: 0.5rem; + height: 100vh; + position: sticky; + top: 0px; + width: 55em; } #menu-toggle { @@ -293,18 +283,6 @@ code { flex-direction:column !important; } - aside { - grid-area: 2 / 1 / 3 / 3; - padding: 1em 0.75em; - position: relative; - } - - article { - grid-area: 1 / 1 / 2 / 3; - padding-top: 0px; - } - - nav { display: none; width:100%; @@ -339,8 +317,16 @@ code { display: none; } + .content { + flex-direction:column; + } + article { + padding-top: 0px; + } - [dir="rtl"] #menu-toggle:checked + .menu-icon { + aside { + padding: 1em 0.75em; + width: unset; } .footer { @@ -380,18 +366,11 @@ code { width: 150px; } - .content { - display: grid; - grid-template-columns: auto; - grid-template-rows: max-content; - } aside { - grid-area: 2 / 1 / 2 / 2; padding: 1.5em 0.75em 1em 0.75em; } article { - grid-area: 1 / 1 / 2 / 2; padding-top: 0px; } }