style: changed how favicons appear on the result page
This commit is contained in:
@@ -277,12 +277,38 @@ h1 span {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
margin-bottom: 2px;
|
margin-bottom: 2px;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
.result-favicon {
|
.result-favicon {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
object-fit: contain;
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
position: absolute;
|
||||||
|
left: -24px;
|
||||||
|
}
|
||||||
|
.url {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.result-favicon {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
left: -20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.result-favicon {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
left: -16px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.results-container {
|
.results-container {
|
||||||
grid-column:2;
|
grid-column:2;
|
||||||
@@ -320,12 +346,6 @@ h1 span {
|
|||||||
display:inline-block;
|
display:inline-block;
|
||||||
margin-bottom:4px;
|
margin-bottom:4px;
|
||||||
}
|
}
|
||||||
.url {
|
|
||||||
color:var(--text-secondary);
|
|
||||||
font-size:0.85rem;
|
|
||||||
display:block;
|
|
||||||
margin-bottom:4px;
|
|
||||||
}
|
|
||||||
.desc {
|
.desc {
|
||||||
color:var(--text-muted);
|
color:var(--text-muted);
|
||||||
line-height:1.6;
|
line-height:1.6;
|
||||||
@@ -438,6 +458,10 @@ h1 span {
|
|||||||
|
|
||||||
|
|
||||||
@media (max-width:1200px) {
|
@media (max-width:1200px) {
|
||||||
|
body {
|
||||||
|
padding-left: 16px;
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
.content-layout {
|
.content-layout {
|
||||||
grid-template-columns:1fr;
|
grid-template-columns:1fr;
|
||||||
padding:20px 30px;
|
padding:20px 30px;
|
||||||
@@ -459,6 +483,10 @@ h1 span {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width:768px) {
|
@media (max-width:768px) {
|
||||||
|
body {
|
||||||
|
padding-left: 16px;
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
header {
|
header {
|
||||||
flex-direction:column;
|
flex-direction:column;
|
||||||
gap:12px;
|
gap:12px;
|
||||||
|
|||||||
@@ -57,7 +57,7 @@
|
|||||||
<div class="result">
|
<div class="result">
|
||||||
<div class="result-header">
|
<div class="result-header">
|
||||||
<div class="result-favicon"
|
<div class="result-favicon"
|
||||||
style="background-image: url('https://{{result[4]}}/favicon.ico');">
|
style="background-image: url('https://{{result[4]}}/favicon.ico'), url('https://{{result[4]}}/favicon.png');">
|
||||||
</div>
|
</div>
|
||||||
<span class="url">
|
<span class="url">
|
||||||
{{result[1]}}
|
{{result[1]}}
|
||||||
|
|||||||
Reference in New Issue
Block a user