iceholidays-frontend 0.4.0 → 0.6.0

data/app/assets/stylesheets/iceholidays/frontend/common.scss

@@ -2,11 +2,11 @@
 
 #headline{
   //can change to container width
-  --side-padding: 10%;
+  --side-padding: 20px;
 
   &_banner{
     // width: 1440px;
-    height: 352px;
+    height: 180px;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
@@ -26,16 +26,15 @@
       // width: 314px;
       // height: 68px;
       margin: 0;
-
       font-family: $font-default;
-      font-size: 45px;
       font-weight: 400;
-      line-height: 67.5px;
-      letter-spacing: 0.05em;
+      font-size: 18px;
+      line-height: 27px;
+      letter-spacing: 5%;
       text-align: left;
       text-underline-position: from-font;
       text-decoration-skip-ink: none;
-      color: #5B4713;
+      color: $supportive-color;
       text-transform: uppercase;
     }
 
@@ -70,7 +69,8 @@
   }
 
   .ant-breadcrumb{
-    padding: 10px var(--side-padding);
+    padding: 10px var(--side-padding) 0;
+    font-size: 12px;
   }
 }
 
@@ -120,76 +120,76 @@
 
 .postcards{
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(2, 1fr);
+  grid-template-columns: 1fr;
+  // grid-template-rows: repeat(2, 1fr);
   gap: 20px;
-}
 
