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

40
index.html
View File

@@ -14,7 +14,6 @@
<link href="./styles/elements/mouses.css" type="text/css" rel="stylesheet">
<link href="./styles/elements/banners.css" type="text/css" rel="stylesheet">
<link href="./styles/elements/title.css" type="text/css" rel="stylesheet">
<link href="./styles/elements/nav.css" type="text/css" rel="stylesheet">
<link href="./styles/elements/sections.css" type="text/css" rel="stylesheet">
<link href="./styles/elements/hero.css" type="text/css" rel="stylesheet">
<link href="./styles/elements/projects.css" type="text/css" rel="stylesheet">
@@ -108,7 +107,7 @@
</ul>
</details>
<div class="mouse"><div class="mouse_1"></div></div>
<div class="mouse"><div class="mouse_1 pre"></div></div>
<div class="banner banner_size_3 banner_speed_30 grid_full_width margin_bottom_small" aria-label="banner delimitation in ASCII art"></div>
</section>
@@ -156,7 +155,7 @@
</figure>
</article>
<div class="mouse"><div class="mouse_2"></div></div>
<div class="mouse"><div class="mouse_2 pre"></div></div>
<div class="banner banner_size_3 banner_speed_20 banner_reverse grid_full_width" aria-label="banner delimitation in ASCII art"></div>
</section>
@@ -168,38 +167,6 @@
<!--
CV
<section id="cv" class="section">
<header>
<h1 aria-label="cv" id="cv_ascii">
<span aria-hidden="true" class="pre">
  
  
  
  
 
</span>
</h1>
</header>
<article>
</article>
<div class="mouse"><div class="mouse_3"></div></div>
<div class="banner banner_size_3 banner_speed_50 banner_reverse" aria-label="banner delimitation in ASCII art"></div>
</section>
-->
<!--
INFOS
-->
@@ -209,7 +176,8 @@
<p>hugogogo@protonmail.com</p>
</article>
<div class="mouse"><div class="mouse_4"></div></div>
<div class="mouse"><div class="mouse_3 pre"></div></div>
<div class="mouse"><div class="mouse_4 pre"></div></div>
</section>

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