Make Design More Compact

static/style.css

@@ -24,6 +24,7 @@
 
 body {
 	background: var(--background);
+	font-size: 15px;
 }
 
 nav {
@@ -88,10 +89,14 @@ img[src=""] {
 
 aside {
 	flex-grow: 1;
-	margin: 20px 20px 0 20px;
+	margin: 20px 20px 0 10px;
 	max-width: 350px;
 }
 
+.panel {
+	border: 1px solid var(--highlighted);
+}
+
 /* User & Subreddit */
 
 #user, #subreddit, #sidebar {
@@ -99,7 +104,6 @@ aside {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	padding: 20px;
 	height: max-content;
 	background: var(--outside);
 	border-radius: 5px;
@@ -108,15 +112,10 @@ aside {
 
 #user *, #subreddit * { text-align: center; }
 
-#subreddit { padding: 0; }
+#user, #sub_meta, #sidebar_contents { padding: 20px; }
-#sub_meta { padding: 20px; }
 
-#sidebar, #sidebar_contents { margin-top: 20px; }
+#sidebar, #sidebar_contents { margin-top: 10px; }
-
+#sidebar_label { padding: 10px; }
-#sidebar_label {
-	border: 2px solid var(--highlighted);
-	padding: 10px;
-}
 
 #user_icon, #sub_icon {
 	width: 100px;
@@ -135,10 +134,12 @@ aside {
 
 #user_description, #sub_description {
 	margin: 0 20px;
-	font-size: 15px;
 }
 
-#user_name, #sub_name, #user_icon, #sub_icon, #user_description, #sub_description { margin-bottom: 20px; }
+#user_name, #user_description:not(:empty), #user_icon
+#sub_name, #sub_icon, #sub_description:not(:empty) {
+	margin-bottom: 20px;
+}
 
 #user_details, #sub_details {
 	display: grid;
@@ -148,7 +149,6 @@ aside {
 
 #user_details > label, #sub_details > label {
 	color: var(--accent);
-	font-size: 15px;
 }
 
 /* Wiki Pages */
@@ -160,7 +160,6 @@ aside {
 
 #top {
 	background: var(--highlighted);
-	font-size: 18px;
 	width: 100%;
 	display: flex;
 }
@@ -168,8 +167,8 @@ aside {
 #top > * {
 	flex-grow: 1;
 	text-align: center;
-	height: 40px;
+	height: 35px;
-	line-height: 40px;
+	line-height: 35px;
 }
 
 #top > div {
@@ -183,10 +182,9 @@ select {
 }
 
 select, #search {
-	border: 0;
+	border: none;
 	padding: 0 15px;
 	height: 40px;
-	font-size: 15px;
 	appearance: none;
 	border-radius: 5px 0px 0px 5px;
 }
@@ -209,7 +207,6 @@ select, #search {
 
 #inside {
 	display: flex;
-	font-size: 15px;
 	align-items: center;
 	border-right: 2px var(--outside) solid;
 	height: 40px;
@@ -227,8 +224,13 @@ select:hover { background: var(--foreground); }
 input[type="submit"]:hover { color: var(--accent); }
 
 #timeframe {
-	border-radius: 5px 0px 0px 5px;
+	margin: 0 2px;
+	border-radius: 0;
+}
+
+#sort_options + #timeframe:not(#search_sort > #timeframe) {
 	margin-left: 10px;
+	border-radius: 5px 0px 0px 5px;
 }
 
 #search_sort {
@@ -242,6 +244,8 @@ input[type="submit"]:hover { color: var(--accent); }
 	background: transparent;
 }
 
+#search_sort > *, #searchbox > * { font-size: 15px; }
+
 #search_sort > :not(:first-child), #search_sort > #sort_options {
 	margin: 0;
 	border-radius: 0;
@@ -294,6 +298,8 @@ input[type="submit"]:hover { color: var(--accent); }
 	display: flex;
 }
 
+.post:not(:last-child) { margin-bottom: 10px; }
+
 .post.highlighted {
 	margin: 20px 0;
 }
@@ -317,7 +323,6 @@ input[type="submit"]:hover { color: var(--accent); }
 	background: var(--foreground);
 	border-radius: 5px 0 0 5px;
 	min-width: 50px;
-	padding: 5px;
 }
 
 .post_score {
@@ -344,33 +349,17 @@ input[type="submit"]:hover { color: var(--accent); }
 	margin-right: 15px;
 }
 
-.nsfw {
-	color: #FF5C5D;
-	margin-top: 20px;
-	border: 1px solid #FF5C5D;
-	padding: 5px;
-	font-size: 12px;
-	border-radius: 5px;
-	font-weight: bold;
-}
-
-.stickied {
-	--accent: #5cff85;
-	border: 1px solid #5cff85;
-	padding: 5px;
-}
-
 .post_subreddit {
 	font-weight: bold;
 }
 
 .post_title {
-	font-size: 18px;
+	font-size: 16px;
 	line-height: 1.5;
 }
 
 .post_right {
-	padding: 20px 25px;
+	padding: 15px 20px;
 	flex-grow: 1;
 	flex-shrink: 1;
 }
