Skip to content

Commit 51e00ee

Browse files
jromerojromero
committed
Style intro videos with use of icons
Signed-off-by: Javier Romero <[email protected]>
1 parent 399410f commit 51e00ee

File tree

2 files changed

+91
-31
lines changed

2 files changed

+91
-31
lines changed

‎themes/buildpacks/assets/scss/components/_hero.scss

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,18 @@
33
Hero
44
55
**********************************/
6+
@keyframes colorIn {
7+
0% { filter: grayscale(1); }
8+
100% { filter: grayscale(0); }
9+
}
610

711
.hero {
812
background-image: url("/images/bg-pattern.png");
913
background-color: $blue-light;
1014
background-blend-mode: multiply;
1115

1216
.container {
13-
padding: 6vw;
17+
padding: 4vw;
1418
text-align: center;
1519

1620
.strong {
@@ -19,8 +23,6 @@ Hero
1923

2024
h2 {
2125
font-weight: 300;
22-
max-width: 620px;
23-
margin: 0 auto 20px;
2426
color: $white;
2527
text-shadow: 2px 2px rgba($black, .2);
2628
}
@@ -38,6 +40,34 @@ Hero
3840
max-width: 200px;
3941
box-shadow: 2px 2px rgba($black, .1);
4042
}
43+
44+
.nav-item {
45+
.nav-link {
46+
margin-right: 10px;
47+
border-top-left-radius: 0;
48+
border-top-right-radius: 0;
49+
background-color: $blue-dark;
50+
opacity: 1;
51+
52+
&:not(.active) {
53+
img {
54+
filter: grayscale(1.0);
55+
}
56+
57+
&:hover {
58+
img {
59+
animation: colorIn 500ms;
60+
filter: none;
61+
}
62+
}
63+
}
64+
65+
&.active {
66+
background-color: $white;
67+
color: $white !important;
68+
}
69+
}
70+
}
4171
}
4272

4373
@media (min-width: 768px) {

‎themes/buildpacks/layouts/index.html

Lines changed: 58 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,59 @@
44
<div class="well bg-transparent">
55
<section class="container">
66
<div class="row">
7-
<h2 class="col-sm px-4">
8-
<span class="strong">Cloud Native Buildpacks</span><br/> transform your application source code into images that can run on any cloud.
9-
</h2>
10-
<div class="col-sm bg-white mb-2 border rounded">
11-
<ul class="nav nav-pills nav-fill" id="introVideo">
12-
<li class="nav-item">
13-
<a class="nav-link active" data-toggle="tab" href="#python-video">Python</a>
14-
</li>
15-
<li class="nav-item">
16-
<a class="nav-link" data-toggle="tab" href="#javascript-video">JavaScript</a>
17-
</li>
18-
<li class="nav-item">
19-
<a class="nav-link" data-toggle="tab" href="#java-video">Java</a>
20-
</li>
21-
</ul>
22-
<div class="tab-content clearfix" id="introVideoContent">
23-
<div class="tab-pane active" id="python-video">
24-
<iframe width="100%" src="https://www.youtube-nocookie.com/embed/4zOEp8dyqoM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
7+
<div class="col-lg p-3 mb-lg-5 align-self-center d-table-cell">
8+
<h2>
9+
<span class="strong">Cloud Native Buildpacks</span><br /> transform your application source code into images
10+
that can run on any cloud.
11+
</h2>
12+
<p class="button-holder">
13+
<a href="/docs/" class="bg-pink button">Get Started</a>
14+
</p>
15+
</div>
16+
<div class="col-lg d-flex flex-column my-4" style="height: 350px;">
17+
<div class="tab-content flex-grow-1 d-flex flex-column bg-white p-1 rounded" style="height: 300px">
18+
<div class="tab-pane flex-grow-1 active" id="java-video">
19+
<iframe width="100%" height="100%"
20+
src="https://www.youtube-nocookie.com/embed/d_L_AZyocWA?rel=0&modestbranding=1&autohide=1&showinfo=0&controls=1"
21+
frameborder="0" allowfullscreen></iframe>
2522
</div>
26-
<div class="tab-pane" id="javascript-video">
27-
<iframe width="100%" src="https://www.youtube-nocookie.com/embed/kfourVy7zBk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
23+
<div class="tab-pane flex-grow-1" id="javascript-video">
24+
<iframe width="100%" height="100%"
25+
src="https://www.youtube-nocookie.com/embed/kfourVy7zBk?rel=0&modestbranding=1&autohide=1&showinfo=0&controls=1"
26+
frameborder="0" allowfullscreen></iframe>
2827
</div>
29-
<div class="tab-pane" id="java-video">
30-
<iframe width="100%" src="https://www.youtube-nocookie.com/embed/d_L_AZyocWA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
28+
<div class="tab-pane flex-grow-1" id="python-video">
29+
<iframe width="100%" height="100%"
30+
src="https://www.youtube-nocookie.com/embed/4zOEp8dyqoM?rel=0&modestbranding=1&autohide=1&showinfo=0&controls=1"
31+
frameborder="0" allowfullscreen></iframe>
3132
</div>
33+
<!-- <div class="small text-left px-2">watch intro for...</div> -->
34+
</div>
35+
<div>
36+
<ul class="nav nav-pills flex-md-row justify-content-end">
37+
<li class="nav-item">
38+
<a class="nav-link py-3 active" data-toggle="tab" href="#java-video">
39+
<img width="40" height="40"
40+
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg" alt="Java" />
41+
</a>
42+
</li>
43+
<li class="nav-item">
44+
<a class="nav-link py-3" data-toggle="tab" href="#javascript-video">
45+
<img width="40" height="40"
46+
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg"
47+
alt="JavaScript" />
48+
</a>
49+
</li>
50+
<li class="nav-item">
51+
<a class="nav-link py-3" data-toggle="tab" href="#python-video">
52+
<img width="40" height="40"
53+
src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg" alt="Python" />
54+
</a>
55+
</li>
56+
</ul>
3257
</div>
3358
</div>
3459
</div>
35-
<p class="button-holder">
36-
<a href="/docs/" class="bg-pink button">Get Started</a>
37-
</p>
3860
</section>
3961
</div>
4062
</div>
@@ -71,15 +93,23 @@ <h3 class="mb-0">Maintainability</h3>
7193
<h2>About the Project</h2>
7294
<section class="row">
7395
<div class="col-sm">
74-
<p><strong>Buildpacks</strong> were first conceived by Heroku in 2011. Since then, they have been adopted by Cloud Foundry and other PaaS such as Google App Engine, Gitlab, Knative, Deis, Dokku, and Drie.</p>
96+
<p><strong>Buildpacks</strong> were first conceived by Heroku in 2011. Since then, they have been adopted by Cloud
97+
Foundry and other PaaS such as Google App Engine, Gitlab, Knative, Deis, Dokku, and Drie.</p>
7598

7699
<div class="text-center mb-4">
77100
<img src="/images/history.png" alt="Buildpacks history" />
78101
</div>
79102

80-
<p>The <b>Cloud Native Buildpacks</b> project was initiated by Pivotal and Heroku in January 2018 and joined the <a href="https://www.cncf.io/">Cloud Native Computing Foundation</a> in October 2018. The project aims to unify the buildpack ecosystems with a <a href="https://github.com/buildpacks/spec/blob/main/buildpack.md" target="_blank" rel="noopener noreferrer">platform-to-buildpack contract</a> that is well-defined and that incorporates learnings from maintaining production-grade buildpacks for years at both Pivotal and Heroku.</p>
103+
<p>The <b>Cloud Native Buildpacks</b> project was initiated by Pivotal and Heroku in January 2018 and joined the
104+
<a href="https://www.cncf.io/">Cloud Native Computing Foundation</a> in October 2018. The project aims to unify
105+
the buildpack ecosystems with a <a href="https://github.com/buildpacks/spec/blob/main/buildpack.md"
106+
target="_blank" rel="noopener noreferrer">platform-to-buildpack contract</a> that is well-defined and that
107+
incorporates learnings from maintaining production-grade buildpacks for years at both Pivotal and Heroku.
108+
</p>
81109

82-
<p>Cloud Native Buildpacks embrace modern container standards, such as the OCI image format. They take advantage of the latest capabilities of these standards, such as cross-repository blob mounting and image layer "rebasing" on Docker API v2 registries.</p>
110+
<p>Cloud Native Buildpacks embrace modern container standards, such as the OCI image format. They take advantage
111+
of the latest capabilities of these standards, such as cross-repository blob mounting and image layer "rebasing"
112+
on Docker API v2 registries.</p>
83113
</div>
84114
</section>
85115
</div>

0 commit comments

Comments
 (0)