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/specials.less
+++ b/src/css/theme-2022/components/specials.less
@@ -0,0 +1,79 @@
+.specials {
+    article {
+        background: @surface;
+        color: @on-surface;
+        padding: @space-md;
+        border-radius: 10px;
+        box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
+        margin-bottom: @space-lg;
+        font-weight: 700;
+
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        gap: @space-md;
+
+        @media (max-width: 768px) {
+            flex-direction: column;
+            text-align: center;
+        }
+
+        .icon {
+            width: 80px;
+            height: 80px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-shrink: 0;
+
+            @media (max-width: 768px) {
+                width: 50px;
+                height: 50px;
+            }
+
+            img {
+                width: 100%;
+            }
+        }
+
+        .title {
+            margin-bottom: @space-xs;
+            font-size: 24px;
+            line-height: 1.3;
+
+            @media (max-width: 768px) {
+                font-size: 20px;
+            }
+        }
+
+        &.hovered {
+            display: none;
+
+            @media (min-width: 768px) {
+                display: flex;
+                position: fixed;
+                top: 40%;
+                left: 30%;
+                right: 30%;
+                z-index: 999;
+                box-shadow: inset 0 0 2px 1px white, 0 10px 40px 0 rgba(0, 0, 0, 0.1), 0 10px 40px 0 rgba(0, 0, 0, 0.1);
+                background: linear-gradient(
+                        90deg,
+                        rgba(238, 254, 255, 1) 0%,
+                        rgba(255, 254, 255, 1) 35%,
+                        rgba(215, 255, 254, 1) 100%
+                    ),
+                    radial-gradient(88.73% 230.98% at 25.76% 13.14%, #ffffff 0%, rgba(255, 255, 255, 0) 100%),
+                    radial-gradient(50% 20.05% at 50% 46.13%, #fffeff 0%, #d7fffe 100%);
+            }
+        }
+    }
+
+    .row:nth-child(2) > *:nth-child(2) > article:first-child {
+        margin-top: @space-xl;
+
+        @media (max-width: 1050px) {
+            margin-top: 0;
+        }
+    }
+}