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

unified dot size responsivness for banner and mouses

Browse Source
This commit is contained in:
asus
2024-05-17 14:09:42 +02:00
parent a40ab0b203
commit ac836798b9
4 changed files with 17 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
styles/elements/banners.css
View File

@@ -2,7 +2,9 @@
width: 100%;
--base_banner_height: 24px;
--banner_height: var(--base_banner_height); /*default*/
height: min(26vw, var(--banner_height));
--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;
@@ -14,6 +16,7 @@
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: normal;
animation: none;
}
@keyframes slide_svg {
from {background-position-x: 0%;}
@@ -57,28 +60,35 @@
.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);
}