forked from Hostea/website
Merge pull request 'Homepage: add vision and features' (#2) from realaravinth/hostea-website:master into master
Reviewed-on: https://gitea.hostea.org/Hostea/website/pulls/2change-homepage-tagline
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;
|
$heading-letter-spacing: 20px;
|
||||||
.index-banner__container {
|
.index-banner__container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -7,7 +10,7 @@ $heading-letter-spacing: 20px;
|
||||||
background-color: #3c3c3c;
|
background-color: #3c3c3c;
|
||||||
background-color: #58181f;
|
background-color: #58181f;
|
||||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||||
min-height: 300px;
|
min-height: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.index-banner {
|
.index-banner {
|
||||||
|
@ -22,13 +25,13 @@ $heading-letter-spacing: 20px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
letter-spacing: $heading-letter-spacing;
|
letter-spacing: $heading-letter-spacing;
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
font-weight: 400;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
.index-banner__tagline {
|
.index-banner__tagline {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 1.4rem;
|
// font-size: 1.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.index-banner__title-container {
|
.index-banner__title-container {
|
||||||
|
@ -39,3 +42,20 @@ $heading-letter-spacing: 20px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
border-radius: 20px;
|
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 {
|
.home__container {
|
||||||
max-height: 100vh;
|
max-height: 100vh;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
@ -6,3 +8,13 @@
|
||||||
.home__name {
|
.home__name {
|
||||||
font-size: 2rem;
|
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 "./home/main";
|
||||||
@import "./nav/main";
|
@import "./nav/main";
|
||||||
@import "./footer/main";
|
@import "./footer/main";
|
||||||
|
@ -5,73 +6,6 @@
|
||||||
@import "./blog/main";
|
@import "./blog/main";
|
||||||
@import "./tag/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 {
|
.zola-anchor {
|
||||||
margin-left: 5px;
|
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 %}
|
{% import "macros.html" as macros %}
|
||||||
{% set description = "Hostea: Dedicated managed Gitea hosting, including CI/CD and static pages with upgrades, backups and 24/7 monitoring" %}
|
{% import "home/components/home-card.html" as card_macro %}
|
||||||
{% set title = "Home" %}
|
|
||||||
{{ macros::get_meta_tags(title=title, description=description) }}
|
|
||||||
{% endblock meta %} {% block content %}
|
|
||||||
|
|
||||||
|
{% 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__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="index__group-content">
|
||||||
<div class="page__container">
|
<div class="page__container">
|
||||||
<div class="page__group-content">
|
<div class="page__group-content">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit corporis
|
{% include "home/components/_vision.html" %}
|
||||||
nihil laboriosam sequi aliquam unde id, aut numquam aperiam ipsam, iusto et
|
{% include "home/components/_features.html" %}
|
||||||
quas voluptatum voluptas. Quis nemo consequatur vel totam!
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% endblock content %}
|
{% endblock content %}
|
||||||
|
|
Loading…
Reference in New Issue