vlw.se/assets/css/pages/search.css
Victor Westerlund 3fd7ce6bf0
feat: add new search UI (#24)
* feat: remove old search features

* feat: add new page search ui
2024-05-06 17:17:29 +00:00

85 lines
No EOL
1.3 KiB
CSS
Executable file

/* # Overrides */
[vv-page="/search"]:not(body) {
display: flex;
flex-direction: column;
gap: var(--padding);
}
/* # Sections */
/* ## Search */
section.search {
width: 100%;
display: none;
flex-direction: column;
align-items: center;
gap: var(--padding);
background-color: rgba(255, 255, 255, .05);
padding: calc(var(--padding) * 1.5);
margin-bottom: calc(var(--padding) * 2);
}
main[vv-page="/search"] > section.search {
display: flex;
}
section.search form {
display: contents;
}
section.search search {
width: 100%;
}
section.search input {
width: 100%;
border: none;
color: black;
outline: none;
padding: var(--padding);
background-color: var(--color-accent);
}
section.search button[type="submit"] {
width: 100%;
max-width: 350px;
}
section.search > svg {
width: 100%;
}
/* # Search results */
section.results .result {
display: flex;
flex-direction: column;
gap: calc(var(--padding) / 2);
}
/* ## Titles */
section.title a h2 {
color: var(--color-accent);
}
section.title a h2::before {
content: "// ";
color: white;
}
/* ## Work */
section.results.work {
display: grid;
grid-template-columns: 1fr;
gap: calc(var(--padding) / 2);
}
section.results.work .result {
padding: var(--padding);
background-color: rgba(255, 255, 255, .03);
border-radius: 6px;
}