Hi,
I’ve been trying to read this forum since it looks like the best source for information on vfx that I could find but I cant scroll or click any link unless I right click, “inspect element” and delete the first body that’s highlighted after loading every individual topic, sorry if this is not the proper category for this but I couldn’t find anywhere to post this, let me know otherwise.
Here is that body I have to delete:
<section id="d-splash">
<template class="splash-svg-template">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<style>
:root {
--animation-state: paused;
}
/* user picked a theme where the "regular" scheme is dark */
:root {
--primary: #eaeaea;
--secondary: #1a1a1a;
--tertiary: #0088cc;
--quaternary: #bf0202;
--highlight: #00fffd;
--success: #009900;
}
/* these styles need to live here because the SVG has a different scope */
.dots {
animation-name: loader;
animation-timing-function: ease-in-out;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-play-state: var(--animation-state);
stroke: #fff;
stroke-width: 0.5px;
transform-origin: center;
opacity: 0;
r: max(1vw, 11px);
cy: 50%;
filter: saturate(2) opacity(0.85);
}
.dots:first-child {
fill: var(--quaternary);
}
.dots:nth-child(2) {
fill: var(--quaternary);
animation-delay: 0.15s;
}
.dots:nth-child(3) {
fill: var(--highlight);
animation-delay: 0.3s;
}
.dots:nth-child(4) {
fill: var(--tertiary);
animation-delay: 0.45s;
}
.dots:nth-child(5) {
fill: var(--tertiary);
animation-delay: 0.6s;
}
@keyframes loader {
0% {
opacity: 0;
transform: scale(1);
}
45% {
opacity: 1;
transform: scale(0.7);
}
65% {
opacity: 1;
transform: scale(0.7);
}
100% {
opacity: 0;
transform: scale(1);
}
}
</style>
<g class="container">
<circle class="dots" cx="30vw"></circle>
<circle class="dots" cx="40vw"></circle>
<circle class="dots" cx="50vw"></circle>
<circle class="dots" cx="60vw"></circle>
<circle class="dots" cx="70vw"></circle>
</g>
</svg>
</template>
<style>
html {
overflow-y: hidden !important;
}
/* user picked a theme where the "regular" scheme is dark */
html {
background-color: #1a1a1a;
}
#d-splash .preloader-text-wrapper {
color: #eaeaea;
}
#d-splash {
display: grid;
place-items: center;
backface-visibility: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 1001;
--animation-state: paused;
}
#d-splash .preloader-image {
max-width: 100%;
height: 100vh;
}
#d-splash .preloader-text-wrapper {
position: absolute;
opacity: 0;
animation: fade-in 0.5s ease-in-out;
animation-delay: 1s;
animation-fill-mode: forwards;
animation-play-state: var(--animation-state);
margin-bottom: -4em;
}
#d-splash .preloader-text:after {
animation: loading-text 3s infinite;
content: "";
position: absolute;
margin: 0 0.1em;
left: 100%;
}
.rtl #d-splash .preloader-text:after {
left: 0;
right: 100%;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes loading-text {
0% {
content: "";
}
25% {
content: ".";
}
50% {
content: "..";
}
75% {
content: "...";
}
}
</style>
<img class="preloader-image" src="data:image/svg;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Real Time VFX">
<div class="preloader-text-wrapper">
<div class="preloader-text">Loading</div>
</div>
<script>// This script is inlined in `_discourse_splash.html.erb
const DELAY_TARGET = 2000;
const POLLING_INTERVAL = 50;
const splashSvgTemplate = document.querySelector(".splash-svg-template");
const splashTemplateClone = splashSvgTemplate.content.cloneNode(true);
const svgElement = splashTemplateClone.querySelector("svg");
const svgString = new XMLSerializer().serializeToString(svgElement);
const encodedSvg = btoa(svgString);
const splashWrapper = document.querySelector("#d-splash");
const splashImage = splashWrapper && splashWrapper.querySelector(".preloader-image");
if (splashImage) {
splashImage.src = "data:image/svg+xml;base64,".concat(encodedSvg);
const connectStart = performance.timing.connectStart || 0;
const targetTime = connectStart + DELAY_TARGET;
let splashInterval;
let discourseReady;
const swapSplash = () => {
splashWrapper && splashWrapper.style.setProperty("--animation-state", "running");
svgElement && svgElement.style.setProperty("--animation-state", "running");
const newSvgString = new XMLSerializer().serializeToString(svgElement);
const newEncodedSvg = btoa(newSvgString);
splashImage.src = "data:image/svg+xml;base64,".concat(newEncodedSvg);
performance.mark("discourse-splash-visible");
clearSplashInterval();
};
const clearSplashInterval = () => {
clearInterval(splashInterval);
splashInterval = null;
};
(() => {
splashInterval = setInterval(() => {
if (discourseReady) {
clearSplashInterval();
}
if (Date.now() > targetTime) {
swapSplash();
}
}, POLLING_INTERVAL);
})();
document.addEventListener("discourse-ready", () => {
discourseReady = true;
splashWrapper && splashWrapper.remove();
performance.mark("discourse-splash-removed");
}, {
once: true
});
}
</script>
</section>