Animate down arrow.

companyzero · Dec 14, 2022 · 0c0ff8e · 0c0ff8e
1 parent 05d95d8
commit 0c0ff8e
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 13 deletions.
diff --git a/src/assets/scss/_landing.scss b/src/assets/scss/_landing.scss
@@ -156,16 +156,6 @@ $landing-grad: linear-gradient(180deg, #05031A00 0%, #05031A00 60%, #05031AE3 85
             opacity: 0.8;
             transition: opacity 0.08s ease-in-out;
 
-            .down-arrow {
-                margin-top: 8px;
-                height: 69px;
-                width: 69px;
-                background-image: url("../images/white-down-arrow.svg");
-                background-size: contain;
-                background-repeat: no-repeat;
-                background-position: center center;
-            }
-
             &:hover,
             &:focus {
                 opacity: 1.0;

diff --git a/src/layouts/_default/list.html b/src/layouts/_default/list.html
@@ -41,8 +41,30 @@
                             <div>
                                 {{ T "landing_seemore" }}
                             </div>
-                            <div class="down-arrow">
-                            </div>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="70" height="80" viewBox="0 0 70 80">
+                                <defs>
+                                    <style>
+                                        svg {
+                                            overflow: hidden;
+                                        }
+                                        svg g {
+                                            transform: translateY(-10px);
+                                            transition: all 0.21s ease-out;
+                                        }
+                                        svg:hover g {
+                                            transform: translateY(0px);
+                                        }
+                                        .a, .b { fill:none; }
+                                        .a { stroke: #e4e3e6; }
+                                        .b { stroke: #e4e3e6; }
+                                    </style>
+                                </defs>
+                                <g transform="translate(0.354)">
+                                    <line class="a" x2="34.5" y2="34.5" transform="translate(34.5 78) rotate(-90)"/>
+                                    <line class="a" y1="34.5" x2="34.5" transform="translate(0 78) rotate(-90)"/>
+                                    <line class="b" y1="78" transform="translate(34.5)"/>
+                                </g>
+                            </svg>
                         </a>
                     </div>
 

diff --git a/src/static/images/white-down-arrow.svg b/src/static/images/white-down-arrow.svg