@@ -398,8 +387,9 @@ input[type="submit"]:hover { color: var(--accent); }
 	object-fit: cover;
 	width: auto;
 	flex-shrink: 0;
-	padding: 10px;
+	margin: 10px;
-	border-radius: 15px;
+	border-radius: 5px;
+	border: 1px solid var(--foreground);
 	max-width: 20%;
 }
 
@@ -412,13 +402,27 @@ input[type="submit"]:hover { color: var(--accent); }
 	font-weight: bold;
 }
 
+.nsfw {
+	color: #FF5C5D;
+	margin-top: 20px;
+	border: 1px solid #FF5C5D;
+	padding: 5px;
+	font-size: 12px;
+	border-radius: 5px;
+	font-weight: bold;
+}
+
+.stickied {
+	--accent: #5cff85;
+	border: 1px solid #5cff85;
+}
+
 /* Comment */
 
 .comment {
-	margin-top: 15px;
+	margin: 10px 0;
 	border-radius: 5px;
 	display: flex;
-	font-size: 15px;
 }
 
 .comment_left, .comment_right {
@@ -535,7 +539,6 @@ input[type="submit"]:hover { color: var(--accent); }
 	margin-top: 20px;
 }
 
-.md p {	font-size: 15px; }
 .md h1 { font-size: 22px; }
 .md h2 { font-size: 20px; }
 .md h3 { font-size: 18px; }
@@ -544,8 +547,8 @@ input[type="submit"]:hover { color: var(--accent); }
 .md h6 { font-size: 12px; }
 
 .md blockquote {
-	padding-left: 8px;
+	padding-left: 6px;
-	margin: 4px 0 4px 8px;
+	margin: 4px 0 4px 5px;
 	border-left: 4px solid var(--highlighted);
 }
 
@@ -564,6 +567,10 @@ input[type="submit"]:hover { color: var(--accent); }
 	box-shadow: var(--black-contrast);
 }
 
