forked from Hostea/website
chore: refactor styling and home banner page
parent
65062667c4
commit
c4e186bd9b
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
|
@ -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