From 4621a633fd75f375321f457386925ac6e5231118 Mon Sep 17 00:00:00 2001 From: Korbs Date: Sun, 1 Dec 2024 14:29:08 -0500 Subject: [PATCH] Fix search CSS override and shrink images down to correct width --- src/components/Search.astro | 4 +- src/styles/index.scss | 117 +++++++++++++++++++++++++++++++++--- src/styles/search.scss | 53 ---------------- 3 files changed, 108 insertions(+), 66 deletions(-) delete mode 100644 src/styles/search.scss diff --git a/src/components/Search.astro b/src/components/Search.astro index 2507883..327d85d 100644 --- a/src/components/Search.astro +++ b/src/components/Search.astro @@ -1,6 +1,4 @@ --- -import '@styles/search.scss' - export interface Props { readonly id?: string; readonly className?: string; @@ -28,7 +26,7 @@ const bundlePath = `${import.meta.env.BASE_URL}pagefind/`; function initPageFind() { const allSelector = "[data-pagefind-ui]"; for (const el of document.querySelectorAll( - `${allSelector}.pagefind-init` + `${allSelector}.pagefind-init`, )) { const elSelector = [ ...(el.id ? [`#${el.id}`] : []), diff --git a/src/styles/index.scss b/src/styles/index.scss index 2595f62..b37608c 100755 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -13,16 +13,28 @@ a { } table { - font-family: Arial, Helvetica, sans-serif; - border-collapse: collapse; - width: 100%; - td, th { + font-family: Arial, Helvetica, sans-serif; + border-collapse: collapse; + width: 100%; + + td, + th { border: 1px solid #111111; padding: 8px; } - tr:nth-child(odd){background-color: #333333;} - tr:nth-child(even){background-color: #141414;} - tr:hover {background-color: #454545;} + + tr:nth-child(odd) { + background-color: #333333; + } + + tr:nth-child(even) { + background-color: #141414; + } + + tr:hover { + background-color: #454545; + } + th { padding-top: 12px; padding-bottom: 12pqx; @@ -38,6 +50,7 @@ blockquote { border-radius: 4px; padding: 12px 24px; border-left: 4px white solid; + p { margin: 0px; } @@ -51,22 +64,90 @@ header { top: 0px; left: 0px; z-index: 1; + .header-content { max-width: 1200px; margin: auto; display: flex; align-items: center; justify-content: space-between; + .header-start { display: flex; align-items: center; gap: 12px; + + input { + background: #0a0a0a; + color: white; + border: 1px #2d2d2d solid; + border-radius: 6px; + padding: 12px 16px; + font-size: 14px; + + &:focus { + outline: none; + } + } + + .pagefind-ui__result-image { + width: 100%; + } + + mark { + background: gainsboro; + padding: 2px 4px; + border-radius: 4px; + margin: -2px -4px; + } + + .pagefind-ui__message { + font-size: 18px; + font-weight: bold; + } + + .pagefind-ui__results { + padding: 0px 18px; + } + + .pagefind-ui__drawer { + position: absolute; + top: 79px; + max-width: 620px; + background: rgba(22, 22, 22, 0.75); + border-radius: 6px; + border: 1px #2d2d2d solid; + backdrop-filter: blur(24px); + padding: 12px 24px; + } + + .pagefind-ui__search-clear, + .pagefind-ui__hidden { + display: none !important; + } + + @media screen and (max-width: 916px) { + .pagefind-ui__drawer { + left: 12px; + width: 100%; + max-width: calc(100% - 74px); + } + } + + @media screen and (max-width: 650px) { + .pagefind-ui__drawer { + top: 122px !important; + } + } } + .header-end { display: flex; gap: 12px; + a { text-decoration: none; + &:hover { text-decoration: underline; } @@ -78,38 +159,48 @@ header { .page { position: relative; min-height: 100vh; + article { padding-top: 90px; display: flex; flex-direction: row; gap: 24px; padding-bottom: 80px; + .sidebar { min-width: 250px; display: flex; flex-direction: column; gap: 12px; + a { text-decoration: none; font-size: 14px; color: #898989; } } + .document { height: max-content; - img, video { + + img, + video { width: 100%; border-radius: 6px; } + .feelback-q { justify-content: center; padding: 24px 0px; + svg { color: white; } + .feelback-btn.active { background: white; border-radius: 3rem; + svg { color: black; } @@ -117,6 +208,7 @@ header { } } } + .footer { position: absolute; padding-bottom: 24px; @@ -125,6 +217,7 @@ header { height: 2.5rem; display: flex; justify-content: space-between; + .footer-end { display: flex; gap: 4px; @@ -132,22 +225,26 @@ header { } } -@media screen and (max-width: 775px){ +@media screen and (max-width: 775px) { .content { flex-direction: column !important; } } -@media screen and (max-width: 650px){ + +@media screen and (max-width: 650px) { .header-content { flex-direction: column; padding-bottom: 24px; } + .page .content { padding-top: 114px !important; } + .footer { flex-direction: column !important; align-items: center; + * { margin: 0px; } diff --git a/src/styles/search.scss b/src/styles/search.scss deleted file mode 100644 index 2e39cd6..0000000 --- a/src/styles/search.scss +++ /dev/null @@ -1,53 +0,0 @@ -input { - background: #0a0a0a; - color: white; - border: 1px #2d2d2d solid; - border-radius: 6px; - padding: 12px 16px; - font-size: 14px; - &:focus { - outline: none; - } -} -mark { - background: gainsboro; - padding: 2px 4px; - border-radius: 4px; - margin: -2px -4px; -} - -.pagefind-ui__message { - font-size: 18px; - font-weight: bold; -} -.pagefind-ui__results { - padding: 0px 18px; -} -.pagefind-ui__drawer { - position: absolute; - top: 79px; - max-width: 620px; - background: rgba(22, 22, 22, 0.75); - border-radius: 6px; - border: 1px #2d2d2d solid; - backdrop-filter: blur(24px); - padding: 12px 24px; -} - -.pagefind-ui__search-clear, .pagefind-ui__hidden { - display: none !important; -} - -@media screen and (max-width: 916px){ - .pagefind-ui__drawer { - left: 12px; - width: 100%; - max-width: calc(100% - 74px); - } -} - -@media screen and (max-width: 650px){ - .pagefind-ui__drawer { - top: 122px !important; - } -} \ No newline at end of file