Skip to content

Commit 5ad3157

Browse files
osfameronosfameron
authored
Merge pull request #186 from couchbase/AV-77311-new-capella-columnar-landing-page-hakim
AV-77311 unobtrusive markup contrib
2 parents 25c4ff3 + 22cf230 commit 5ad3157

File tree

5 files changed

+194
-1
lines changed

5 files changed

+194
-1
lines changed

‎src/css/landing-page.css

Lines changed: 152 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@
173173
}
174174

175175
.doc.landing-page-doc img {
176-
max-width: 100%;
176+
overflow: visible;
177177
}
178178

179179
.doc.landing-page-doc ul {
@@ -256,6 +256,157 @@
256256
box-shadow: 0 0 15px -5px #ccc;
257257
}
258258

259+
/* CSS for redesigned Capella Landing Page */
260+
261+
/* Adjusting spacing gutters around the content */
262+
@media screen and (min-width: 769px) {
263+
main.capella-article {
264+
padding-right: 1.5rem;
265+
padding-left: 1.5rem;
266+
margin: 0 auto;
267+
max-width: clamp(55em, 60%, var(--width-page-area));
268+
}
269+
}
270+
271+
/* Adjusted CSS for Tabbed "Ten Minutes" Content */
272+
.doc.landing-page-capella .tabs {
273+
margin: 2rem 0 2rem 0;
274+
width: 80%;
275+
}
276+
277+
.doc.landing-page-capella .tabs .tablist > ul li {
278+
margin-right: 1rem;
279+
}
280+
281+
.doc.landing-page-capella .tabpanel {
282+
padding: 2em 1.25em;
283+
}
284+
285+
.doc.landing-page-capella .tabs.responsive .tabpanel {
286+
padding: 2rem 4rem 2rem 1rem;
287+
}
288+
289+
.doc.landing-page-capella .tabs.responsive .tabpanel .paragraph > p > a {
290+
font-weight: var(--weight-semibold);
291+
}
292+
293+
/* CSS for How Do You Want To Start Building Today? section */
294+
.doc.landing-page-capella .centered > h2 {
295+
text-align: center;
296+
margin-top: 4rem;
297+
}
298+
299+
.doc.landing-page-capella .card-container {
300+
display: flex;
301+
flex-wrap: wrap;
302+
width: 100%;
303+
margin: 20px auto;
304+
}
305+
306+
.doc.landing-page-capella .card-container .sectionbody {
307+
display: contents;
308+
}
309+
310+
.doc.landing-page-capella .card-box {
311+
width: 30%;
312+
margin: 1.66%;
313+
padding: 2rem;
314+
background-color: white;
315+
border-bottom: 20px solid var(--color-brand-orange);
316+
box-shadow: 0 0 29.48px 0 rgba(0, 0, 0, 0.1);
317+
border-radius: 8.8px;
318+
}
319+
320+
.doc.landing-page-capella .card-box:hover {
321+
transition: box-shadow 0.3s ease-in-out;
322+
box-shadow: 5px 10px 29.48px 0 rgba(0, 0, 0, 0.4);
323+
}
324+
325+
.doc.landing-page-capella .card-box .svg-inline--fa {
326+
color: var(--color-brand-red);
327+
font-size: 2em;
328+
margin-bottom: 0.5em;
329+
display: block;
330+
}
331+
332+
.doc.landing-page-capella .card-box > h3 {
333+
margin-block-start: 0;
334+
padding-left: 1.5em;
335+
text-align: left;
336+
}
337+
338+
.doc.landing-page-capella .card-box > p {
339+
margin-top: 1rem;
340+
}
341+
342+
.doc.landing-page-capella .card-box > div.ulist > ul li {
343+
list-style-type: disc;
344+
color: var(--color-link);
345+
font-weight: var(--weight-semibold);
346+
}
347+
348+
.doc.landing-page-capella .card-box > div.ulist > ul li:hover {
349+
text-decoration: underline;
350+
}
351+
352+
.doc.landing-page-capella .opening-image {
353+
width: 10em; /* Adjust as needed */
354+
float: right;
355+
height: auto;
356+
display: block;
357+
z-index: -1;
358+
}
359+
360+
.doc.landing-page-capella .ending-image {
361+
width: 10em; /* Adjust as needed */
362+
height: auto;
363+
display: block;
364+
margin: -50px;
365+
position: relative;
366+
top: 150px; /* Adjust this value to control the amount of overlap */
367+
z-index: -1;
368+
}
369+
370+
/* Screen size considerations */
371+
372+
@media screen and (max-width: 499px) {
373+
.doc.landing-page-capella .tabs {
374+
margin: 2rem 0;
375+
width: 100%;
376+
}
377+
378+
.doc.landing-page-capella .card-container {
379+
flex-direction: column;
380+
width: 100%;
381+
}
382+
383+
.doc.landing-page-capella .card-box {
384+
width: 100%;
385+
}
386+
}
387+
388+
@media screen and (min-width: 500px) and (max-width: 700px) {
389+
.doc.landing-page-capella .card-box {
390+
width: 100%;
391+
}
392+
}
393+
394+
@media screen and (min-width: 701px) and (max-width: 1699px) {
395+
.doc.landing-page-capella .card-container {
396+
width: 100%;
397+
}
398+
399+
.doc.landing-page-capella .card-box {
400+
width: 46%;
401+
}
402+
}
403+
404+
@media screen and (min-width: 1700px) {
405+
.doc.landing-page-capella .card-box {
406+
width: 30%;
407+
}
408+
}
409+
259410
/* CSS for nav filter */
260411
.nav.tutorials-filter .nav-menu {
261412
padding: 20px;

‎src/img/lineplus.svg

Lines changed: 4 additions & 0 deletions
Loading

‎src/img/stars.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/layouts/landing-page-capella.hbs

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
{{> head-first}}
5+
<title>{{{detag (or page.title 'landing page')}}}{{#if site.title}} | {{{site.title}}}{{/if}}</title>
6+
{{> head-last}}
7+
</head>
8+
<body class="landing-page">
9+
{{> header}}
10+
{{> body-landing-page-capella}}
11+
{{> footer}}
12+
</body>
13+
</html>

‎src/partials/body-landing-page-capella.hbs

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<div class="body container">
2+
{{#if (eq (nav-mode) 'client')}}
3+
{{#with (nav-group-for-page (nav-groups))}}
4+
{{#if ./components.length}}
5+
<aside class="nav left-sidebar">
6+
<div class="nav-container">
7+
<a href="#" class="menu-expand-toggle"><span>Navigation</span><i class="fas fa-times-circle"></i><i class="fas fa-chevron-circle-left"></i></a>
8+
</div>
9+
</aside>
10+
{{/if}}
11+
{{/with}}
12+
{{/if}}
13+
<main class="capella-article" data-ceiling="topbar">
14+
<article class="doc landing-page-capella">
15+
<img class="opening-image" src="{{{uiRootPath}}}/img/stars.svg" />
16+
17+
{{{page.contents}}}
18+
19+
<img class="ending-image" src="{{{uiRootPath}}}/img/lineplus.svg" />
20+
</article>
21+
</main>
22+
</div>

0 commit comments

Comments
 (0)