From 8930d9b906decf0181c8657cd16a2f7129f7637a Mon Sep 17 00:00:00 2001
From: Alex Cabal <alex@alexcabal.com>
Date: Mon, 22 Apr 2024 10:51:29 -0500
Subject: [PATCH] Fix various CSS errors

---
 www/css/artwork.css |  5 ++++-
 www/css/core.css    | 35 +++++++++++++++++------------------
 www/css/dark.css    |  1 +
 3 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/www/css/artwork.css b/www/css/artwork.css
index ccfc7823..f8b2a7f5 100644
--- a/www/css/artwork.css
+++ b/www/css/artwork.css
@@ -166,7 +166,6 @@ form[action^="/artworks/"]{
 	margin-top: 1.4rem;
 }
 
-
 label.picture::before{
 	bottom: 2.6rem; /* Fix alignment caused by "circa" checkbox */
 }
@@ -419,6 +418,10 @@ main section.narrow h1 ~ picture{
 	form.create-update-artwork > fieldset label:has(input[name="artwork-image"]){
 		grid-column: 1;
 	}
+
+	label.picture::before{
+		bottom: 1.2rem; /* Restore normal alignment due to 'circa' checkbox no longer being on same plane */
+	}
 }
 
 @media(max-width: 480px){
diff --git a/www/css/core.css b/www/css/core.css
index 87561b36..1f129113 100644
--- a/www/css/core.css
+++ b/www/css/core.css
@@ -65,6 +65,7 @@
 	--light-input-outline: #000;
 	--light-table-row-hover: #dddbd5;
 	--light-warning: #932d2d;
+	--light-input-icon-shadow: rgba(255, 255, 255, .5);
 
 	--dark-body-bg: #2c3035;
 	--dark-body-text: #fff;
@@ -78,6 +79,7 @@
 	--dark-input-outline: #fff;
 	--dark-table-row-hover: #373b3f;
 	--dark-warning: #ec6161;
+	--dark-input-icon-shadow: rgba(0, 0, 0, .5);
 
 	--body-text: var(--light-body-text);
 	--header: var(--light-header);
@@ -93,6 +95,7 @@
 	--link-highlight: var(--button);
 	--table-row-hover: var(--light-table-row-hover);
 	--warning: var(--light-warning);
+	--input-icon-shadow: var(--light-input-icon-shadow);
 }
 
 /* Start CSS reset */
@@ -1908,7 +1911,7 @@ label:has(input[type="password"])::before{
 	line-height: 1;
 	color: var(--sub-text);
 	margin-top: -3px; /* Adjust for Crimson Pro line-height */
-	text-shadow: 1px 1px 0 rgba(255, 255, 255, .5);
+	text-shadow: 1px 1px 0 var(--input-icon-shadow);
 	width: 1rem;
 	transition: color .5s;
 	cursor: text;
@@ -3167,11 +3170,11 @@ ul.feed p{
 		display: none;
 	}
 
-	footer ul li{
+	footer ul.nav-links li{
 		display: inline;
 	}
 
-	footer ul li:nth-child(4)::after{
+	footer ul.nav-links li:nth-child(4)::after{
 		content: "\A"; /* This is a line break */
 		white-space: pre;
 		margin: 0;
@@ -3310,14 +3313,14 @@ ul.feed p{
 		grid-template-columns: repeat(2, minmax(0, 1fr));
 	}
 
-	footer ul li:nth-child(2)::after,
-	footer ul li:nth-child(5)::after{
+	footer ul.nav-links li:nth-child(2)::after,
+	footer ul.nav-links li:nth-child(5)::after{
 		content: "\A"; /* This is a line break */
 		white-space: pre;
 		margin: 0;
 	}
 
-	footer ul li:nth-child(4)::after{
+	footer ul.nav-links li:nth-child(4)::after{
 		content: "\b7";
 		white-space: normal;
 		margin: 0 10px;
@@ -3560,17 +3563,17 @@ ul.feed p{
 		margin-top: 2rem;
 	}
 
-	footer ul li:nth-child(2)::after,
-	footer ul li:nth-child(4)::after,
-	footer ul li:nth-child(6)::after{
+	footer ul.nav-links li:nth-child(2)::after,
+	footer ul.nav-links li:nth-child(4)::after,
+	footer ul.nav-links li:nth-child(6)::after{
 		content: "\A"; /* This is a line break */
 		white-space: pre;
 		margin: 0;
 	}
 
-	footer ul li:nth-child(1)::after,
-	footer ul li:nth-child(3)::after,
-	footer ul li:nth-child(5)::after{
+	footer ul.nav-links li:nth-child(1)::after,
+	footer ul.nav-links li:nth-child(3)::after,
+	footer ul.nav-links li:nth-child(5)::after{
 		content: "\b7";
 		white-space: normal;
 		margin: 0 10px;
@@ -3592,11 +3595,7 @@ ul.feed p{
 		height: .75rem;
 	}
 
-	body > footer{
-		padding-top: 1rem;
-	}
-
-	body > footer > p:first-child{
+	body > footer > p:first-of-type{
 		line-height: 1.4;
 	}
 
@@ -3689,7 +3688,7 @@ ul.feed p{
 		columns: 1;
 	}
 
-	footer ul li:nth-child(7)::after{
+	footer ul.nav-links li:nth-child(7)::after{
 		content: "\A"; /* This is a line break */
 		white-space: pre;
 		margin: 0;
diff --git a/www/css/dark.css b/www/css/dark.css
index 92705e86..0dc5e8ae 100644
--- a/www/css/dark.css
+++ b/www/css/dark.css
@@ -12,6 +12,7 @@
 	--link-highlight: var(--button-highlight); /* lighter looks better in dark mode */
 	--table-row-hover: var(--dark-table-row-hover);
 	--warning: var(--dark-warning);
+	--input-icon-shadow: var(--dark-input-icon-shadow);
 }
 
 main.front-page > section > section figure img{