first commit

2024-12-20 12:48:12 +01:00
commit d9fb74972a
217 changed files with 26712 additions and 0 deletions
--- a/wp-content/themes/ostal_WP/sass/05-components/_two-col-section.scss
+++ b/wp-content/themes/ostal_WP/sass/05-components/_two-col-section.scss
@@ -0,0 +1,86 @@
+@use "../01-base/breakpoints" as *;
+@use "../01-base/colors" as *;
+
+.two-cols{
+    padding: 45px 0;
+    @include responsive(tablet){
+        padding: 153px 0;
+    }
+    .wrapper{
+        @include responsive(tablet){
+            display: flex;
+            justify-content: space-between;
+            gap: 20px;
+        }
+        .col{
+            @include responsive(tablet){
+                flex: 0 0 50%;
+            }
+        }
+        .col-text{
+            margin-bottom: 50px;
+            @include responsive(desktop){
+                padding: 0 35px 0;
+            }
+        }
+        .col-image{
+            .image-wrapper{
+                position: relative;
+            }
+            .image-wrapper::before{
+                content: "";
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                opacity: 100%;
+                display: block;
+                top: -12px;
+                left: -12px;
+                z-index: 9;
+            }
+            img{
+                position: relative;
+                z-index: 990;
+            }
+        }
+        &.imageLeft{
+            flex-flow: row-reverse;
+            .image-wrapper{
+                &::before{
+                    clip-path: polygon(0% 0%, 97% 0, 100% 4%, 100% 100%, 0% 100%);
+                    top: -12px;
+                    left: inherit;
+                    right: -12px;
+                }
+            }
+        }
+        &.imageRight{
+            flex-flow: row;
+            .image-wrapper{
+                &::before{
+                    clip-path: polygon(0% 4%, 4% 0%, 100% 0%, 100% 4%, 100% 100%, 0% 100%, 0% 4%);
+                    top: -12px;
+                    left: -12px;
+                }
+            }
+        }
+    }
+    &.bg-light{
+        .wrapper{
+            .image-wrapper{
+                &::before{
+                    background-color: $dark-color;
+                }
+            }
+        }
+    }
+    &.bg-dark{
+        .wrapper{
+            .image-wrapper{
+                &::before{
+                    background-color: $accent-color;
+                }
+            }
+        }
+    }
+}