diff --git a/index.html b/index.html index d47d056..75d8d9c 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,6 @@ @@ -159,25 +157,7 @@     - + @@ -296,19 +276,7 @@  - + @@ -463,13 +431,7 @@   - + diff --git a/styles/elements/banners.css b/styles/elements/banners.css index 9cb5450..08f2281 100644 --- a/styles/elements/banners.css +++ b/styles/elements/banners.css @@ -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); +} diff --git a/styles/img/banner_1.svg b/styles/img/banner_1.svg new file mode 100644 index 0000000..6733351 --- /dev/null +++ b/styles/img/banner_1.svg @@ -0,0 +1,32 @@ + + + + + +  +   + + + + + + diff --git a/styles/img/banner_2.svg b/styles/img/banner_2.svg new file mode 100644 index 0000000..ea9d7c2 --- /dev/null +++ b/styles/img/banner_2.svg @@ -0,0 +1,35 @@ + + + + + +  +   + + +   +  + + + + + diff --git a/styles/img/banner_3.svg b/styles/img/banner_3.svg new file mode 100644 index 0000000..d539c53 --- /dev/null +++ b/styles/img/banner_3.svg @@ -0,0 +1,38 @@ + + + + + +  +   + + +   +  +  +   + + + + + + diff --git a/styles/img/banner_4.svg b/styles/img/banner_4.svg new file mode 100644 index 0000000..a54bd49 --- /dev/null +++ b/styles/img/banner_4.svg @@ -0,0 +1,40 @@ + + + + + +  +   + + +   +  +  +   + + +   +  + + + + diff --git a/styles/img/banner_5.svg b/styles/img/banner_5.svg new file mode 100644 index 0000000..2f7e858 --- /dev/null +++ b/styles/img/banner_5.svg @@ -0,0 +1,43 @@ + + + + + +  +   + + +   +  +  +   + + +   +  +  +   + + + + +