Move marquees to its own stylesheet and defer it.
This is best for preformance, IG.
steve0greatness,
created on Friday, 31 May 2024, 18:13:35 (1717179215),
received on Wednesday, 5 June 2024, 18:14:09 (1717611249)
Author identity: Steve0Greatness <steve0greatnessiscool@gmail.com>
45e5d1abe46eeade0e2c49308fd1b5d875d693a2
static/src/global.css
@@ -180,53 +180,3 @@ input:is([type=radio], [type=checkbox]):checked {
background-color: #f00;
}
.ticker-wrapper {
overflow: hidden;
display: block;
width: 100%;
}
.ticker-wrapper .ticker {
animation: infinite linear ticker 14s;
white-space: nowrap;
display: inline-block;
box-sizing: content-box;
}
.ticker-wrapper.pauseonhover:hover > * {
animation-play-state: paused;
}
@keyframes ticker {
0% {
margin-left: 100%;
transform: translateX(0%);
}
100% {
margin-left: 0;
transform: translateX(-100%);
}
}
.cool-people-prj :any-link {
text-decoration: none;
}
@media (prefers-reduced-motion) {
.ticker-wrapper .ticker {
animation: none;
}
.ticker-wrapper {
overflow: scroll;
}
}
.ticker-wrapper.ticker-reversed .ticker {
animation-direction: reverse;
}
.cool-people-prj-no-bttn :any-link {
margin-right: 5px;
}
static/src/marquee.css
@@ -0,0 +1,50 @@
.ticker-wrapper {
overflow: hidden;
display: block;
width: 100%;
}
.ticker-wrapper .ticker {
animation: infinite linear ticker 14s;
white-space: nowrap;
display: inline-block;
box-sizing: content-box;
}
.ticker-wrapper.pauseonhover:hover > * {
animation-play-state: paused;
}
@keyframes ticker {
0% {
margin-left: 100%;
transform: translateX(0%);
}
100% {
margin-left: 0;
transform: translateX(-100%);
}
}
.cool-people-prj :any-link {
text-decoration: none;
}
@media (prefers-reduced-motion) {
.ticker-wrapper .ticker {
animation: none;
}
.ticker-wrapper {
overflow: scroll;
}
}
.ticker-wrapper.ticker-reversed .ticker {
animation-direction: reverse;
}
.cool-people-prj-no-bttn :any-link {
margin-right: 5px;
}
views/_layout.html
@@ -16,6 +16,7 @@
}
</style>
<link rel="stylesheet" href="/src/global.css" />
<link rel="stylesheet" href="/src/marquee.css" defer="defer" />
<meta property="og:locale" content="en_US" />
<meta property="og:site_name" content="Steve0Greatness" />
<meta property="og:image" content="/OG-Image.png" />