quickshell/quickshell-web
3
1
Fork 0
Code Issues Projects Activity

improve overlay design and fix footer

Browse source 
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:
outfoxxed 2024-10-14 17:19:10 -07:00
parent 0a69344f98
commit c516c950a8
Signed by: outfoxxed
GPG key ID: 4C88A185FB89301E
8 changed files with 132 additions and 174 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/Header.astro
View file

@ -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}

20
src/styles/css-config/animations.css
View file

@ -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);

9
src/styles/css-config/base.css
View file

@ -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;
}

27
src/styles/docs/docs.css
View file

@ -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;
}

15
src/styles/docs/nav/nav-tree.css
View file

@ -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 {

153
src/styles/docs/nav/nav.css
View file

@ -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-trigger"] {
max-width: 90%;
}
& [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%;
}
}
}
}
}
}
}
}
@media (max-width: 40rem) {
.nav-toggle {
--width: 100svw;
& [data-part="item-indicator"] {
margin-left: 1rem;
margin-right: 0.8rem;
height: 2rem;
width: 2rem;
& svg {
height: max-content;
width: 100%;
}
& .navtree {
& [data-part="item-trigger"] {
min-height: 3em;
}
& [data-part="item-trigger"] {
min-height: 3em;
font-size: 1.2rem;
}
& [data-part="item-content"] {
margin-left: 3.7rem;
}
& [data-part="item"] {
& [data-part="item-content"] > div {
min-height: 4em;
min-height: 3em;
& > p { margin: auto 0; }
}
}
}
}
}
@media (min-width: 40rem) {
.nav-toggle {
.nav-items {
font-size: 1rem;
top: 2.5rem;
left: -24rem;
& .navtree {
width: 21rem;
}
& .navtree {
& [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: 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;
}
}

38
src/styles/docs/toc/toc.css
View file

@ -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;
}
}

40
src/styles/global.css
View file

@ -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: 65rem) {
.toc-collapsed-spacer { display: none }
}
@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);
}
.nav-collapsed-spacer { display: none }
}