+.md table {
+	margin: 5px;
+}
+
 .md code {
 	font-family: monospace;
 	font-size: 14px;
@@ -599,7 +606,7 @@ td, th {
 	}
 
 	.post_score {
-		margin-top: 0;
+		margin: 5px 0;
 	}
 
 	.post_thumbnail {
@@ -622,6 +629,7 @@ td, th {
 		padding: 10px;
 		margin: 10px 0;
 	}
+	
 	nav {
 		flex-direction: column;
 		padding: 10px;

templates/base.html

@@ -12,12 +12,14 @@
 		{% endblock %}
 		</head>
 	<body>
+		<!-- NAVIGATION BAR -->
 		<nav>
 			<a id="logo" href="/"><span id="lib">lib</span>reddit. <span id="version">v{{ env!("CARGO_PKG_VERSION") }}</span></a>
 			{% block search %}{% endblock %}
 			<a id="github" href="https://github.com/spikecodes/libreddit">GITHUB</a>
 		</nav>
 		
+		<!-- MAIN CONTENT -->
 		{% block body %}
 		<main>
 			{% block content %}

templates/post.html

@@ -13,8 +13,8 @@
 	<meta name="author" content="u/{{ post.author }}">
 {% endblock %}
 
+<!-- OPEN COMMENT MACRO -->
 {% macro comment(item) -%}
-
 <div id="{{ item.id }}" class="comment">
 	<div class="comment_left">
 		<p class="comment_score">{{ item.score }}</p>
@@ -28,18 +28,24 @@
 			&bull; <span class="datetime">{{ item.time }}</span>
 		</summary>
 		<p class="comment_body">{{ item.body }}</p>
-
 {%- endmacro %}
 
+<!-- CLOSE COMMENT MACRO -->
+{% macro close() %}
+</details></div>
+{% endmacro %}
+
 {% block content %}
 	<div id="column_one">
-		<div class="post highlighted">
+
+		<!-- POST CONTENT -->
+		<div class="post highlighted panel">
 			<div class="post_left">
 				<p class="post_score">{{ post.score }}</p>
 				{% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
 			</div>
 			<div class="post_right">
-				<p>
+				<p class="post_header">
 					<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
 					&bull;
 					<a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
@@ -71,35 +77,38 @@
 				</div>
 			</div>
 		</div>
+
+		<!-- SORT FORM -->
 		<form id="sort">
 			<select name="sort"> 
 				{% call utils::options(sort, ["confidence", "top", "new", "controversial", "old"], "") %}
 			</select><input id="sort_submit" type="submit" value="&rarr;">
 		</form>
 
+		<!-- COMMENTS -->
 		{% for c in comments -%}
 		<div class="thread">
+			<!-- EACH COMMENT -->
 			{% call comment(c) %}
-				<div class="replies">
+			<div class="replies">{% for reply1 in c.replies %}{% call comment(reply1) %}
-					{% for reply1 in c.replies %}
+				<!-- FIRST-LEVEL REPLIES -->
-						{% call comment(reply1) %}
+				<div class="replies">{% for reply2 in reply1.replies %}{% call comment(reply2) %}
-						<div class="replies">
+					<!-- SECOND-LEVEL REPLIES -->
-							{% for reply2 in reply1.replies %}
+					<div class="replies">{% for reply3 in reply2.replies %}{% call comment(reply3) %}
-								{% call comment(reply2) %}
+						<!-- THIRD-LEVEL REPLIES -->
-								<div class="replies">
-									{% for reply3 in reply2.replies %}
-										{% call comment(reply3) %}
 						{% if reply3.replies.len() > 0 %}
+							<!-- LINK TO CONTINUE REPLIES -->
 							<a class="deeper_replies" href="{{ post.permalink }}{{ reply3.id }}">&rarr; More replies</a>
 						{% endif %}
-										</details></div>
+						{% call close() %}
 					{% endfor %}
-								</div></details></div>
+					</div>{% call close() %}
 				{% endfor %}
-						</div></details></div>
+				</div>{% call close() %}
 			{% endfor %}
-				</div></details></div>
+			</div>{% call close() %}
 		</div>
 		{%- endfor %}
+
 	</div>
 {% endblock %}

templates/search.html

@@ -21,13 +21,13 @@
 		</form>
 		{% for post in posts %}
 		{% if post.title != "Comment" %}
-		<div class="post">
+		<div class="post panel">
 			<div class="post_left">
 				<p class="post_score">{{ post.score }}</p>
 				{% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
 			</div>
 			<div class="post_right">
-				<p>
+				<p class="post_header">
 					<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
 					&bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
 					{% if post.author_flair.0 != "" %}
@@ -43,7 +43,7 @@
 				</p>
 			</div>
 			<img class="post_thumbnail" src="{{ post.media }}">
-		</div><br>
+		</div>
 		{% else %}
 			<div class="comment">
 				<div class="comment_left">
@@ -57,7 +57,7 @@
 					</summary>
 					<p class="comment_body">{{ post.body }}</p>
 				</details>
-			</div><br>
+			</div>
 		{% endif %}
 		{% endfor %}
 

templates/subreddit.html

@@ -28,13 +28,13 @@
 				</select>{% endif %}
 			</form>
 			{% for post in posts %}
-			<div class="post {% if post.flags.stickied %}stickied{% endif %}">
+			<div class="post {% if post.flags.stickied %}stickied{% endif %} panel">
 				<div class="post_left">
 					<p class="post_score">{{ post.score }}</p>
 					{% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
 				</div>
 				<div class="post_right">
-					<p>
+					<p class="post_header">
 						<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
 						&bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
 						{% if post.author_flair.0 != "" %}
@@ -50,7 +50,7 @@
 					</p>
 				</div>
 				<img class="post_thumbnail" src="{{ post.media }}">
-			</div><br>
+			</div>
 			{% endfor %}
 
 			<footer>
@@ -65,7 +65,7 @@
 		</div>
 		{% if sub.name != "" %}
 		<aside>
-			<div id="subreddit">
+			<div class="panel" id="subreddit">
 				{% if sub.wiki %}
 				<div id="top">
 					<div>Posts</div>
@@ -85,7 +85,7 @@
 					</div>
 				</div>
 			</div>
-			<details id="sidebar">
+			<details class="panel" id="sidebar">
 				<summary id="sidebar_label">Sidebar</summary>
 				<div id="sidebar_contents">{{ sub.info }}</div>
 			</details>

templates/user.html

@@ -18,13 +18,13 @@
 			</form>
 			{% for post in posts %}
 			{% if post.title != "Comment" %}
-			<div class='post'>
+			<div class="post panel">
 				<div class="post_left">
 					<p class="post_score">{{ post.score }}</p>
 					{% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
 				</div>
 				<div class="post_right">
-					<p>
+					<p class="post_header">
 						<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
 						&bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
 						{% if post.author_flair.0 != "" %}
@@ -42,7 +42,7 @@
 					</p>
 				</div>
 				<img class="post_thumbnail" src="{{ post.media }}">
-			</div><br>
+			</div>
 			{% else %}
 			<div class="comment">
 				<div class="comment_left">
@@ -56,7 +56,7 @@
 					</summary>
 					<p class="comment_body">{{ post.body }}</p>
 				</details>
-			</div><br>
+			</div>
 			{% endif %}
 			{% endfor %}
 			<footer>
@@ -70,7 +70,7 @@
 			</footer>
 		</div>
 		<aside>
-			<div id="user">
+			<div class="panel" id="user">
 				<img id="user_icon" src="{{ user.icon }}">
 				<p id="user_title">{{ user.title }}</p>
 				<p id="user_name">u/{{ user.name }}</p>

templates/wiki.html

@@ -12,7 +12,7 @@
 
 {% block body %}
 	<main>
-		<div id="column_one">
+		<div class="panel" id="column_one">
 			<div id="top">
 				<a href="/r/{{ sub }}">Posts</a>
 				<div>Wiki</div>