fixed styling for search bar, fixed positioning for widescreens(needs testing), restricted pagefind indexing, made titles top weight, added root module description
This commit is contained in:
parent
ab44ad8128
commit
b65b93b5eb
GPG key ID:
4E4A5AD1FB748427
11 changed files with 67 additions and 28 deletions
|
|
@ -81,6 +81,7 @@ ul {
|
|||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
.docs,
|
||||
.docslayout-root {
|
||||
gap: 0.648rem;
|
||||
|
|
@ -88,7 +89,8 @@ ul {
|
|||
|
||||
.docslayout-root {
|
||||
margin-left: calc(1.618rem + 260px);
|
||||
padding-bottom: 3rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.docs-content {
|
||||
|
|
@ -109,6 +111,11 @@ ul {
|
|||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.docs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.docs-content {
|
||||
& section {
|
||||
max-width: 45svw;
|
||||
|
|
@ -116,7 +123,7 @@ ul {
|
|||
}
|
||||
|
||||
.docslayout-root {
|
||||
margin-inline: calc(10svw + 260px);
|
||||
margin-inline: 15svw;
|
||||
}
|
||||
|
||||
.docslayout-inner {
|
||||
|
|
|
|||
|
|
@ -103,13 +103,12 @@
|
|||
.nav-wrapper {
|
||||
display: block;
|
||||
width: 250px;
|
||||
position: fixed;
|
||||
top: 5rem;
|
||||
bottom: 3rem;
|
||||
position: sticky;
|
||||
top: 4rem;
|
||||
left: 1.618rem;
|
||||
flex-shrink: 0;
|
||||
overflow: scroll;
|
||||
max-height: 90svh;
|
||||
max-height: calc(100svh - 8rem);
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
z-index: 10;
|
||||
|
|
|
|||
|
|
@ -19,6 +19,12 @@
|
|||
#qs_search .pagefind-ui__form::before {
|
||||
--pagefind-ui-text: hsl(0 0 65);
|
||||
opacity: 1;
|
||||
outline: unset;
|
||||
}
|
||||
|
||||
#qs_search .pagefind-ui--reset *:where( :not(html, iframe, canvas, img, svg, video):not(svg *,
|
||||
symbol *)) {
|
||||
outline: unset;
|
||||
}
|
||||
|
||||
#qs_search .pagefind-ui__search-input {
|
||||
|
|
@ -47,7 +53,7 @@
|
|||
content: "";
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E") center / 50% no-repeat;
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.41 12 6.3-6.29a1 1 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1 1 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 .33 1.64 1 1 0 0 0 1.09-.22l6.29-6.3 6.29 6.3a1 1 0 0 0 1.64-.33 1 1 0 0 0-.22-1.09L13.41 12Z'/%3E%3C/svg%3E") center / 50% no-repeat;
|
||||
background-color: hsl(var(--accent-600));
|
||||
background-color: hsl(0 25 45);
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -140,7 +146,7 @@
|
|||
inset-block: 0;
|
||||
inset-inline-start: var(--search-tree-diagram-inline-start);
|
||||
width: var(--search-tree-diagram-size);
|
||||
background: hsl(var(--blue) 5 25);
|
||||
background: hsl(var(--blue) 10 30);
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E") 0% 0% / 100% no-repeat;
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m6-988H8'/%3E%3C/svg%3E") 0% 0% / 100% no-repeat;
|
||||
}
|
||||
|
|
@ -161,6 +167,26 @@
|
|||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
#qs_search .pagefind-ui__result-inner>.pagefind-ui__result-excerpt {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
background: hsl(0 0 10);
|
||||
padding: var(--search-result-nested-pad-block) var(--search-result-pad-inline-end);
|
||||
padding-inline-start: var(--search-result-pad-inline-start);
|
||||
margin-top: unset;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset-block: 0;
|
||||
inset-inline-start: var(--search-tree-diagram-inline-start);
|
||||
width: var(--search-tree-diagram-size);
|
||||
background: hsl(var(--blue) 10 30);
|
||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m'/%3E%3C/svg%3E") 0% 0% / 100% no-repeat;
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 1000' preserveAspectRatio='xMinYMin slice'%3E%3Cpath d='M8 0v1000m'/%3E%3C/svg%3E") 0% 0% / 100% no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
#qs_search mark {
|
||||
color: hsl(var(--blue) 15 60);
|
||||
background-color: transparent;
|
||||
|
|
@ -325,14 +351,14 @@ button[data-close-modal] {
|
|||
}
|
||||
}
|
||||
|
||||
html.dark button[data-open-modal] {
|
||||
html.dark button[data-open-modal] {
|
||||
background-color: hsla(var(--blue) 15 15 / 0.5);
|
||||
color: hsl(var(--blue) 40 65);
|
||||
|
||||
&:hover {
|
||||
color: hsl(var(--blue) 60 85);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#qs_search {
|
||||
--search-cancel-space: 0px;
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@
|
|||
.toc-wrapper {
|
||||
background-color: transparent;
|
||||
display: block;
|
||||
position: fixed;
|
||||
position: sticky;
|
||||
top: 5rem;
|
||||
right: 8svw;
|
||||
width: 18rem;
|
||||
|
|
|
|||
|
|
@ -113,8 +113,8 @@ html.dark {
|
|||
}
|
||||
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
position: sticky;
|
||||
bottom: -3.5rem;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 3.5rem;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue