Update ground level components

kauer3 · Jan 20, 2024 · a7d5221 · a7d5221
1 parent 73e4246
commit a7d5221
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git a/components/fire.tsx b/components/fire.tsx
@@ -48,13 +48,15 @@ const smoke = keyframes`
 `;
 
 const FireWrapper = styled.div`
+  position: absolute;
+  align-self: center;
+  bottom: 0;
   display: flex;
   justify-content: center;
   align-items: flex-end;
   z-index: 20;
   margin-top: auto;
   width: fit-content;
-  align-self: center;
   /* translate: 15em; */
   filter: drop-shadow(0 -25px 100px orangered);
   transition: .2s ease-out;

diff --git a/components/house.tsx b/components/house.tsx
@@ -1,14 +1,16 @@
 import styled, { keyframes } from 'styled-components'
 
 const HouseContainer = styled.div`
-  /* position: absolute; */
+  position: absolute;
+  align-self: center;
+  bottom: 0;
+  translate: 17em 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   z-index: 20;
   margin-top: auto;
-  bottom: 0;
   /* right: 0; */
   /* translate: -100%; */
 `

diff --git a/components/tree.tsx b/components/tree.tsx
@@ -40,14 +40,14 @@ const TreeContainer = styled.div<MountainShadowProps>`
 `
 
 const Leafs = styled.div<LeafProps>`
-transform: translate(0, 2em);
-height: ${props => props.height}em;
-width: ${props => props.width}em;
-clip-path: polygon(50% 0, 37% 16%, 43% 15%, 28% 36%, 38% 34%, 16% 66%, 26% 63%, 0 100%, 50% 95%, 100% 100%, 74% 63%, 84% 66%, 62% 34%, 72% 36%, 57% 15%, 63% 16%);
-background-color: #17441b;
-opacity: 1;
-background-image: linear-gradient(45deg, #103200 50%, #17441b 50%);
-background-size: 9px 9px;
+  transform: translate(0, 2em);
+  height: ${props => props.height}em;
+  width: ${props => props.width}em;
+  clip-path: polygon(50% 0, 37% 16%, 43% 15%, 28% 36%, 38% 34%, 16% 66%, 26% 63%, 0 100%, 50% 95%, 100% 100%, 74% 63%, 84% 66%, 62% 34%, 72% 36%, 57% 15%, 63% 16%);
+  background-color: #17441b;
+  opacity: 1;
+  background-image: linear-gradient(45deg, #103200 50%, #17441b 50%);
+  background-size: 9px 9px;
 `
 
 const Tree: React.FC<MountainProps> = ({ order }) => {