Project-Pro/it.vidok.com
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New logo + animation

Browse Source
This commit is contained in:
Roman Pyrih
2025-11-21 15:25:08 +01:00
parent 11794b64b8
commit add55040e5
4 changed files with 112 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
layout/style-css/style.css
View File

File diff suppressed because one or more lines are too long

2
layout/style-css/style.css.map
View File

File diff suppressed because one or more lines are too long

94
layout/style-scss/style.scss
View File

@@ -661,6 +661,100 @@ a {
height: 47px;
}
}
.header-logo {
min-height: 48px;
min-width: 120px;
.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: 48px;
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: 48px;
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;
}
}
}
div[class^='col-']:last-child {

18
templates_user/components/nav-menu.php
View File

@@ -4,9 +4,23 @@
<div class="container">
<div class="row">
<div class="col-md-12 col-xl-2">
<a href="<?= \front\factory\Pages::lang_url(\front\factory\Pages::main_page_id(), $lang_id, \S::get_domain( $_SERVER['HTTP_HOST'] ), \front\factory\Languages::default_domain()); ?>">
<!-- <a href="<?= \front\factory\Pages::lang_url(\front\factory\Pages::main_page_id(), $lang_id, \S::get_domain( $_SERVER['HTTP_HOST'] ), \front\factory\Languages::default_domain()); ?>">
<img alt="" src="/upload/filemanager/images/logo.png" />
</a>
</a> -->
<div class="header-logo">
<div class="box-logo-relative">
<div class="box-logo-absolute box-logo-absolute-front">
<a href="/">
<img src="/upload/filemanager/logos/VIDOK-logo-new.png" alt="logo">
</a>
</div>
<div class="box-logo-absolute box-logo-absolute-back">
<a href="/">
<img src="/upload/filemanager/logos/VIDOK-COM_IT.png" alt="logo">
</a>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-xl-10">
<div>