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() },

6
quartz/components/Search.tsx
View File

@ -19,7 +19,11 @@ 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" : "")}>

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>

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

@ -240,7 +240,7 @@
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,7 +251,7 @@
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);

3
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;