diff --git a/src/plainui/jinja2/plainui/components/header_buttons.html b/src/plainui/jinja2/plainui/components/header_buttons.html
index 3b41e56a45b8756f10885335d71912b2b39a9074..5adb296d22623da7c14a7c0887314ad82969cfc5 100644
--- a/src/plainui/jinja2/plainui/components/header_buttons.html
+++ b/src/plainui/jinja2/plainui/components/header_buttons.html
@@ -57,14 +57,14 @@
{{ csrf_input }}
<input type="hidden" name="next" value="{{ request.get_full_path() }}">
<button
- class="btn btn-icont px-2"
+ class="btn btn-icont p-1"
value="de"
name="language"
>
{{ _("de") }}
</button>
<button
- class="btn btn-icont px-2"
+ class="btn btn-icont p-1"
value="en"
name="language"
>
diff --git a/src/plainui/static/plainui/js/animations.js b/src/plainui/static/plainui/js/animations.js
index f7aeb361d166b37e26f8a31d257935ff726d31fa..6efbbb6f4be5ad688b9d0662d5e8982fdc9ff985 100644
--- a/src/plainui/static/plainui/js/animations.js
+++ b/src/plainui/static/plainui/js/animations.js
@@ -30,9 +30,9 @@ initParallax(() => {
layer05L.classList.add(`collage-l-` + Math.floor((Math.random() * 6) + 1));
}
- const setTransform = (el, factor) => {
+ const setTransform = (el, factor, scale) => {
if (el) {
- el.style.transform = "translate3D(0," + window.scrollY * factor + "px,0)"
+ el.style.transform = `translate3D(0,${window.scrollY * factor}px,0) scale(${scale})`;
}
}
const setBgPosition = (el, factor) => {
@@ -47,10 +47,10 @@ initParallax(() => {
if (lastPos !== window.scrollY) {
setBgPosition(layer01, -1.2);
- setTransform(layer05R, -0.1);
- setTransform(layer05L, -0.2);
+ setTransform(layer05R, -0.1, "1");
+ setTransform(layer05L, -0.2, "1");
setBgPosition(layer06, 0.5);
- setTransform(layer10, -0.02);
+ setTransform(layer10, -0.02, "1");
// Move mask for header
if (main) {
main.style.maskPositionY = window.scrollY - 170 + "px";
@@ -663,7 +663,7 @@ initParticles(() => {
particles: {
density: 8,
color: 'white',
- size: 25,
+ size: 20,
speed: 0.7,
lifespan: { // in milliseconds
min: 3500,
diff --git a/src/plainui/styles/_util-classes.scss b/src/plainui/styles/_util-classes.scss
index 1baabaebac7e126ec55fcc83797fb3c469969d6a..7a4d426bae9863c0fa9e1b162b9064b0787f7495 100644
--- a/src/plainui/styles/_util-classes.scss
+++ b/src/plainui/styles/_util-classes.scss
@@ -599,7 +599,7 @@ h6,
&-L01 {
z-index: 20;
opacity: 0.2;
- filter: blur(2px);
+ filter: blur(1px);
}
&-L06 {
@@ -617,79 +617,116 @@ h6,
z-index: -5;
max-width: 1120px;
margin: 0 auto;
- opacity: 0.8;
+ opacity: 0.6;
&-R,
&-L {
display: block;
content: "";
- height: 450px;
- width: 600px;
position: absolute;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
+ transform: scale(1);
}
&-R {
- right: -300px;
top: 28vh;
&.collage-r-1 {
background-image: url('img/05_Collage/05_collage_1_bust_vr-goggles_R_halfres_ani_V01.gif');
+ height: 250px;
+ width: 250px;
+ right: -125px;
}
&.collage-r-2 {
background-image: url('img/05_Collage/05_Collage_2_robothand_nib_R_halfres_ani_V01.gif');
+ height: 200px;
+ width: 300px;
+ right: -150px;
}
&.collage-r-3 {
background-image: url('img/05_Collage/05_Collage_3_baby_ethernet_R_halfres_ani_V01.gif');
+ height: 300px;
+ width: 300px;
+ right: -150px;
}
&.collage-r-4 {
background-image: url('img/05_Collage/05_Collage_4_sunflower_bitcoin_R_halfres_ani_V01.gif');
+ height: 450px;
+ width: 350px;
+ right: -150px;
}
&.collage-r-5 {
background-image: url('img/05_Collage/05_Collage_7_bird_cam_R_halfres_ani_V01.gif');
+ height: 300px;
+ width: 600px;
+ right: -300px;
}
&.collage-r-6 {
background-image: url('img/05_Collage/05_Collage_6_astronaut_c64_R_halfres_ani_V01.gif');
+ height: 500px;
+ width: 300px;
+ right: -150px;
}
&.collage-r-7 {
background-image: url('img/05_Collage/05_Collage_5_smartphone_tunnel_halfres_ani_V01.gif');
+ height: 350px;
+ width: 250px;
+ right: -125px;
}
}
&-L {
- left: -300px;
- bottom: 3vh;
+ left: 0;
+ bottom: -1vh;
&.collage-l-1 {
background-image: url('img/05_Collage/05_Collage_5_smartphone_tunnel_halfres_ani_V01.gif');
+ height: 350px;
+ width: 250px;
+ left: -125px;
}
&.collage-l-2 {
background-image: url('img/05_Collage/05_collage_1_bust_vr-goggles_L_halfres_ani_V01.gif');
+ height: 250px;
+ width: 250px;
+ left: -125px;
}
&.collage-l-3 {
background-image: url('img/05_Collage/05_Collage_2_robothand_nib_L_halfres_ani_V01.gif');
+ height: 200px;
+ width: 300px;
+ left: -150px;
}
&.collage-l-4 {
background-image: url('img/05_Collage/05_Collage_3_baby_ethernet_L_halfres_ani_V01.gif');
+ height: 300px;
+ width: 300px;
+ left: -150px;
}
&.collage-l-5 {
background-image: url('img/05_Collage/05_Collage_6_astronaut_c64_L_halfres_ani_V01.gif');
+ height: 500px;
+ width: 300px;
+ left: -150px;
}
&.collage-l-6 {
background-image: url('img/05_Collage/05_Collage_7_bird_cam_L_halfres_ani_V01.gif');
+ height: 300px;
+ width: 600px;
+ left: -300px;
}
}
}
diff --git a/src/plainui/styles/components/_header.scss b/src/plainui/styles/components/_header.scss
index ae416f977be0acfd1b5a9a3b4160b51e8a4f10bd..4292af2f2007365dfe0643921c56364f9af8a622 100644
--- a/src/plainui/styles/components/_header.scss
+++ b/src/plainui/styles/components/_header.scss
@@ -102,8 +102,11 @@
gap: .5rem;
left: 50%;
position: absolute;
- top: 1.5rem;
+ top: 1.6rem;
transform: translateX(-50%);
+ flex-flow: column;
+ gap: 0;
+ margin-top: 0.25rem;
}
}
@@ -117,13 +120,20 @@
align-items: center;
display: flex;
flex-direction: column;
+ gap: 0.25rem;
+ margin: 0.5rem 0 0 0 !important;
&__main {
- margin-bottom: 1rem;
+ margin-bottom: 0;
}
.rc3-logo {
justify-self: center;
+
+ & img {
+ max-height: 4rem;
+ }
+
}
&__nomob {
diff --git a/src/plainui/styles/utils/_fonts.scss b/src/plainui/styles/utils/_fonts.scss
index 017f26ea9dafdd38bad6f7aa1405231c8f7f9b36..afe8748b13506006d0c60b4f71b2988e961f03e1 100644
--- a/src/plainui/styles/utils/_fonts.scss
+++ b/src/plainui/styles/utils/_fonts.scss
@@ -31,5 +31,5 @@ $small-font-size: .75em;
$medium-font-size: 0.875em;
$paragraph-margin-bottom: 0;
-$letter-spacing: 0.05rem;
+$letter-spacing: 0.02rem;
$word-spacing: .1rem;