add animations

SvinchPeterson · May 31, 2023 · 2d910d1 · 2d910d1
1 parent 9910a7c
commit 2d910d1
Show file tree

Hide file tree

Showing 21 changed files with 404 additions and 562 deletions.
diff --git a/src/components/AmenitiesPopUp.js b/src/components/AmenitiesPopUp.js
diff --git a/src/components/BookingLink.js b/src/components/BookingLink.js
@@ -1,18 +1,19 @@
-import { Link } from 'smbls'
+import { Link, Flex } from 'smbls'
 
 const props = {
-  fontSize: `${11.5 / 16}em`,
   color: 'cream',
   textTransform: 'uppercase',
   target: '_blank',
   round: 'B',
-  padding: 'Z B1',
-  height: 'fit-content',
-  style: { border: '.5px solid rgba(255, 249, 237, .5)'}
+  padding: 'Y1 B',
+  // boxSize: 'B2 D2',
+  align: 'center center',
+  style: { border: '1px solid rgba(255, 249, 237, .5)' },
+  span: { fontSize: `${11 / 16}em` }
 }
 
 export const BookingLink = {
-  extend: Link,
+  extend: [Link, Flex],
   props,
   span: {text: 'book' }
 }
diff --git a/src/components/Description.js b/src/components/Description.js
@@ -9,7 +9,7 @@ const props = {
   gap: 'Y',
   letterSpacing: '.3px',
   color: 'cream .75',
-  style: { span: { fontWeight: '700', color: 'rgba(255, 249, 237, 1)' } }
+  style: { span: { color: 'rgba(255, 249, 237, 1)', fontWeight: '700' } }
 }
 
 export const Description = {

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -13,11 +13,12 @@ const props = {
   minWidth: '95%',
   '@maxMobileM': { minWidth: '95%' },
   position: 'fixed',
-  bottom: '0',
+  bottom: 'Z',
+  padding: '- Z',
   zIndex: '50',
-  padding: '- - Z -',
+  height: 'C',
   alignSelf: 'center',
-  justifyContent: 'space-between',
+  align: 'center space-between',
   overflow: 'hidden',
   style: {
     mixBlendMode: 'difference',
@@ -27,12 +28,16 @@ const props = {
   },
 
   socialLinks: {
+    width: 'fit-content',
     flexAlign: 'center center',
-    gap: 'Z',
+    gap: 'A',
     style: { zIndex: '60' },
     childProps: {
       target: '_blank',
-      padding: 'Y2',
+      boxSize: 'B2 B2',
+      boxSizing: 'content-box',
+      align: 'center center',
+      round: '100%',
       '@minTabletL': {
         opacity: '.85',
         ':hover': { opacity: '1', transform: 'scale(1.03)' },
@@ -43,6 +48,7 @@ const props = {
   },
 
   book: {
+    zIndex: '4',
     '@minTabletL': {
       opacity: '.85',
       ':hover': { opacity: '1' },
@@ -51,6 +57,7 @@ const props = {
     },
     span: {
       display: 'block',
+      // opacity: '0',
       '@minTabletL': {transition:' transform .15s ease-in-out'}
     },
     href: 'https://www.airbnb.com/users/404104381/listings?fbclid=IwAR1M3Rx_GD2eAEA7nzUFqkAo6Ukr4Bkvjb4FKIragquUW54fukDFixV0gHE'

diff --git a/src/components/Gallery.js b/src/components/Gallery.js
@@ -1,7 +1,6 @@
 'use strict'
 
 const props = {
-  // width: 'H1',
   height: 'G2',
   position: 'relative',
   overflow: 'hidden',

diff --git a/src/components/GalleryContainer.js b/src/components/GalleryContainer.js
@@ -39,11 +39,11 @@ const props = {
     width: '70%',
     '@maxTabletO': { minWidth: '100%' },
     book: {
-      padding: 'Z2 B2',
+      padding: 'Z B',
       round: 'D',
       background: 'transparent',
       border: 'solid, cream .35',
-      borderWidth: '.75px',
+      borderWidth: '.55px',
       color: 'cream',
       textTransform: 'uppercase',
       fontWeight: '700',

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -30,43 +30,50 @@ const logo = {
 
 const menu = {
   extend: Button,
-  menu: { text: 'menu' },
+  menu: {
+    text: 'menu',
+    on: { click: (event, element, state) => { state.update({ activeMenu: true }) } },
+    class: {
+      show: (element, state) => state.activeMenu
+      ? { bottom: `${-40 / 10}em`, transform: 'scale(.9)' }
+      : { bottom: `3.5px`, transform: 'scale(1)' }
+    }
+  },
 
   close: {
     extend: Flex,
     text: 'close',
     icon: {
       extend: Img,
       props: { src: CLOSE_PNG }
+    },
+
+    on: { click: (event, element, state) => { state.update({ activeMenu: false })}},
+    class: {
+      show: (element, state) => state.activeMenu
+      ? { bottom: `${3.5 / 10}em`, transform: 'scale(1)' }
+      : { bottom: `${-40 / 10}em`, transform: 'scale(.9)' }
     }
   }
 }
 
 const props = {
   minWidth: '95%',
-  // '@maxMobileM': { minWidth: '95%' },
+  align: 'flex-end space-between',
+  height: '50px',
   position: 'fixed',
   top: '0',
   alignSelf: 'center',
-  alignItems: 'flex-end',
   zIndex: '50',
-  padding: 'Z - - -',
-  // borderBottom: '1px solid red',
-  // border: 'solid, cream .5',
-  // borderWidth: '0 0 .5px 0',
-  // round: '0 0 A2 A2',
   overflow: 'hidden',
   style: {
     mixBlendMode: 'difference',
     animationName: opacity,
     animationDuration: '2s',
-    animationTimingFunction: 'ease-in-out',
-    // backdropFilter: 'blur(10px)'
-    // backdropFilter: 'opacity(1)'
+    animationTimingFunction: 'ease-in-out'
   },
 
   childProps: {
-    flex: '1',
     flow: 'column',
     childProps: {
       '@minTabletL': {
@@ -79,18 +86,19 @@ const props = {
     back: {
       fontSize: `${10 / 16}em`,
       alignSelf: 'flex-start',
-      padding: 'Z2 B',
+      padding: 'A2 B',
       icon: { boxSize: ' B1' }
     },
 
     logo: {
       alignSelf: 'center',
-      padding: 'Y 0',
+      padding: '0',
+      margin: '- - Z -',
       image: { boxSize: `${24 / 16}em ` }
     },
 
     menu: {
-      minWidth: 'D',
+      minWidth: '',
       position: 'relative',
       alignSelf: 'flex-end',
       background: 'transparent',

diff --git a/src/components/List.js b/src/components/List.js
@@ -5,6 +5,7 @@ import { Flex } from 'smbls'
 const props = {
   boxSizing: 'border-box',
   flow: 'column',
+  '@maxTabletO': { gap: 'Y1' },
 
   title: {
     text: 'amenities',
@@ -13,7 +14,10 @@ const props = {
     color: 'cream',
     textAlign: 'flex-start',
     letterSpacing: `${5 / 11}em`,
-    textTransform: 'uppercase'
+    textTransform: 'uppercase',
+    '@maxTabletO': {
+      fontSize: 'Z'
+    }
   },
 
   list: {
@@ -30,6 +34,7 @@ const props = {
         align: 'center flex-start',
         color: 'cream .75',
         gap: 'Y2',
+        '@maxTabletO': { fontSize: `${14 / 13}em` },
         ':before': {
           content: '""',
           boxSize: 'X X',

diff --git a/src/components/Menu.js b/src/components/Menu.js
@@ -1,6 +1,6 @@
 'use strict'
 
-import { Flex } from 'smbls'
+import { Flex, Link } from 'smbls'
 
 import { Navbar } from './Navbar'
 
@@ -10,7 +10,6 @@ const props = {
   width: '90%',
   height: '46px',
   position: 'fixed',
-  // border: '2px solid red',
   top: `0`,
   round: '0 0 A2 A2',
   padding: '- - - -',
@@ -22,10 +21,8 @@ const props = {
   style: {
     mixBlendMode: 'difference'
   },
-  // '@mobileL': { display: 'none' },
 
   navBar: {
-    // display: 'none',
     overflow: 'hidden',
     gap: 'C',
     padding: 'Z2 - - -',
@@ -57,8 +54,63 @@ const props = {
 export const Menu = {
   extend: Flex,
   props,
+  class: {
+    show: (element, state) => state.activeMenu
+      ? { height: `90%`}
+      : { height: '46px' }
+  },
 
-  navBar: { extend: Navbar }
+  navBar: {
+    extend: Navbar,
+     class: {
+      show: (element, state) => state.activeMenu
+        ? {
+          '@media only screen and (min-width: 1025px)': {
+            width: `${700 / 16}em`,
+            transition: 'width .35s ease',
+            '> a': {
+              transform: 'scale(1)',
+              opacity: '.7',
+              transition: 'transform .75s ease, opacity .75s ease'
+            }
+          },
+          '@media only screen and (max-width: 1024px)': {
+            '> a': {
+              height: `${46 / 13}em`,
+              opacity: '1',
+              transition: 'height .75s ease, opacity .75s ease'
+            }
+          }
+        }
+        : {
+          '@media only screen and (min-width: 1025px)': {
+            width: `0`,
+            transition: 'width .35s ease',
+            '> a': {
+              transform: 'scale(1.3)',
+              opacity: '0',
+              transition: 'transform .75s ease, opacity .75s ease'
+            }
+          },
+          '@media only screen and (max-width: 1024px)': {
+            '> a': {
+              height: `0`,
+              opacity: '0',
+              transition: 'height .35s ease, opacity .35s ease'
+            }
+          }
+        }
+    },
+
+    childExtend: {
+      on: {
+        click: (event, element, state, ctx) => {
+          state.update({ activeMenu: false })
+          Link.on.click(event, element, state, ctx)
+        }
+      }
+    }
+  }
 }
 
 const mobileMenuProps = {
@@ -70,7 +122,6 @@ const mobileMenuProps = {
   align: 'center center',
   round: '0 0 G1 G1',
 
-  // '@mobileS': { top: 'C2' },
   style: {
     backdropFilter: 'blur(2px)',
     '@media only screen and (min-width: 769px)': { display: 'none' }