diff --git a/sass/_navs.scss b/sass/_navs.scss index 199f719cb3ddc2ca5cd0e4da5f1b262feacd512d..290aa0fa634504f9c3a05a326c382dc308512aba 100644 --- a/sass/_navs.scss +++ b/sass/_navs.scss @@ -13,18 +13,18 @@ aside { @media (max-width: 1000px) { main nav, aside { - top: 4.9rem; border: none; - bottom: 0; background: var(--background); - width: 50%; + max-width: 50%; height: 100%; + overflow-x: hidden; overflow-y: auto; position: fixed; transition: transform 0.25s ease; a.close { - display: block; - z-index: 6; + display: inline-block; + margin-right: 1.25rem; + padding: inherit; } } } diff --git a/sass/macros/_sidebar.scss b/sass/macros/_sidebar.scss index 4c899d1c45937203dd193026ed8bea644e5f1d58..6815b7737f30060d5b5beea2ce1064d64060ee76 100644 --- a/sass/macros/_sidebar.scss +++ b/sass/macros/_sidebar.scss @@ -83,6 +83,7 @@ main nav { } #sidebar { display: block; + margin-top: 3.9rem; transform: translateX(-100%); &:target { transform: translateX(0); diff --git a/sass/macros/_toc.scss b/sass/macros/_toc.scss index 938261a3264e32a1612d89cbf8023e1be74fd9e3..e8b78779d08df01150c0c8110a7bf4a052bb71b8 100644 --- a/sass/macros/_toc.scss +++ b/sass/macros/_toc.scss @@ -59,13 +59,17 @@ aside { } } #toc { - display: block; + display: grid; right: 0; - min-width: 50%; transform: translateX(150%); &:target { transform: translateX(10px); z-index: 3; } + a.close { + margin-top: 2.3rem; + justify-self: end; + margin-bottom: -2rem; + } } } diff --git a/templates/page.html b/templates/page.html index 172c8d33a4a104468f07b095933acf8012487c64..573212c4bd176170a2e25e3406ed271824d34b0f 100644 --- a/templates/page.html +++ b/templates/page.html @@ -6,7 +6,7 @@ {% block content %} <main> <div class="mheader"> - <a href="#sidebar"> + <a href="#sidebar" role="button"> <svg xmlns="http://www.w3.org/2000/svg" width="32" @@ -22,7 +22,7 @@ <rect x="6" y="4" width="2" height="24" /> </svg> </a> - <a href="#toc"> + <a href="#toc" role="button"> <svg xmlns="http://www.w3.org/2000/svg" width="32"