first init

resources/scss/structure/_general.scss

@@ -0,0 +1,130 @@
+//
+// _general.scss
+//
+
+.app-wrapper {
+     height: 100%;
+     margin: 0 auto;
+     position: relative;
+}
+
+// Main Content
+.page-content {
+     position: relative;
+     transition: all 0.3s ease-in-out;
+     min-height: calc(100vh - $topbar-height);
+     padding: calc($spacer * 1) calc($spacer * 0.5) $footer-height calc($spacer * 0.5);
+     margin-left: $sidebar-width;
+}
+
+
+// Animated Star
+$shooting-time: 3000ms;
+
+.animated-stars {
+     position: relative;
+     width: 100%;
+     height: 100%;
+     transform: rotateZ(45deg);
+}
+
+.shooting-star {
+     position: absolute;
+     left: 50%;
+     top: 50%;
+     height: 2px;
+     background: linear-gradient(-45deg, rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
+     border-radius: 999px;
+     filter: drop-shadow(0 0 6px rgba(105, 155, 255, 1));
+     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;
+          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 {
+          content: '';
+          position: absolute;
+          top: calc(50% - 1px);
+          right: 0;
+          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;
+          transform: translateX(50%) rotateZ(-45deg);
+     }
+
+     @for $i from 1 through 20 {
+          &:nth-child(#{$i}) {
+               $delay: random(9999) + 0ms;
+               top: calc(50% - #{random(400) - 200px});
+               left: calc(50% - #{random(300) + 0px});
+               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(300px);
+     }
+}
+
+@keyframes sky {
+     0% {
+          transform: rotate(45deg);
+     }
+
+     100% {
+          transform: rotate(45 + 360deg);
+     }
+}