feat: refresh banner styling
ci/woodpecker/pr/woodpecker Pipeline failed
Details
ci/woodpecker/pr/woodpecker Pipeline failed
Details
parent
e5ba11643d
commit
0e34af59be
GPG Key ID:
AD9F0F08E855ED88
|
|
@ -0,0 +1,5 @@
|
|||
@mixin fullscreen {
|
||||
height: 100vh;
|
||||
min-height: 500px;
|
||||
max-height: 800px;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
<div class="index-banner__container">
|
||||
<div class="index-banner">
|
||||
|
||||
<div class="index-banner__content-container">
|
||||
<h1 class="index-banner__title">
|
||||
Free Forge Ecosystem for Free Developers
|
||||
</h1>
|
||||
<p class="index-banner__tagline">Hostea is a self-hostable libre software development
|
||||
suite comprising Gitea, Woodpecker CI, Librepages and GitPad with payments integration.</p>
|
||||
<ul class="index-banner__features-list">
|
||||
<li class="index-banner__features">100% Free Software</li>
|
||||
<li class="index-banner__features">Fully Self-Hostable</li>
|
||||
<li class="index-banner__features">Observable and Reliable</li>
|
||||
<li class="index-banner__features">Federation when available</li>
|
||||
<li class="index-banner__features">Radically Transparent</li>
|
||||
<li class="index-banner__features">Horizontal Community</li>
|
||||
<li class="index-banner__features">Run Hostea and become a service provider!</li>
|
||||
</ul>
|
||||
<button class="index-banner__main-action-btn">
|
||||
<a href="/service-wip" class="index-banner__main-action-link"
|
||||
>Get Started</a
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="index-banner__logo-container">
|
||||
<img
|
||||
class="index-banner__logo"
|
||||
src="{{ get_url(path='/tmp-logo.png', cachebust=true) }}"
|
||||
alt="Hostea temporary logo"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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" %}
|
||||
<div class="index__container">
|
||||
<!-- <div class="index__container"> -->
|
||||
<div class="index__group-content">
|
||||
<div class="page__group-content">
|
||||
<div class="page__container">
|
||||
{% include "home/components/_vision.html" %}
|
||||
|
||||
</div>
|
||||
<div class="action-call__container">
|
||||
<div class="action-call__margin-container">
|
||||
<p class="action-call__prompt">Need an indepandent forge? Talk to an expert!</p>
|
||||
<button class="action-call__button"><a href="/contact" class="action-call_link">Contact Us</a></button>
|
||||
<div class="action-call__container">
|
||||
<div class="action-call__margin-container">
|
||||
<p class="action-call__prompt">Need an indepandent forge? Talk to an expert!</p>
|
||||
<button class="action-call__button"><a href="/contact" class="action-call_link">Contact Us</a></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page__container">
|
||||
{% include "home/components/_services-new.html" %}
|
||||
</div>
|
||||
<div class="page__container">
|
||||
<div class="page__container--split">
|
||||
{% include "home/components/_vision.html" %}
|
||||
<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="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>
|
||||
</div>
|
||||
{% include "home/components/_services-new.html" %}
|
||||
{% include "home/components/_features.html" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
|
||||
{% endblock content %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue