home-page redesign

This commit is contained in:
hay-kot 2021-03-14 18:44:33 -08:00
commit 4398294fd9

View file

@ -16,19 +16,19 @@
.tx-container { .tx-container {
padding-top: .0rem; padding-top: .0rem;
background: linear-gradient(to bottom, var(--md-primary-fg-color), rgb(194, 151, 86) 99%,#fff 99%) background: var(--md-primary-bg-color)
} }
.tx-hero { .tx-hero {
margin: 12px 2.8rem; margin: 12px 2.8rem;
color: var(--md-primary-bg-color);
justify-content: center; justify-content: center;
} }
.tx-hero h1 { .tx-hero h1 {
margin-bottom: 1rem; margin-bottom: 1rem;
color: currentColor; font-family: "Roboto";
font-weight: 700 color: #30353a;
font-weight: 500
} }
.tx-hero__content { .tx-hero__content {
@ -45,7 +45,7 @@
.tx-hero .md-button { .tx-hero .md-button {
margin-top: .5rem; margin-top: .5rem;
margin-right: .5rem; margin-right: .5rem;
color: var(--md-primary-bg-color) color: var(--md-primary-fg-color)
} }
.tx-hero .md-button--primary { .tx-hero .md-button--primary {
@ -67,8 +67,13 @@
transform: translateY(10%); transform: translateY(10%);
} }
.feature-container {
background-color: #F7FAFC;
}
.top-hr { .top-hr {
margin-top: 42px; margin-top: 42px;
margin-bottom: 42px;
} }
.feature-item { .feature-item {
@ -158,10 +163,10 @@
min-width: 0; min-width: 0;
} }
.feature-item:hover { /* .feature-item:hover {
background-color: #fea55247; background-color: #fea55247;
border-radius: 3px; border-radius: 3px;
} } */
} }
.hr { .hr {
@ -223,9 +228,11 @@
<img src="img/home_screenshot.png" draggable="false"> <img src="img/home_screenshot.png" draggable="false">
</div> </div>
<div class="tx-hero__content"> <div class="tx-hero__content">
<h1> Mealie </h1> <h1>
Mealie
</h1>
<p> <p>
Mealie is a self hosted recipe manager and meal planner with a RestAPI backend and a A self-hosted recipe manager and meal planner with a RestAPI backend and a
reactive frontend application built in Vue for a pleasant user experience for the reactive frontend application built in Vue for a pleasant user experience for the
whole family. whole family.
</p> </p>
@ -242,6 +249,8 @@
<!-- Main site box descriptions --> <!-- Main site box descriptions -->
<!-- Row 1 --> <!-- Row 1 -->
<section class="feature-container">
<div class="top-hr"> <div class="top-hr">
<div class="feature-item"> <div class="feature-item">
<h2> <h2>
@ -285,6 +294,7 @@
</div> </div>
</div> </div>
<!-- Row 2 --> <!-- Row 2 -->
<div class="top-hr"> <div class="top-hr">
<div class="feature-item"> <div class="feature-item">
<h2> <h2>
@ -327,11 +337,7 @@
<p> API Driven application gives you full control of the backend server with interactive documentation</p> <p> API Driven application gives you full control of the backend server with interactive documentation</p>
</div> </div>
</div> </div>
</section>
<div class="top-hr">
<div class="hr">
</div>
</div>
<!-- Custom narrow footer --> <!-- Custom narrow footer -->