first commit

wp-content/themes/ostal_WP/sass/04-layout/_footer.scss

@@ -0,0 +1,73 @@
+@use "../01-base/typography" as *;
+@use "../01-base/breakpoints" as *;
+@use "../01-base/colors" as *;
+@use "../02-abstracts/mixins" as *;
+
+footer{
+    .background-image{
+        position: relative;
+        height: 232px;
+        background-attachment: fixed;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        .bg-filter{
+            @include bg-filter;
+            opacity: .4;
+        }
+    }
+    .footer-row{
+        padding: 70px 0;
+        .logo{
+            width: 232px;
+            height: 50px;
+            margin-bottom: 50px;
+        }
+        .footer-grid{
+            display: grid;
+            gap: 20px;
+            @include responsive(tablet){
+                grid-template-columns: repeat(2, 1fr);
+            }
+            @include responsive(desktop){
+                grid-template-columns: repeat(4, 1fr);
+            }
+            .footer-menu{
+                list-style: none;
+                padding-left: 0;
+                .menu-item{
+                    a{
+                        font-size: 1.8rem;
+                        line-height: 150%;
+                    }
+                }
+            }
+        }
+    }
+    .footer-copyright{
+        background-color: $white-color;
+        padding: 22px 0;
+        &-grid{
+            display: flex;
+            justify-content: space-between;
+            font-size: 1.2rem;
+            list-style: none;
+            color: $dark-color;
+            @include responsive(tablet){
+                font-size: 1.6rem;
+            }
+            li{
+                font-size: 1rem;
+                @include responsive(tablet){
+                    font-size: 1.6rem;
+                }
+            }
+            a{
+                color: $dark-color;
+                &:hover{
+                    color: $accent-color;
+                }
+            }
+        }
+    }
+}

wp-content/themes/ostal_WP/sass/04-layout/_header.scss

@@ -0,0 +1,13 @@
+@use "../01-base/breakpoints" as *;
+@use "../01-base/colors" as *;
+
+.header{
+    height: 80px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .header-logo{
+        width: 125px;
+        height: 27px;
+    }
+}

wp-content/themes/ostal_WP/sass/04-layout/_index.scss

@@ -0,0 +1,6 @@
+@forward '../04-layout/grid';
+@forward '../04-layout/header';
+@forward '../04-layout/navigation';
+@forward '../04-layout/footer';
+@forward '../04-layout/forms';
+@forward '../04-layout/sidebar';

wp-content/themes/ostal_WP/sass/04-layout/_navigation.scss

@@ -0,0 +1,96 @@
+@use "../01-base/breakpoints" as *;
+@use "../01-base/colors" as *;
+
+#main-nav{
+    overflow: hidden;
+    nav{
+        #navbar-btn{
+            cursor: pointer;
+            height: 27px;
+            width: 27px;
+            border: 0px;
+            overflow: visible;
+            position: relative;
+            z-index:9999;
+            background-color: transparent;
+              span,
+              span:before,
+              span:after {
+                background: $accent-color;
+                display: block;
+                height: 4px;
+                opacity: 1;
+                position: absolute;
+                transition: 0.3s ease-in-out;
+              }
+              span:before,
+              span:after {
+                content: "";
+              }
+              span {
+                right: 0px;
+                top: 13px;
+                width: 27px;
+              }
+              span:before {
+                left: 0px;
+                top: -10px;
+                width: 16px;
+              }
+              span:after {
+                left: 0px;
+                top: 10px;
+                width: 20px;
+              }
+              @include responsive(desktop){
+                display: none;
+              }
+        }
+    
+        .main-menu{
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            left: -100%;
+            top: 0;
+            transition: all .5s ease-in-out;
+            list-style: none;
+            z-index: 999;
+            gap: 20px;
+            margin-bottom: 0!important;
+            @include responsive(desktop){
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                justify-content: flex-end;
+                position: relative;
+                left: inherit;
+                top: inherit;
+                gap: 33px;
+            }
+            .menu-item{
+                font-size: 1.6rem;
+                margin-left: 0!important;
+            }
+            &.active{
+                top: 0;
+                left: 0;
+                z-index: 999;
+                background-color: $dark-color;
+                color: $white-color;
+                text-align: center;
+                transition: all .5s ease-in-out;
+                .menu-item{
+                  a{
+                    color: $white-color!important;
+                  }
+                }
+            }
+        }
+    }
+
+}