Starter Projekt angefangen, etwas aufzubohren und ein paar grundlegend benötigte Collections, Teheming-Styles und Komponenten hinzugefügt. (WIP)

2022-05-24 16:44:55 +02:00
parent f4b6bb17ca
commit 47fdee2396
75 changed files with 2086 additions and 1234 deletions
--- a/src/css/theme-2022/components/general.less
+++ b/src/css/theme-2022/components/general.less
@@ -0,0 +1,108 @@
+html,
+body {
+    background: @background;
+    color: @on-background;
+    font-size: @font-size-default;
+    font-weight: @font-weight-default;
+    line-height: @font-line-height-default;
+    font-family: "Montserrat", sans-serif;
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    overflow-x: hidden;
+    padding: @header-height + 60px 0 0 0;
+
+    @media (max-width: 768px) {
+        padding: @header-height-max-768 0 0 0;
+    }
+}
+
+// Body Images
+
+.body-image-left {
+    position: absolute;
+    left: 0;
+    top: 80rem;
+
+    @media (max-width: 900px) {
+        top: 90rem;
+    }
+}
+
+// Lists
+
+ul {
+    list-style-type: none;
+    padding-left: 15px;
+
+    li {
+        line-height: 30px;
+        padding-left: 0;
+        font-weight: 700;
+
+        &:before {
+            content: "\203A";
+            font-weight: 700;
+            position: absolute;
+            top: -1px;
+            left: -12px;
+        }
+    }
+}
+
+// Scroll To Top
+
+.scroll-to-top {
+    position: fixed;
+    z-index: 9999;
+    right: 5rem;
+    bottom: 5rem;
+
+    @media (max-width: 768px) {
+        right: 4rem;
+        bottom: 1rem;
+    }
+
+    .circle-top,
+    .circle-email,
+    .circle-contact {
+        width: 80px;
+        height: 80px;
+        border-radius: 100%;
+        background-color: @secondary;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+    }
+
+    .circle-email {
+        width: 60px;
+        height: 60px;
+        background-color: @secondary-light;
+        position: absolute;
+        top: -20px;
+        right: -39px;
+    }
+
+    .circle-contact {
+        width: 60px;
+        height: 60px;
+        background-color: @secondary-light-green;
+        position: absolute;
+        top: 23px;
+        right: -53px;
+    }
+}
+
+// Promotion
+
+.promotion-image-wave-top {
+    height: 70px;
+}
+
+.promotion-image-wave-bottom {
+    height: 137px;
+}