Add initial HTML and CSS files for responsive design

2024-12-16 18:44:40 +01:00
parent 9dac017c03
commit baa5befc99
4 changed files with 170 additions and 0 deletions
--- a/ocelio.pl/style.scss
+++ b/ocelio.pl/style.scss
@@ -0,0 +1,168 @@
+@media(max-width: 767px) {
+  #box_mainproducts {
+    .product {
+      padding: 0 !important;
+
+      .product-inner-wrap {
+        padding: 15px !important;
+
+        .price {
+          padding-top: 0 !important;
+          margin-top: 0 !important;
+        }
+      }
+    }
+  }
+
+  .logo-bar {
+    display: none;
+  }
+
+  .menu {
+    display: grid;
+    grid-template-columns: 150px 1fr;
+
+    &:before {
+      display: none !important;
+    }
+
+    .link-logo {
+      display: block;
+      padding: 0 10px;
+    }
+
+    .innermenu {
+      border: 0 !important;
+    }
+  }
+}
+
+#box_mainproducts {
+  .product {
+    padding: 15px !important;
+    margin: 0 !important;
+    height: auto !important;
+
+    .prodname {
+      margin: 0 !important;
+    }
+
+    .productname {
+      font-size: 15px !important;
+      font-weight: 600 !important;
+      padding-top: 0 !important;
+    }
+
+    .price {
+      em {
+        font-size: 20px !important;
+      }
+    }
+  }
+}
+
+#box_specialoffer,
+#box_lastadded {
+  .product {
+    >a {
+      display: block;
+      padding: 15px 15px 0 15px;
+
+      .productnamewrap {
+        margin-bottom: 0;
+        height: auto !important;
+        padding-bottom: 10px;
+
+        .productname {
+          font-size: 15px !important;
+          font-weight: 600 !important;
+        }
+      }
+    }
+
+    .price {
+      padding: 0 15px;
+      margin: 0;
+
+      p {
+        em {
+          font-size: 20px !important;
+        }
+      }
+
+      .price__inactive {
+        font-size: 13px !important;
+      }
+    }
+
+    form {
+      padding: 15px 15px 0;
+    }
+  }
+}
+
+#box_newsletter {
+  &:before {
+    background: rgba(0, 0, 0, 0.6);
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    display: block;
+  }
+
+  .boxhead {
+    z-index: 2;
+    position: relative;
+
+    span {
+      color: #FFF !important;
+    }
+  }
+
+  .innerbox {
+    z-index: 2;
+    position: relative;
+
+    h5 {
+      color: #FFF;
+      font-weight: 400 !important;
+      letter-spacing: 0 !important;
+    }
+
+    form {
+      input {
+        border: 0 !important;
+      }
+
+      fieldset {
+        color: #FFF;
+        font-weight: 400 !important;
+      }
+    }
+  }
+}
+
+#box_custom40 {
+  padding: 0 25px;
+
+  a.read-more {
+    font-weight: 600;
+    color: #f59e01;
+  }
+
+  .more {
+    display: none;
+
+    &.open {
+      display: block;
+    }
+  }
+
+  p {
+    font-size: 13px;
+    line-height: 1.25 !important;
+  }
+}