necessário

views/static/styles.css

@@ -12,6 +12,12 @@
 	--main-margin: 62px;
 }
 
+* {
+	margin: 0;
+	font-size-adjust: ex-height 0.53;
+	box-sizing: border-box;
+}
+
 .page {
 	box-sizing: border-box;
 	position: absolute;
@@ -20,7 +26,7 @@
 }
 
 .hidden {
-	display: none;
+	display: none !important;
 }
 
 #pages-container {
@@ -94,12 +100,9 @@ body {
 
 #index nav {
 	display: flex;
-	justify-content: flex-end;
-	/* margin-bottom: 11px; */
-	/* background-color: var(--haughty-gray); */
+	justify-content: space-between;
 	border-bottom: 1px solid var(--silver-lining-white);
 	padding: 5px;
-	/* box-shadow: black 1px 1px 1px 1px; */
 }
 
 #index #content {
@@ -116,14 +119,7 @@ body {
 	padding: 20px;
 }
 
-#index #center {
-	margin: var(--main-margin) var(--main-margin) auto var(--main-margin);
-}
-
 .top {
-	/* width: 100%; */
-	/* display: flex; */
-	/* flex-direction: row; */
 	display: flex;
 	margin-bottom: 50px;
 }
@@ -172,7 +168,7 @@ div#search-bar {
 	}
 }
 
-#index header {
+#index > header {
 	width: min-content;
 	padding: 20px;
 	font-family: sans-serif;
@@ -233,10 +229,12 @@ footer {
 
 .tag,
 .caption {
-	font-family: Noto sans, sans-serif;
-	font-weight: 600;
+	font-family: sans-serif;
+	font-weight: 900;
 	color: white;
 	text-decoration-line: none;
+	margin: 2px;
+	border-radius: 3px 3px;
 }
 
 .tag {
@@ -244,6 +242,7 @@ footer {
 	color: var(--almost-white);
 	text-decoration-line: none;
 	padding: 0.13em;
+	background-color: var(--main-shadow);
 
 	&>span:first-child {
 		font-family: monospace;
@@ -251,9 +250,6 @@ footer {
 		border-radius: 3px 0 0 3px;
 	}
 
-	&>span:nth-child(2) {
-		background-color: var(--haughty-gray);
-	}
 
 	&>span:last-child {
 		border-radius: 0 3px 3px 0;
@@ -283,6 +279,7 @@ footer {
 .cover {
 	display: inline-block;
 	vertical-align: top;
+	width: 11%;
 }
 
 .caption {
@@ -292,17 +289,21 @@ footer {
 }
 
 img {
-	filter: blur(15px);
+	filter: blur(30px);
+}
+
+#index img {
+	width: 100%;
 }
 
 .thumbnail,
 .cover {
-	width: 148px;
+	/* width: 148px; */
 	height: auto;
 	opacity: 0.93;
 }
 
-#search-results {
+#index #center {
 	& #controls {
 		width: calc(min-content / 2);
 		height: min-content;
@@ -325,9 +326,9 @@ img {
 	}
 
 	& #results {
-		display: grid;
-		width: 65%;
+		/* display: grid; */
 		grid-template-columns: repeat(5, 1fr);
+		width: 65%;
 
 		@media (min-width: 1200px) {
 			grid-template-columns: repeat(6, 1fr);
@@ -349,9 +350,20 @@ img {
 				Arial,
 				sans-serif;
 
-			& img {
+
+			& #image-wrapper {
+				position: relative;
+				width: 100%;
+				padding-top: 95vh;
+				overflow: hidden;
+			}
+			& #image-wrapper img {
+				position: absolute;
+				top: 0;
+				left: 0;
 				max-height: 95vh;
 				max-width: 100%;
+				object-fit: cover;
 				/* width: auto; */
 				/* height: auto; */
 			}
@@ -374,7 +386,7 @@ img {
 				font-size: large;
 			}
 
-			& div {
+			& div:last-child {
 				margin-bottom: 100%;
 			}
 		}