Tweak settings page design

static/style.css

@@ -488,7 +488,7 @@ aside {
 /* Sorting and Search */
 
 select, #search, #sort_options, #inside, #searchbox > *, #sort_submit {
-	height: 40px;
+	height: 38px;
 }
 
 .search_label {
@@ -505,7 +505,7 @@ select {
 
 select, #search {
 	border: none;
-	padding: 0 15px;
+	padding: 0 10px;
 	
 	appearance: none;
 	-webkit-appearance: none;
@@ -593,6 +593,7 @@ button.submit:hover > svg { stroke: var(--accent); }
 
 #sort_options, footer > a {
 	border-radius: 5px;
+	align-items: center;
 	box-shadow: var(--shadow);
 	background: var(--outside);
 	display: flex;
@@ -719,7 +720,7 @@ a.search_subreddit:hover {
 }
 
 .post_score {
-	padding-top: 16px;
+	padding-top: 19px;
 	padding-left: 12px;
 	font-size: 13px;
 	font-weight: bold;
@@ -1180,12 +1181,10 @@ summary.comment_data {
 	color: var(--accent);
 }
 
-
 .prefs {
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
-	align-items: center;
 	padding: 20px;
 	background: var(--post);
 	border-radius: 5px;
@@ -1198,11 +1197,19 @@ summary.comment_data {
 	width: 100%;
 	height: 35px;
 	align-items: center;
-	margin-top: 10px;
+	margin-top: 7px;
 }
 
-.prefs > p {
+.prefs legend {
 	font-weight: 500;
+	border-bottom: 1px solid var(--highlighted);
+	font-size: 18px;
+	padding-bottom: 10px;
+}
+
+.prefs legend:not(:first-child) {
+	padding-top: 10px;
+	margin-top: 15px;
 }
 
 .prefs select {

templates/settings.html

@@ -11,14 +11,14 @@
 	<div id="settings">
 	<form action="/settings" method="POST">
 		<div class="prefs">
-			<p>Appearance</p>
+			<legend>Appearance</legend>
 			<div id="theme">
 				<label for="theme">Theme:</label>
 				<select name="theme"> 
 					{% call utils::options(prefs.theme, ["system", "light", "dark", "black", "dracula", "nord", "laserwave", "violet", "gold", "rosebox"], "system") %}
 				</select>
 			</div>
-			<p>Interface</p>
+			<legend>Interface</legend>
 			<div id="front_page">
 				<label for="front_page">Front page:</label>
 				<select name="front_page"> 
@@ -36,7 +36,7 @@
 				<input type="hidden" value="off" name="wide">
 				<input type="checkbox" name="wide" {% if prefs.wide == "on" %}checked{% endif %}>
 			</div>
-			<p>Content</p>
+			<legend>Content</legend>
 			<div id="post_sort">
 				<label for="post_sort" title="Applies only to subreddit feeds">Default subreddit post sort:</label>
 				<select name="post_sort"> 
@@ -79,7 +79,7 @@
 	</form>
 	{% if prefs.subscriptions.len() > 0 %}
 		<div class="prefs" id="settings_subs">
-			<p>Subscribed Feeds</p>
+			<legend>Subscribed Feeds</legend>
 			{% for sub in prefs.subscriptions %}
 			<div>
 				{% let feed -%}
@@ -94,7 +94,7 @@
 	{% endif %}
 	{% if !prefs.filters.is_empty() %}
 		<div class="prefs" id="settings_filters">
-			<p>Filtered Feeds</p>
+			<legend>Filtered Feeds</legend>
 			{% for sub in prefs.filters %}
 			<div>
 				{% let feed -%}