Commit 698e8c41 authored by Thomas Boni's avatar Thomas Boni
Browse files

add style to the landing page

parent 662edef9

docs/css/extra.css

+149 −21
Original line number Diff line number Diff line
@@ -19,26 +19,154 @@ 
  width:20%

}



.tx-container {

  padding-top: px2rem(20px);

  background:

    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(0, 0%, 100%, 1)' /></svg>") no-repeat bottom,

    linear-gradient(

      to bottom,

      var(--md-primary-fg-color),

      hsla(280, 67%, 55%, 1) 99%,

      var(--md-default-bg-color) 99%

    );

/* Landing Page */



  // Adjust background for slate theme

  [data-md-color-scheme="slate"] & {

    background:

      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(232, 15%, 21%, 1)' /></svg>") no-repeat bottom,

      linear-gradient(

        to bottom,

        var(--md-primary-fg-color),

        hsla(280, 67%, 55%, 1) 99%,

        var(--md-default-bg-color) 99%

      );

.md-typeset .tx-insiders {

    color: #e91e63;

}

.md-typeset .tx-switch button {

    cursor: pointer;

    transition: opacity 250ms;

}

.md-typeset .tx-switch button:hover {

    opacity: 0.75;

}

.md-typeset .tx-switch button > code {

    display: block;

    color: var(--md-primary-bg-color);

    background-color: var(--md-primary-fg-color);

}

.md-typeset .tx-columns {

    -moz-columns: 2;

    columns: 2;

}

.md-typeset .tx-columns > * {

    -moz-column-break-inside: avoid;

    break-inside: avoid;

}

.md-announce a,

.md-announce a:focus,

.md-announce a:hover {

    color: currentColor;

}

.md-announce strong {

    white-space: nowrap;

}

.md-announce .twitter {

    margin-left: 0.2em;

    color: #00acee;

}

.tx-container {

    padding-top: 1rem;

    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(0, 0%, 100%, 1)' /></svg>")

            no-repeat bottom,

        linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%);

}

[data-md-color-scheme="slate"] .tx-container {

    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: hsla(232, 15%, 21%, 1)' /></svg>")

            no-repeat bottom,

        linear-gradient(to bottom, var(--md-primary-fg-color), #a63fd9 99%, var(--md-default-bg-color) 99%);

}

@-webkit-keyframes tx-heart {

    0%,

    40%,

    80%,

    100% {

        transform: scale(1);

    }

    20%,

    60% {

        transform: scale(1.15);

    }

}

@keyframes tx-heart {

    0%,

    40%,

    80%,

    100% {

        transform: scale(1);

    }

    20%,

    60% {

        transform: scale(1.15);

    }

}

.tx-content__footer {

    margin-top: 1rem;

    text-align: center;

}

.tx-content__footer a {

    display: inline-block;

    color: #e91e63;

    transition: transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1), color 125ms;

}

.tx-content__footer a:focus,

.tx-content__footer a:hover {

    transform: scale(1.2);

}

.tx-content__footer hr {

    display: inline-block;

    width: 2rem;

    margin: 1em;

    vertical-align: middle;

    background-color: currentColor;

    border: none;

}

.tx-heart {

    -webkit-animation: tx-heart 1000ms infinite;

    animation: tx-heart 1000ms infinite;

}

.tx-hero {

    margin: 0 0.8rem;

    color: var(--md-primary-bg-color);

}

.tx-hero h1 {

    margin-bottom: 1rem;

    color: currentColor;

    font-weight: 700;

}

@media screen and (max-width: 29.9375em) {

    .tx-hero h1 {

        font-size: 1.4rem;

    }

}

.tx-hero__content {

    padding-bottom: 6rem;

}

@media screen and (min-width: 60em) {

    .tx-hero {

        display: flex;

        align-items: stretch;

    }

    .tx-hero__content {

        max-width: 19rem;

        margin-top: 3.5rem;

        padding-bottom: 14vw;

    }

    .tx-hero__image {

        order: 1;

        width: 38rem;

        transform: translateX(4rem);

    }

}

@media screen and (min-width: 76.25em) {

    .tx-hero__image {

        transform: translateX(8rem);

    }

}

.tx-hero .md-button {

    margin-top: 0.5rem;

    margin-right: 0.5rem;

    color: var(--md-primary-bg-color);

}

.tx-hero .md-button:hover,

.tx-hero .md-button:focus {

    color: var(--md-default-bg-color);

    background-color: var(--md-accent-fg-color);

    border-color: var(--md-accent-fg-color);

}

.tx-hero .md-button--primary {

    color: #894da8;

    background-color: var(--md-primary-bg-color);

    border-color: var(--md-primary-bg-color);

}

docs/images/illustration.png

+21.3 KiB (81.8 KiB)
Loading image diff...

docs/index.md

+1 −1
Original line number Diff line number Diff line 
---

template: home.html

title: Material for MkDocs

title: Go2Scale HUB

---

overrides/home.html

+3 −6
Original line number Diff line number Diff line
@@ -9,16 +9,13 @@ 
          <img src="images/illustration.png" alt="" width="" height="" draggable="false">

        </div>

        <div class="tx-hero__content">

          <h1>{{ config.landing_page.title }}</h1>

          <p>{{ config.landing_page.description }}</p>

          <h1>{{ config.extra.landing_page.title }}</h1>

          <p>{{ config.extra.landing_page.description }}</p>

          <a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | e }}" class="md-button md-button--primary">

            Get started

          </a>

          <a href="https://discord.gg/5QKpGqR" title="{{ page.next_page.title | e }}" class="md-button">

            Join the community

          </a>

          <a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}" class="md-button md-button--primary">

            Go to Gitlab

            Join Community

          </a>

        </div>

      </div>