style: changed how favicons appear on the result page

2 files changed, 36 insertions, 8 deletions

diff --git a/static/main.css b/static/main.css
index 8743248..fa4eeea 100644
--- a/static/main.css
+++ b/static/main.css
@@ -277,12 +277,38 @@ h1 span {
     align-items: center;
     gap: 8px;
     margin-bottom: 2px;
+    position: relative;
 }
 .result-favicon {
     width: 16px;
     height: 16px;
     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 {
     grid-column:2;
@@ -320,12 +346,6 @@ h1 span {
     display:inline-block;
     margin-bottom:4px;
 }
-.url {
-    color:var(--text-secondary);
-    font-size:0.85rem;
-    display:block;
-    margin-bottom:4px;
-}
 .desc {
     color:var(--text-muted);
     line-height:1.6;
@@ -438,6 +458,10 @@ h1 span {
 
 
 @media (max-width:1200px) {
+    body {
+        padding-left: 16px;
+        padding-right: 16px;
+    }
     .content-layout {
         grid-template-columns:1fr;
         padding:20px 30px;
@@ -459,6 +483,10 @@ h1 span {
 }
 
 @media (max-width:768px) {
+    body {
+        padding-left: 16px;
+        padding-right: 16px;
+    }
     header {
         flex-direction:column;
         gap:12px;
diff --git a/templates/results.html b/templates/results.html
index c3ecdc2..d8e2601 100644
--- a/templates/results.html
+++ b/templates/results.html
@@ -57,7 +57,7 @@
                 <div class="result">
                     <div class="result-header">
                         <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>
                         <span class="url">
                             {{result[1]}}