eSales Media Git repositories
Browse code

Progress live

Benjamin Roth authored on12/12/2022 16:42:07
Showing1 changed files
files/themes/aldegott_2022/assets/css/inc/hero.scss
History View file @be9e748
... ... 
@@ -169,3 +169,16 @@
169 169 
     }
170 170 
   }*/
171 171 
 }
172 
+
173 
+
174 
+#logo-animation {
175 
+  position: absolute;
176 
+  top: 50%;
177 
+  left: 50%;
178 
+  width: 66.666vw;
179 
+  max-width: 465px;
180 
+  @include transform(translate(-50%,-50%));
181 
+  svg {
182 
+    visibility: hidden;
183 
+  }
184 
+}
Browse code

Progress

Benjamin Roth authored on12/12/2022 00:17:47
Showing1 changed files
files/themes/aldegott_2022/assets/css/inc/hero.scss
History View file @fe1cbe6
... ... 
@@ -115,7 +115,7 @@
115 115 
     color: $color-text;
116 116 
   }*/
117 117
118 
-  .slick-slider-container {
118 
+  /*.slick-slider-container {
119 119 
     height: 545px;
120 120
121 121 
     .home & {
... ... 
@@ -167,5 +167,5 @@
167 167 
         width: auto;
168 168 
       }
169 169 
     }
170 
-  }
171 
-}
172 170 
\ No newline at end of file
171 
+  }*/
172 
+}
Browse code

Initial commit

Benjamin Roth authored on07/11/2022 09:19:06
Showing1 changed files
files/themes/aldegott_2022/assets/css/inc/hero.scss
History View file @6e83285
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,171 @@
1 
+@if not-imported("import_once_func") { @import "import_once_func"; }
2 
+@if not-imported("framework") { @import "framework"; }
3 
+
4 
+/* --- SLIDER --- */
5 
+/*#hero {
6 
+  height: 490px;
7 
+  overflow: hidden;
8 
+
9 
+  > *,
10 
+  > * > *:first-child:last-child,
11 
+  > * > * > *:first-child:last-child {
12 
+    height: 100%;
13 
+  }
14 
+
15 
+  .slick-slider-slide {
16 
+    height: 490px;
17 
+  }
18 
+
19 
+  @media screen and (max-width: 599px) {
20 
+    height: 66vw;
21 
+    .slick-slider-slide {
22 
+      height: 66vw;
23 
+    }
24 
+  }
25 
+}
26 
+
27 
+.slick-slider-container {
28 
+  .slick-slider-slide {
29 
+    .slide-content {
30 
+      @include centered-1200;
31 
+      height: 100%;
32 
+
33 
+      .slide-text {
34 
+        position: absolute;
35 
+        left: 50%;
36 
+        top: 70%;
37 
+        font-size: font-size(50px);
38 
+        color: $color-text-alt-1;
39 
+        text-transform: uppercase;
40 
+        max-width: 50%;
41 
+        text-shadow: 1px 1px 5px #000;
42 
+        @include transform(translateY(-50%));
43 
+      }
44 
+
45 
+    }
46 
+  }
47 
+}*/
48 
+
49 
+/*
50 
+ ------ HERO ------
51 
+*/
52 
+#hero {
53 
+  .inside {
54 
+    overflow: hidden;
55 
+    -webkit-background-size: cover;
56 
+    background-size: cover;
57 
+    position: relative;
58 
+  }
59 
+
60 
+  .logo-wrapper {
61 
+    position: absolute;
62 
+    left: 0;
63 
+    top: 0;
64 
+    width: 100%;
65 
+    height: 100%;
66 
+
67 
+    .logo-holder {
68 
+      @include centered-1200;
69 
+      height: 100%;
70 
+    }
71 
+  }
72 
+
73 
+  .hero-wrapper {
74 
+    //min-height: 200px;
75 
+  }
76 
+
77 
+  #logo {
78 
+    position: absolute;
79 
+    max-width: 35%;
80 
+    left: 0;
81 
+    top: 0;
82 
+    width: 215px;
83 
+
84 
+    .-hide-logo &:not(.animated) {
85 
+      display: none;
86 
+    }
87 
+
88 
+    &.animated {
89 
+      visibility: hidden;
90 
+      max-width: 45%;
91 
+      width: 390px;
92 
+      left: 50%;
93 
+      top: 70%;
94 
+      @include transform(translate(-50%, -50%));
95 
+    }
96 
+
97 
+    svg {
98 
+      width: 100%;
99 
+      vertical-align: middle;
100 
+    }
101 
+
102 
+    @include for-tablet {
103 
+      left: 50%;
104 
+      top: 50%;
105 
+      @include transform(translate(-50%, -50%));
106 
+    }
107 
+  }
108 
+
109 
+  /*&:after {
110 
+    @include icon('\e900',40px);
111 
+    position: absolute;
112 
+    bottom: 30px;
113 
+    left: 50%;
114 
+    margin-left: -20px;
115 
+    color: $color-text;
116 
+  }*/
117 
+
118 
+  .slick-slider-container {
119 
+    height: 545px;
120 
+
121 
+    .home & {
122 
+      height: 860px;
123 
+    }
124 
+
125 
+    .slick-slide {
126 
+      -webkit-box-sizing: border-box;
127 
+      -moz-box-sizing: border-box;
128 
+      box-sizing: border-box;
129 
+    }
130 
+
131 
+    @include for-mobile {
132 
+      max-height: 50vh;
133 
+
134 
+      .home & {
135 
+        max-height: calc(100vh - 50px);
136 
+      }
137 
+    }
138 
+  }
139 
+
140 
+  .slick-slider-wrapper,
141 
+  .slick-list,
142 
+  .slick-track,
143 
+  .slick-slide,
144 
+  .slick-slide > div,
145 
+  .slick-slide > div > div,
146 
+  .slide-content {
147 
+    height: 100%;
148 
+  }
149 
+
150 
+  .slide-content {
151 
+    @include centered-1200;
152 
+
153 
+    .ce_image {
154 
+      height: 100%;
155 
+
156 
+      &:first-child:last-child {
157 
+        .image_container {
158 
+          text-align: center;
159 
+        }
160 
+      }
161 
+    }
162 
+    .image_container {
163 
+      height: 100%;
164 
+      img {
165 
+        display: inline-block;
166 
+        max-height: 100%;
167 
+        width: auto;
168 
+      }
169 
+    }
170 
+  }
171 
+}
0 172 
\ No newline at end of file