2022-05-03 22:29:06 +02:00
< script >
import { assets } from '$app/paths';
< / script >
< style >
.bar {
width: calc(100%);
padding: 0;
margin: 0;
2022-05-04 00:08:28 +02:00
box-shadow: 0px 2px 8px rgba(10, 10, 10, 0.2);
2022-05-03 22:29:06 +02:00
background-color: rgb(140, 241, 100);
color: rgb(30,31,31);
font-weight: 600;
line-height: 1.5;
font-size: x-large;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.bar img {
height: 1.5em;
width: auto;
}
.bar *, .logo img {
padding-bottom: 0.2em;
padding-top: 0.2em;
padding-left: 0.6em;
padding-right: 0.6em;
background-color: rgba(255, 255, 255, 0.0);
transition: 0.1s background-color;
}
.bar *:hover, .logo img:hover {
background-color: rgba(255, 255, 255, 0.4);
}
.logo {
display: contents;
}
/*
@media (prefers-color-scheme: dark) {
.bar {
color: #fff;
}
.bar img {
filter: invert();
}
}
*/
< / style >
< div class = "bar" >
< a href = "/" class = "logo" sveltekit:prefetch >
< img src = " { assets } /guidebook.png" alt = "Guidebook" width = "979" height = "222" >
< / a >
<!--
< a href = "https://isaacscript.github.io/" on:click = {() => prompt ( 'Going on this website may cause problems. Are you sure you want to proceed?' )} target="_blank" > Do NOT visit this</ a >
-->
< / div >