Changeset View
Changeset View
Standalone View
Standalone View
css/home.scss
- This file was added.
1 | --- | ||||
---|---|---|---|---|---|
2 | # SCSS | ||||
3 | --- | ||||
4 | | ||||
5 | #kHeaderCarousel { | ||||
6 | width: 100%; | ||||
7 | height: 400px; | ||||
8 | background-image: url(/assets/img/Next.jpg); | ||||
9 | background-position: center; | ||||
10 | background-size: cover; | ||||
11 | | ||||
12 | h1 { | ||||
13 | font-size: 24px; | ||||
14 | font-weight: bold; | ||||
15 | } | ||||
16 | | ||||
17 | .carousel-inner { | ||||
18 | width: 100%; | ||||
19 | height: 100%; | ||||
20 | } | ||||
21 | | ||||
22 | .carousel-item { | ||||
23 | color: #EEE; | ||||
24 | width: 100%; | ||||
25 | height: 100%; | ||||
26 | } | ||||
27 | | ||||
28 | .carousel-item-content { | ||||
29 | width: calc(100% - 2*28px); | ||||
30 | height: 90%; | ||||
31 | display: flex; | ||||
32 | flex-direction: column-reverse; | ||||
33 | margin: auto; | ||||
34 | | ||||
35 | @media(min-width: 768px) { | ||||
36 | flex-direction: row; | ||||
37 | align-items: center; | ||||
38 | height: 100%; | ||||
39 | } | ||||
40 | @media(min-width: 1100px) { | ||||
41 | max-width: 1140px; | ||||
42 | width: 100%; | ||||
43 | } | ||||
44 | } | ||||
45 | | ||||
46 | .slide-background { | ||||
47 | width: 100%; | ||||
48 | flex-grow: 2; | ||||
49 | background-size: contain; | ||||
50 | background-position: center; | ||||
51 | background-repeat: no-repeat; | ||||
52 | | ||||
53 | @media(min-width: 768px) { | ||||
54 | flex: 2 1 auto; | ||||
55 | height: 100%; | ||||
56 | } | ||||
57 | } | ||||
58 | | ||||
59 | .carousel-text-overlay { | ||||
60 | flex-shrink: 2; | ||||
61 | text-align: center; | ||||
62 | margin: auto; | ||||
63 | width: 100%; | ||||
64 | padding: 30px 0 10px 0; | ||||
65 | color: #FFF; | ||||
66 | | ||||
67 | h1 { | ||||
68 | text-transform: uppercase; | ||||
69 | font-size: 2em; | ||||
70 | | ||||
71 | @media(min-width: 768px) { | ||||
72 | font-size: 3em; | ||||
73 | } | ||||
74 | @media(min-width: 1100px) { | ||||
75 | font-size: 3em; | ||||
76 | margin-bottom: 16px; | ||||
77 | } | ||||
78 | } | ||||
79 | | ||||
80 | p { | ||||
81 | line-height: 1.5em; | ||||
82 | } | ||||
83 | | ||||
84 | @media(min-width: 768px) { | ||||
85 | flex: 1 2 auto; | ||||
86 | position: unset; | ||||
87 | border: none; | ||||
88 | background: none; | ||||
89 | text-align: left; | ||||
90 | color: #FFF; | ||||
91 | font-size: 1.3em; | ||||
92 | padding: 0 10px 0 15px; | ||||
93 | } | ||||
94 | @media(min-width: 1100px) { | ||||
95 | font-size: 1.6em; | ||||
96 | padding: 0 40px 0 15px; | ||||
97 | } | ||||
98 | | ||||
99 | } | ||||
100 | | ||||
101 | .learn-more { | ||||
102 | color: #54a3d8; | ||||
103 | } | ||||
104 | | ||||
105 | @media(min-width: 768px) { | ||||
106 | height: 500px; | ||||
107 | } | ||||
108 | @media(min-width: 1100px) { | ||||
109 | height: 700px; | ||||
110 | } | ||||
111 | } | ||||
112 | | ||||
113 | #kHeaderCarousel::before { | ||||
114 | content: ""; | ||||
115 | position: absolute; | ||||
116 | top: 0; | ||||
117 | left: 0; | ||||
118 | width: 100%; | ||||
119 | height: 100%; | ||||
120 | background-color: rgba(0, 0, 0, 0.3); | ||||
121 | } | ||||
122 | | ||||
123 | .product-anchor { | ||||
124 | display: block; | ||||
125 | position: relative; | ||||
126 | top: -52px; /* compensate for sticky header */ | ||||
127 | visibility: hidden; | ||||
128 | } | ||||
129 | | ||||
130 | .main { | ||||
131 | .block:nth-of-type(odd) { | ||||
132 | background-color: #eff1f1; | ||||
133 | } | ||||
134 | | ||||
135 | .block:nth-of-type(even) { | ||||
136 | background-color: #fff; | ||||
137 | } | ||||
138 | } | ||||
139 | | ||||
140 | .light-text { | ||||
141 | h1 { | ||||
142 | color: #EEE; | ||||
143 | } | ||||
144 | | ||||
145 | a { | ||||
146 | color: #abdaf9; | ||||
147 | } | ||||
148 | } | ||||
149 | | ||||
150 | .kAppInfo { | ||||
151 | display: flex; | ||||
152 | flex-direction: column-reverse; | ||||
153 | | ||||
154 | img { | ||||
155 | max-width: 100%; | ||||
156 | | ||||
157 | @media(min-width: 768px) { | ||||
158 | max-width: 40%; | ||||
159 | height: auto; | ||||
160 | margin: 15px; | ||||
161 | } | ||||
162 | } | ||||
163 | | ||||
164 | .kappInfo-content { | ||||
165 | margin: 15px; | ||||
166 | } | ||||
167 | | ||||
168 | @media(min-width: 768px) { | ||||
169 | flex-direction: row; | ||||
170 | align-items: center; | ||||
171 | } | ||||
172 | } | ||||
173 | | ||||
174 | #akonadi-logo { | ||||
175 | width: 50%; | ||||
176 | height: auto; | ||||
177 | margin: auto; | ||||
178 | | ||||
179 | @media(min-width: 768px) { | ||||
180 | max-width: 30%; | ||||
181 | } | ||||
182 | } | ||||
183 | | ||||
184 | @media (min-width: 768px) { | ||||
185 | div.block:nth-of-type(odd) .kAppInfo { | ||||
186 | flex-direction: row-reverse; | ||||
187 | } | ||||
188 | } | ||||
189 | |