Add clicky buttons on the nav.sections
Lonami Exo totufals@hotmail.com
Mon, 08 Feb 2021 22:11:06 +0100
2 files changed,
25 insertions(+),
9 deletions(-)
M
static/style.css
→
static/style.css
@@ -23,7 +23,8 @@
/* navigation */ nav.sections { padding-top: 20px; - display: block; + display: flex; + justify-content: space-between; } nav.sections ul {@@ -40,15 +41,27 @@ margin: 0 -2px;
font-size: 1.3em; } -nav.sections a { +nav.sections .left a { color: #787878; border-bottom: solid 2px #A8A8A8; padding: 0 16px; } -nav.sections a.selected, nav.sections a:hover { +nav.sections .left a.selected, nav.sections .left a:hover { color: #000000; border-bottom: solid 2px #444444; +} + +nav.sections img { + margin: 0 4px; +} + +.left { + justify-self: flex-start; +} + +.right { + justify-self: flex-end; } /* footer */
M
templates/base.html
→
templates/base.html
@@ -26,12 +26,15 @@ </head>
<body> <article> <nav class="sections"> - <ul> - <li><a href="/" class="{% if current_path == '/' %}selected{% endif %}">lonami's site</a></li> - <li><a href="/blog" class="{% if current_path is starting_with('/blog') %}selected{% endif %}">blog</a></li> - <li><a href="/golb" class="{% if current_path is starting_with('/golb') %}selected{% endif %}">golb</a></li> - <li><a href="/blog/atom.xml">rss</a></li> - </ul> + <ul class="left"> + <li><a href="/" class="{% if current_path == '/' %}selected{% endif %}">lonami's site</a></li> + <li><a href="/blog" class="{% if current_path is starting_with('/blog') %}selected{% endif %}">blog</a></li> + <li><a href="/golb" class="{% if current_path is starting_with('/golb') %}selected{% endif %}">golb</a></li> + </ul> + <div class="right"> + <a href="https://github.com/LonamiWebs"><img src="img/github.svg" alt="github" /></a> + <a href="/blog/atom.xml"><img src="/img/rss.svg" alt="rss"></a> + </div> </nav> <main> {% block content %}{% endblock %}