Skip to content

Feature section #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Feature section #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
38453a7
Initial implementation of keep-in-touch section
raulkele Nov 24, 2022
58dfb8c
wip
raulkele Nov 25, 2022
136c97e
implemented feature section template
raulkele Nov 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 82 additions & 10 deletions docs/stylesheets/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* General css */
.default-bg {
background: none!important;
background-color: var(--md-default-bg-color)!important;
Expand All @@ -14,6 +15,8 @@

}

/* Card related css */

.centered-content-grid ul.centered-content-grid__list {
display: flex;
flex-flow: row wrap;
Expand All @@ -22,29 +25,98 @@
margin: 0;
}

.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item{
.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item {
display: flex;
flex: 1 0 48%;
gap: 0.6rem;
margin: 0;
}

.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item div.item_content{
color: var(--md-typeset-color)!important;
}


.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item div.item_content h2.card_title{
.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item div.item_content h2.card_title {
font-weight: 700;
margin-top: 0.175em;
}

.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item div.content_icon{
.centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item div.content_icon {
fill: currentcolor;
background-color: var(--md-default-fg-color--lightest);
border-radius: 100%;
flex-shrink: 0;
height: 2.2rem;
padding: 0.55rem 0.4rem 0.4rem 0.4rem;
width: 2.2rem;
}
}

/* Column related css */
.content-container-centered div.centered-content-column-wrapper {
margin-bottom: 0;
padding: 5.2rem 0;
}

.content-container-centered div.centered-content-column-wrapper .content-container-column {
font-weight: 400;
}

@media screen and (min-width: 60em) {
.content-container-centered div.centered-content-column-wrapper {
display:flex;
flex-wrap: nowrap;
gap: 6.4rem;
}
.content-container-centered div.centered-content-column-wrapper .content-container-column {
margin-top: 0;
}

.content-container-centered div.centered-content-column-wrapper .content-container-column:first-child {
flex: 2 0;
}

.content-container-centered div.centered-content-column-wrapper .content-container-column:last-child {
flex: 1 0;
}
}

/* Feature related css */
.content-container-centered .feature-container {
margin: 2em 0;
}

.content-container-centered .feature-container figure.feature-content {
display: flex;
flex: 1 0 48%;
flex-flow: row nowrap;
gap: 3.2rem;
margin: 0 0 3.2rem;
text-align: left;
max-width: 100%;
width: 100%;
}

.content-container-centered .feature-container figure.feature-content figcaption {
margin-top: 0.8rem;
font-style: normal;
margin:0;
max-width: none;
}

.content-container-centered .feature-container figure.feature-content figcaption h2 {
font-weight: 700;
margin-top: 0.175em;
}

.content-container-centered .feature-container figure.feature-content a {
display: block;
flex-shrink: 0;
}

@media screen and (min-width: 60em) {
.content-container-centered .feature-container figure.feature-content:nth-child(odd) {
flex-direction: row-reverse;
}
}

/* Custom rulesets based on material theme */
.md-button.md-button--custom {
background-color: var(--md-default-fg-color--lighter);
border-color: var(--md-default-fg-color--lighter);
color: var(--md-primary-bg-color);
}
105 changes: 95 additions & 10 deletions material/overrides/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
{% block tabs %}
{{ super() }}
<style>.md-header{position:initial}.md-main__inner{margin:0}.md-content{display:none}@media screen and (min-width:60em){.md-sidebar--secondary{display:none}}@media screen and (min-width:76.25em){.md-sidebar--primary{display:none}}</style>
<!-- Hero section -->
<section class="tx-container">
<div class="md-grid md-typeset">
<div class="tx-hero">
Expand All @@ -21,6 +22,7 @@ <h1>Stacker Build</h1>
</div>
</div>
</section>
<!-- Cards section -->
<section class="tx-container default-bg">
<div class="md-grid md-typeset">
<div class="content-container-centered ">
Expand All @@ -31,25 +33,25 @@ <h1>OCI-native Image Builder</h1>
<div class="content_icon">
{% include ".icons/fontawesome/solid/download.svg" %}
</div>
<div class="item_content">
<div>
<h2 class="card_title">Single Binary</h2>
<p>One statically built binary for simplified download and install with no additional dependencies or services.</p>
</div>
</div>
</li>
<li class="centered-content-grid__item md-typeset">
<div class="content_icon">
{% include ".icons/fontawesome/solid/repeat.svg" %}
</div>
<div class="item_content">
</div>
<div>
<h2 class="card_title">Repeatable</h2>
<p>Hermetically sealed environment for image builds using LXC containers so that builds are repeatable without side-effects.</p>
</div>
</li>
<li class="centered-content-grid__item md-typeset">
<div class="content_icon">
{% include ".icons/fontawesome/solid/lock.svg" %}
</div>
<div class="item_content">
</div>
<div>
<h2 class="card_title">Unprivileged</h2>
<p>Build using user namespaces and avoid privileges on host.</p>
</div>
Expand All @@ -58,16 +60,16 @@ <h2 class="card_title">Unprivileged</h2>
<div class="content_icon">
{% include ".icons/fontawesome/solid/forward.svg" %}
</div>
<div class="item_content">
<div>
<h2 class="card_title">Incremental</h2>
<p>Build only the images necessary and rebuild only if any input changed.</p>
</div>
</li>
<li class="centered-content-grid__item md-typeset">
<div class="content_icon">
{% include ".icons/fontawesome/brands/github.svg" %}
</div>
<div class="item_content">
</div>
<div>
<h2 class="card_title">GitHub Action</h2>
<p>Integrated with GitHub as a build-and-push <a href="https://github.com/marketplace/actions/stacker-build-and-push-action">action</a>.</p>
</div>
Expand All @@ -76,7 +78,7 @@ <h2 class="card_title">GitHub Action</h2>
<div class="content_icon">
{% include ".icons/fontawesome/brands/github-alt.svg" %}
</div>
<div class="item_content">
<div>
<h2 class="card_title">Open source</h2>
<p>Released as an open source project under Apache2 License.</p>
</div>
Expand All @@ -86,6 +88,89 @@ <h2 class="card_title">Open source</h2>
</div>
</div>
</section>
<!-- feature section -->
<section class="tx-container default-bg">
<div class="md-grid md-typeset">
<div class="content-container-centered">
<h1>More than just building container images</h1>
<div class="feature-container">
<!-- Each figure represents a text content + image-link combo -->
<!-- Each figure can be a different image and link to documentation article -->
<!-- Add more figures as desired -->
<figure class="feature-content">
<a href="get_started/get_stacker/">
<img src="assets/images/illustrations/home.png" alt="figure" width="500" height="3290" draggable="false">
</a>
<figcaption>
<h2>Figure Title</h2>
<!-- Add or remove paragraphs as desired -->
<p>
Material for MkDocs makes your documentation instantly searchable with zero effort:
say goodbye to costly third-party crawler-based solutions that can take hours to update.
Ship your documentation with a highly customizable and blazing fast search running entirely in the user's browser at no extra cost.
</p>
<p>
Even better: search inside code blocks, exclude specific sections or entire pages,
boost important pages in the results and build searchable documentation that works offline.
</p>
<p><a href="get_started/get_stacker/">Link to something else</a></p>
</figcaption>
</figure>
<figure class="feature-content">
<a href="get_started/get_stacker/">
<img src="assets/images/illustrations/home.png" alt="figure" width="500" height="3290" draggable="false">
</a>
<figcaption>
<h2>Figure Title</h2>
<!-- Add or remove paragraphs as desired -->
<p>
Material for MkDocs makes your documentation instantly searchable with zero effort:
say goodbye to costly third-party crawler-based solutions that can take hours to update.
Ship your documentation with a highly customizable and blazing fast search running entirely in the user's browser at no extra cost.
</p>
<p>
Even better: search inside code blocks, exclude specific sections or entire pages,
boost important pages in the results and build searchable documentation that works offline.
</p>
<p><a href="get_started/get_stacker/">Link to something else</a></p>
</figcaption>
</figure>
</div>

</div>
</div>
</section>
<!-- keep in touch section -->
<section class="tx-container default-bg">
<div class="md-grid md-typeset">
<div class="content-container-centered">
<div class="centered-content-column-wrapper">
<div class="content-container-column">
<h1>Keep in touch left side title</h1>
<div class="column-content">
<!-- Paragraphs can be added as desired -->
<p>
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.
hanks to our awesome sponsors, this project is actively maintained and kept in good shape.
</p>
<p>
Together, we can build documentation that simply works!
</p>
<p><a class="md-button md-button--custom">Link to something else</a></p>
</div>
</div>
<div class="content-container-column">
<h1>Right side title</h1>
<div class="column-content">
<!-- Paragraphs can be added as desired -->
<p>First paragraph</p>
<p>Second paragraph</p>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block content %}{% endblock %}
{% block footer %}
Expand Down