heartwood every commit a ring

Add footer plane effect

bc906910 by Isaac Bythewood · 3 years ago

modified blog/static_src/styles/base.scss
@@ -7,12 +7,16 @@ body {.logo {  content: "";  display: block;  background-image: linear-gradient(to right, rgb(14, 63, 244) 0px, rgb(132, 43, 255) 100%);  background-image: linear-gradient(    to right,    rgb(14, 63, 244) 0px,    rgb(132, 43, 255) 100%  );  width: 36px;  height: 36px;  margin-top: auto;  margin-bottom: auto;  transition: transform .2s ease-in-out;  transition: transform 0.2s ease-in-out;  &:hover {    transform: rotate(15deg) scale(1.1);
@@ -20,9 +24,56 @@ body {}footer {  padding: 6rem 0;  padding-top: 6rem;  .links {    padding-top: 6rem;  }}.footer-plane {  position: relative;  width: 100%;  height: 300px;  overflow: hidden;  z-index: 10;  perspective: 350px;  &-overlay {    width: 100%;    height: 100%;    position: absolute;    z-index: 11;    background: radial-gradient(      ellipse at 50% 50%,      rgba(10, 14, 15, 0) 0,      rgb(0, 0, 0) 80%    );  }  @keyframes footer-plane-keyframes {    0% {      transform: rotateX(45deg) translateY(-50%);    }    to {      transform: rotateX(45deg) translateY(0);    }  }  &-grid {    position: relative;    width: 100%;    height: 200%;    background-image: linear-gradient(        90deg,        hsla(0, 0%, 50%, 0.5) 1px,        transparent 0      ),      linear-gradient(180deg, hsla(0, 0%, 50%, 0.5) 1px, transparent 0);    background-size: 40px 30px;    background-repeat: repeat;    transform-origin: 100% 0 0;    animation: footer-plane-keyframes 17s linear infinite;  }}
modified blog/templates/base.html
@@ -142,6 +142,10 @@        </div>      </div>    </div>    <div class="footer-plane">      <div class="footer-plane-overlay"></div>      <div class="footer-plane-grid"></div>    </div>  </footer>  <div class="bg-dark py-3 d-print-none">