Shrink links to icons on mobile

This commit is contained in:
spikecodes 2021-01-31 13:22:11 -08:00
parent 1a0d12d2ff
commit c32d62fbd5
No known key found for this signature in database
GPG Key ID: 004CECFF9B463BCB
2 changed files with 21 additions and 3 deletions

View File

@ -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; }

View File

@ -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>