From eb3182c9e05a39f8c0410b9e8c9628af280a5917 Mon Sep 17 00:00:00 2001 From: Conrad Zelck <git@simpel.cc> Date: Fri, 11 Mar 2022 12:33:00 +0100 Subject: [PATCH] refact header Signed-off-by: Conrad Zelck <git@simpel.cc> --- index.html | 4 ++-- style.css | 25 +++++++++++++------------ 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index d7c1a7c..9fcd6c1 100644 --- a/index.html +++ b/index.html @@ -14,10 +14,10 @@ <body onKeyDown="keys(event,'d')" onKeyUp="keys(event,'u')"> <header> <nav> - <h1>Sort Lines</h1> <a id="logo" class="cursordefault" href="/"><img src="../Simpel.png" alt="simpel icon" height="48" width="48" title="simpel.cc" aria-label="go to simpel dot c c"></a> + <h1>Sort Lines</h1> <a id="github" href="https://github.com/SimpelMe/sort-lines" target="_blank" rel="noopener noreferrer" title="watch source code" aria-label="go to source code at github dot com"> - <img id="github-cat" src="../github-cat-white.png" alt="github logo"> + <img id="github-cat" src="../github.svg" alt="github logo"> </a> </nav> </header> diff --git a/style.css b/style.css index 7c0330a..b209008 100644 --- a/style.css +++ b/style.css @@ -38,26 +38,27 @@ a { text-decoration: none; } -h1 { - padding-left: 60px; - line-height: 52px; - margin-top: 3vmin; +header { + margin-bottom: 1.5em; } -#logo { - float: left; - position: absolute; - top: 3vmin; +nav { + display: flex; + align-items: center; + column-gap: 0.7em; +} + +h1 { + font-size: 1.5em; + margin: 0; } #github { - position: absolute; - top: 3.3vmin; - right: 4vmin; + margin-left: auto; } #github-cat { - height: 4vh; + height: 1.5em; } .flex { -- GitLab