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">