Non layout styling (#5)

This commit is contained in:
chapoi
2025-03-01 01:29:27 +08:00
committed by GitHub
parent 720f0bb127
commit 353b955eed
17 changed files with 549 additions and 85 deletions
+37 -3
View File
@@ -1,13 +1,16 @@
.custom-search-banner-wrap {
display: grid;
grid-template-rows: 0.33fr 0.33fr 0.33fr;
grid-template-columns: 0.5fr 0.5fr;
grid-template-columns: 1fr 1fr;
grid-column-gap: 1em;
grid-row-gap: 0.5em;
border-bottom: 1px solid var(--primary-300);
padding: 2.5em 0 2.5em;
margin-bottom: 2.5em;
--search-color: #595bca;
@media screen and (max-width: 700px) {
margin-bottom: 0.5em;
}
h1 {
grid-column: 1/2;
grid-row: 1/-1;
@@ -17,18 +20,49 @@
margin: 0;
font-weight: 400;
color: #350c73;
@media screen and (max-width: 1028px) {
font-size: var(--font-up-4);
grid-column: 1/-1;
grid-row: 1;
text-align: center;
margin-bottom: 0.5em;
}
@media screen and (max-width: 768px) {
text-align: left;
grid-column: 1/2;
grid-row: 1/-1;
font-size: var(--font-up-3);
}
@media screen and (max-width: 600px) {
grid-column: 1/-1;
grid-row: 1;
text-align: center;
margin-bottom: 0.5em;
}
}
.search-menu {
grid-column: 2/3;
grid-row: 1/-1;
width: 100%;
align-self: center;
@media screen and (max-width: 1028px) {
grid-row: 2/-1;
grid-column: 1/-1;
}
@media screen and (max-width: 768px) {
grid-column: 2/-1;
grid-row: 1/-1;
}
@media screen and (max-width: 600px) {
grid-row: 2/-1;
grid-column: 1/-1;
}
}
p {
display: none;
}
.search-input {
background: light-dark(#ffffff, #1f1f1f);
background: var(--d-content-background);
border: 1px solid oklch(from var(--search-color) 80% calc(c * 2.5) h);
box-shadow: 0 4px 10px rgba(52, 6, 121, 15%);
}
@@ -42,6 +76,6 @@
color: var(--search-color);
}
.results {
background: light-dark(#ffffff, #1f1f1f);
background: var(--d-content-background);
}
}