stopplidelsen/innhold
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add announcement bar styling

Browse source 
Implement responsive announcement bar with gradient background
and hover effects using modern CSS features like nesting
and clamp() for fluid typography
This commit is contained in:
Ruben 2026-01-17 00:02:58 +01:00
parent 8018157c7a
commit 375db3c3f7
1 changed files with 32 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

32
content/styles.css
View file

@ -1,3 +1,35 @@
.announcement-bar {
display: block;
background: linear-gradient(135deg, var(--color-green), var(--color-blue));
padding: 0.8rem 1rem;
text-decoration: none;
cursor: pointer;
text-align: center;
transition: filter 0.5s ease;
&:hover {
filter: brightness(1.15);
}
}
.announcement-bar__content {
color: white;
font-size: clamp(0.95rem, 2.5vw, 1rem);
line-height: 1.4;
margin: 0 auto;
text-align: center;
max-width: 42rem;
}
.announcement-bar__arrow {
display: inline-block;
color: white;
transition: transform 0.2s ease;
margin-left: 0.3rem;
.announcement-bar:hover & {
transform: translateX(0.3rem);
}
}
.hero {
display: flex;
flex-direction: column;