From 9dd3fe46750f3841dc5e0635268aa88493f69569 Mon Sep 17 00:00:00 2001 From: semanticdata Date: Sun, 7 Jul 2024 17:49:03 -0500 Subject: [PATCH] bring back old style search box --- quartz/components/styles/search.scss | 141 +++++++++++++-------------- quartz/styles/base.scss | 48 ++------- 2 files changed, 77 insertions(+), 112 deletions(-) diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss index 6b5e36a75..fb36803c0 100644 --- a/quartz/components/styles/search.scss +++ b/quartz/components/styles/search.scss @@ -2,14 +2,11 @@ .search { min-width: fit-content; - // min-width: auto; - max-width: 18px; // 14rem + max-width: 14rem; flex-grow: 0.3; - padding-right: 1rem; & > #search-icon { - // background-color: var(--lightgray); - background-color: transparent; + background-color: var(--lightgray); border-radius: 4px; height: 2rem; display: flex; @@ -62,13 +59,9 @@ margin-left: auto; margin-right: auto; - @media all and (max-width: $fullPageWidth) { - width: 90%; - } - & > * { width: 100%; - border-radius: 7px; + border-radius: 5px; background: var(--light); box-shadow: 0 14px 50px rgba(27, 33, 48, 0.12), @@ -90,85 +83,71 @@ } & > #search-layout { - display: none; + display: flex; flex-direction: row; + opacity: 0; border: 1px solid var(--lightgray); - flex: 0 0 100%; - box-sizing: border-box; - - &.display-results { - display: flex; - } - - &[data-preview] > #results-container { - flex: 0 0 min(30%, 450px); - } - - @media all and (min-width: $tabletBreakpoint) { - &[data-preview] { - & .result-card > p.preview { - display: none; - } - - & > div { - &:first-child { - border-right: 1px solid var(--lightgray); - border-top-right-radius: unset; - border-bottom-right-radius: unset; - } - - &:last-child { - border-top-left-radius: unset; - border-bottom-left-radius: unset; - } - } - } - } & > div { + // vh - #search-space.margin-top height: calc(75vh - 12vh); - border-radius: 5px; + background: none; + + &:first-child { + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + border-right: 1px solid var(--lightgray); + } + + &:last-child { + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + } } @media all and (max-width: $tabletBreakpoint) { - & > #preview-container { + display: block; + & > *:not(#results-container) { display: none !important; } - &[data-preview] > #results-container { + & > #results-container { width: 100%; height: auto; - flex: 0 0 100%; } } & .highlight { - background: color-mix( - in srgb, - var(--tertiary) 60%, - rgba(255, 255, 255, 0) - ); + background: color-mix(in srgb, var(--tertiary) 60%, transparent); border-radius: 5px; - scroll-margin-top: 2rem; } & > #preview-container { display: block; + box-sizing: border-box; overflow: hidden; - font-family: inherit; - color: var(--dark); - line-height: 1.5em; - font-weight: $normalWeight; - overflow-y: auto; - padding: 0 2rem; & .preview-inner { margin: 0 auto; - width: min($pageWidth, 100%); + padding: 1em; + height: 100%; + width: 100%; + box-sizing: border-box; + overflow-y: auto; + font-family: inherit; + color: var(--dark); + line-height: 1.5em; + font-weight: 400; + background: var(--light); + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + box-shadow: + 0 14px 50px rgba(27, 33, 48, 0.12), + 0 10px 30px rgba(27, 33, 48, 0.16); } - a[role="anchor"] { - background-color: transparent; + a.internal { + background-color: none; } } @@ -176,7 +155,6 @@ overflow-y: auto; & .result-card { - overflow: hidden; padding: 1em; cursor: pointer; transition: background 0.2s ease; @@ -192,6 +170,7 @@ margin: 0; text-transform: none; text-align: left; + background: var(--light); outline: none; font-weight: inherit; @@ -205,23 +184,41 @@ margin: 0; } - & > ul.tags { + & > ul > li { + margin: 0; + display: inline-block; + white-space: nowrap; + margin: 0; + overflow-wrap: normal; + } + + & > ul { + list-style: none; + display: flex; + padding-left: 0; + gap: 0.4rem; + margin: 0; margin-top: 0.45rem; - margin-bottom: 0; + box-sizing: border-box; + overflow: hidden; + background-clip: border-box; } & > ul > li > p { border-radius: 8px; background-color: var(--highlight); - padding: 0.2rem 0.4rem; - margin: 0 0.1rem; - line-height: 1.4rem; - font-weight: $boldWeight; + overflow: hidden; + background-clip: border-box; + padding: 0.03rem 0.4rem; + margin: 0; color: var(--secondary); + opacity: 0.85; + } - &.match-tag { - color: var(--tertiary); - } + & > ul > li > .match-tag { + color: var(--tertiary); + font-weight: bold; + opacity: 1; } & > p { @@ -232,4 +229,4 @@ } } } -} +} \ No newline at end of file diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss index b71a51e46..0c16462c7 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -1,11 +1,7 @@ @use "./variables.scss" as *; @use "./syntax.scss"; @use "./callouts.scss"; -// @use "custom"; -* { - scrollbar-width: thin; -} html { scroll-behavior: smooth; text-size-adjust: none; @@ -47,20 +43,8 @@ ul, .math { color: var(--darkgray); fill: var(--darkgray); - hyphens: auto; -} - -p, -ul, -text, -a, -li, -ol, -ul, -.katex, -.math { overflow-wrap: anywhere; - /* tr and td removed from list of selectors for overflow-wrap, allowing them to use default 'normal' property value */ + hyphens: auto; } .math { @@ -69,12 +53,8 @@ ul, } } -strong { - font-weight: $semiBoldWeight; -} - a { - font-weight: $semiBoldWeight; + font-weight: $boldWeight; text-decoration: none; transition: color 0.2s ease; color: var(--secondary); @@ -95,11 +75,6 @@ a { border-radius: 0; padding: 0; } - &.tag-link { - &::before { - content: "#"; - } - } } &.external .external-icon { @@ -179,7 +154,7 @@ a { position: fixed; @media all and (max-width: $fullPageWidth) { position: initial; - flex-direction: column; + flex-direction: row; padding: 0; width: initial; margin-top: 2rem; @@ -284,9 +259,11 @@ thead { font-weight: revert; margin-bottom: 0; - article > & > a[role="anchor"] { + article > & > a { color: var(--dark); - background-color: transparent; + &.internal { + background-color: transparent; + } } } @@ -497,10 +474,6 @@ video { flex: 1 1 auto; } -div:has(> .overflow) { - position: relative; -} - ul.overflow, ol.overflow { max-height: 400; @@ -532,9 +505,4 @@ ol.overflow { ul { padding-left: 1rem; } -} - -.katex-display { - overflow-x: auto; - overflow-y: hidden; -} +} \ No newline at end of file