merging conflict
This commit is contained in:
asus
44
index.html
44
index.html
@@ -23,7 +23,6 @@
|
||||
</head>
|
||||
|
||||
<!--
|
||||
|
||||
original : • 8226 U+2022
|
||||
: 57442 U+E062
|
||||
: 57443 U+E063
|
||||
@@ -31,7 +30,6 @@
|
||||
: 57445 U+E065
|
||||
actual : 57446 U+E066
|
||||
: 57447 U+E067
|
||||
|
||||
-->
|
||||
|
||||
<body id="body">
|
||||
@@ -159,25 +157,7 @@
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
<div id="banner_1" class="banner" role="img" aria-label="banner delimitation in ASCII art">
|
||||
<pre class="pre_banner" aria-hidden="true">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
<div class="banner banner_size_5 banner_speed_30" aria-label="banner delimitation in ASCII art"></div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -296,19 +276,7 @@
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
<div id="banner_2" class="banner" role="img" aria-label="banner delimitation in ASCII art">
|
||||
<pre class="banner reverse t05" aria-hidden="true">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
<div class="banner banner_size_3 banner_speed_20 banner_reverse" aria-label="banner delimitation in ASCII art"></div>
|
||||
|
||||
</section>
|
||||
|
||||
@@ -463,13 +431,7 @@
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
<div id="banner_3" class="banner" role="img" aria-label="banner delimitation in ASCII art">
|
||||
<pre class="banner t15 reverse" aria-hidden="true">
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
<div class="banner banner_size_3 banner_speed_50 banner_reverse" aria-label="banner delimitation in ASCII art"></div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@@ -1,33 +1,76 @@
|
||||
.banner {
|
||||
width: 100%;
|
||||
--base_banner_height: 24px;
|
||||
--banner_height: var(--base_banner_height); /*default*/
|
||||
height: min(26vw, var(--banner_height));
|
||||
|
||||
.pre_banner {
|
||||
position: relative;
|
||||
margin: 10px 0px 10px -100px;
|
||||
animation-name: slide;
|
||||
background-image: url(../img/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-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-direction: normal;
|
||||
}
|
||||
.pre_banner.pause {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.pre_banner.reverse {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
.pre_banner.t05 {
|
||||
animation-duration: 0.5s;
|
||||
}
|
||||
.pre_banner.t10 {
|
||||
animation-duration: 1s;
|
||||
}
|
||||
.pre_banner.t15 {
|
||||
animation-duration: 1.5s;
|
||||
}
|
||||
.pre_banner.t20 {
|
||||
animation-duration: 2s;
|
||||
}
|
||||
@keyframes slide {
|
||||
from {left:0;}
|
||||
to {left:2.4em;}
|
||||
@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_1 {
|
||||
background-image: url(../img/banner_1.svg);
|
||||
--banner_height: calc(var(--base_banner_height) * 1);
|
||||
}
|
||||
.banner_size_2 {
|
||||
background-image: url(../img/banner_2.svg);
|
||||
--banner_height: calc(var(--base_banner_height) * 2);
|
||||
}
|
||||
.banner_size_3 {
|
||||
background-image: url(../img/banner_3.svg);
|
||||
--banner_height: calc(var(--base_banner_height) * 3);
|
||||
}
|
||||
.banner_size_4 {
|
||||
background-image: url(../img/banner_4.svg);
|
||||
--banner_height: calc(var(--base_banner_height) * 4);
|
||||
}
|
||||
.banner_size_5 {
|
||||
background-image: url(../img/banner_5.svg);
|
||||
--banner_height: calc(var(--base_banner_height) * 5);
|
||||
}
|
||||
|
||||
32
styles/img/banner_1.svg
Normal file
32
styles/img/banner_1.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.9 KiB |
35
styles/img/banner_2.svg
Normal file
35
styles/img/banner_2.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.9 KiB |
38
styles/img/banner_3.svg
Normal file
38
styles/img/banner_3.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.0 KiB |
40
styles/img/banner_4.svg
Normal file
40
styles/img/banner_4.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.0 KiB |
43
styles/img/banner_5.svg
Normal file
43
styles/img/banner_5.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.0 KiB |
Reference in New Issue
Block a user