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-highlight: #0080ff;
$color-link: #f0f;
$color-text: #000;
$color-background: #0646a5;
$color-burger: #ddd;
$color-highlight: #ffeb3d;
$color-link: #ffeb3d;
$color-text: #fff;

View File

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

View File

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