Skip to content

Commit 5df2294

Browse files
raulkeleraulkele
committed
Initial implementation of keep-in-touch section
Signed-off-by: Raul Kele <[email protected]>
1 parent f155c37 commit 5df2294

File tree

2 files changed

+83
-19
lines changed

2 files changed

+83
-19
lines changed

‎docs/stylesheets/custom.css

+43-9
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* General css */
12
.default-bg {
23
background: none!important;
34
background-color: var(--md-default-bg-color)!important;
@@ -14,6 +15,8 @@
1415

1516
}
1617

18+
/* Card related css */
19+
1720
.centered-content-grid ul.centered-content-grid__list {
1821
display: flex;
1922
flex-flow: row wrap;
@@ -22,29 +25,60 @@
2225
margin: 0;
2326
}
2427

25-
.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item{
28+
.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item {
2629
display: flex;
2730
flex: 1 0 48%;
2831
gap: 0.6rem;
2932
margin: 0;
3033
}
31-
32-
.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item div.item_content{
33-
color: var(--md-typeset-color)!important;
34-
}
35-
36-
37-
.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item div.item_content h2.card_title{
34+
.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item div.item_content h2.card_title {
3835
font-weight: 700;
3936
margin-top: 0.175em;
4037
}
4138

42-
.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item div.content_icon{
39+
.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item div.content_icon {
4340
fill: currentcolor;
4441
background-color: var(--md-default-fg-color--lightest);
4542
border-radius: 100%;
4643
flex-shrink: 0;
4744
height: 2.2rem;
4845
padding: 0.55rem 0.4rem 0.4rem 0.4rem;
4946
width: 2.2rem;
47+
}
48+
49+
/* Column related css */
50+
.content-container-centered div.centered-content-column-wrapper {
51+
margin-bottom: 0;
52+
padding: 5.2rem 0;
53+
}
54+
55+
.content-container-centered div.centered-content-column-wrapper .content-container-column {
56+
font-weight: 400;
57+
}
58+
59+
@media screen and (min-width: 60em) {
60+
.content-container-centered div.centered-content-column-wrapper {
61+
display:flex;
62+
flex-wrap: nowrap;
63+
gap: 6.4rem;
64+
}
65+
.content-container-centered div.centered-content-column-wrapper .content-container-column {
66+
margin-top: 0;
67+
}
68+
69+
.content-container-centered div.centered-content-column-wrapper .content-container-column:first-child {
70+
flex: 2 0;
71+
}
72+
73+
.content-container-centered div.centered-content-column-wrapper .content-container-column:last-child {
74+
flex: 1 0;
75+
}
76+
}
77+
78+
79+
/* Custom rulesets based on material theme */
80+
.md-button.md-button--custom {
81+
background-color: var(--md-default-fg-color--lighter);
82+
border-color: var(--md-default-fg-color--lighter);
83+
color: var(--md-primary-bg-color);
5084
}

‎material/overrides/home.html

+40-10
Original file line numberDiff line numberDiff line change
@@ -31,25 +31,25 @@ <h1>OCI-native Image Builder</h1>
3131
<div class="content_icon">
3232
{% include ".icons/fontawesome/solid/download.svg" %}
3333
</div>
34-
<div class="item_content">
34+
<div>
3535
<h2 class="card_title">Single Binary</h2>
3636
<p>One statically built binary for simplified download and install with no additional dependencies or services.</p>
37-
</div>
37+
</div>
3838
</li>
3939
<li class="centered-content-grid__item md-typeset">
4040
<div class="content_icon">
4141
{% include ".icons/fontawesome/solid/repeat.svg" %}
42-
</div>
43-
<div class="item_content">
42+
</div>
43+
<div>
4444
<h2 class="card_title">Repeatable</h2>
4545
<p>Hermetically sealed environment for image builds using LXC containers so that builds are repeatable without side-effects.</p>
4646
</div>
4747
</li>
4848
<li class="centered-content-grid__item md-typeset">
4949
<div class="content_icon">
5050
{% include ".icons/fontawesome/solid/lock.svg" %}
51-
</div>
52-
<div class="item_content">
51+
</div>
52+
<div>
5353
<h2 class="card_title">Unprivileged</h2>
5454
<p>Build using user namespaces and avoid privileges on host.</p>
5555
</div>
@@ -58,16 +58,16 @@ <h2 class="card_title">Unprivileged</h2>
5858
<div class="content_icon">
5959
{% include ".icons/fontawesome/solid/forward.svg" %}
6060
</div>
61-
<div class="item_content">
61+
<div>
6262
<h2 class="card_title">Incremental</h2>
6363
<p>Build only the images necessary and rebuild only if any input changed.</p>
6464
</div>
6565
</li>
6666
<li class="centered-content-grid__item md-typeset">
6767
<div class="content_icon">
6868
{% include ".icons/fontawesome/brands/github.svg" %}
69-
</div>
70-
<div class="item_content">
69+
</div>
70+
<div>
7171
<h2 class="card_title">GitHub Action</h2>
7272
<p>Integrated with GitHub as a build-and-push <a href="https://github.com/marketplace/actions/stacker-build-and-push-action">action</a>.</p>
7373
</div>
@@ -76,7 +76,7 @@ <h2 class="card_title">GitHub Action</h2>
7676
<div class="content_icon">
7777
{% include ".icons/fontawesome/brands/github-alt.svg" %}
7878
</div>
79-
<div class="item_content">
79+
<div>
8080
<h2 class="card_title">Open source</h2>
8181
<p>Released as an open source project under Apache2 License.</p>
8282
</div>
@@ -86,6 +86,36 @@ <h2 class="card_title">Open source</h2>
8686
</div>
8787
</div>
8888
</section>
89+
<section class="tx-container default-bg">
90+
<div class="md-grid md-typeset">
91+
<div class="content-container-centered">
92+
<div class="centered-content-column-wrapper">
93+
<div class="content-container-column">
94+
<h1>Keep in touch left side title</h1>
95+
<div class="column-content">
96+
<!-- Paragraphs can be added as desired -->
97+
<p>
98+
By joining the Insiders program, you'll get immediate access to the latest features while also helping support the ongoing development of Material for MkDocs.
99+
hanks to our awesome sponsors, this project is actively maintained and kept in good shape.
100+
</p>
101+
<p>
102+
Together, we can build documentation that simply works!
103+
</p>
104+
<p><a class="md-button md-button--custom">Link to something else</a></p>
105+
</div>
106+
</div>
107+
<div class="content-container-column">
108+
<h1>Right side title</h1>
109+
<div class="column-content">
110+
<!-- Paragraphs can be added as desired -->
111+
<p>First paragraph</p>
112+
<p>Second paragraph</p>
113+
</div>
114+
</div>
115+
</div>
116+
</div>
117+
</div>
118+
</section>
89119
{% endblock %}
90120
{% block content %}{% endblock %}
91121
{% block footer %}

0 commit comments

Comments
 (0)