diff --git a/index.html b/index.html
index d7c1a7caa0c18a507394b93b2aaace98921e7867..9fcd6c1842220c4ebbe1695cfbce2f334f01f8c6 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 7c0330a832ea168268d335a15e7c6f903c51f124..b209008b014a3e2f3a16d0ab249326b937cdd7fb 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 {