diff --git a/sass/components/_fullscreen.scss b/sass/components/_fullscreen.scss new file mode 100644 index 0000000..3f6c693 --- /dev/null +++ b/sass/components/_fullscreen.scss @@ -0,0 +1,5 @@ +@mixin fullscreen { + height: 100vh; + min-height: 500px; + max-height: 800px; +} diff --git a/sass/home/main.scss b/sass/home/main.scss index 92d5e3d..c345cba 100644 --- a/sass/home/main.scss +++ b/sass/home/main.scss @@ -1,6 +1,7 @@ @import "./card-main"; @import "./service-card-main"; @import "./vision"; +@import "../components/fullscreen"; $heading-letter-spacing: 20px; .index-banner__container { @@ -8,36 +9,50 @@ $heading-letter-spacing: 20px; display: flex; flex-direction: column; //background-color: #d1875a; - background-color: #3c3c3c; - background-color: #58181f; + // background-color: #3c3c3c; + // background-color: #58181f; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; - min-height: 400px; + @include fullscreen; + flex-grow: 1; } .index-banner { margin: auto; + width: 80%; display: flex; - flex-direction: column; + // flex-direction: column; + justify-content: space-between; +} + +.index-banner__content-container { + // height: 300px; + li { + // color: white; + } +} +.index-banner__logo-container { + margin: center; + align-items: center; + display: flex; + width: 500px; } .index-banner__title { margin: auto; font-style: none; - color: #fff; - letter-spacing: $heading-letter-spacing; - font-size: 3rem; - font-weight: 300; + //color: #fff; } .index-banner__tagline { margin: auto; - color: #fff; + // color: #fff; // font-size: 1.4rem; } .index-banner__title-container { display: flex; } + .index-banner__logo { width: 120px; margin: auto; @@ -48,17 +63,26 @@ $heading-letter-spacing: 20px; display: block; display: block; font-weight: 400; - margin: 20px auto; padding: 15px; border: none; + margin: 20px 0; + background-color: green; } .index-banner__main-action-link { - color: black !important; + color: white !important; } .index-banner__main-action-btn:hover { - background-color: lightgray; + // background-color: lightgray; +} + +.index-banner__features-list { + margin: 20px; +} + +.index-banner__features { + margin: 10px 0; } .home__features { @@ -75,6 +99,11 @@ $page-content-width: 80%; .index__group-content { .page__container { width: $page-content-width; + @include fullscreen; + height: 90vh !important; + display: flex; + flex-direction: column; + justify-content: space-around; } } @@ -97,3 +126,25 @@ $page-content-width: 80%; font-weight: 400; font-size: 1.7rem; } + +.action-call__button { + display: block; + display: block; + font-weight: 400; + padding: 15px; + border: none; + margin: 20px 0; + background-color: #fff; +} + +.action-call__button:hover { + background-color: lightgray; +} + +.action-call_link { + color: #000 !important; +} + +.action-call_link:hover { + text-decoration: none !important; +} diff --git a/sass/home/mobile.scss b/sass/home/mobile.scss index 9f15718..5a14ed7 100644 --- a/sass/home/mobile.scss +++ b/sass/home/mobile.scss @@ -1,5 +1,6 @@ @import "./card-mobile"; @import "./vision-mobile"; +@import "./service-card-mobile"; .home__container { max-height: 100vh; @@ -14,15 +15,26 @@ margin: auto; } - .index-banner__title { font-size: 2.5rem; margin: auto; } - .index__group-content { .page__container { width: 90%; } - } +} + +.index-banner__logo-container { + display: none; +} + +.action-call__margin-container { + flex-direction: column; + width: 85%; +} + +.action-call__prompt { + text-align: center; +} diff --git a/sass/page/mobile.scss b/sass/page/mobile.scss index 6e4f982..926d65e 100644 --- a/sass/page/mobile.scss +++ b/sass/page/mobile.scss @@ -17,3 +17,11 @@ margin-top: 0px; margin-bottom: 10px; } + + +.page__container--split { + width: 85%; + height: auto !important; + min-height: auto !important; + max-height: none !important; +} diff --git a/templates/home/components/_banner-new.html b/templates/home/components/_banner-new.html new file mode 100644 index 0000000..a9c051b --- /dev/null +++ b/templates/home/components/_banner-new.html @@ -0,0 +1,36 @@ +
+
+ +
+

+ Free Forge Ecosystem for Free Developers +

+

Hostea is a self-hostable libre software development + suite comprising Gitea, Woodpecker CI, Librepages and GitPad with payments integration.

+
    +
  • 100% Free Software
    • +
  • Fully Self-Hostable
    • +
  • Observable and Reliable
    • +
  • Federation when available
    • +
  • Radically Transparent
    • +
  • Horizontal Community
    • +
  • Run Hostea and become a service provider!
    • +
+ +
+ +
+ +
+ + +
+
diff --git a/templates/index.html b/templates/index.html index 2e81073..525ade8 100644 --- a/templates/index.html +++ b/templates/index.html @@ -9,28 +9,29 @@ and static pages with upgrades, backups and 24/7 monitoring" %} {% set title = endblock meta %} {% block content %} {% include "home/components/_banner-new.html" %} -
+
-
- {% include "home/components/_vision.html" %} - -
-
-
-

Need an indepandent forge? Talk to an expert!

- +
+
+

Need an indepandent forge? Talk to an expert!

+ +
-
- -
- {% include "home/components/_services-new.html" %} -
-
+
+ {% include "home/components/_vision.html" %} +
+
+ {{ card_macro::home_card(title="Radically Transparent", description="Hostea is radically transparent, we hold discussions in the open and publish all expenses down to the last penny") }} + {{ card_macro::home_card(title="100% Free Software", description="All Hostea components are Free, you are welcome to download and even sell Hostea!") }} + {{ card_macro::home_card(title="Horizontal Community", description="Hostea development is lead by a horizontal community minded individuals and organisations with a common goal to advance Free Software.") }} +
+
+
+ {% include "home/components/_services-new.html" %} {% include "home/components/_features.html" %} -
-
+
-
+ {% endblock content %}