Add logo to header, add design colors

This commit is contained in:
Luca 2022-07-08 23:47:19 +02:00
parent 3447c5610c
commit 3d1a7f63a1
3 changed files with 29 additions and 9 deletions

View File

@ -1,4 +1,5 @@
$color-burger: #aaa; $color-background: #0646a5;
$color-highlight: #0080ff; $color-burger: #ddd;
$color-link: #f0f; $color-highlight: #ffeb3d;
$color-text: #000; $color-link: #ffeb3d;
$color-text: #fff;

View File

@ -9,6 +9,7 @@
} }
body { body {
background: $color-background;
color: $color-text; color: $color-text;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -38,8 +39,10 @@ header {
line-height: 1; line-height: 1;
user-select: none; user-select: none;
b { span {
color: $color-highlight;
font-family: monospace; font-family: monospace;
font-weight: bold;
} }
} }
@ -47,6 +50,19 @@ header {
font-size: 1.2rem; font-size: 1.2rem;
} }
.header-brand {
display: flex;
img + pre {
margin-left: 0.5rem;
}
}
.header-logo {
height: 3.2rem;
width: auto;
}
.nav-burger { .nav-burger {
margin-right: 0.5rem; margin-right: 0.5rem;
} }

View File

@ -11,10 +11,13 @@
</head> </head>
<body> <body>
<header> <header>
<pre><b>I</b>NTER <div class="header-brand">
<b>G</b>ALAKTISCHE <img alt="Logo der Intergalaktischen Erfahrungsreise, kurz IGER" class="header-logo" src="/icon.svg">
<b>E</b>RFAHRUNGS <pre><span>I</span>NTER
<b>R</b>EISE</pre> <span>G</span>ALAKTISCHE
<span>E</span>RFAHRUNGS
<span>R</span>EISE</pre>
</div>
<input class="nav-toggle" id="toggleMainNav" type="checkbox"> <input class="nav-toggle" id="toggleMainNav" type="checkbox">
<label class="nav-burger" for="toggleMainNav"> <label class="nav-burger" for="toggleMainNav">
<div></div> <div></div>