setto/setto-nostr-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tuneing

Browse source
This commit is contained in:
sakrecoer 2026-08-06 21:18:22 +02:00
parent 5d04593a47
commit e78779f01c
2 changed files with 38 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

40
themes/one-pager/assets/css/style.css
View file

@ -156,6 +156,30 @@ body {
pointer-events: none; pointer-events: none;
} }
#bannerino {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:0;
background-size:cover;
background-position:center;
background-attachment:fixed;
}
#texture {
filter: invert(50%) sepia(100%) saturate(100%) hue-rotate(15deg);
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:1;
background-image:url('/images/texture.png');
pointer-events:none;
}
/* Content sits above overlay */ /* Content sits above overlay */
.header-content { .header-content {
max-width: 1200px; max-width: 1200px;
@ -163,8 +187,11 @@ body {
width: 100%; width: 100%;
position: relative; position: relative;
z-index: 1; z-index: 1;
transition: all 1s ease;
}
.header-content:hover {
transition: all 1s ease;
} }
/* Profile layout */ /* Profile layout */
.header-profile { .header-profile {
display: flex; display: flex;
@ -179,16 +206,18 @@ body {
width: 180px; width: 180px;
height: 180px; height: 180px;
border-radius: 0; border-radius: 0;
border: 4px solid var(--accent-yellow); border: 4px solid var(--accent-grey);
object-fit: cover; object-fit: cover;
box-shadow: 12px 12px 0 var(--accent-yellow); box-shadow: 12px 12px 0 var(--accent-grey);
transition: all 0.3s ease; transition: all 0.3s ease;
border-radius: 100%; border-radius: 100%;
} }
.profile-picture:hover { .profile-picture:hover {
transform: scale(1.02); transform: scale(1.02);
box-shadow: 16px 16px 0 var(--accent-yellow); box-shadow: 16px 16px 0 var(--accent-yellow);
border: 4px solid var(--accent-yellow);
} }
@ -206,7 +235,7 @@ body {
font-size: 7rem; font-size: 7rem;
letter-spacing: -2px; letter-spacing: -2px;
line-height: 1.1; line-height: 1.1;
color: var(--accent-yellow); color: var(--accent-grey);
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
text-shadow: text-shadow:
@ -341,11 +370,12 @@ body {
z-index: 999; z-index: 999;
background: var(--bg-primary); background: var(--bg-primary);
border-bottom: 3px solid var(--accent-yellow); border-bottom: 3px solid var(--accent-yellow);
opacity: .9;
padding: 0.8rem 2rem; padding: 0.8rem 2rem;
transform: translateY(-100%); transform: translateY(-100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s ease;
box-shadow: 0 4px 20px var(--shadow-color); box-shadow: 0 4px 20px var(--shadow-color);
backdrop-filter: blur(10px); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
} }

6
themes/one-pager/layouts/partials/header.html
View file

@ -56,9 +56,9 @@
<header class="main-header" style="position:relative;overflow:hidden;"> <header class="main-header" style="position:relative;overflow:hidden;">
<!-- Background image --> <!-- Background image -->
{{ if $banner }} {{ if $banner }}
<div style="position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-image:url('{{ $banner }}');background-size:cover;background-position:center; background-attachment:fixed;"></div> <div id="bannerino" style="background-image:url('{{ $banner }}');"></div>
<!-- Dark overlay for readability --> <!-- Dark overlay for readability -->
<div style="position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;background-image:url('/images/texture.png');pointer-events:none;"></div> <div id="texture"></div>
{{ end }} {{ end }}
@ -69,7 +69,7 @@
<div class="header-content"> <div class="header-content">
<div class="header-profile"> <div class="header-profile">
{{ if $picture }} {{ if $picture }}
<img src="{{ $picture }}" alt="{{ $displayName }}" class="profile-picture" loading="lazy"> <img src="{{ $picture }}" alt="{{ $displayName }}'s profile picture'" class="profile-picture" loading="lazy">
{{ end }} {{ end }}
<div class="header-text"> <div class="header-text">