Make navbar and background scroll-friendly

This commit is contained in:
Sol Fisher Romanoff 2022-10-23 23:21:51 +03:00 committed by Sam Therapy
parent 6a99c55435
commit 44b61eb776
Signed by: sam
GPG key ID: 4D8B07C18F31ACBD
2 changed files with 22 additions and 2 deletions

View file

@ -8,6 +8,7 @@
<link rel="stylesheet" href="/static-fe/static-fe.css">
</head>
<body>
<div class="background-image"></div>
<nav>
<div class="inner-nav">
<a class="site-brand" href="/">

View file

@ -1,6 +1,7 @@
/* pleroma-light and pleroma-dark themes from pleroma-fe */
:root {
--alertNeutral: rgba(185, 185, 186, 0.5);
--wallpaper: rgba(11, 16, 23, 1);
--alertNeutralText: rgba(255, 255, 255, 1);
--avatarShadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.7);
@ -30,27 +31,45 @@ :root {
}
html {
height: 100%
height: 100%;
overflow-y: auto;
}
body {
overflow: auto;
margin: 0;
height: 100%;
background-image: var(--background-image);
font-family: sans-serif;
color: var(--text);
}
.background-image {
position: fixed;
height: 100%;
top: 3.5em;
z-index: -1000;
left: 0;
right: -20px;
background-size: cover;
background-repeat: no-repeat;
background-color: var(--wallpaper);
background-image: var(--background-image);
background-position: 50%;
}
a {
text-decoration: none;
color: var(--link);
}
nav {
position: sticky;
top: 0;
width: 100%;
height: 3.5em;
background-color: var(--topBar);
box-shadow: var(--topBarShadow);
z-index: 2000;
}
.inner-nav {