From a99dbedf3d5312e00b93f08d93585f27ff243abd Mon Sep 17 00:00:00 2001
From: kogeletey <kg@re128.org>
Date: Tue, 26 Jul 2022 18:30:29 +0300
Subject: [PATCH] [maintenance]: improve mobile page
sass: remove top paramaters and limited width, hidden overflow-x, button
for toc close improve.
---
sass/_navs.scss | 10 +++++-----
sass/macros/_sidebar.scss | 1 +
sass/macros/_toc.scss | 8 ++++++--
templates/page.html | 4 ++--
4 files changed, 14 insertions(+), 9 deletions(-)
diff --git a/sass/_navs.scss b/sass/_navs.scss
index 199f719..290aa0f 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 4c899d1..6815b77 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 938261a..e8b7877 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 172c8d3..573212c 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"
--
GitLab