Add responsive web design

liameno · Jun 8, 2022 · 82dc79b · 82dc79b
1 parent cfc4312
commit 82dc79b
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -26,7 +26,7 @@
 - [x] Encryption (assymetric)
 - [x] Multithreading crawler
 - [ ] Robots Rules (from headers & html) & crawl-delay
-- [ ] Adaptive Website
+- [x] Responsive web design
 - [ ] Own FTS ([...](https://github.com/liameno/kissearch))
 - [ ] Images Crawler
 

diff --git a/website/frontend/css/index.css b/website/frontend/css/index.css
@@ -25,4 +25,15 @@
 .title {
     font-size: 50px;
     color: var(--white);
+}
+
+@media screen and (max-width: 1200px) {
+    .search_widget {
+        width: 60%;
+    }
+}
+@media screen and (max-width: 800px) {
+    .search_widget {
+        width: 90%;
+    }
 }
diff --git a/website/frontend/css/search.css b/website/frontend/css/search.css
@@ -13,7 +13,7 @@
 .rating_container {
     display: flex;
     justify-content: right;
-    width: 100%;
+    width: 50%;
 }
 
 .top_container {
@@ -148,4 +148,31 @@
     background: var(--green2);
     color: var(--light);
     border-radius: 5px;
+}
+
+@media screen and (max-width: 800px) {
+    .header_content {
+        display: none;
+    }
+    .rating_container {
+        display: none;
+    }
+    .center_container {
+        margin: 0;
+        width: 100%;
+    }
+    .top_container {
+        border-bottom: 1px solid var(--gray_dark);
+    }
+}
+@media screen and (max-width: 1000px) {
+    .search_widget {
+        width: 100%;
+    }
+}
+
+@media screen and (max-width: 800px) {
+    .content {
+        width: 100%;
+    }
 }