improve overlay design and fix footer
To fix: - css split between nav and nav-tree repeated due to mobile - right overlay needs padding adjustments and resizing for mobile
This commit is contained in:
parent
0a69344f98
commit
c516c950a8
GPG key ID:
4C88A185FB89301E
|
|
@ -43,23 +43,19 @@ const { headings } = Astro.props;
|
|||
---
|
||||
<div class="header">
|
||||
<div class="header-item header-left">
|
||||
<h3 class="header-title">
|
||||
<a href="/">Quickshell</a>
|
||||
</h3>
|
||||
{url.length > 2 ?
|
||||
<Nav mobile={true}/>
|
||||
<div class="nav-collapsed-spacer header-spacer"/>
|
||||
: null}
|
||||
<div class="spacer-mobile">|</div>
|
||||
<h3 class="header-title mobile">
|
||||
<h3 class="header-title">
|
||||
<a href="/">Quickshell</a>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="header-item header-right">
|
||||
<Search/>
|
||||
<div class="spacer-mobile">|</div>
|
||||
<div class="spacer-desktop">|</div>
|
||||
<div class="header-spacer"/>
|
||||
<ThemeSelect client:load />
|
||||
<div class="spacer-mobile">|</div>
|
||||
<div class="toc-collapsed-spacer header-spacer"/>
|
||||
{url.length > 2 ?
|
||||
<TOC headings={headings} types={sidebarData} mobile={true}/>
|
||||
: null}
|
||||
|
|
|
|||
|
|
@ -57,26 +57,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes rotateIn {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotateOut {
|
||||
from {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotateIn90 {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
|
|
|
|||
|
|
@ -52,6 +52,8 @@ html {
|
|||
--nav-selected-bkg: var(--blue) 100 90;
|
||||
--nav-selected-text: var(--blue) 60 60;
|
||||
--nav-indicator-bkg: var(--blue) 45 80;
|
||||
--overlay-bkg: var(--blue) 10 93;
|
||||
--overlay-bkg-border: var(--blue) 10 75;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
|
|
@ -93,6 +95,8 @@ html.dark {
|
|||
--nav-selected-bkg: var(--blue) 40 13;
|
||||
--nav-selected-text: var(--blue) 100 70;
|
||||
--nav-indicator-bkg: var(--blue) 30 30;
|
||||
--overlay-bkg: var(--blue) 41 4;
|
||||
--overlay-bkg-border: var(--blue) 17 13;
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -103,7 +107,8 @@ html.dark {
|
|||
}
|
||||
|
||||
body {
|
||||
min-height: 100svh;
|
||||
height: max-content;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,15 @@
|
|||
|
||||
.docslayout-root {
|
||||
margin-inline: 0.618rem;
|
||||
margin-top: 4rem;
|
||||
margin-top: 3.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.docslayout-inner {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.docs {
|
||||
|
|
@ -11,10 +19,6 @@
|
|||
flex-direction: row;
|
||||
}
|
||||
|
||||
.docslayout-inner {
|
||||
min-height: 100svh;
|
||||
}
|
||||
|
||||
.docs-content {
|
||||
flex-grow: 1;
|
||||
|
||||
|
|
@ -33,13 +37,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.spacer-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.c-breadcrumbs {
|
||||
--color-link-breadcrumbs: hsl(var(--accent-600));
|
||||
margin-top: 1.056rem;
|
||||
margin-bottom: 0.318rem;
|
||||
max-width: 100svw;
|
||||
}
|
||||
|
|
@ -100,19 +99,13 @@ ul {
|
|||
}
|
||||
|
||||
.c-breadcrumbs {
|
||||
margin-top: 1.056rem;
|
||||
margin-inline: 1.272rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 85rem) {
|
||||
.docslayout-root {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.docslayout-inner {
|
||||
flex-grow: 1;
|
||||
max-width: 80rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -40,10 +40,15 @@
|
|||
height: 24px;
|
||||
border-radius: 50%;
|
||||
margin-left: 3px;
|
||||
transition: transform 250ms ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: hsl(var(--nav-indicator-bkg));
|
||||
}
|
||||
|
||||
&[data-state="open"] {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-shevron {
|
||||
|
|
@ -54,18 +59,10 @@ html.dark .nav-shevron {
|
|||
color: white;
|
||||
}
|
||||
|
||||
[data-scope="accordion"][data-part="item-indicator"][data-state="open"] {
|
||||
animation: rotateIn 250ms ease-in-out forwards;
|
||||
}
|
||||
|
||||
[data-scope="accordion"][data-part="item-indicator"][data-state="closed"] {
|
||||
animation: rotateOut 250ms ease-in-out;
|
||||
}
|
||||
|
||||
[data-scope="accordion"][data-part="item-content"] {
|
||||
--height: 709;
|
||||
margin-block: 0.175rem;
|
||||
margin-left: 1.4rem;
|
||||
margin-left: 1.6rem;
|
||||
|
||||
& .arktree-item,
|
||||
[data-part="item-content"]>div {
|
||||
|
|
|
|||
|
|
@ -13,17 +13,11 @@
|
|||
max-height: 500px;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
--width: 25rem;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& div {
|
||||
height: max-content;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -33,100 +27,110 @@
|
|||
z-index: 11;
|
||||
overflow: hidden;
|
||||
top: 2.6rem;
|
||||
left: -1rem;
|
||||
width: 0;
|
||||
left: calc(-3rem + -80svw);
|
||||
height: calc(100svh - 2.5rem);
|
||||
font-size: 1rem;
|
||||
scrollbar-width: none;
|
||||
font-size: 1.2rem;
|
||||
-ms-overflow-style: none;
|
||||
background-color: hsl(var(--overlay-bkg));
|
||||
border-right: solid hsl(var(--overlay-bkg-border)) 1px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
transition:
|
||||
width 0.3s ease,
|
||||
height 0.3s ease,
|
||||
background-color 0.3s ease,
|
||||
backdrop-filter 0.3s ease,
|
||||
left 0.3s ease,
|
||||
padding 0.3s ease;
|
||||
|
||||
&.shown {
|
||||
width: var(--width);
|
||||
background-color: hsl(var(--bg-900) / 0.6);
|
||||
backdrop-filter: blur(3px) saturate(180%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
left: -1rem;
|
||||
}
|
||||
|
||||
& .navtree {
|
||||
padding: 1rem;
|
||||
/* lines up with non overlay nav */
|
||||
padding: 0.5rem 0.618rem;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
width: 80svw;
|
||||
box-sizing: content-box;
|
||||
overflow-y: scroll;
|
||||
margin-bottom: 4rem;
|
||||
padding-left: 1rem;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
margin-bottom: 1rem;
|
||||
text-wrap: nowrap;
|
||||
|
||||
& [data-part="item-indicator"] {
|
||||
margin-left: 1rem;
|
||||
margin-right: 0.8rem;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
|
||||
& svg {
|
||||
height: max-content;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
& [data-part="item-trigger"] {
|
||||
max-width: 90%;
|
||||
min-height: 3em;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
& [data-part="item-content"] {
|
||||
margin-left: 3.7rem;
|
||||
}
|
||||
|
||||
& [data-part="item"] {
|
||||
margin-left: unset;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding-right: 0;
|
||||
|
||||
& [data-part="item-content"] {
|
||||
& [data-part="item-trigger"] {
|
||||
margin-left: 1em;
|
||||
|
||||
& p {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
& [data-part="item-content"] {
|
||||
max-width: 80%;
|
||||
margin-left: 3.33em;
|
||||
|
||||
& > div {
|
||||
display: grid;
|
||||
|
||||
& a {
|
||||
display: grid;
|
||||
justify-items: start;
|
||||
align-items: center;
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
& [data-part="item-content"] > div {
|
||||
min-height: 3em;
|
||||
& > p { margin: auto 0; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 40rem) {
|
||||
@media (min-width: 40rem) {
|
||||
.nav-toggle {
|
||||
--width: 100svw;
|
||||
.nav-items {
|
||||
font-size: 1rem;
|
||||
top: 2.5rem;
|
||||
left: -24rem;
|
||||
|
||||
& svg {
|
||||
height: max-content;
|
||||
width: 100%;
|
||||
& .navtree {
|
||||
width: 21rem;
|
||||
}
|
||||
|
||||
& .navtree {
|
||||
& [data-part="item-trigger"] {
|
||||
min-height: 3em;
|
||||
& [data-part="item-indicator"] {
|
||||
margin-left: 0.2rem;
|
||||
margin-right: 0rem;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
|
||||
& svg {
|
||||
height: unset;
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
& [data-part="item-trigger"] {
|
||||
min-height: 2.2rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
& [data-part="item-content"] {
|
||||
margin-left: 1.6rem;
|
||||
}
|
||||
|
||||
& [data-part="item"] {
|
||||
& [data-part="item-content"] > div {
|
||||
min-height: 4em;
|
||||
min-height: 2.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -141,10 +145,10 @@
|
|||
display: block;
|
||||
width: 21rem;
|
||||
position: sticky;
|
||||
top: 4rem;
|
||||
top: 3.5rem;
|
||||
flex-shrink: 0;
|
||||
overflow: scroll;
|
||||
max-height: calc(100svh - 8rem);
|
||||
overflow-y: scroll;
|
||||
max-height: calc(100svh - 4rem);
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
z-index: 10;
|
||||
|
|
@ -153,5 +157,6 @@
|
|||
.navtree {
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
|
||||
.toc-toggle {
|
||||
--width: 100svw;
|
||||
--width: 80svw;
|
||||
display: block;
|
||||
position: unset;
|
||||
height: 24px;
|
||||
|
|
@ -51,32 +51,27 @@
|
|||
|
||||
& .toc-mobile {
|
||||
position: absolute;
|
||||
top: 2.6rem;
|
||||
top: 2.5rem;
|
||||
right: -1rem;
|
||||
width: 0;
|
||||
height: max(min(100svh, 800px), calc(100svh - 8rem));
|
||||
font-size: 0.745rem;
|
||||
font-weight: 600;
|
||||
height: calc(100svh - 3.5rem);
|
||||
font-size: 1rem;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
background-color: hsl(var(--overlay-bkg));
|
||||
border-left: solid hsl(var(--overlay-bkg-border)) 1px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
transition: width 0.3s ease,
|
||||
height 0.3s ease,
|
||||
background-color 0.3s ease,
|
||||
backdrop-filter 0.3s ease,
|
||||
transition:
|
||||
width 0.3s ease,
|
||||
padding 0.3s ease;
|
||||
|
||||
&.shown {
|
||||
overflow-y: scroll;
|
||||
padding: 0.3rem;
|
||||
width: var(--width);
|
||||
height: max(min(100svh, 800px), calc(100svh - 8rem));
|
||||
background-color: hsl(var(--bg-900) / 0.6);
|
||||
backdrop-filter: blur(3px) saturate(180%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -95,6 +90,11 @@
|
|||
}
|
||||
|
||||
@media (min-width: 65rem) {
|
||||
.toc-wrapper {
|
||||
width: 19rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toc-wrapper-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -104,9 +104,9 @@
|
|||
background-color: transparent;
|
||||
display: block;
|
||||
position: sticky;
|
||||
top: 4rem;
|
||||
width: max-content;
|
||||
max-height: calc(100svh - 8rem);
|
||||
top: 3.5rem;
|
||||
width: 19rem;
|
||||
max-height: calc(100svh - 4rem);
|
||||
overflow-y: scroll;
|
||||
z-index: 9;
|
||||
margin-right: 1.272rem;
|
||||
|
|
@ -140,9 +140,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 85rem) {
|
||||
.toc-wrapper {
|
||||
width: 19rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,14 +63,16 @@ html.dark {
|
|||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
z-index: 12;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 3.5rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
display: none;
|
||||
display: block;
|
||||
font-size: 1.614em;
|
||||
font-weight: 700;
|
||||
line-height: 1.272;
|
||||
|
|
@ -90,17 +92,17 @@ html.dark {
|
|||
|
||||
.header-left {
|
||||
justify-content: flex-start;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
justify-content: flex-end;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.spacer-mobile {
|
||||
font-size: 1.374rem;
|
||||
color: hsla(var(--white) 40 50 / 0.3);
|
||||
.header-spacer {
|
||||
height: 1.5rem;
|
||||
width: 2px;
|
||||
background-color: hsla(var(--white) 40 50 / 0.3);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
|
|
@ -115,7 +117,6 @@ html.dark {
|
|||
footer {
|
||||
position: sticky;
|
||||
bottom: -3.5rem;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 3.5rem;
|
||||
font-size: min(1.112rem, max(1svw, 0.8rem));
|
||||
|
|
@ -190,23 +191,10 @@ footer {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 85rem) {
|
||||
.header-title {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header-title.mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-toggle,
|
||||
.spacer-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.spacer-desktop {
|
||||
display: block;
|
||||
font-size: 1.374rem;
|
||||
color: hsla(var(--white) 40 50 / 0.3);
|
||||
}
|
||||
@media (min-width: 65rem) {
|
||||
.toc-collapsed-spacer { display: none }
|
||||
}
|
||||
|
||||
@media (min-width: 85rem) {
|
||||
.nav-collapsed-spacer { display: none }
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue