mycosystems/bellaskeys.com
3
0
Fork 0
Code Issues Pull requests Activity Actions

dark theme :)
All checks were successful
Hugo / build (push) Successful in 18s
Details

Browse source
This commit is contained in:
brooke 2024-03-02 16:55:13 -05:00
parent 024b5b5c13
commit c6d3fdf113
2 changed files with 39 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
themes/agnes-hugo-theme/layouts/index.html
View file

@ -71,20 +71,20 @@
<h2 id="pricing" class="section-title mt-0 text-center">Pricing</h2> <h2 id="pricing" class="section-title mt-0 text-center">Pricing</h2>
{{ with index site.Params.pricing 0 }} {{ with index site.Params.pricing 0 }}
<div class="pricing-table-inner"> <div class="pricing-table-inner">
<div class="font-color-dark pricing-table-header is-revealing"> <div class="font-color-light pricing-table-header is-revealing">
<div class="pricing-table-title mt-12 mb-8"> <div class="pricing-table-title mt-12 mb-8">
{{ .PricingTitle }} {{ .PricingTitle }}
</div> </div>
<div class="pricing-table-collection"> <div class="pricing-table-collection">
<div class="pricing-table-price"> <div class="pricing-table-price">
<span style="font-size: 16px;" class="font-color-dark" <span style="font-size: 16px;" class="font-color-light"
>{{ .PricingDesc }}</span >{{ .PricingDesc }}</span
> >
</div> </div>
<a <a
href="{{ .ButtonURL }}" href="{{ .ButtonURL }}"
style="margin-top:15px;" style="margin-top:15px;"
class="button button-primary-dark button-pricing" class="button button-primary-light button-pricing"
>{{ .ButtonText }}</a >{{ .ButtonText }}</a
> >
</div> </div>
@ -105,7 +105,7 @@
/> />
</svg> </svg>
</span> </span>
<span class="font-color-dark">{{ .Description }}</span> <span class="font-color-light">{{ .Description }}</span>
</li> </li>
{{ end }} {{ end }}
</ul> </ul>

60
themes/agnes-hugo-theme/static/css/style.css
View file

@ -3,7 +3,7 @@
--accent-1: linear-gradient(45deg, #0559b0, #be528a); --accent-1: linear-gradient(45deg, #0559b0, #be528a);
--accent-2: linear-gradient(25deg, rgb(45, 85, 125), #0b2d4f); --accent-2: linear-gradient(25deg, rgb(45, 85, 125), #0b2d4f);
--accent-3: linear-gradient(45deg, #be528a, #762a51); --accent-3: linear-gradient(45deg, #be528a, #762a51);
--font-color: #d2d2d2; --font-color: #f1f0f0;
--font-color-dark: #1f1f1f; --font-color-dark: #1f1f1f;
} }
@ -11,6 +11,10 @@
color: var(--font-color-dark) !important; color: var(--font-color-dark) !important;
} }
.font-color-light {
color: var(--font-color) !important;
}
html { html {
line-height: 1.15; line-height: 1.15;
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
@ -255,6 +259,19 @@ p {
width: 100%; width: 100%;
} }
.contact-table {
position: relative;
display: flex;
background-color: #1f2b35;
padding: 25px;
height: 100%;
border-radius: 10px;
flex-direction: column;
gap: 25px;
width: 100%;
box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.45);
}
.form-grid { .form-grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
@ -262,6 +279,17 @@ p {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.form-grid input,
.form-grid textarea {
font-size: 16px;
width: 100%;
padding: 12px;
border-radius: 10px;
border: none;
background-color: #2a3945;
color: #fff;
}
.full-width { .full-width {
grid-column: span 2; grid-column: span 2;
} }
@ -269,7 +297,7 @@ p {
.form-group label { .form-group label {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: #1f2b35; color: #fff;
} }
.form-group { .form-group {
@ -381,7 +409,7 @@ p {
background: var(--accent-2); background: var(--accent-2);
color: #efefef !important; color: #efefef !important;
border: none; border: none;
border-radius: 4px; border-radius: 10px;
cursor: pointer; cursor: pointer;
justify-content: center; justify-content: center;
padding: 16px 32px; padding: 16px 32px;
@ -602,29 +630,11 @@ p {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
background: #ffffff; background: #2a3945;
padding: 15px; padding: 25px;
height: 100%; height: 100%;
border-radius: 5px;
}
.contact-table {
position: relative;
display: flex;
background: #ffffff;
padding: 15px;
height: 100%;
border-radius: 5px;
flex-direction: column;
gap: 25px;
width: 100%;
}
.contact-table input,
.contact-table textarea {
width: 100%;
padding: 5px;
border-radius: 10px; border-radius: 10px;
box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.45);
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@ -676,7 +686,7 @@ p {
} }
.pricing-table-title { .pricing-table-title {
color: #1f2b35; color: #ffffff;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
} }