Skip to content

Keep in touch section #27

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 1 commit into
base: main
Choose a base branch
from
Open

Keep in touch section #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
52 changes: 43 additions & 9 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,60 @@
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 .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;
}
}


/* 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);
}
38 changes: 34 additions & 4 deletions material/overrides/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,12 @@ <h1>OCI-native Image Builder</h1>
<div class="item_content">
<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>
<div class="item_content">
<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>
Expand All @@ -48,7 +48,7 @@ <h2 class="card_title">Repeatable</h2>
<li class="centered-content-grid__item md-typeset">
<div class="content_icon">
{% include ".icons/fontawesome/solid/lock.svg" %}
</div>
</div>
<div class="item_content">
<h2 class="card_title">Unprivileged</h2>
<p>Build using user namespaces and avoid privileges on host.</p>
Expand All @@ -66,7 +66,7 @@ <h2 class="card_title">Incremental</h2>
<li class="centered-content-grid__item md-typeset">
<div class="content_icon">
{% include ".icons/fontawesome/brands/github.svg" %}
</div>
</div>
<div class="item_content">
<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>
Expand All @@ -86,6 +86,36 @@ <h2 class="card_title">Open source</h2>
</div>
</div>
</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