aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--static/main.css171
-rw-r--r--templates/home.html4
-rw-r--r--templates/images.html20
-rw-r--r--templates/results.html2
4 files changed, 159 insertions, 38 deletions
diff --git a/static/main.css b/static/main.css
index 42fd7bf..fd69035 100644
--- a/static/main.css
+++ b/static/main.css
@@ -21,12 +21,17 @@
}
}
+*, *::before, *::after {
+ box-sizing: border-box;
+}
+
body {
background-color:var(--bg-main);
color:var(--text-primary);
font-family:system-ui,-apple-system,sans-serif;
margin:0;
padding:0;
+ -webkit-tap-highlight-color: transparent;
}
img[src=""] {
@@ -81,6 +86,7 @@ img[src=""] {
cursor:pointer;
transition:all 0.2s;
border:1px solid transparent;
+ touch-action:manipulation;
}
.view-home .btn-primary {
background:var(--accent);
@@ -153,6 +159,7 @@ h1 span {
font-weight:500;
border-bottom:2px solid transparent;
transition:color 0.2s;
+ touch-action: manipulation;
}
.nav-tabs a:hover {
color:var(--text-primary);
@@ -178,10 +185,6 @@ h1 span {
border:1px solid var(--border);
transition:transform 0.2s ease,border-color 0.2s;
}
-.image-link {
- text-decoration:none;
- display:block;
-}
.image-card:hover {
transform:translateY(-4px);
border-color:var(--accent);
@@ -208,9 +211,11 @@ h1 span {
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
+ pointer-events: none;
}
.image-card:hover .image-overlay {
opacity:1;
+ pointer-events: auto;
}
.overlay-buttons {
display:flex;
@@ -226,6 +231,7 @@ h1 span {
text-decoration:none;
text-align:center;
transition:filter 0.2s;
+ touch-action: manipulation;
}
.overlay-btn:hover {
filter:brightness(1.1);
@@ -362,6 +368,7 @@ h1 span {
font-size: 0.9rem;
font-weight: 600;
transition: all 0.2s;
+ touch-action: manipulation;
}
.pagination-btn:hover {
@@ -378,6 +385,7 @@ h1 span {
.content-layout {
grid-template-columns:1fr;
padding:20px 30px;
+ gap:20px;
}
.results-container,.infobox-sidebar {
grid-column:1;
@@ -385,7 +393,6 @@ h1 span {
}
.infobox-sidebar {
order:-1;
- margin-bottom:-80px;
}
.nav-tabs,.image-results-container {
padding:0 30px;
@@ -393,39 +400,155 @@ h1 span {
header {
padding:15px 30px;
}
-}@media (max-width:600px) {
+}
+
+@media (max-width:768px) {
header {
flex-direction:column;
- align-items:center;
- padding:15px 0px;
- }
- .search-box {
+ gap:12px;
padding:12px 16px;
- width:91vw;
- }
-
- .view-home .search-box {
- width: 75vw;
+ text-align:center;
}
-
- .view-home {
- padding-top: 20vh;
- align-items: flex-start;
+ h1 {
+ font-size:1.3rem;
}
-
.search-form {
width:100%;
+ max-width:100%;
}
- .image-grid {
- grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
+ .search-form .search-box {
+ width:100%;
+ }
+ .nav-tabs {
+ overflow-x:auto;
+ -webkit-overflow-scrolling:touch;
+ padding:0 16px;
+ }
+ .nav-container {
+ gap:24px;
+ min-width:max-content;
+ }
+ .nav-tabs a {
+ padding:12px 0;
+ font-size:0.95rem;
+ }
+ .content-layout {
+ padding:16px;
+ gap:16px;
+ }
+ .result {
+ margin-bottom:24px;
+ }
+ .result a {
+ font-size:1.1rem;
+ word-break:break-word;
+ }
+ .url {
+ font-size:0.8rem;
+ word-break:break-all;
+ }
+ .desc {
+ font-size:0.9rem;
+ }
+ .infobox {
+ margin-bottom:16px;
+ }
+ .infobox-header {
+ padding:16px;
+ }
+ .infobox-title {
+ font-size:1.2rem;
+ }
+ .infobox-main {
+ flex-direction:column;
+ padding:16px;
gap:12px;
}
+ .infobox-image {
+ width:100%;
+ height:auto;
+ min-width:unset;
+ max-width:200px;
+ }
.image-results-container {
- padding:20px;
+ padding:16px;
+ }
+ .pagination {
+ flex-wrap:wrap;
+ gap:8px;
+ padding:0 8px;
+ }
+ .pagination-btn {
+ padding:10px 14px;
+ font-size:0.85rem;
+ }
+ .view-home {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transform: translateY(-5vh);
+ padding:20px 16px;
+ min-height: 100vh;
+ }
+ .view-home .container {
+ padding:0;
+ width:100%;
+ max-width:580px;
}
.view-home .hero-logo {
font-size:3rem;
+ margin-bottom:24px;
}
+ .view-home .search-input-wrapper {
+ margin-bottom:16px;
+ }
+ .view-home .search-box {
+ width:100%;
+ font-size:1rem;
+ padding:14px 20px;
+ }
+ .view-home .buttons {
+ gap:10px;
+ }
+ .view-home button {
+ padding:12px 20px;
+ }
+}
-
+@media (max-width:600px) {
+ header {
+ padding:12px 12px;
+ }
+ .search-box {
+ font-size:0.95rem;
+ }
+ .view-home .search-box {
+ width:100%;
+ }
+ .view-home {
+ padding:20px 16px;
+ }
+ .image-grid {
+ grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
+ gap:10px;
+ }
+ .image-card {
+ border-radius:8px;
+ }
+ .image-info {
+ padding:8px 10px;
+ }
+ .image-caption {
+ font-size:0.8rem;
+ }
+ .image-source {
+ font-size:0.7rem;
+ }
+ .overlay-buttons {
+ width:80%;
+ }
+ .overlay-btn {
+ padding:6px 12px;
+ font-size:0.75rem;
+ }
}
diff --git a/templates/home.html b/templates/home.html
index 00c4776..f8b7b7e 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
<title>
OmniSearch
</title>
@@ -39,4 +39,4 @@
</div>
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/templates/images.html b/templates/images.html
index 2f1bb40..3ad38f8 100644
--- a/templates/images.html
+++ b/templates/images.html
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
<title>
OmniSearch Images - {{query}}
</title>
@@ -47,16 +47,14 @@
</div>
</div>
</div>
- <a href="{{img[2]}}" target="_blank" class="image-link">
- <div class="image-info">
- <span class="image-caption">
- {{img[1]}}
- </span>
- <span class="image-source">
- {{img[2]}}
- </span>
- </div>
- </a>
+ <div class="image-info">
+ <span class="image-caption">
+ {{img[1]}}
+ </span>
+ <span class="image-source">
+ {{img[2]}}
+ </span>
+ </div>
</div>
{{endfor}}
</div>
diff --git a/templates/results.html b/templates/results.html
index ce8f27a..e2fcd3d 100644
--- a/templates/results.html
+++ b/templates/results.html
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
<title>
OmniSearch - {{query}}
</title>
generated by cgit v1.2.3 (git 2.39.1) at 2026-03-10 02:44:55 +0000