chore: refactor styling and home banner page
parent
65062667c4
commit
c4e186bd9b
GPG Key ID:
AD9F0F08E855ED88
|
|
@ -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;
|
||||
.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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
{% 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