Skip to content

Commit 606038d

Browse files
nikoshellnikoshell
committed
Separate search styles.
1 parent 6106d88 commit 606038d

File tree

4 files changed

+124
-128
lines changed

4 files changed

+124
-128
lines changed

‎src/components/BaseHead.astro‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
11
---
2-
// Import the global.css file here so that it is included on
3-
// all pages through the use of the <BaseHead /> component.
4-
import "../styles/global.css";
5-
import "@fontsource-variable/inter";
62
73
interface Props {
84
title: string;

‎src/layouts/Layout.astro‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import Header from "@components/Header.astro";
44
import Footer from "@components/Footer.astro";
55
import Search from "@components/Search.astro";
66
7-
import "../styles/global.css";
7+
import "@src/styles/global.css";
8+
import "@src/styles/search.css";
89
import "@fontsource-variable/inter";
910
1011
export interface Props {

‎src/styles/global.css‎

Lines changed: 0 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -151,126 +151,3 @@ body {
151151
--max-fs: 1.5;
152152
}
153153
}
154-
155-
.search-pagefind {
156-
padding: 85px 10px 10px 10px;
157-
position: relative;
158-
max-height: 80vh;
159-
width: 100%;
160-
max-width: 48rem;
161-
margin: auto;
162-
background: #f5e5d6;
163-
border-radius: 0.5rem;
164-
box-shadow: 0 8px 24px -2px rgba(0, 0, 0, 0.4);
165-
overflow: auto;
166-
transition: background ease-out 0.2s;
167-
z-index: 2;
168-
overflow: auto;
169-
height: 100%;
170-
171-
border-bottom: 1px solid #e1e3e6;
172-
border-bottom-color: rgb(225, 227, 230);
173-
}
174-
175-
.pagefind-ui__search-input {
176-
border: 1px solid #ccc;
177-
border-radius: 20px;
178-
padding-inline-start: 0.75rem;
179-
padding-inline-end: 0.5rem;
180-
background-color: #fff;
181-
font-size: 16px;
182-
color: #5f3d1b;
183-
}
184-
185-
.pagefind-ui__result.selected {
186-
background-color: #f5f5f5;
187-
background-image: linear-gradient(to right, #3684b6 7px, transparent 5px);
188-
-webkit-transform: translate3d(0, 0, 0);
189-
transform: translate3d(0, 0, 0);
190-
}
191-
.pagefind-ui__result:hover {
192-
background-color: #f5f5f5;
193-
}
194-
.pagefind-ui__message {
195-
margin: 1em;
196-
}
197-
.pagefind-ui__result mark {
198-
background: #f9eb5d;
199-
background-image: linear-gradient(to right, #f9eb5d 10%, #fcf4a7 100%);
200-
margin: 4px;
201-
padding-right: 6px;
202-
padding-left: 6px;
203-
padding-top: 2px;
204-
padding-bottom: 2px;
205-
color: #000000;
206-
font-family: monospace;
207-
border-radius: 4px;
208-
}
209-
.pagefind-ui {
210-
--pagefind-ui-scale: 1;
211-
--pagefind-ui-primary: #141f36;
212-
--pagefind-ui-text: black;
213-
--pagefind-ui-border: #d8d8d8;
214-
--pagefind-ui-border-width: 2px;
215-
--pagefind-ui-border-radius: 0.5rem;
216-
/*width: 50%;*/
217-
}
218-
.pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
219-
z-index: 9999;
220-
position: relative;
221-
overflow: auto;
222-
height: 100%;
223-
}
224-
.pagefind-ui__result {
225-
padding: 0 2em 1em !important;
226-
}
227-
.pagefind-ui .pagefind-ui__result-link {
228-
color: var(--pagefind-ui-primary);
229-
}
230-
.pagefind-ui .pagefind-ui__result-excerpt {
231-
color: var(--pagefind-ui-text);
232-
}
233-
234-
.search-header {
235-
max-width: 48rem;
236-
margin: auto;
237-
}
238-
.search-header h2 {
239-
position: relative;
240-
left: -12px;
241-
z-index: 100;
242-
}
243-
.modal__overlay {
244-
z-index: 1;
245-
position: absolute;
246-
top: 0;
247-
left: 0;
248-
width: 100%;
249-
height: 100%;
250-
}
251-
252-
.search-wrapper {
253-
width: 100%;
254-
height: 100%;
255-
position: fixed;
256-
display: block;
257-
top: 0;
258-
bottom: 0;
259-
left: 0;
260-
right: 0;
261-
z-index: 500;
262-
box-sizing: border-box;
263-
display: none;
264-
transition: opacity ease-out 0.2s;
265-
background: rgba(37, 40, 43, 0.9);
266-
z-index: 100;
267-
}
268-
269-
#search-close {
270-
position: relative;
271-
left: -12px;
272-
margin: 0;
273-
border: 0;
274-
transition: opacity ease-out 0.2s;
275-
z-index: 10;
276-
}

‎src/styles/search.css‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
#search {
2+
padding: 85px 10px 10px 10px;
3+
position: relative;
4+
max-height: 80vh;
5+
width: 100%;
6+
max-width: 48rem;
7+
margin: auto;
8+
background: #f5e5d6;
9+
border-radius: 0.5rem;
10+
box-shadow: 0 8px 24px -2px rgba(0, 0, 0, 0.4);
11+
overflow: auto;
12+
transition: background ease-out 0.2s;
13+
z-index: 2;
14+
overflow: auto;
15+
height: 100%;
16+
17+
border-bottom: 1px solid #e1e3e6;
18+
border-bottom-color: rgb(225, 227, 230);
19+
}
20+
21+
.pagefind-ui__search-input {
22+
border: 1px solid #ccc;
23+
border-radius: 20px;
24+
padding-inline-start: 0.75rem;
25+
padding-inline-end: 0.5rem;
26+
background-color: #fff;
27+
font-size: 16px;
28+
color: #5f3d1b;
29+
}
30+
31+
.pagefind-ui__result.selected {
32+
background-color: #f5f5f5;
33+
background-image: linear-gradient(to right, #3684b6 7px, transparent 5px);
34+
-webkit-transform: translate3d(0, 0, 0);
35+
transform: translate3d(0, 0, 0);
36+
}
37+
.pagefind-ui__result:hover {
38+
background-color: #f5f5f5;
39+
}
40+
.pagefind-ui__message {
41+
margin: 1em;
42+
}
43+
.pagefind-ui__result mark {
44+
background: #f9eb5d;
45+
background-image: linear-gradient(to right, #f9eb5d 10%, #fcf4a7 100%);
46+
margin: 4px;
47+
padding-right: 6px;
48+
padding-left: 6px;
49+
padding-top: 2px;
50+
padding-bottom: 2px;
51+
color: #000000;
52+
font-family: monospace;
53+
border-radius: 4px;
54+
}
55+
.pagefind-ui {
56+
--pagefind-ui-scale: 1;
57+
--pagefind-ui-primary: #141f36;
58+
--pagefind-ui-text: black;
59+
--pagefind-ui-border: #d8d8d8;
60+
--pagefind-ui-border-width: 2px;
61+
--pagefind-ui-border-radius: 0.5rem;
62+
/*width: 50%;*/
63+
}
64+
.pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
65+
z-index: 9999;
66+
position: relative;
67+
overflow: auto;
68+
height: 100%;
69+
}
70+
.pagefind-ui__result {
71+
padding: 0 2em 1em !important;
72+
}
73+
.pagefind-ui .pagefind-ui__result-link {
74+
color: var(--pagefind-ui-primary);
75+
}
76+
.pagefind-ui .pagefind-ui__result-excerpt {
77+
color: var(--pagefind-ui-text);
78+
}
79+
80+
.search-header {
81+
max-width: 48rem;
82+
margin: auto;
83+
}
84+
.search-header h2 {
85+
position: relative;
86+
left: -12px;
87+
z-index: 100;
88+
}
89+
.modal__overlay {
90+
z-index: 1;
91+
position: absolute;
92+
top: 0;
93+
left: 0;
94+
width: 100%;
95+
height: 100%;
96+
}
97+
98+
.search-wrapper {
99+
width: 100%;
100+
height: 100%;
101+
position: fixed;
102+
display: block;
103+
top: 0;
104+
bottom: 0;
105+
left: 0;
106+
right: 0;
107+
z-index: 500;
108+
box-sizing: border-box;
109+
display: none;
110+
transition: opacity ease-out 0.2s;
111+
background: rgba(37, 40, 43, 0.9);
112+
z-index: 100;
113+
}
114+
115+
#search-close {
116+
position: relative;
117+
left: -12px;
118+
margin: 0;
119+
border: 0;
120+
transition: opacity ease-out 0.2s;
121+
z-index: 10;
122+
}

0 commit comments

Comments
 (0)