perso/WEBSITE_hugulumu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip adding php include

Browse Source
This commit is contained in:
Hugo LAMY
2026-03-17 14:09:41 +01:00
parent cd97001cc0
commit 704483f6e6
64 changed files with 1351 additions and 881 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/styles/banners.css Normal file
View File

@@ -0,0 +1,101 @@
.banner {
width: 100%;
--base_banner_height: 24px;
--banner_height: var(--base_banner_height); /*default*/
--base_dot_size: 4.2vw;
--dot_size: var(--base_dot_size); /*default*/
height: min(var(--dot_size), var(--banner_height));
background-image: url(../docs/banners/banner_1.svg); /*default*/
background-size: contain;
background-repeat: repeat;
background-position-x: 0%;
animation-duration: 10s; /*default*/
animation-name: slide_svg;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: normal;
}
@keyframes slide_svg {
from {
background-position-x: 0%;
}
to {
background-position-x: 100%;
}
}
/*
* speeds
*
*/
.banner_pause {
animation-play-state: paused;
}
.banner_reverse {
animation-direction: reverse;
}
.banner_speed_10 {
animation-duration: 10s;
}
.banner_speed_20 {
animation-duration: 20s;
}
.banner_speed_30 {
animation-duration: 30s;
}
.banner_speed_40 {
animation-duration: 40s;
}
.banner_speed_50 {
animation-duration: 50s;
}
/*
* sizes
*
*/
.banner_size_0 {
background-image: url(../docs/banners/banner_0.svg);
--banner_height: calc(var(--base_banner_height) * 1);
--dot_size: calc(var(--base_dot_size) * 1);
}
.banner_size_00 {
background-image: url(../docs/banners/banner_00.svg);
--banner_height: calc(var(--base_banner_height) * 1);
--dot_size: calc(var(--base_dot_size) * 1);
}
.banner_size_1 {
background-image: url(../docs/banners/banner_1.svg);
--banner_height: calc(var(--base_banner_height) * 1);
--dot_size: calc(var(--base_dot_size) * 1);
}
.banner_size_2 {
background-image: url(../docs/banners/banner_2.svg);
--banner_height: calc(var(--base_banner_height) * 2);
--dot_size: calc(var(--base_dot_size) * 2);
}
.banner_size_3 {
background-image: url(../docs/banners/banner_3.svg);
--banner_height: calc(var(--base_banner_height) * 3);
--dot_size: calc(var(--base_dot_size) * 3);
}
.banner_size_4 {
background-image: url(../docs/banners/banner_4.svg);
--banner_height: calc(var(--base_banner_height) * 4);
--dot_size: calc(var(--base_dot_size) * 4);
}
.banner_size_5 {
background-image: url(../docs/banners/banner_5.svg);
--banner_height: calc(var(--base_banner_height) * 5);
--dot_size: calc(var(--base_dot_size) * 5);
}
/* specific banners */
#top_banner {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}