Attempt #1

team-afj · Jun 7, 2021 · f162006 · f162006
1 parent 9470274
commit f162006
Show file tree

Hide file tree

Showing 5 changed files with 233 additions and 2 deletions.
diff --git a/user/themes/afj/dist/css/theme.css b/user/themes/afj/dist/css/theme.css
diff --git a/user/themes/afj/dist/css/theme.min.css b/user/themes/afj/dist/css/theme.min.css
diff --git a/user/themes/afj/scss/theme.scss b/user/themes/afj/scss/theme.scss
@@ -23,3 +23,122 @@
 @import 'components/calendar';
 @import 'components/grid';
 @import 'utility';
+
+
+.night {
+    position: absolute;
+    width: 100%;
+    height: 300%;
+    transform: rotateZ(45deg);
+    // animation: sky 200000ms linear infinite;
+  }
+
+$shooting-time: 4000ms;
+.shooting-star {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    // width: 100px;
+    height: 2px;
+    background: linear-gradient(-45deg, rgb(219, 228, 247), rgba(0, 0, 255, 0));
+    border-radius: 999px;
+    filter: drop-shadow(0 0 6px rgb(214, 223, 241));
+    animation:
+      tail $shooting-time ease-in-out infinite,
+      shooting $shooting-time ease-in-out infinite;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: calc(50% - 1px);
+      right: 0;
+      // width: 30px;
+      height: 2px;
+      background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
+      transform: translateX(50%) rotateZ(45deg);
+      border-radius: 100%;
+      animation: shining $shooting-time ease-in-out infinite;
+    }
+
+    &::after {
+      // CodePen Error
+      // @extend .shooting-star::before;
+
+      content: '';
+      position: absolute;
+      top: calc(50% - 1px);
+      right: 0;
+      // width: 30px;
+      height: 2px;
+      background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgb(208, 220, 247), rgba(0, 0, 255, 0));
+      transform: translateX(50%) rotateZ(45deg);
+      border-radius: 100%;
+      animation: shining $shooting-time ease-in-out infinite;
+      transform: translateX(50%) rotateZ(-45deg);
+    }
+
+    @for $i from 1 through 20 {
+      &:nth-child(#{$i}) {
+        $delay: random(9999) + 0ms;
+        top: percentage(random(100)/100);
+        left: percentage((random(60) + 20) / 100);
+        animation-delay: $delay;
+        // opacity: random(50) / 100 + 0.5;
+
+        &::before,
+        &::after {
+          animation-delay: $delay;
+        }
+      }
+    }
+  }
+
+  @keyframes tail {
+    0% {
+      width: 0;
+    }
+
+    30% {
+      width: 100px;
+    }
+
+    100% {
+      width: 0;
+    }
+  }
+
+  @keyframes shining {
+    0% {
+      width: 0;
+    }
+
+    50% {
+      width: 30px;
+    }
+
+    100% {
+      width: 0;
+    }
+  }
+
+  @keyframes shooting {
+    0% {
+      transform: translateX(0);
+    }
+
+    100% {
+      transform: translateX(600px);
+    }
+  }
+
+  @keyframes sky {
+    0% {
+      transform: rotate(45deg);
+    }
+
+    100% {
+      transform: rotate(45 + 360deg);
+    }
+  }
+
+
diff --git a/user/themes/afj/scss/theme/_onepage.scss b/user/themes/afj/scss/theme/_onepage.scss
@@ -1,4 +1,5 @@
 .modular-hero {
+  overflow: hidden;
   #to-start {
     bottom: 3.5rem;
   }

diff --git a/user/themes/afj/templates/partials/hero.html.twig b/user/themes/afj/templates/partials/hero.html.twig
@@ -9,6 +9,13 @@
             padding-bottom:4rem;
         {% endif %}"
     >
+        <div class="night">
+        <div class=" shooting-star"></div>
+        <div class=" shooting-star"></div>
+        <div class=" shooting-star"></div>
+        <div class=" shooting-star"></div>
+        <div class=" shooting-star"></div>
+        </div>
     <div class="image-overlay"></div>
     <section class="container columns {{ grid_size }}"
         style="