Include code link on mobile

This commit is contained in:
spikecodes 2021-01-17 13:24:44 -08:00
parent 21763c51cd
commit 801216dfe9
2 changed files with 18 additions and 11 deletions

View File

@ -32,23 +32,30 @@ body {
} }
nav { nav {
display: flex; display: grid;
grid-template-areas: "logo searchbox code";
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: var(--accent); color: var(--accent);
background: var(--outside); background: var(--outside);
padding: 5px 15px;
font-size: 20px;
min-height: 40px;
position: fixed;
width: calc(100% - 30px);
box-shadow: var(--shadow); box-shadow: var(--shadow);
top: 0;
font-size: 20px;
z-index: 1; z-index: 1;
top: 0;
padding: 5px 15px;
min-height: 40px;
width: calc(100% - 30px);
position: fixed;
} }
nav * { color: var(--text); } nav * { color: var(--text); }
nav #reddit { color: var(--accent); } nav #reddit, #code { color: var(--accent); }
nav #logo { grid-area: logo; }
nav #code { grid-area: code; }
nav #version { opacity: 25%; } nav #version { opacity: 25%; }
#settings_link { #settings_link {
@ -246,6 +253,7 @@ select, #search {
} }
#searchbox { #searchbox {
grid-area: searchbox;
display: flex; display: flex;
box-shadow: var(--shadow); box-shadow: var(--shadow);
border-radius: 5px; border-radius: 5px;
@ -939,7 +947,7 @@ td, th {
} }
nav { nav {
flex-direction: column; grid-template-areas: 'logo code' 'searchbox searchbox';
padding: 10px; padding: 10px;
width: calc(100% - 20px); width: calc(100% - 20px);
} }
@ -952,5 +960,4 @@ td, th {
#user, #sidebar { margin: 20px 0; } #user, #sidebar { margin: 20px 0; }
#logo { margin: 5px auto; } #logo { margin: 5px auto; }
#searchbox { width: 100%; } #searchbox { width: 100%; }
#github { display: none; }
} }

View File

@ -26,7 +26,7 @@
<a id="settings_link" href="/settings">settings</a> <a id="settings_link" href="/settings">settings</a>
</p> </p>
{% block search %}{% endblock %} {% block search %}{% endblock %}
<a id="github" href="https://github.com/spikecodes/libreddit">GITHUB</a> <a id="code" href="https://github.com/spikecodes/libreddit">code</a>
</nav> </nav>
<!-- MAIN CONTENT --> <!-- MAIN CONTENT -->