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);
}

3
styles/elements/mouses.css
View File

@@ -16,10 +16,11 @@
* for pseudo elements ::before and ::after
* for some reason it does not work when applied to them directly
* if they are not position absolute
*/
white-space: pre;
line-height: 0.8;
font-size: 1.0rem;
font-size: min(2.1vw, 1.0rem);
*/
--tframes: 2s;
animation-name: mouse_move;

30
styles/elements/nav.css
View File

@@ -1,30 +0,0 @@
nav {
display: flex;
flex-direction: row;
justify-content: center;
position: fixed;
top: 0;
background-color: #f6f6f6;
z-index: 1;
width: 100vw;
font-size: min(4vw, 1.5rem);
}
nav a {
position: relative;
padding: 10px min(5%, 20px);
height: fit-content;
text-decoration: none;
color: inherit;
}
nav a:before {
content: "•";
position: absolute;
left: 0px;
}
nav a:after {
content: "•";
position: absolute;
right: 0px;
}