mirror of
https://github.com/LinkStackOrg/LinkStack.git
synced 2025-01-25 13:08:31 +01:00
4243f99283
Optimized home page logo for mobile devices and scalable resolutions. Replaced "ll" SVG with custom font for better centering.
183 lines
2.8 KiB
CSS
Vendored
183 lines
2.8 KiB
CSS
Vendored
/*!
|
|
* animate.css - https://animate.style/
|
|
* Version - 4.1.1
|
|
* Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
|
|
* animation-delay: calc(var(--delay)/10);
|
|
* Copyright (c) 2022 Animate.css
|
|
*/
|
|
|
|
.button-entrance {
|
|
animation-name: zoomIn;
|
|
animation-duration: 1s;
|
|
animation-fill-mode: both;
|
|
animation-delay: calc(var(--delay)/10);
|
|
}
|
|
|
|
@keyframes zoomIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale3d(0.3, 0.3, 0.3);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Rotating entrances */
|
|
.rotate {
|
|
animation-name: rotate;
|
|
animation-duration: 3s;
|
|
animation-fill-mode: both;
|
|
transform-origin: center;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from {
|
|
transform: rotate3d(0, 0, 1, -200deg);
|
|
}
|
|
|
|
to {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
|
|
.fadein {
|
|
animation-name: fadein;
|
|
animation-duration: 3s;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
|
|
@keyframes fadein {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.logo-container {
|
|
position: relative;
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
|
|
.logo-centered {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
font-family: ll;
|
|
font-size: 78px;
|
|
font-weight: 100;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.parent-footer {
|
|
margin: auto;
|
|
top: 35px;
|
|
position: relative;
|
|
right: 123px;
|
|
}
|
|
.image-footer1 {
|
|
position: relative;
|
|
width: 32px !important;
|
|
min-width:32px;
|
|
}
|
|
|
|
.image-footer2 {
|
|
position: relative;
|
|
bottom: 7px;
|
|
right: 27px;
|
|
width: 12px !important;
|
|
min-width: 13px;
|
|
height: auto;
|
|
}
|
|
|
|
.parent-footers {
|
|
margin: auto;
|
|
top: 39px;
|
|
position: relative;
|
|
right: 12px;
|
|
}
|
|
.image-footers1 {
|
|
position: relative;
|
|
width: 32px !important;
|
|
min-width:32px;
|
|
}
|
|
|
|
.image-footers2 {
|
|
position: relative;
|
|
bottom: 0px;
|
|
right: 26px;
|
|
width: 12px !important;
|
|
min-width: 13px;
|
|
height: auto;
|
|
}
|
|
|
|
.text-footers {
|
|
padding-left: 22px;
|
|
}
|
|
|
|
.sections {
|
|
padding-left: 50px;
|
|
}
|
|
|
|
@keyframes spin {
|
|
100% {transform: rotate(1turn); }
|
|
}
|
|
|
|
section:hover #footer_spin{
|
|
animation-play-state: running;
|
|
}
|
|
|
|
section #footer_spin{
|
|
animation: spin 4s linear infinite;
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
.toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
max-width: 140px;
|
|
transform: scale(0.7);
|
|
}
|
|
.toggle span {
|
|
margin: 0 0.5rem;
|
|
}
|
|
.toggle input[type=checkbox] {
|
|
height: 0;
|
|
width: 0;
|
|
visibility: hidden;
|
|
}
|
|
.toggle input[type=checkbox]:checked + label {
|
|
background: teal;
|
|
}
|
|
.toggle input[type=checkbox]:checked + label:after {
|
|
left: calc(100% - 2px);
|
|
transform: translateX(-100%);
|
|
}
|
|
.toggle label {
|
|
cursor: pointer;
|
|
width: 75px;
|
|
height: 34px;
|
|
background: rgba(0, 0, 0, 0.27);
|
|
display: block;
|
|
border-radius: 40px;
|
|
position: relative;
|
|
}
|
|
.toggle label:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
width: 30px;
|
|
height: 30px;
|
|
background: #fff;
|
|
border-radius: 40px;
|
|
transition: 0.3s;
|
|
} |