ascroll for item/edits

2021-10-10 16:06:43 +01:00 · 2021-10-10 16:06:43 +01:00 · 21db49fe48
commit 21db49fe48
parent bbae18bcf3
19 changed files with 348 additions and 75 deletions
--- a/app/templates/fallback.html
+++ b/app/templates/fallback.html
@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<style> 
+    @font-face { 
+      font-family: "wrong font"; 
+      src: url("https://files.pad.ma/ttf/wrongfont.woff") format("woff"); 
+    } 
+    h1 { 
+        font-family: "wrong font"; 
+        margin: auto; 
+        font-weight: normal; 
+        color: yellow; 
+        font-size: 66px; 
+        letter-spacing: 3px;
+        font-weight: bold;
+    } 
+    h2 {
+       color:  #6666ff;
+        font-family: "wrong font"; 
+    }
+    #box { 
+        width: 100%; 
+        height: 100vh; 
+        display: flex; 
+        text-align: center; 
+    } 
+    body { 
+        font-family: "wrong font"; 
+        overflow: hidden; 
+        background: black; 
+    } 
+
+#shadowBox {
+    background-color: rgb(0, 0, 0);
+    /* Fallback color */
+    background-color: rgba(0, 0, 0, 0.2);
+    /* Black w/opacity/see-through */
+    border: 3px solid;
+    margin: auto;
+}
+
+.rainbow_text_animated {
+    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    animation: rainbow_animation 6s ease-in-out infinite;
+    background-size: 400% 100%;
+}
+.reflection {
+  transform: scaley(-1);
+    opacity: 0.3;
+    margin-top: -8px;
+}
+
+@keyframes rainbow_animation {
+    0%,100% {
+        background-position: 0 0;
+    }
+
+    50% {
+        background-position: 100% 0;
+    }
+}
+
+
+</style> 
+ <title>phantas.ma</title>
+</head>
+<body>
+<div id="box"> 
+<div id="shadowBox">
+    <h1 class="rainbow rainbow_text_animated">Phantas.ma</h1>
+    <h2></h2>
+</div>
+</div>
+
+<script>
+path = document.location.pathname.slice(1)
+if (path) {
+  document.querySelector('h1').innerHTML = 'Phantas.ma/' + path
+  if (path == 'polis') {
+          setTimeout(() => {
+            document.querySelector('h2').innerHTML = 'Oct 30, 2021 – Mar 6, 2022'
+              })
+  }
+}
+</script>