Merge pull request 'Homepage: add vision and features' (#2) from realaravinth/hostea-website:master into master
ci/woodpecker/push/woodpecker Pipeline was successful
Details
ci/woodpecker/push/woodpecker Pipeline was successful
Details
Reviewed-on: https://gitea.hostea.org/Hostea/website/pulls/2pull/6/head
dachary
commit
5c63653212
|
|
@ -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! :)
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
.home-card__group {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.home-card__conatiner {
|
||||
margin: 10px auto;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.home-card__group {
|
||||
margin: auto;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
<div class="home__card-container">
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<div class="index-banner__container">
|
||||
<div class="index-banner">
|
||||
<img
|
||||
class="index-banner__logo"
|
||||
src="{{ get_url(path='/tmp-logo.png', cachebust=true) }}"
|
||||
alt="Hostea temporary logo"
|
||||
/>
|
||||
<h1 class="index-banner__title">HOSTEA</h1>
|
||||
<p class="index-banner__tagline">Gitea's Paradise</p>
|
||||
<button class="index-banner__main-action-btn">
|
||||
<a href="/service-wip" class="index-banner__main-action-link">Get Started</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
|
||||
<section class="home__features">
|
||||
<div class="home-card__group">
|
||||
{{ 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 :)") }}
|
||||
</div>
|
||||
<div class="home-card__group">
|
||||
{{ 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.") }}
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<section class="home__vision-container">
|
||||
<em class="home__vision-title">Imagine a world...</em>
|
||||
<p class="home__vision-text">
|
||||
<span class="home__vision-text-line">
|
||||
...where the services that you use for are not only reliable but also
|
||||
<i>radically</i> transparent.<br />
|
||||
</span>
|
||||
|
||||
<span class="home__vision-text-line">
|
||||
...where the software that you rely on is 100% Free.<br />
|
||||
</span>
|
||||
|
||||
<span class="home__vision-text-line">
|
||||
...where Free Software developers are treated just as fairly as they treat
|
||||
their users.<br />
|
||||
</span>
|
||||
|
||||
<span class="home__vision-text-line">
|
||||
...where freedom doens't come at the cost of comfort and reliability.<br />
|
||||
</span>
|
||||
|
||||
<span class="home__vision-text-line">
|
||||
...where Free Software is not only comparable to properiatary software in
|
||||
features but leads the charge in the ecosystem.<br />
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<h2 class="home__vision-intro-title">Meet <em>Hostea</em></h2>
|
||||
<p class="home__vision-intro-tagline">
|
||||
where software development workflows are designed to surpass industry
|
||||
standards
|
||||
</p>
|
||||
<div>
|
||||
|
||||
<button class="home__vision-aciton-btn">
|
||||
<a href="/about" class="home__vision-action-link">Learn More</a>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{% macro home_card(title, description) %}
|
||||
<div class="home-card__conatiner">
|
||||
<img
|
||||
src="{{ get_url(path='/tmp-logo.png', cachebust=true) }}"
|
||||
alt="Temporary card icon"
|
||||
class="home-card__icon"
|
||||
/>
|
||||
<h4 class="home-card__title">{{ title }}</h4>
|
||||
<p class="home-card__text">{{ description }}</p>
|
||||
</div>
|
||||
{% endmacro home_card %}
|
||||
|
|
@ -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" %}
|
||||
<div class="index__container">
|
||||
<div class="index-banner__container">
|
||||
<div class="index-banner">
|
||||
<img
|
||||
class="index-banner__logo"
|
||||
src="{{ get_url(path='/tmp-logo.png', cachebust=true) }}"
|
||||
alt="Hostea temporary logo"
|
||||
/>
|
||||
<h1 class="index-banner__title">HOSTEA</h1>
|
||||
<p class="index-banner__tagline">Gitea's Paradise</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="index__group-content">
|
||||
<div class="page__container">
|
||||
<div class="page__group-content">
|
||||
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" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue