change menu

svinchy · May 25, 2023 · 9910a7c · 9910a7c
1 parent 36474ce
commit 9910a7c
Show file tree

Hide file tree

Showing 10 changed files with 99 additions and 128 deletions.
diff --git a/src/components/Banner.js b/src/components/Banner.js
@@ -19,6 +19,12 @@ const props = {
   boxSizing: 'border-box',
   padding: '- - D -',
   align: 'flex-end center',
+  style: {
+    backgroundRepeat: 'no-repeat',
+    animationDuration: '4s',
+    animatonTimingFunction: 'cubic-bezier(.17,.67,.65,.6)',
+
+  },
   ':before': {
     content: '""',
     boxSize: '100% 100%',
@@ -27,11 +33,6 @@ const props = {
     bottom: '0',
     pointerEvents: 'none'
   },
-  style: {
-    backgroundRepeat: 'no-repeat',
-    animationDuration: '4s',
-    animatonTimingFunction: 'cubic-bezier(.17,.67,.65,.6)'
-  },
   '@minTabletL': { style:{ backgroundAttachment: 'fixed !important' }},
 
   heading: {

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -10,7 +10,7 @@ import INSTAGRAM_PNG from '../assets/icons/social-instagram.png'
 import { BookingLink } from './BookingLink'
 
 const props = {
-  minWidth: '90%',
+  minWidth: '95%',
   '@maxMobileM': { minWidth: '95%' },
   position: 'fixed',
   bottom: '0',

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -43,7 +43,7 @@ const menu = {
 }
 
 const props = {
-  minWidth: '90%',
+  minWidth: '95%',
   // '@maxMobileM': { minWidth: '95%' },
   position: 'fixed',
   top: '0',
@@ -54,7 +54,7 @@ const props = {
   // borderBottom: '1px solid red',
   // border: 'solid, cream .5',
   // borderWidth: '0 0 .5px 0',
-  round: '0 0 A2 A2',
+  // round: '0 0 A2 A2',
   overflow: 'hidden',
   style: {
     mixBlendMode: 'difference',

diff --git a/src/components/Menu.js b/src/components/Menu.js
@@ -41,7 +41,7 @@ const props = {
       fontWeight: '400',
       textTransform: 'uppercase',
       whiteSpace: 'nowrap',
-      letterSpacing: '3px',
+      letterSpacing: '2.5px',
       overflow: 'hidden',
       '@minTabletS': {
         // opacity: '.7',

diff --git a/src/components/PopUpRoomTour.js b/src/components/PopUpRoomTour.js
@@ -275,5 +275,11 @@ export const PopUpRoomTour = {
     }
   },
 
-  logo: {}
+  logo: {
+    class: {
+      show: (element, state) => state.activePopUp
+        ? { opacity: '.8', transform: 'rotate3d(2, 1, 1, -0.1turn)' }
+        : { opacity: '0', transform: 'rotate3d(0)' }
+    }
+  }
 }
diff --git a/src/pages/Sololaki.js b/src/pages/Sololaki.js
@@ -102,6 +102,19 @@ const menu = {
 
 const header = {
   extend: Header,
+  class: {
+    show: (element, state) => state.activeResidenceMenu
+    ? {
+      paddingLeft: `${5 / 16}em`,
+      paddingRight: `${5 / 16}em`,
+      transition: 'padding-left 1s ease, padding-right .75s ease'
+    }
+    : {
+      paddingLeft: `0`,
+      paddingRight: `0`,
+      transition: 'padding-left 1s ease, padding-right .55s ease'
+    }
+  },
   ...[
     {},
     {},
@@ -151,7 +164,9 @@ export const Sololaki = {
       show: (element, state) => state.activeResidenceMenu
       ? {
         height: '90%',
-        transition: 'height .75s ease'
+        transition: 'height .75s ease',
+        backdropFilter: 'blur(30px)',
+        background: 'rgba(0, 0, 0, .15)'
       }
       : {
         height: '46px',
@@ -161,28 +176,28 @@ export const Sololaki = {
     }
   },
 
-  menuBackImage: {
-    props: {
-      backgroundImage: 'url(' + ORNAMENT_PNG + ')',
-      backgroundSize: 'cover',
-      backgroundPosition: 'center',
-      style: { backgroundAttachment: 'fixed'},
-      ':after': { background: 'naviGreen .9' }
-    },
-    class: {
-      show: (element, state) => state.activeResidenceMenu
-      ? {
-        height: '90%',
-        opacity: '1',
-        transition: 'height .75s ease, opacity .75s ease',
-      }
-      : {
-        height: '46px',
-        opacity: '0',
-        transition: 'height .55s ease, opacity .55s ease',
-      }
-    }
-  },
+  // menuBackImage: {
+  //   props: {
+  //     // backgroundImage: 'url(' + ORNAMENT_PNG + ')',
+  //     // backgroundSize: 'cover',
+  //     // backgroundPosition: 'center',
+  //     style: { backgroundAttachment: 'fixed'},
+  //     ':after': { background: 'naviGreen .9' }
+  //   },
+  //   class: {
+  //     show: (element, state) => state.activeResidenceMenu
+  //     ? {
+  //       height: '90%',
+  //       opacity: '1',
+  //       transition: 'height .75s ease, opacity .75s ease',
+  //     }
+  //     : {
+  //       height: '46px',
+  //       opacity: '0',
+  //       transition: 'height .55s ease, opacity .55s ease',
+  //     }
+  //   }
+  // },
 
   header,
   menu,

diff --git a/src/pages/Travel.js b/src/pages/Travel.js
@@ -120,6 +120,19 @@ const menu = {
 
 const header = {
   extend: Header,
+  class: {
+    show: (element, state) => state.activeTravelMenu
+    ? {
+      paddingLeft: `${10 / 16}em`,
+      paddingRight: `${10 / 16}em`,
+      transition: 'padding-left 1s ease, padding-right .75s ease'
+    }
+    : {
+      paddingLeft: `0`,
+      paddingRight: `0`,
+      transition: 'padding-left 1s ease, padding-right .55s ease'
+    }
+  },
   ...[
     {},
     {},
@@ -203,7 +216,9 @@ export const Travel = {
       show: (element, state) => state.activeTravelMenu
       ? {
         height: '90%',
-        transition: 'height .75s ease'
+        transition: 'height .75s ease',
+        backdropFilter: 'blur(30px)',
+        background: 'rgba(0, 0, 0, .15)'
       }
       : {
         height: '46px',
@@ -213,28 +228,29 @@ export const Travel = {
     }
   },
 
-  menuBackImage: {
-    props: {
-      backgroundImage: 'url(' + ORNAMENT_PNG + ')',
-      backgroundSize: 'cover',
-      backgroundPosition: 'center',
-      style: { backgroundAttachment: 'fixed'},
-      ':after': { background: 'naviBlue .9',}
-    },
-    class: {
-      show: (element, state) => state.activeTravelMenu
-      ? {
-        height: '90%',
-        opacity: '1',
-        transition: 'height .75s ease, opacity .75s ease',
-      }
-      : {
-        height: '46px',
-        opacity: '0',
-        transition: 'height .55s ease, opacity .55s ease',
-      }
-    }
-  },
+  // menuBackImage: {
+  //   props: {
+  //     // backgroundImage: 'url(' + ORNAMENT_PNG + ')',
+  //     // backgroundSize: 'cover',
+  //     // backgroundPosition: 'center',
+  //     style: { backgroundAttachment: 'fixed'},
+  //     ':after': { background: 'naviBlue .9',}
+  //   },
+  //   class: {
+  //     show: (element, state) => state.activeTravelMenu
+  //     ? {
+  //       height: '90%',
+  //       opacity: '1',
+  //       backdropFilter: 'blur(10px)',
+  //       transition: 'height .75s ease, opacity .75s ease',
+  //     }
+  //     : {
+  //       height: '46px',
+  //       opacity: '0',
+  //       transition: 'height .55s ease, opacity .55s ease',
+  //     }
+  //   }
+  // },
 
   state,
   header,

diff --git a/src/pages/props.js b/src/pages/props.js
@@ -35,15 +35,15 @@ export const properties = {
 
   menuBackground: {
     position: 'fixed',
-    width: '90%',
+    width: '95%',
     minHeight: '48px',
     top: '0',
     zIndex: '35',
     alignSelf: 'center',
     background: 'transparent',
     round: '0 0 A2 A2',
     border: 'solid, orange',
-    borderWidth: '0 0 1px 0',
+    borderWidth: '0 0 .5px 0',
     style: {
       animationName: opacity,
       animationDuration: '2s',
@@ -54,7 +54,7 @@ export const properties = {
   menuBackImage: {
     backgroundColor: 'orange',
     position: 'fixed',
-    boxSize: '48px 90%',
+    boxSize: '48px 95%',
     top: '0',
     zIndex: '30',
     alignSelf: 'center',

diff --git a/src/sections/travelSections/banner.js b/src/sections/travelSections/banner.js
@@ -9,7 +9,6 @@ import { positionOpacity, bannerBackground2 } from '../../animations'
 
 const props = {
   backgroundImage: 'url(' + LAKE_JPG + ')',
-  background: 'radial-gradient(rgba(0, 47, 57, 1), rgba(0, 47, 57, 1))',
   style: { animationName: positionOpacity },
   '@maxTabletM': {
     backgroundImage: 'url(' + LAKE_TABLET_JPG + ')',

diff --git a/src/sections/travelSections/gallery/gridGallery.js b/src/sections/travelSections/gallery/gridGallery.js
@@ -22,27 +22,8 @@ const props = {
   '@maxMobileL': {
     height: '60%',
     width: '100%',
-    overflow: 'hidden',
-    // border: '3px solid black',
-    // minHeight: '100%',
-    // flex: '1'
+    overflow: 'hidden'
   },
-  // '@maxTabletS': {
-  //   overflow: 'hidden',
-  //   fontSize: `${15 / 16}em`
-  // },
-
-  // ':before': {
-  //   content: '""',
-  //   boxSize: '100% D',
-  //   position: 'absolute',
-  //   top: '0',
-  //   left: '0',
-  //   zIndex: '10',
-  //   background: 'linear-gradient(to right, rgba(255, 249, 237, 1) 30%, rgba(255, 249, 237, 0) 70%)',
-  //   pointerEvents: 'none',
-  //   '@minTabletS': { display: 'none' }
-  // },
 
   title: {
     position: 'absolute',
@@ -71,22 +52,6 @@ const props = {
       align: 'center center',
       style: { boxShadow: 'rgba(0, 0, 0, 0.55) -20px 0px 20px 5px' }
     },
-    // '@maxTabletS': {
-    //   fontSize: 'E',
-    //   color: 'cream .75',
-    //   height: '100%',
-    //   left: 'initial',
-    //   top: '0',
-    //   right: '0',
-    //   padding: 'Z -',
-    //   transform: 'rotate(0)',
-    //   background: 'naviBlue',
-    //   align: 'center center',
-    //   style: {
-    //     boxShadow: 'rgba(0, 0, 0, 0.45) -20px 0px 30px 5px'
-    //   }
-    // },
-    // '@maxMobileM': { padding: 'B1 -' },
     ':before': { boxSize: 'C V' },
     ':after': { boxSize: 'C V' }
   },
@@ -99,27 +64,11 @@ const props = {
     gap: 'Y',
     '@maxMobileL': {
       display: 'flex',
-      // border: '3px solid red',
       height: '100%',
       gap: 'A',
       padding: '- D - -',
       style: {overflowX: 'auto', '::-webkit-scrollbar': { display: 'none' }}
     },
-    // '@maxTabletS': {
-    //   display: 'flex',
-    //   maxWidth: '100%',
-    //   padding: 'D1 E2 D1 C',
-    //   minHeight: 'E2',
-    //   gap: 'A',
-    //   boxSizing: 'content-box',
-    //   background: 'naviBlue',
-    //   style: {
-    //     overflow: 'auto',
-    //     '::-webkit-scrollbar': { display: 'none' }
-    //   }
-    // },
-    // '@maxMobileM': { padding: 'D E D B' },
-
     childProps: {
       position: 'relative',
       backgroundSize: 'cover',
@@ -132,17 +81,7 @@ const props = {
         minWidth: 'calc(100% - 68px)',
         round: '0 !important',
         border: 'none'
-        // minHeight: 'I',
-        // style: { borderRadius: '0 !important'}
       },
-      // '@maxMobileM': { minWidth: 'G1'},
-      // '@maxMobileS': { minWidth: 'G'},
-      // '@maxTabletS': {
-      //   minWidth: `${250 / 16}em`,
-      //   round: 'B !important',
-      //   border: 'solid, naviBlue',
-      //   borderWidth: '1px',
-      // },
       ':before': {
         content: '""',
         position: 'absolute',
@@ -172,14 +111,12 @@ const props = {
 
   scroll: {
     border: '3px solid red',
-    // '@minTabletS': { display: 'none' },
     position: 'absolute',
     bottom: '0',
     left: 'C',
     zIndex: '10',
     color: 'cream',
     opacity: '.75',
-    // '@maxMobileM': { left: 'A1' },
     lefts: { src: LEFT_ARROW },
     rights: { src: RIGHT_ARROW }
   }
@@ -333,8 +270,5 @@ export const gridGalleries = {
       }
     }
   ]
-  },
-  // scroll: {
-  //   extend: ScrollTitle
-  // }
+  }
 }