Put header image in link too

This commit is contained in:
Midgard 2020-06-11 00:03:35 +02:00
parent b53bf82ab2
commit f10d9df62d
Signed by untrusted user who does not match committer: midgard
GPG key ID: 511C112F1331BBB4
3 changed files with 20 additions and 10 deletions

View file

@ -9,10 +9,12 @@
</head> </head>
<body class="blog"> <body class="blog">
<header> <header>
<img src="../midgard.jpg" alt="A stuffed mouse in front of a wall with stripes of warm colours, this is Midgard's online avatar"/> <a href="/">
<div class="sitename"> <img src="../midgard.jpg" alt="A stuffed mouse in front of a wall with stripes of warm colours, this is Midgard's online avatar"/>
<a href="/" class="wordmark"><span>mid</span><span>gard</span></a> <div class="sitename">
</div> <span class="wordmark"><span>mid</span><span>gard</span></span>
</div>
</a>
</header> </header>
<main> <main>

View file

@ -8,10 +8,12 @@
</head> </head>
<body> <body>
<header> <header>
<img src="midgard.jpg" alt="A stuffed mouse in front of a wall with stripes of warm colours, this is Midgard's online avatar"/> <a href="/">
<h1 class="sitename"> <img src="midgard.jpg" alt="A stuffed mouse in front of a wall with stripes of warm colours, this is Midgard's online avatar"/>
<a href="/" class="wordmark"><span>mid</span><span>gard</span></a> <h1 class="sitename">
</h1> <span class="wordmark"><span>mid</span><span>gard</span></span>
</h1>
</a>
</header> </header>
<main> <main>

View file

@ -166,6 +166,12 @@ body > header img {
height: 25vmin; height: 25vmin;
display: inline-block; display: inline-block;
} }
body > header a {
text-decoration: none;
}
body > header a:hover img {
filter: brightness(110%);
}
.sitename { .sitename {
margin: 0; margin: 0;
margin-left: 0.3em; margin-left: 0.3em;
@ -300,7 +306,7 @@ main header {
} }
kbd, code { kbd, code {
padding: 0.3em 0.4em 0.2em; padding: 0.3em 0.4em 0.3em;
border-radius: 0.5em; border-radius: 0.5em;
vertical-align: middle; vertical-align: middle;
@ -312,7 +318,7 @@ kbd, code {
} }
kbd { kbd {
background-color: #fff; background-color: #fff;
border-bottom: 1px solid #ddd; border-bottom: 2px solid #ddd;
} }
code { code {
background-color: #efe5e0; background-color: #efe5e0;