dan/design
1
0
Fork 0
mirror of https://github.com/danbulant/design synced 2026-05-19 04:08:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix navbar

Browse source
This commit is contained in:
Daniel Bulant 2022-03-05 11:38:10 +01:00
parent 52ac06a796
commit a90eaea2c3
2 changed files with 40 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/lib/components/navbar.svelte
View file

@ -17,4 +17,43 @@
<a href="/#contact" class="big">Contact</a>
<a href="/posts" class="big">Blog</a>
</Bar>
</div>
</div>
<style>
@media (max-width: 570px) {
.bar .big {
display: none;
}
}
.bar {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
left: 0;
z-index: 99;
/*width: calc(100vw - 15px);*/
max-width: 1920px;
margin: 0 auto 30px auto;
background: rgba(255,255,255, 0.2);
backdrop-filter: blur(10px);
}
@media (max-width: 400px) {
.bar {
width: 100vw;
}
}
.dark.bar {
background: rgba(28, 28, 33, 0.2);
}
.bar h3 {
font-size: 18px;
font-weight: bold;
}
.bar a {
color: #202020b2;
}
.dark.bar a {
color: rgba(191, 191, 191, 0.698);
}
</style>

35
src/routes/index.svelte
View file

@ -241,11 +241,6 @@
margin: 0 min(50px, 5%) 0 min(50px, 5%);
width: calc(100% - min(100px, 10%));
}
@media (max-width: 570px) {
.bar .big {
display: none;
}
}
.projects, .bottombar {
max-width: 1380px;
}
@ -356,30 +351,6 @@
margin-inline-start: 40px;
margin-inline-end: 40px;
}
.bar {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
left: 0;
z-index: 99;
/*width: calc(100vw - 15px);*/
max-width: 1920px;
margin: 0 auto 30px auto;
background: rgba(255,255,255, 0.2);
backdrop-filter: blur(10px);
}
@media (max-width: 400px) {
.bar {
width: 100vw;
}
}
.dark.bar {
background: rgba(28, 28, 33, 0.2);
}
.bar h3 {
font-size: 18px;
font-weight: bold;
}
h1, h3 {
color: #282B29;
}
@ -398,10 +369,4 @@
font-size: 29px;
font-weight: 400;
}
.bar a {
color: #202020b2;
}
.dark.bar a {
color: rgba(191, 191, 191, 0.698);
}
</style>