Skip to content

Commit 1113f24

Browse files
mikethemanmiketheman
committed
adapt style
Signed-off-by: Mike Fiedler <miketheman@gmail.com>
1 parent 8f3f074 commit 1113f24

2 files changed

Lines changed: 180 additions & 3 deletions

File tree

‎pep_sphinx_extensions/pep_theme/static/style.css‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -427,6 +427,183 @@ dl.footnote > dd {
427427
padding-bottom: 2rem;
428428
font-weight: bold;
429429
}
430+
/* Pagefind search styling (custom, no default CSS) */
431+
.pagefind-ui {
432+
--pagefind-ui-primary: var(--colour-links);
433+
--pagefind-ui-text: var(--colour-text);
434+
--pagefind-ui-background: var(--colour-background);
435+
--pagefind-ui-border: var(--colour-background-accent-strong);
436+
font-family: inherit;
437+
width: 100%;
438+
}
439+
440+
/* Search form */
441+
.pagefind-ui__form {
442+
position: relative;
443+
}
444+
445+
/* Search icon */
446+
.pagefind-ui__form::before {
447+
background-color: var(--pagefind-ui-text);
448+
width: 14px;
449+
height: 14px;
450+
top: 8px;
451+
left: 8px;
452+
content: "";
453+
position: absolute;
454+
display: block;
455+
opacity: 0.5;
456+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z' fill='%23000000'/%3E%3C/svg%3E%0A");
457+
mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z' fill='%23000000'/%3E%3C/svg%3E%0A");
458+
-webkit-mask-size: 100%;
459+
mask-size: 100%;
460+
z-index: 9;
461+
pointer-events: none;
462+
}
463+
464+
/* Search input */
465+
.pagefind-ui__search-input {
466+
height: 30px;
467+
padding: 4px 28px 4px 28px;
468+
background-color: var(--pagefind-ui-background);
469+
border: 1px solid var(--pagefind-ui-border);
470+
border-radius: 3px;
471+
font-size: 0.875rem;
472+
font-family: inherit;
473+
appearance: none;
474+
-webkit-appearance: none;
475+
width: 100%;
476+
box-sizing: border-box;
477+
color: var(--pagefind-ui-text);
478+
}
479+
.pagefind-ui__search-input:focus {
480+
outline: none;
481+
border-color: var(--pagefind-ui-primary);
482+
}
483+
.pagefind-ui__search-input::placeholder {
484+
color: var(--pagefind-ui-text);
485+
opacity: 0.5;
486+
}
487+
488+
/* Clear button */
489+
.pagefind-ui__search-clear {
490+
position: absolute;
491+
top: 50%;
492+
transform: translateY(-50%);
493+
right: 4px;
494+
padding: 2px 6px;
495+
color: var(--pagefind-ui-text);
496+
font-size: 0.75rem;
497+
cursor: pointer;
498+
background-color: var(--pagefind-ui-background);
499+
border: none;
500+
opacity: 0.6;
501+
}
502+
.pagefind-ui__search-clear:hover {
503+
opacity: 1;
504+
}
505+
506+
/* Results container */
507+
.pagefind-ui__results-area {
508+
margin-top: 0.5rem;
509+
}
510+
511+
/* Results list */
512+
#pep-sidebar .pagefind-ui__results {
513+
list-style: none;
514+
padding: 0;
515+
margin: 0;
516+
}
517+
518+
/* Individual result */
519+
.pagefind-ui__result {
520+
padding: 0.5rem 0 0.5rem 0.5rem;
521+
border-bottom: 1px solid var(--colour-rule-light);
522+
}
523+
.pagefind-ui__result:last-child {
524+
border-bottom: none;
525+
}
526+
527+
/* Result link */
528+
.pagefind-ui__result-link {
529+
font-weight: bold;
530+
font-size: 0.9rem;
531+
text-decoration: none;
532+
color: var(--colour-links);
533+
}
534+
.pagefind-ui__result-link:hover {
535+
text-decoration: underline;
536+
}
537+
538+
/* Result title */
539+
.pagefind-ui__result-title {
540+
margin: 0;
541+
}
542+
543+
/* Result excerpt/snippet */
544+
.pagefind-ui__result-excerpt {
545+
font-size: 0.8rem;
546+
color: var(--colour-text);
547+
margin: 0.25rem 0 0;
548+
line-height: 1.4;
549+
}
550+
551+
/* Highlight matches in results */
552+
.pagefind-ui__result-excerpt mark,
553+
mark.pagefind-ui__highlight {
554+
background-color: var(--colour-caution);
555+
color: inherit;
556+
padding: 0 2px;
557+
}
558+
559+
/* Message when no results */
560+
.pagefind-ui__message {
561+
font-size: 0.85rem;
562+
color: var(--colour-text);
563+
padding: 0.5rem 0;
564+
}
565+
566+
/* Loading state */
567+
.pagefind-ui__loading {
568+
font-size: 0.85rem;
569+
color: var(--colour-text);
570+
opacity: 0.7;
571+
}
572+
573+
/* Sub-results (nested) */
574+
.pagefind-ui__result-nested {
575+
margin-left: 1rem;
576+
padding: 0.25rem 0;
577+
}
578+
.pagefind-ui__result-nested .pagefind-ui__result-link {
579+
font-weight: normal;
580+
font-size: 0.85rem;
581+
}
582+
583+
/* Button styling */
584+
.pagefind-ui__button {
585+
background: var(--colour-background-accent-light);
586+
border: 1px solid var(--colour-background-accent-strong);
587+
padding: 0.4rem 0.8rem;
588+
border-radius: 4px;
589+
cursor: pointer;
590+
font-size: 0.85rem;
591+
color: var(--colour-text);
592+
margin-top: 0.5rem;
593+
}
594+
.pagefind-ui__button:hover {
595+
background: var(--colour-background-accent-medium);
596+
}
597+
598+
/* Drawer (expandable results container) */
599+
.pagefind-ui__drawer {
600+
overflow: hidden;
601+
}
602+
603+
/* Suppress unused pagefind elements */
604+
.pagefind-ui__suppressed {
605+
display: none;
606+
}
430607