-.postcard{
-  border-radius: 20px;
-  overflow: hidden;
-  width: 100%;
-
-  img{
+  .postcard{
+    border-radius: 20px;
+    overflow: hidden;
     width: 100%;
-    height: 230.5px;
-    gap: 0px;
-    opacity: 0px;
-    border-top-left-radius: 20px;
-    border-top-right-radius: 20px;
-    display: block;
-    object-fit: cover;
-    object-position: top center;
-    transition: transform 0.4s ease;
-    transform-origin: 50% 100%;
-
-    &:hover{
-      transform: scale(1.2);
+  
+    img{
       width: 100%;
-    }
-  }
-
-  .details{
-    padding: 12px 20px 12px 20px;
-    gap: 0px;
-    border: 1px 0px 0px 0px;
-    justify-content: space-between;
-    align-items: center;
-    opacity: 0px;
-    background: $primary-color;
-    display: flex;;
-    border-bottom-left-radius: 20px;
-    border-bottom-right-radius: 20px;
-  }
+      height: 140px;
+      gap: 0px;
+      opacity: 0px;
+      border-top-left-radius: 20px;
+      border-top-right-radius: 20px;
+      display: block;
+      object-fit: cover;
+      object-position: top center;
+      transition: transform 0.4s ease;
+      transform-origin: 50% 100%;
   
-  .name{
-    font-family: $font-default;
-    font-size: 20px;
-    font-weight: 400;
-    line-height: 30px;
-    letter-spacing: 0.05em;
-    text-align: left;
-    text-underline-position: from-font;
-    text-decoration-skip-ink: none;
-    text-transform: uppercase;
-    color: #FFFFFF;
+      &:hover{
+        transform: scale(1.2);
+        width: 100%;
+      }
     }
   
-  .tour-count{
-    font-family: $font-default;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 21px;
-    letter-spacing: 0.05em;
-    text-align: right;
-    text-underline-position: from-font;
-    text-decoration-skip-ink: none;
-    color: #FFFFFF;
-    cursor: pointer;
-  
-  
-    svg{
-      vertical-align: middle;
+    .details{
+      padding: 12px 20px 12px 20px;
+      gap: 0px;
+      border: 1px 0px 0px 0px;
+      justify-content: space-between;
+      align-items: center;
+      opacity: 0px;
+      background: $primary-color;
+      display: flex;;
+      border-bottom-left-radius: 20px;
+      border-bottom-right-radius: 20px;
+    }
+    
+    .name{
+      font-family: $font-default;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+      letter-spacing: 0.05em;
+      text-align: left;
+      text-underline-position: from-font;
+      text-decoration-skip-ink: none;
+      text-transform: uppercase;
+      color: #FFFFFF;
+    }
+    
+    .tour-count{
+      font-family: $font-default;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 21px;
+      letter-spacing: 0.05em;
+      text-align: right;
+      text-underline-position: from-font;
+      text-decoration-skip-ink: none;
+      color: #FFFFFF;
+      cursor: pointer;
+    
+    
+      svg{
+        vertical-align: middle;
+      }
     }
   }
 }
@@ -199,10 +199,11 @@
   margin-top: 100px;
   
   &_header{
-    height: 138px;
+    height: 150px;
     text-align: center;
     position: relative;
-    background-image: url('/iceholidays-assets/images/Layer_1.png');
+    background-image: url('/iceholidays-assets/images/TSTRibbon.png');    
+    background-repeat: no-repeat;
 
     h1{
       font-family: $font-default;
@@ -212,7 +213,7 @@
       letter-spacing: 0.06em;
       text-underline-position: from-font;
       text-decoration-skip-ink: none;
-      color: #5B4713;
+      color: $supportive-color;
       text-transform: uppercase;
     
       position: absolute;
@@ -230,4 +231,88 @@
   white-space: -pre-wrap;      /* Opera 4-6 */
   white-space: -o-pre-wrap;    /* Opera 7 */
   word-wrap: break-word;       /* Internet Explorer 5.5+ */
+}
+
+.location-dropdown{
+  margin: 10px;
+
+  .location-filter{
+    height: 46px;
+    width: 100%;
+    
+    .ant-select-selector{
+      border-radius: 30px;
+      border: none;
+      background: linear-gradient(360deg, $primary-color 5.04%, #F9E298 99.13%);
+    }
+
+    .ant-select-selection-wrap{
+      padding: 3px 16px;
+    }
+
+    .ant-select-selection-item{
+      font-family: $font-default;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+      letter-spacing: 5%;
+      text-transform: uppercase;
+      color: $supportive-color;
+    }
+
+    .ant-select-arrow{
+      inset-inline-end: 20px;
+      color: $supportive-color;
+    }
+    
+  }
+
+}
+
+.location-filter_option{
+  font-family: Poppins;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 32px;
+  letter-spacing: 5%;
+  text-transform: uppercase;
+}
+
+@media only screen and (min-width: 769px) {
+  #headline{
+    --side-padding: 10%;
+
+    &_banner{
+      height: 352px;
+    }
+
+    &_header{
+
+      h1{
+        font-size: 45px;
+        font-weight: 400;
+        line-height: 67.5px;
+        letter-spacing: 0.05em;
+      }
+    }
+
+    .ant-breadcrumb{
+      font-size: 14px;
+    }
+  }
+  .postcards{
+    grid-template-columns: repeat(2, 1fr);
+
+    .postcard{
+      img{
+        height: 230px;
+      }
+
+      .name{
+        font-size: 20px;
+        font-weight: 400;
+        line-height: 30px;
+      }
+    }
+  }
 }

data/app/assets/stylesheets/iceholidays/frontend/layout.scss

@@ -1,127 +1,104 @@
 
 #main-header{
+  --button-height: 35px;
   position: relative;
-  background: linear-gradient(241.37deg, #D1AC6E -108.33%, #D1AC6E -14.72%, $secondary-color -2.73%, #B68B31 108.18%);
-  width: 100%;
   height: 50px;
-  display: flex;
+  width: 100%;
+  background: linear-gradient(241.37deg, #D1AC6E -108.33%, #D1AC6E -14.72%, $secondary-color -2.73%, #B68B31 108.18%);
+  padding-inline-end: 25px;
+  display: inline-flex;
+  justify-content: space-between;
   align-items: center;
-  justify-content: space-around;
 
-  &>div{
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
+  #nav-buttons{
+    display: inline-flex;
+    gap: 7px;
   }
-  
-  .nav-menu{
-    /* position: absolute; */
-    display: grid;
-    grid-template-columns: auto auto auto auto;
 
-    a{
-      color: white;
-      text-transform: uppercase;
-      font-family: $font-default;
-      font-size: 16px;
-      font-weight: 500;
-      line-height: 24px;
-      letter-spacing: 0.05em;
-      text-align: left;
-      text-underline-position: from-font;
-      text-decoration-skip-ink: none;
-      text-decoration: none;
-
-      &.active{
-        color: #5B4713;
-      }
-    
-    }
+  #toggle-menu{
+    height: var(--button-height);
+    background: linear-gradient(287.63deg, #D1AC6E -19.9%, #D1AC6E 10.87%, #F9E298 26.63%, #B68B31 93.91%);
+    border: 1px solid;
+    border-image-source: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(42, 42, 42, 0.5) 100%);
+    box-shadow: 0px 4px 4px 0px #F9F6F31A inset, 0px 1px 2px 0px #AA853E80;
+    width: 35px;
+    height: 35px;
+    padding: 6px 5px 6px 5px;
+    border-radius: 23px;
   }
   
-  #left-menu{
-    top: 13px;
-    left: 183px;
-    gap: 35px;
-    opacity: 0px;
+  .nav-menu{
+    display: none;
   }
-  
+    
   .logo{
-    width: 304px;
-    height: 66px;
-    left: 568px;
-    gap: 0px;
-    opacity: 0px;
-    z-index: 2;
-  }
-  
-  #right-menu{
-    top: 13px;
-    left: 877px;
-    gap: 35px;
-    opacity: 0px;
+    z-index: 2;    
+    position: relative;
+
+    &.logo_mobile{
+      padding-top: 25px;
+    }
   }
   
   #get-brochure{
-    position: absolute;
     width: 152px;
-    /* height: 35px; */
-    top: 8px;
-    right: 20px;
-    
-    button{
-      padding: 7px 8px 7px 8px;
-      border-radius: 20px;
-      border: 1px solid;
-      background: linear-gradient(287.63deg, #D1AC6E -19.9%, #D1AC6E 10.87%, #F9E298 26.63%, #B68B31 93.91%);
-      border-image-source: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(42, 42, 42, 0.5) 100%);
-      box-shadow: 0px 3px 10px 0px #AA853E80;
-      box-shadow: 0px 4px 4px 0px #F9F6F31A inset;
-      text-align: center;
-      text-transform: uppercase;
-      font-family: $font-default;
-      font-size: 14px;
-      font-weight: 500;
-      line-height: 21px;
-      letter-spacing: 0.05em;
-      text-align: left;
-      text-underline-position: from-font;
-      text-decoration-skip-ink: none;
-    }
+    height: var(--button-height);
+    padding: 7px 8px 7px 8px;
+    border-radius: 20px;
+    border: 1px solid;
+    background: linear-gradient(287.63deg, $primary-color -19.9%, $primary-color 10.87%, #F9E298 26.63%, #B68B31 93.91%);
+    border-image-source: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(42, 42, 42, 0.5) 100%);
+    box-shadow: 0px 3px 10px 0px #AA853E80, 0px 4px 4px 0px #F9F6F31A inset;
+    text-align: center;
+    text-transform: uppercase;
+    font-family: $font-default;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 21px;
+    letter-spacing: 0.05em;
+    text-align: left;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
   }
 }
 
 #main-footer{
-  // width: 1440px;
-  height: 321px;
-  gap: 0px;
-  opacity: 0px;
-  background: linear-gradient(270deg, #AA853E 0%, $secondary-color 33.5%, #FFF3A6 50%, $secondary-color 65.5%, #E1B65B 100%),
-  linear-gradient(4.08deg, rgba(170, 133, 62, 0.5) -2.54%, rgba(249, 225, 151, 0.5) 7.02%);
+  background: url('/iceholidays-assets/images/footer-bg_mobile.png') no-repeat;
+  padding: 50px 30px;
   position: relative;
 
   &_links{
-    margin: auto;
-    height: 196px;
-    width: 70%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 38px 0;
-    position: relative;
 
     &> div{
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
+      border-bottom: 1px solid #DFB16380;
+      padding: 10px 0;
+    }
+
+    .ant-space{
+      width: 100%;
+    }
+    
+    .link-group-title{
+      font-family: $font-default;
+      font-family: Poppins;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 21px;
+      letter-spacing: 0.05em;
+      text-align: left;
+      text-underline-position: from-font;
+      text-decoration-skip-ink: none;
+      
+      color: $supportive-color;
+      // height: 37px;
+      grid-row-start: 2 span;
     }
 
     a{
       font-family: $font-default;
-      font-size: 18px;
+      font-size: 16px;
       font-weight: 500;
-      line-height: 36px;
+      line-height: 32px;
       letter-spacing: 0.05em;
       text-align: left;
       text-underline-position: from-font;
@@ -133,45 +110,21 @@
     div:has(> a+a){
       display: grid;
       grid-template-columns: repeat(2, 1fr);
-      grid-template-rows: repeat(4, 1fr);
+      grid-template-rows: 1fr;
       column-gap: 34px;
     }
-    
-    .link-group-title{
-      font-family: $font-default;
-      font-size: 15px;
-      font-weight: 400;
-      line-height: 22.5px;
-      letter-spacing: 0.05em;
-      text-align: left;
-      text-underline-position: from-font;
-      text-decoration-skip-ink: none;
-      color: #5B4713;
-      height: 37px;
-      grid-row-start: 2 span;
-    }
 
-    hr{
-      width: 100%;
-      height: 0px;
-      top: 258.34px;
-      left: 0;
-      gap: 0px;
-      border: 1px 0px 0px 0px;
-      opacity: 0px;
-      border: 1px solid #DFB16380;
-      position: absolute;
+    .contact-info{
+      .link-group-title{
+        text-align: center;
+      }
     }
   }
 
 
   #copyright{
-    height: 17px;
-    top: 282.28px;
-    left: 592px;
-    gap: 0px;
-    opacity: 0px;
-    position: absolute;
+    text-align: center;
+    padding: 20px 0 0;
   
       span{
         font-family: $font-default;
@@ -186,3 +139,143 @@
       }
   }
 }
+
+
+#nav-drawer.ant-drawer-content{
+  background: #F7F4EB;
+
+  .ant-drawer-header{
+    border: none;
+  }
+
+  .ant-drawer-header-title{
+    justify-content: flex-end;
+  }
+
+  .ant-drawer-close{
+    width: 35px;
+    height: 35px;
+    padding: 6px 5px 6px 5px;
+    border-radius: 23px;
+    background: linear-gradient(287.63deg, #D1AC6E -19.9%, #D1AC6E 10.87%, #F9E298 26.63%, #B68B31 93.91%);
+    border: 1px solid;
+    border-image-source: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(42, 42, 42, 0.5) 100%);
+    box-shadow: 0px 4px 4px 0px #F9F6F31A inset, 0px 1px 2px 0px #AA853E80;
+  }
+
+  .ant-drawer-body{
+    padding: 0 30px;
+
+    .ant-menu-light{
+      background-color: transparent;
+      border: none;
+
+      .ant-menu-item{
+        border-bottom: 1px solid #AA853E24;
+        padding: 16px 0;
+        height: 56px;
+      }
+
+      .ant-menu-item:has(.logo_desktop){
+        display: none;
+      }
+    }
+
+    .nav-menu_mobile{
+      a{
+        font-family: $font-default;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 24px;
+        letter-spacing: 0.05em;
+        text-align: left;
+        text-underline-position: from-font;
+        text-decoration-skip-ink: none;
+        text-transform: uppercase;
+        color: $supportive-color;
+      }
+    }
+  }
+
+}
+
+@media only screen and (min-width: 769px) {
+  #main-header{
+    #toggle-menu{
+      display: none;
+    }
+
+    .nav-menu{
+      display: flex;
+      flex: 1;
+      background: transparent;
+      height: 100%;
+      justify-content: center;
+      margin-inline-start: 80px;
+  
+      a{
+        color: white;
+        text-transform: uppercase;
+        font-family: $font-default;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 24px;
+        letter-spacing: 0.05em;
+        text-align: left;
+        text-underline-position: from-font;
+        text-decoration-skip-ink: none;
+        text-decoration: none;
+      }
+  
+      .ant-menu-item-selected{
+        a{
+          color: $supportive-color;
+        }
+      }
+  
+      .ant-menu-item:has(.logo){
+        // margin: 0 -35px;
+        padding: 0;
+      }
+    }
+    
+    .logo{
+      width: 304px;
+      // height: 66px;
+
+      &.logo_mobile{
+        display: none;
+      }
+
+      &.logo_desktop{
+        display: block;
+      }
+    }
+  }
+
+  #main-footer{
+    height: 321px;
+    background: linear-gradient(270deg, #AA853E 0%, $secondary-color 33.5%, #FFF3A6 50%, $secondary-color 65.5%, #E1B65B 100%),
+    linear-gradient(4.08deg, rgba(170, 133, 62, 0.5) -2.54%, rgba(249, 225, 151, 0.5) 7.02%);
+
+    &_links {
+      width: 80%;
+      margin: auto !important;
+
+      &> div{
+        padding: 10px 0 40px;
+      }
+    }
+
+    .footer-menu{
+      padding-top: 40px;
+    }
+
+    .contact-info{
+      .ant-flex{
+        gap: 10px !important;
+        align-items: flex-start;
+      }
+    }
+  }
+}