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({
components: [
{
Component: Component.Search({miniButton: false}),
Component: Component.Search(),
grow: true,
},
{ Component: Component.Tags() },
@ -54,7 +54,7 @@ export const defaultListPageLayout: PageLayout = {
Component.Flex({
components: [
{
Component: Component.Search({miniButton: false}),
Component: Component.Search(),
grow: true,
},
{ 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 opts = { ...defaultOptions, ...userOpts }
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 (
<div class={classNames(displayClass, "search") + (opts.miniButton ? " search-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">
<title>Search</title>
<g class="search-path" fill="none">

12
quartz/components/Tags.tsx
View File

@ -9,16 +9,10 @@ export default (() => {
return (
<a href="/tags" class="toggle tags-link" tabIndex={-1}>
<button class="tags-button" id="tags-button">
<svg
viewBox="0 0 25 25"
xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
<g>
<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" />
<circle
cy="6.5883951"
cx="6.5883951"
r="2.6196454" />
<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" />
<circle cy="6.5883951" cx="6.5883951" r="2.6196454" />
</g>
</svg>
</button>

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

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

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

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