feat: nicer styling of both pages

viktomas · Aug 16, 2023 · 6b5357c · 6b5357c
1 parent a769513
commit 6b5357c
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 25 deletions.
diff --git a/assets/compare-similar.css b/assets/compare-similar.css
@@ -2,6 +2,8 @@ body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
+    /* accommodate for the button */
+    padding-bottom: 1.5rem;
     background-color: #cfcfcf;
 }
 
@@ -12,49 +14,48 @@ h1 {
 
 .control-bar {
   position: fixed;
-  top: 0;
-  left: 0;
+  bottom: 0;
+  width: 100vw;
+}
+
+.control-bar input[type="submit"] {
+  display: block;
+  font-size: 1.5rem;
+  margin-inline: auto;
 }
 
 ul {
 	padding: 0;
 	display: flex;
 	flex-wrap: wrap;
+    justify-content: flex-start;
 }
 
 li {
-  flex: 1 0 33vw;
   padding: 0;
   list-style-type: none;
-  max-height: 33vh;
-  max-width: 33vw;
 }
 
-.pic-num-2 li{
+img {
+  max-height: 45vh;
+  max-width: 45vw;
+  object-fit: contain;
+}
+
+.pic-num-2 img{
   max-height: 100vh;
-  max-width: 50vw;
-  flex-basis: 50vw;
+  max-width: 45vw;
 }
-.pic-num-4 li {
-  max-height: 50vh;
-  max-width: 50vw;
-  flex-basis: 50vw;
+.pic-num-4 img {
+  max-height: 45vh;
+  max-width: 45vw;
 }
 
-label, .container, .li {
+label, .li {
 	box-sizing: border-box;
 	display: block;
-	width: 100%;
-	height: 100%;
 }
 
-img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-
 input[type="checkbox"] {
 	display:none;
 }

diff --git a/assets/similar.css b/assets/similar.css
@@ -2,6 +2,8 @@ body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
+    /* accommodate for the button */
+    padding-bottom: 1.5rem;
     background-color: #cfcfcf;
 }
 
@@ -12,14 +14,19 @@ h1 {
 
 .control-bar {
   position: fixed;
-  top: 0;
-  left: 0;
+  bottom: 0;
+  width: 100vw;
+}
+
+.control-bar input[type="submit"] {
+  display: block;
+  font-size: 1.5rem;
+  margin-inline: auto;
 }
 
 ul {
     list-style-type: none;
     display: flex;
-	gap: 0.5em;
     flex-wrap: wrap;
     justify-content: center;
     padding: 0;