From c32d62fbd5661ce7c5ba206c71f7223215741d1c Mon Sep 17 00:00:00 2001
From: spikecodes <19519553+spikecodes@users.noreply.github.com>
Date: Sun, 31 Jan 2021 13:22:11 -0800
Subject: [PATCH] Shrink links to icons on mobile

---
 static/style.css    | 14 +++++++++++++-
 templates/base.html | 10 ++++++++--
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/static/style.css b/static/style.css
index 6e725bd..60d7323 100644
--- a/static/style.css
+++ b/static/style.css
@@ -93,7 +93,8 @@ nav {
 }
 
 nav * { color: var(--text); }
-nav #reddit, #code { color: var(--accent); }
+nav #reddit, #code > span { color: var(--accent); }
+nav #code > svg { stroke: var(--accent); }
 
 nav #logo {
 	grid-area: logo;
@@ -104,6 +105,11 @@ nav #logo {
 nav #links {
 	grid-area: links;
 	margin-left: 10px;
+	display: flex;
+}
+
+nav #links svg {
+	display: none;
 }
 
 nav #version {
@@ -120,6 +126,10 @@ nav #libreddit {
 	opacity: 0.8;
 }
 
+#code {
+	margin-left: 5px;
+}
+
 main {
 	display: flex;
 	justify-content: center;
@@ -1075,6 +1085,8 @@ td, th {
 	}
 
 	nav #links { margin-left: auto; }
+	nav #links span { display: none; }
+	nav #links svg { display: block; }
 
 	#subscriptions { position: unset; }
 
diff --git a/templates/base.html b/templates/base.html
index 7b3ddee..742f5c9 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -25,8 +25,14 @@
 			</div>
 			{% block search %}{% endblock %}
 			<div id="links">
-				<a id="settings_link" href="/settings">settings</a>
-				<a id="code" href="https://github.com/spikecodes/libreddit">code</a>
+				<a id="settings_link" href="/settings">
+					<span>settings</span>
+					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+				</a>
+				<a id="code" href="https://github.com/spikecodes/libreddit">
+					<span>code</span>
+					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+				</a>
 			</div>
 		</nav>