GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2025-12-24 13:24:05 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

Updates to search and darkmode styling, add mini-search mode, add tags button (run prettier)

Browse Source
This commit is contained in:
Andrew Milne 2025-03-15 20:59:56 +00:00
parent de5676e188
commit 3ac50f188b
5 changed files with 21 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
quartz.layout.ts
View File

@ -28,7 +28,7 @@ export const defaultContentPageLayout: PageLayout = {
Component.Flex({ Component.Flex({
components: [ components: [
{ {
Component: Component.Search({miniButton: false}), Component: Component.Search(),
grow: true, grow: true,
}, },
{ Component: Component.Tags() }, { Component: Component.Tags() },
@ -54,7 +54,7 @@ export const defaultListPageLayout: PageLayout = {
Component.Flex({ Component.Flex({
components: [ components: [
{ {
Component: Component.Search({miniButton: false}), Component: Component.Search(),
grow: true, grow: true,
}, },
{ Component: Component.Tags() }, { Component: Component.Tags() },

8
quartz/components/Search.tsx
View File

@ -19,11 +19,15 @@ export default ((userOpts?: Partial<SearchOptions>) => {
const Search: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => { const Search: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
const opts = { ...defaultOptions, ...userOpts } const opts = { ...defaultOptions, ...userOpts }
const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder
const searchButtonText = opts.miniButton ? "" : <p>{i18n(cfg.locale).components.search.title}</p> const searchButtonText = opts.miniButton ? (
""
) : (
<p>{i18n(cfg.locale).components.search.title}</p>
)
return ( return (
<div class={classNames(displayClass, "search") + (opts.miniButton ? " search-mini" : "")}> <div class={classNames(displayClass, "search") + (opts.miniButton ? " search-mini" : "")}>
<button class={"search-button" + (opts.miniButton ? " search-button-mini" : "")}> <button class={"search-button" + (opts.miniButton ? " search-button-mini" : "")}>
{searchButtonText} {searchButtonText}
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7"> <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7">
<title>Search</title> <title>Search</title>
<g class="search-path" fill="none"> <g class="search-path" fill="none">

12
quartz/components/Tags.tsx
View File

@ -9,16 +9,10 @@ export default (() => {
return ( return (
<a href="/tags" class="toggle tags-link" tabIndex={-1}> <a href="/tags" class="toggle tags-link" tabIndex={-1}>
<button class="tags-button" id="tags-button"> <button class="tags-button" id="tags-button">
<svg <svg viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
viewBox="0 0 25 25"
xmlns="http://www.w3.org/2000/svg">
<g> <g>
<path <path d="M 4.2086894,1.2393355 A 2.969084,2.9712454 0 0 0 1.2403355,4.2098501 V 11.59051 a 2.969084,2.9712454 0 0 0 0.8696829,2.101561 l 9.2194546,9.224802 a 2.969084,2.9712454 0 0 0 4.197341,-0.0014 l 7.373929,-7.379266 a 2.969084,2.9712454 0 0 0 0.0014,-4.200397 L 13.684012,2.1096514 A 2.969084,2.9712454 0 0 0 11.58398,1.2393355 Z" />
d="M 4.2086894,1.2393355 A 2.969084,2.9712454 0 0 0 1.2403355,4.2098501 V 11.59051 a 2.969084,2.9712454 0 0 0 0.8696829,2.101561 l 9.2194546,9.224802 a 2.969084,2.9712454 0 0 0 4.197341,-0.0014 l 7.373929,-7.379266 a 2.969084,2.9712454 0 0 0 0.0014,-4.200397 L 13.684012,2.1096514 A 2.969084,2.9712454 0 0 0 11.58398,1.2393355 Z" /> <circle cy="6.5883951" cx="6.5883951" r="2.6196454" />
<circle
cy="6.5883951"
cx="6.5883951"
r="2.6196454" />
</g> </g>
</svg> </svg>
</button> </button>

16
quartz/components/styles/search.scss
View File

@ -4,7 +4,7 @@
min-width: fit-content; min-width: fit-content;
max-width: 14rem; max-width: 14rem;
margin-right: 0.5rem; margin-right: 0.5rem;
@media all and ($mobile) { @media all and ($mobile) {
flex-grow: 0.3; flex-grow: 0.3;
} }
@ -236,11 +236,11 @@
} }
.search-mini { .search-mini {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
margin: 0; margin: 0;
&>.search-button-mini { & > .search-button-mini {
display: inline; display: inline;
position: relative; position: relative;
background: none; background: none;
@ -251,10 +251,10 @@
position: absolute; position: absolute;
width: 20px; width: 20px;
height: 20px; height: 20px;
margin:0px; margin: 0px;
top: calc(50% - 10px); top: calc(50% - 10px);
left: calc(50% - 10px); left: calc(50% - 10px);
} }
} }
} }

5
quartz/components/styles/tags.scss
View File

@ -1,12 +1,11 @@
@use "../../styles/variables.scss" as *; @use "../../styles/variables.scss" as *;
.tags-link { .tags-link {
display:block; display: block;
height: 2rem; height: 2rem;
width: 2rem; width: 2rem;
& .tags-button { & .tags-button {
cursor: pointer; cursor: pointer;
padding: 0px; padding: 0px;
position: relative; position: relative;
@ -39,4 +38,4 @@
} }
} }
} }
} }