Skip to content
This repository was archived by the owner on Oct 19, 2022. It is now read-only.

Commit c096686

Browse files
author
Jos Poortvliet
authored
Merge pull request #179 from nextcloud/security
security page
2 parents b95786d + 7bc8bdd commit c096686

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+1114
-9215
lines changed

‎assets/css/secure.css‎

Lines changed: 336 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,336 @@
1+
/* Make Navbar transparent */
2+
.navbar:not(.scrolled) {
3+
background-color: transparent; }
4+
5+
.navbar:not(.scrolled) .btn-primary {
6+
background-color: transparent !important;
7+
border-color: white; }
8+
9+
/**
10+
* Secure Page
11+
*/
12+
.background {
13+
background-image: url("../img/security/security.jpg");
14+
padding-bottom: 0;
15+
padding-top: 0;
16+
margin-bottom: 0;
17+
background-repeat: no-repeat;
18+
background-position: bottom 0 right 0;
19+
background-size: cover;
20+
border-radius: 0 !important;
21+
height: 70vh;
22+
min-height: 600px;
23+
max-height: 800px; }
24+
.background h1 {
25+
padding-top: 0;
26+
color: white; }
27+
.background h2 {
28+
color: white;
29+
font-size: 18px;
30+
line-height: 1.6; }
31+
.background .btn-primary {
32+
margin-top: 50px;
33+
width: 70%; }
34+
.background .container {
35+
top: 50%;
36+
transform: translateY(-50%);
37+
position: relative;
38+
margin-left: 5%;
39+
padding: 0; }
40+
.background .container .topheader {
41+
padding: 0; }
42+
.background .container .topheader a {
43+
width: 290px;
44+
height: 60px;
45+
padding-top: 16px; }
46+
.background .container-fluid img {
47+
height: 100%;
48+
width: 100%; }
49+
50+
/* All headers */
51+
.featureblock {
52+
padding-top: 50px; }
53+
.featureblock .screenshot {
54+
/* padding: 20px; */
55+
margin-top: 20px;
56+
margin-bottom: 20px;
57+
border: solid 1px transparent;
58+
border-radius: 0px;
59+
border: solid 1px #fbfbfb;
60+
box-shadow: 0 1px 40px 0 rgba(0, 0, 0, 0.04); }
61+
.featureblock .screenshot:hover {
62+
box-shadow: 0 1px 40px 0 rgba(0, 0, 0, 0.14);
63+
border: solid 1px #fbfbfb;
64+
border-radius: 0px;
65+
transition: all 0.5s ease; }
66+
.featureblock .header {
67+
margin-bottom: 54px;
68+
text-align: center; }
69+
.featureblock h2 {
70+
text-align: left;
71+
color: #2a2a36;
72+
margin-top: 25px;
73+
margin-bottom: 25px;
74+
font-size: 40px; }
75+
.featureblock h3 {
76+
text-align: left;
77+
font-size: 30px; }
78+
.featureblock .row {
79+
margin-bottom: 50px; }
80+
81+
/* Process image */
82+
.process {
83+
height: 1100px; }
84+
.process h1 {
85+
font-size: 25px;
86+
font-weight: bold;
87+
font-style: normal;
88+
font-stretch: normal;
89+
line-height: 1.36;
90+
text-align: center;
91+
color: #2a2a36; }
92+
.process p {
93+
font-size: 20px;
94+
font-weight: 300;
95+
font-style: normal;
96+
font-stretch: normal;
97+
line-height: 1.36;
98+
text-align: left;
99+
color: #434343; }
100+
.process p:last-of-type {
101+
margin-bottom: 30px; }
102+
@media (min-width: 768px) {
103+
.process {
104+
height: 850px;
105+
/* .number1 {
106+
left: -12%;
107+
}
108+
.number2 {
109+
left: 1%;
110+
}
111+
.number3 {
112+
left: 15%;
113+
}
114+
.number4 {
115+
left: 30%;
116+
}
117+
.number5 {
118+
left: 44%;
119+
}
120+
.number6 {
121+
left: 58%;
122+
}
123+
.number7 {
124+
left: 72%;
125+
}*/ }
126+
.process .nav-pills li {
127+
width: 19%;
128+
margin: 0px; }
129+
.process .nav-pills li a {
130+
padding: 0px; }
131+
.process .nav-pills li a img {
132+
width: 115%;
133+
/* height: 100%; */
134+
/* height: 70px; */ }
135+
.process .nav-pills > li > a {
136+
background-color: transparent; }
137+
.process .nav-pills > li > a:focus {
138+
-webkit-filter: grayscale(50%);
139+
/* Chrome, Safari, Opera */
140+
filter: grayscale(50%);
141+
background-color: transparent; }
142+
.process .nav-pills > li > a:hover {
143+
-webkit-filter: grayscale(50%);
144+
/* Chrome, Safari, Opera */
145+
filter: grayscale(50%);
146+
background-color: transparent; }
147+
.process .nav-pills > li.active > a {
148+
-webkit-filter: grayscale(100%);
149+
/* Chrome, Safari, Opera */
150+
filter: grayscale(100%);
151+
background-color: transparent; }
152+
.process .nav-pills > li.active > a:focus {
153+
-webkit-filter: grayscale(100%);
154+
/* Chrome, Safari, Opera */
155+
filter: grayscale(100%);
156+
background-color: transparent; }
157+
.process .nav-pills > li.active > a:hover {
158+
-webkit-filter: grayscale(100%);
159+
/* Chrome, Safari, Opera */
160+
filter: grayscale(100%);
161+
background-color: transparent; }
162+
.process .nav-pills li.active img {
163+
-webkit-filter: grayscale(100%);
164+
/* Chrome, Safari, Opera */
165+
filter: grayscale(100%);
166+
background-color: transparent; }
167+
.process .img-responsive {
168+
margin-left: auto;
169+
margin-right: auto;
170+
margin-top: 36px;
171+
margin-bottom: 17px; }
172+
.process .main {
173+
/* width: 1046px; */
174+
/* height: auto; */ }
175+
.process .processimg {
176+
position: relative;
177+
/* height: 60px; */
178+
/* width: 1046px; */ }
179+
.process .info {
180+
position: absolute;
181+
top: 70px;
182+
/* left: -120px; */
183+
/* bottom: 0; */
184+
/* right: 0; */
185+
/* background-color: rgba(255, 255, 255, 0.6); */ }
186+
.process .info p {
187+
font-size: 20px;
188+
font-weight: 300;
189+
font-style: normal;
190+
font-stretch: normal;
191+
line-height: 1.36;
192+
text-align: center;
193+
color: #434343; }
194+
.process .info p:last-of-type {
195+
margin-bottom: 30px; } }
196+
@media (max-width: 768px) {
197+
.process {
198+
height: 1250px;
199+
/* .number1 {
200+
left: -12%;
201+
}
202+
.number2 {
203+
left: 1%;
204+
}
205+
.number3 {
206+
left: 15%;
207+
}
208+
.number4 {
209+
left: 30%;
210+
}
211+
.number5 {
212+
left: 44%;
213+
}
214+
.number6 {
215+
left: 58%;
216+
}
217+
.number7 {
218+
left: 72%;
219+
}*/ }
220+
.process .nav-pills li {
221+
width: 30%;
222+
margin: 10px 0px 0px 0px; }
223+
.process .nav-pills li a {
224+
padding: 0px; }
225+
.process .nav-pills li a img {
226+
width: 115%;
227+
/* height: 100%; */
228+
/* height: 70px; */ }
229+
.process .nav-pills > li > a {
230+
background-color: transparent; }
231+
.process .nav-pills > li > a:focus {
232+
-webkit-filter: grayscale(50%);
233+
/* Chrome, Safari, Opera */
234+
filter: grayscale(50%);
235+
background-color: transparent; }
236+
.process .nav-pills > li > a:hover {
237+
-webkit-filter: grayscale(50%);
238+
/* Chrome, Safari, Opera */
239+
filter: grayscale(50%);
240+
background-color: transparent; }
241+
.process .nav-pills > li.active > a {
242+
-webkit-filter: grayscale(100%);
243+
/* Chrome, Safari, Opera */
244+
filter: grayscale(100%);
245+
background-color: transparent; }
246+
.process .nav-pills > li.active > a:focus {
247+
-webkit-filter: grayscale(100%);
248+
/* Chrome, Safari, Opera */
249+
filter: grayscale(100%);
250+
background-color: transparent; }
251+
.process .nav-pills > li.active > a:hover {
252+
-webkit-filter: grayscale(100%);
253+
/* Chrome, Safari, Opera */
254+
filter: grayscale(100%);
255+
background-color: transparent; }
256+
.process .nav-pills li.active img {
257+
-webkit-filter: grayscale(100%);
258+
/* Chrome, Safari, Opera */
259+
filter: grayscale(100%);
260+
background-color: transparent; }
261+
.process .img-responsive {
262+
margin-left: auto;
263+
margin-right: auto;
264+
margin-top: 36px;
265+
margin-bottom: 17px; }
266+
.process .main {
267+
/* width: 1046px; */
268+
height: auto; }
269+
.process .processimg {
270+
position: relative;
271+
/* height: 60px; */
272+
width: 100%; }
273+
.process .info {
274+
position: absolute;
275+
top: 140px;
276+
/* left: -120px; */
277+
/* bottom: 0; */
278+
/* right: 0; */
279+
/* background-color: rgba(255, 255, 255, 0.6); */ }
280+
.process .info p {
281+
font-size: 20px;
282+
font-weight: 300;
283+
font-style: normal;
284+
font-stretch: normal;
285+
line-height: 1.36;
286+
text-align: center;
287+
color: #434343; }
288+
.process .info p:last-of-type {
289+
margin-bottom: 30px; } }
290+
291+
/* Development section */
292+
.development {
293+
margin-top: 64px;
294+
margin-bottom: 30px; }
295+
.development a {
296+
font-size: 20px;
297+
font-weight: 300;
298+
font-style: normal;
299+
font-stretch: normal;
300+
line-height: 1.36;
301+
text-align: center;
302+
color: #178ecd; }
303+
.development p {
304+
text-align: center; }
305+
.development .box {
306+
margin-top: 20px;
307+
border: solid 1px transparent;
308+
margin-bottom: 50px; }
309+
.development .box:hover {
310+
box-shadow: 0 1px 40px 0 rgba(0, 0, 0, 0.14);
311+
border: solid 1px #fbfbfb;
312+
border-radius: 0px;
313+
transition: all 0.5s ease; }
314+
.development .box h1 {
315+
font-size: 25px;
316+
font-weight: bold;
317+
font-style: normal;
318+
font-stretch: normal;
319+
line-height: 1.36;
320+
text-align: center;
321+
color: #2a2a36; }
322+
.development .box p {
323+
font-size: 20px;
324+
font-weight: 300;
325+
font-style: normal;
326+
font-stretch: normal;
327+
line-height: 1.36;
328+
text-align: center;
329+
color: #434343; }
330+
.development .box p:last-of-type {
331+
margin-bottom: 30px; }
332+
.development .box .img-responsive {
333+
margin-left: auto;
334+
margin-right: auto;
335+
margin-top: 36px;
336+
margin-bottom: 17px; }

0 commit comments

Comments
 (0)