431608
.reference.external > strong {
432609
font-weight: normal; /* Fix strong links for :pep: and :rfc: roles */

‎pep_sphinx_extensions/pep_theme/templates/page.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<meta name="color-scheme" content="light dark">
8-
<title>{{ title + " | peps.python.org"|safe }}</title>
8+
<title data-pagefind-weight="8">{{ title + " | peps.python.org"|safe }}</title>
99
<link rel="shortcut icon" href="{{ pathto('_static/py.png', resource=True) }}">
1010
<link rel="canonical" href="https://peps.python.org/{{ pagename }}/">
1111
<link rel="stylesheet" href="{{ pathto('_static/style.css', resource=True) }}" type="text/css">
@@ -33,7 +33,7 @@
3333
</script>
3434
<section id="pep-page-section">
3535
<header>
36-
<h1>Python Enhancement Proposals</h1>
36+
<h1 data-pagefind-ignore>Python Enhancement Proposals</h1>
3737
<ul class="breadcrumbs">
3838
<li><a href="https://www.python.org/" title="The Python Programming Language">Python</a> &raquo; </li>
3939
<li><a href="{{ pathto("pep-0000") }}">PEP Index</a> &raquo; </li>
@@ -55,7 +55,7 @@ <h1>Python Enhancement Proposals</h1>
5555
<article data-pagefind-body>
5656
{%- endif %}
5757
{# Add pagefind meta for the title to improve search result display #}
58-
<div data-pagefind-meta="title:{{ title }}" style="display:none;"></div>
58+
<h1 data-pagefind-meta="title:{{ title }}" style="display:none;">{{ title }}</h1>
5959
{{ body }}
6060
</article>
6161
{%- if not pagename.startswith(("404", "numerical")) %}

0 commit comments

Comments
 (0)