Add logo to header, add design colors
This commit is contained in:
parent
3447c5610c
commit
3d1a7f63a1
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue