diff --git a/content/service-wip/index.md b/content/service-wip/index.md new file mode 100644 index 0000000..5586aba --- /dev/null +++ b/content/service-wip/index.md @@ -0,0 +1,7 @@ +--- +title: "Service Work in Progress" +draft: false +--- + +Thank you for your interest in Hostea, we are a work-in-progress. [Come +say hi](/contact) and join the conversion! :) diff --git a/sass/defaults.scss b/sass/defaults.scss new file mode 100644 index 0000000..4e38a60 --- /dev/null +++ b/sass/defaults.scss @@ -0,0 +1,70 @@ +* { + padding: 0; + margin: 0; + //font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Roboto", + // "Segoe UI", Helvetica, Arial, sans-serif; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; +} + +a { + text-decoration: none; +} + +a:hover, button:hover { + cursor: pointer; +} + +a, +a:visited { + color: rgb(0, 86, 179); +} + +.base { + min-height: 100vh; + display: flex; + flex-direction: column; + width: 100%; +} + +.main__content-container { + display: flex; + flex-direction: column; + min-height: 100%; + justify-content: space-between; + flex: 2; +} + +p, +h1, +h2, +h3, +h4, +li, +ol, +ul { + color: #333; +} + +main { + width: 100%; +} + +blockquote { + border-left: 0.3em solid rgba(55, 55, 55, 0.4); + margin-bottom: 16px; + //padding-left: 20px; + padding: 0 1em; + color: #707070; + + p, + h1, + h2, + h3, + h4, + li, + ol, + ul { + color: inherit; + } +} diff --git a/sass/home/card-main.scss b/sass/home/card-main.scss new file mode 100644 index 0000000..ebb36da --- /dev/null +++ b/sass/home/card-main.scss @@ -0,0 +1,29 @@ +.home-card__group { + display: flex; + margin: 50px auto; +} + +.home-card__conatiner { + background-color: #eee; + margin: 10px 30px; + padding: 10px; + border-radius: 5px; + width: 30%; +} + +.home-card__icon { + width: 100px; + height: 100px; + margin: auto; + border-radius: 100px; +} + +.home-card__title { + margin: auto; + text-align: center; +} + +.home-card__text { + font-size: 0.7rem; + text-align: center; +} diff --git a/sass/home/card-mobile.scss b/sass/home/card-mobile.scss new file mode 100644 index 0000000..45745bf --- /dev/null +++ b/sass/home/card-mobile.scss @@ -0,0 +1,12 @@ +.home-card__group { + flex-direction: column; +} + +.home-card__conatiner { + margin: 10px auto; + width: 80%; +} + +.home-card__group { + margin: auto; +} diff --git a/sass/home/main.scss b/sass/home/main.scss index 6013205..0437340 100644 --- a/sass/home/main.scss +++ b/sass/home/main.scss @@ -1,3 +1,6 @@ +@import "./card-main"; +@import "./vision"; + $heading-letter-spacing: 20px; .index-banner__container { width: 100%; @@ -7,7 +10,7 @@ $heading-letter-spacing: 20px; background-color: #3c3c3c; background-color: #58181f; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; - min-height: 300px; + min-height: 400px; } .index-banner { @@ -22,13 +25,13 @@ $heading-letter-spacing: 20px; color: #fff; letter-spacing: $heading-letter-spacing; font-size: 3rem; - font-weight: 400; + font-weight: 300; } .index-banner__tagline { margin: auto; color: #fff; - font-size: 1.4rem; + // font-size: 1.4rem; } .index-banner__title-container { @@ -39,3 +42,20 @@ $heading-letter-spacing: 20px; margin: auto; border-radius: 20px; } + +.index-banner__main-action-btn { + display: block; + display: block; + font-weight: 400; + margin: 20px auto; + padding: 15px; + border: none; +} + +.index-banner__main-action-link{ + color: black !important; +} + +.index-banner__main-action-btn:hover { + background-color: lightgray; +} diff --git a/sass/home/mobile.scss b/sass/home/mobile.scss index 9351430..7235205 100644 --- a/sass/home/mobile.scss +++ b/sass/home/mobile.scss @@ -1,3 +1,5 @@ +@import "./card-mobile"; + .home__container { max-height: 100vh; height: 100vh; @@ -6,3 +8,13 @@ .home__name { font-size: 2rem; } + +.index-banner { + margin: auto; +} + + +.index-banner__title { + font-size: 2.5rem; + margin: auto; +} diff --git a/sass/home/vision.scss b/sass/home/vision.scss new file mode 100644 index 0000000..8d98e70 --- /dev/null +++ b/sass/home/vision.scss @@ -0,0 +1,33 @@ +.home__vision-text-line { + font-size: 0.8rem; + font-style: italic; +} + +.home__vision-intro-title { + text-align: center; +} + +.home__vision-intro-tagline { + font-size: 0.9rem; + margin: auto; + display: block; + text-align: center; +} + +.home__vision-aciton-btn { + display: block; + font-weight: 400; + margin: 20px auto; + padding: 15px; + border: none; + background-color: black; + color: #fff; +} + +.home__vision-aciton-btn:hover { + background-color: lightgray; +} + +.home__vision-action-link { + color: white !important; +} diff --git a/sass/main.scss b/sass/main.scss index d900c82..0132e51 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -1,3 +1,4 @@ +@import "./defaults"; @import "./home/main"; @import "./nav/main"; @import "./footer/main"; @@ -5,73 +6,6 @@ @import "./blog/main"; @import "./tag/main"; -* { - padding: 0; - margin: 0; - //font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Roboto", - // "Segoe UI", Helvetica, Arial, sans-serif; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; - font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; -} - -a { - text-decoration: none; -} - -a, -a:visited { - color: rgb(0, 86, 179); -} - -.base { - min-height: 100vh; - display: flex; - flex-direction: column; - width: 100%; -} - -.main__content-container { - display: flex; - flex-direction: column; - min-height: 100%; - justify-content: space-between; - flex: 2; -} - -p, -h1, -h2, -h3, -h4, -li, -ol, -ul { - color: #333; -} - -main { - width: 100%; -} - -blockquote { - border-left: 0.3em solid rgba(55, 55, 55, 0.4); - margin-bottom: 16px; - //padding-left: 20px; - padding: 0 1em; - color: #707070; - - p, - h1, - h2, - h3, - h4, - li, - ol, - ul { - color: inherit; - } -} - .zola-anchor { margin-left: 5px; } diff --git a/templates/card.html b/templates/card.html deleted file mode 100644 index cdf7503..0000000 --- a/templates/card.html +++ /dev/null @@ -1,3 +0,0 @@ -
- -
diff --git a/templates/home/components/_banner.html b/templates/home/components/_banner.html new file mode 100644 index 0000000..772178d --- /dev/null +++ b/templates/home/components/_banner.html @@ -0,0 +1,14 @@ +
+
+ +

HOSTEA

+

Gitea's Paradise

+ +
+
diff --git a/templates/home/components/_features.html b/templates/home/components/_features.html new file mode 100644 index 0000000..5413b21 --- /dev/null +++ b/templates/home/components/_features.html @@ -0,0 +1,13 @@ + +
+
+ {{ 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="Todards Forge Federation 🚀", description="Hostea developers are also leading the charge in implementing ecosystem-wide federation, we really care about software development :)") }} +
+
+ {{ card_macro::home_card(title="Observable and Reliabile", description="All Hostea software come with monitoring and backups configured for high, observable reliability") }} + {{ card_macro::home_card(title="Fully Self-Hostable ", description="Like to get your hands dirty? We got you covered! Hostea comes with infrastructure as code and documentation to make self-hostable a first class experience") }} + {{ 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.") }} +
+
diff --git a/templates/home/components/_vision.html b/templates/home/components/_vision.html new file mode 100644 index 0000000..d17e1c2 --- /dev/null +++ b/templates/home/components/_vision.html @@ -0,0 +1,39 @@ +
+ Imagine a world... +

+ + ...where the services that you use for are not only reliable but also + radically transparent.
+ + + + ...where the software that you rely on is 100% Free.
+ + + + ...where Free Software developers are treated just as fairly as they treat + their users.
+ + + + ...where freedom doens't come at the cost of comfort and reliability.
+ + + + ...where Free Software is not only comparable to properiatary software in + features but leads the charge in the ecosystem.
+ +

+ +

Meet Hostea

+

+ where software development workflows are designed to surpass industry + standards +

+
+ + +
+
diff --git a/templates/home/components/home-card.html b/templates/home/components/home-card.html new file mode 100644 index 0000000..65c88a5 --- /dev/null +++ b/templates/home/components/home-card.html @@ -0,0 +1,11 @@ +{% macro home_card(title, description) %} +
+ Temporary card icon +

{{ title }}

+

{{ description }}

+
+{% endmacro home_card %} diff --git a/templates/index.html b/templates/index.html index bce7e24..edff6d3 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,32 +1,22 @@ -{% import "macros.html" as macros %} {% extends "base.html" %} {% block meta %} -{% set description = "Hostea: Dedicated managed Gitea hosting, including CI/CD and static pages with upgrades, backups and 24/7 monitoring" %} -{% set title = "Home" %} -{{ macros::get_meta_tags(title=title, description=description) }} -{% endblock meta %} {% block content %} +{% import "macros.html" as macros %} +{% import "home/components/home-card.html" as card_macro %} +{% extends "base.html" %} {% block meta %} +{% set description = "Hostea: Dedicated managed Gitea hosting, including CI/CD +and static pages with upgrades, backups and 24/7 monitoring" %} {% set title = +"Home" %} {{ macros::get_meta_tags(title=title, description=description) }} {% +endblock meta %} {% block content %} +{% include "home/components/_banner.html" %}
-
-
- -

HOSTEA

-

Gitea's Paradise

-
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit corporis - nihil laboriosam sequi aliquam unde id, aut numquam aperiam ipsam, iusto et - quas voluptatum voluptas. Quis nemo consequatur vel totam! + {% include "home/components/_vision.html" %} + {% include "home/components/_features.html" %}
-
{% endblock content %}