diff --git a/docs/stylesheets/custom.css b/docs/stylesheets/custom.css index c39bed0..572d7db 100644 --- a/docs/stylesheets/custom.css +++ b/docs/stylesheets/custom.css @@ -1,3 +1,4 @@ +/* General css */ .default-bg { background: none!important; background-color: var(--md-default-bg-color)!important; @@ -14,6 +15,8 @@ } +/* Card related css */ + .centered-content-grid ul.centered-content-grid__list { display: flex; flex-flow: row wrap; @@ -22,24 +25,18 @@ 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%; @@ -47,4 +44,41 @@ 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); } \ No newline at end of file diff --git a/material/overrides/home.html b/material/overrides/home.html index f985511..f30e227 100644 --- a/material/overrides/home.html +++ b/material/overrides/home.html @@ -31,16 +31,16 @@

OCI-native Image Builder

{% include ".icons/fontawesome/solid/download.svg" %}
-
+

Single Binary

One statically built binary for simplified download and install with no additional dependencies or services.

-
+
  • {% include ".icons/fontawesome/solid/repeat.svg" %} -
    -
    +
    +

    Repeatable

    Hermetically sealed environment for image builds using LXC containers so that builds are repeatable without side-effects.

    @@ -48,8 +48,8 @@

    Repeatable

  • {% include ".icons/fontawesome/solid/lock.svg" %} -
    -
    +
    +

    Unprivileged

    Build using user namespaces and avoid privileges on host.

    @@ -58,7 +58,7 @@

    Unprivileged

    {% include ".icons/fontawesome/solid/forward.svg" %}
    -
    +

    Incremental

    Build only the images necessary and rebuild only if any input changed.

    @@ -66,8 +66,8 @@

    Incremental

  • {% include ".icons/fontawesome/brands/github.svg" %} -
    -
    +
    +

    GitHub Action

    Integrated with GitHub as a build-and-push action.

    @@ -76,7 +76,7 @@

    GitHub Action

    {% include ".icons/fontawesome/brands/github-alt.svg" %}
    -
    +

    Open source

    Released as an open source project under Apache2 License.

    @@ -86,6 +86,36 @@

    Open source

    +
    +
    +
    +
    +
    +

    Keep in touch left side title

    +
    + +

    + 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. +

    +

    + Together, we can build documentation that simply works! +

    +

    Link to something else

    +
    +
    +
    +

    Right side title

    +
    + +

    First paragraph

    +

    Second paragraph

    +
    +
    +
    +
    +
    +
    {% endblock %} {% block content %}{% endblock %} {% block footer %}