mortcodesweb
diff --git a/Diff for: ‎images/bg.png
86.3 KB b/Diff for: ‎images/bg.png
86.3 KB
diff --git a/Diff for: ‎images/bg_ground.png
31.4 KB b/Diff for: ‎images/bg_ground.png
31.4 KB
diff --git a/Diff for: ‎images/fg.png
93.6 KB b/Diff for: ‎images/fg.png
93.6 KB
diff --git a/Diff for: ‎index.html
+10 b/Diff for: ‎index.html
+10
diff --git a/Diff for: ‎style/index.css
+78 b/Diff for: ‎style/index.css
+78
@@ -35,6 +35,16 @@
 </head>
 
 <body>
+  <div class="bg">
+    <div class="bg-lit-container">
+      <div class="bg-lit"></div>
+    </div>
+    <div class="bg-dimmed-container">
+      <div class="bg-dimmed"></div>
+    </div>
+    <div class="clouds"></div>
+  </div>
+
   <main role="app">
     <section id="web" class="visible" role="panel">
       <header class="compact">
 
@@ -64,3 +64,81 @@ html, body {
   font-weight: normal;
   font-size: 1.6rem;
 }
+
+.bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url(/images/bg.png) no-repeat center bottom 25% / cover;
+}
+
+.bg-dimmed-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  filter: blur(20px);
+  mask: url(/images/bg_ground.png) no-repeat center bottom 25% / cover;
+}
+
+.bg-dimmed {
+  position: fixed;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url(/images/bg.png) no-repeat center bottom 25% / cover fixed;
+  animation: clouds-mask 15s linear infinite;
+  /* filter: brightness(75%); */
+  mask: url(/images/fg.png) center / cover;
+}
+
+.bg-lit-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  mask: url(/images/bg_ground.png) no-repeat center bottom 25% / cover;
+}
+
+.bg-lit {
+  position: fixed;
+  top: 40%;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url(/images/bg.png) no-repeat center bottom 25% / cover fixed;
+  filter: brightness(150%) sepia(0.5);
+}
+
+@keyframes clouds-mask {
+  from {
+    mask-position: 0;
+  }
+  to {
+    mask-position: 100vw;
+  }
+}
+
+.clouds {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url(/images/fg.png) center top 50% / cover;
+  animation: clouds 15s linear infinite;
+}
+
+@keyframes clouds {
+  from {
+    background-position-x: 0;
+  }
+  to {
+    background-position-x: 100vw;
+  }
+}