New logo

2025-11-21 14:29:10 +01:00
parent 325e9d18bd
commit d858b22642
5 changed files with 110 additions and 5 deletions
--- a/layout/style-scss/nav-menu.scss
+++ b/layout/style-scss/nav-menu.scss
@@ -651,3 +651,96 @@ header#header {
 		}
 	}
 }
+
+.header-logo {
+	min-height: 45px;
+
+	.box-logo-relative {
+		position: relative;
+		transform-style: preserve-3d;
+		width: 100%;
+		height: 100%;
+
+		.box-logo-absolute {
+			position: absolute;
+			top: 0;
+			left: 0;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: 120px;
+			height: 46px;
+			object-fit: contain;
+			backface-visibility: hidden;
+			-webkit-backface-visibility: hidden;
+			-moz-animation: action-logo 4s linear infinite alternate;
+			-webkit-animation: action-logo 4s linear infinite alternate;
+			-ms-animation: none;
+
+			&.box-logo-absolute-front {
+			}
+			&.box-logo-absolute-back {
+				transform: rotateY(180deg);
+				-moz-animation: action-logo-back 4s linear infinite alternate;
+				-webkit-animation: action-logo-back 4s linear infinite alternate;
+				-ms-animation: none;
+			}
+
+			img {
+				width: 100%;
+				height: 46px;
+				object-fit: contain;
+			}
+		}
+	}
+}
+@keyframes action-logo {
+	0% {
+		transform: rotateY(0);
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+	}
+
+	40% {
+		transform: rotateY(0);
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+	}
+
+	61% {
+		transform: rotateY(180deg);
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+	}
+
+	100% {
+		transform: rotateY(180deg);
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+	}
+}
+@keyframes action-logo-back {
+	0% {
+		transform: rotateY(180deg);
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+	}
+
+	40% {
+		transform: rotateY(180deg);
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+	}
+
+	61% {
+		transform: rotateY(0);
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+	}
+
+	100% {
+		transform: rotateY(0);
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+	}
+}