diff --git a/hugo.toml b/hugo.toml index 7d24fb0..ca3c273 100644 --- a/hugo.toml +++ b/hugo.toml @@ -72,37 +72,15 @@ theme = "agnes-hugo-theme" ################### Pricing Columns #################### [[params.pricing]] - PricingTitle = "Starter" - PricingRate = "27" - [[params.pricing.Features]] - Description = "Lorem ipsum is common text" - [[params.pricing.Features]] - Description = "Lorem ipsum is common text" - [[params.pricing.Features]] - Description = "Lorem ipsum is common text" - [[params.pricing.Features]] - Description = "Lorem ipsum is common text" - -[[params.pricing]] - PricingTitle = "Professional" - PricingRate = "97" - [[params.pricing.Features]] - Description = "Lorem ipsum is common text" - [[params.pricing.Features]] - Description = "Lorem ipsum is common text" - [[params.pricing.Features]] - Description = "Lorem ipsum is common text" - [[params.pricing.Features]] - Description = "Lorem ipsum is common text" - -[[params.pricing]] - PricingTitle = "Business" - PricingRate = "147" - [[params.pricing.Features]] - Description = "Lorem ipsum is common text" - [[params.pricing.Features]] - Description = "Lorem ipsum is common text" - [[params.pricing.Features]] - Description = "Lorem ipsum is common text" - [[params.pricing.Features]] - Description = "Lorem ipsum is common text" + PricingTitle = "Etiam sit amet" + PricingDesc = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam faucibus finibus quam ac gravida. Etiam sit amet mi sapien. Nam viverra congue quam nec condimentum." + ButtonText = "Download" + ButtonURL = "https://example.com/" + [[params.pricing.Features]] + Description = "Lorem ipsum dolor sit amet" + [[params.pricing.Features]] + Description = "consectetur adipiscing elit" + [[params.pricing.Features]] + Description = "Etiam faucibus finibus" + [[params.pricing.Features]] + Description = "Etiam sit amet mi sapien" \ No newline at end of file diff --git a/themes/agnes-hugo-theme/layouts/index.html b/themes/agnes-hugo-theme/layouts/index.html index 86d43c8..26f9ba1 100644 --- a/themes/agnes-hugo-theme/layouts/index.html +++ b/themes/agnes-hugo-theme/layouts/index.html @@ -1,78 +1,76 @@ {{ define "main" }} -
-
-
-
-

{{ .Site.Params.Content.LeadTitle | markdownify }}

-

{{ .Site.Params.Content.LeadDescription | markdownify }}

-

{{ .Site.Params.Content.ButtonCaption | markdownify }}

-
-
-
-
- {{ with .Site.Params.quote }} -
- {{ range . }} -
-

{{ .quoteText }}

-

- {{ .quoteBy }}

-
- {{ end }} -
- {{ end }} -
-
-
-
- {{ range site.Params.feature }} -
-
-
- -
-

{{ .FeatureTitle }}

-

{{ .FeatureDescription }}

-
-
- {{ end }} -
+
+
+
+
+

{{ .Site.Params.Content.LeadTitle | markdownify }} +

+

{{ .Site.Params.Content.LeadDescription | markdownify }}

+

{{ .Site.Params.Content.ButtonCaption | markdownify + }}

+
+
+
+
+{{ with .Site.Params.quote }} +
+ {{ range . }} +
+

{{ .quoteText }}

+

- {{ .quoteBy }}

+
+ {{ end }} +
+{{ end }} +
+
+
+
+ {{ range site.Params.feature }} +
+ +
+

{{ .FeatureTitle }}

+

{{ .FeatureDescription }}

-
-
-
-
-
-

Pricing

-
- {{ range site.Params.pricing }} -
-
-
-
-
{{ .PricingTitle }}
-
${{ .PricingRate }}/mo
-
-
    - {{ range .Features }} -
  • - - - - - - {{ .Description }} -
    • - {{ end }} -
-
- -
-
- {{ end }} +
+ {{ end }} +
+
+
+
+
+
+
+

Pricing

+ {{ with index site.Params.pricing 0 }} +
+
+
{{ .PricingTitle }}
+
+
{{.PricingDesc}}
+ {{ .ButtonText }}
-
-
+ + + + {{ end }} + + + {{ end }} \ No newline at end of file diff --git a/themes/agnes-hugo-theme/layouts/partials/head.html b/themes/agnes-hugo-theme/layouts/partials/head.html index b10d96f..533b517 100644 --- a/themes/agnes-hugo-theme/layouts/partials/head.html +++ b/themes/agnes-hugo-theme/layouts/partials/head.html @@ -3,20 +3,10 @@ {{ with .Site.Params}} - {{ "" | safeHTML }} - - {{ end }} {{ $title := print .Site.Title " | " .Title }} {{ if .IsHome }}{{ $title = .Site.Title }}{{ end }} {{ $title }} - \ No newline at end of file diff --git a/themes/agnes-hugo-theme/layouts/partials/header.html b/themes/agnes-hugo-theme/layouts/partials/header.html index a1e134c..b479b11 100644 --- a/themes/agnes-hugo-theme/layouts/partials/header.html +++ b/themes/agnes-hugo-theme/layouts/partials/header.html @@ -1,29 +1,29 @@ -
-
-
-
-

- - - {{ .Site.Title }} - - - - - - - - - - - - - - - - -

-
-
+
+
+
+
+

+ + + {{ .Site.Title }} + + + + + + + + + + + + + + + + +

-
\ No newline at end of file +
+ +
\ No newline at end of file diff --git a/themes/agnes-hugo-theme/static/css/style.css b/themes/agnes-hugo-theme/static/css/style.css index 1903c29..1189381 100644 --- a/themes/agnes-hugo-theme/static/css/style.css +++ b/themes/agnes-hugo-theme/static/css/style.css @@ -3,18 +3,18 @@ --accent-1: linear-gradient(45deg, #0559B0, #BE528A); --accent-2: #52B8BD; --font-color: #d2d2d2; - --font-color-dark: #1f1f1f; + --font-color-dark: #1f1f1f } .font-color-dark { - color: var(--font-color-dark) !important; + color: var(--font-color-dark) !important } html { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; - scroll-behavior: smooth; + scroll-behavior: smooth } body { @@ -25,7 +25,6 @@ body { -webkit-font-smoothing: antialiased; } - footer, header, section { @@ -34,7 +33,7 @@ section { h1 { font-size: 2em; - margin: 0.67em 0 + margin: .67em 0 } a { @@ -60,8 +59,8 @@ html { } *, -*:before, -*:after { +:after, +:before { box-sizing: inherit } @@ -73,8 +72,7 @@ body { ul { margin-top: 0; - margin-bottom: 24px; - padding-left: 24px + margin-bottom: 0; } ul { @@ -97,11 +95,11 @@ html { line-height: 27px } -@media (min-width: 641px) { +@media (min-width:641px) { html { font-size: 20px; line-height: 30px; - letter-spacing: -0.1px + letter-spacing: -.1px } } @@ -119,84 +117,82 @@ a { text-decoration: underline } -a:hover, -a:active { +a:active, +a:hover { outline: 0; text-decoration: none } +.h2, +.h4, h1, h2, -h4, -.h2, -.h4 { +h4 { clear: both; color: var(--font-color); - font-family: "Mukta", sans-serif; + font-family: Mukta, sans-serif; font-weight: 500 } h1 { font-size: 42px; line-height: 52px; - letter-spacing: -0.1px + letter-spacing: -.1px } -@media (min-width: 641px) { - +@media (min-width:641px) { h1 { font-size: 56px; line-height: 66px; - letter-spacing: -0.1px + letter-spacing: -.1px } } -h2, -.h2 { +.h2, +h2 { font-size: 36px; line-height: 46px; - letter-spacing: -0.1px + letter-spacing: -.1px } -@media (min-width: 641px) { +@media (min-width:641px) { - h2, - .h2 { + .h2, + h2 { font-size: 42px; line-height: 52px; - letter-spacing: -0.1px + letter-spacing: -.1px } } -h4, -.h4 { +.h4, +h4 { font-size: 20px; line-height: 30px; - letter-spacing: -0.1px + letter-spacing: -.1px } -@media (min-width: 641px) { +@media (min-width:641px) { - h4, - .h4 { + .h4, + h4 { font-size: 24px; line-height: 34px; - letter-spacing: -0.1px + letter-spacing: -.1px } } -@media (max-width: 640px) { - +@media (max-width:640px) { .h2-mobile { font-size: 36px; line-height: 46px; - letter-spacing: -0.1px + letter-spacing: -.1px } .h3-mobile { font-size: 24px; line-height: 34px; - letter-spacing: -0.1px + letter-spacing: -.1px } } @@ -211,24 +207,24 @@ h4, .text-sm { font-size: 18px; line-height: 27px; - letter-spacing: -0.1px + letter-spacing: -.1px } .text-xs { font-size: 16px; line-height: 24px; - letter-spacing: -0.1px + letter-spacing: -.1px } +.h2, h1, -h2, -.h2 { +h2 { margin-top: 48px; margin-bottom: 16px } -h4, -.h4 { +.h4, +h4 { margin-top: 24px; margin-bottom: 4px } @@ -245,8 +241,7 @@ p { padding-right: 16px } -@media (min-width: 481px) { - +@media (min-width:481px) { .container { padding-left: 24px; padding-right: 24px @@ -268,17 +263,17 @@ p { .screen-reader-text:focus { border-radius: 2px; - box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); + box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6); clip: auto !important; display: block; font-size: 16px; - letter-spacing: -0.1px; + letter-spacing: -.1px; font-weight: 500; line-height: 16px; text-transform: uppercase; text-decoration: none; background-color: #fff; - color: #0081F6 !important; + color: #0081f6 !important; border: none; height: auto; left: 8px; @@ -309,7 +304,7 @@ p { width: 100%; display: block; height: 1px; - background: #E2E8ED + background: #e2e8ed } .m-0 { @@ -342,14 +337,14 @@ p { .button { display: inline-flex; - font-family: "Mukta", sans-serif; + font-family: Mukta, sans-serif; font-size: 16px; - letter-spacing: -0.1px; + letter-spacing: -.1px; font-weight: 700; line-height: 16px; text-decoration: none !important; background-color: #fff; - color: #0081F6 !important; + color: #0081f6 !important; border: none; border-radius: 4px; cursor: pointer; @@ -368,35 +363,15 @@ p { border-radius: 4px } -.button-shadow { - position: relative -} - -.button-shadow::before { - content: ''; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - box-shadow: 0 8px 16px rgba(31, 43, 53, 0.12); - mix-blend-mode: multiply; - transition: box-shadow .15s ease -} - -.button-shadow:hover::before { - box-shadow: 0 8px 16px rgba(31, 43, 53, 0.25) -} - .button-primary { background: var(--accent-1); color: #fff !important; - transition: 0.3s ease; + transition: .3s ease } .button-primary:hover { box-shadow: var(--accent-1); - transition: 0.3s ease; + transition: .3s ease } .site-header { @@ -429,20 +404,7 @@ p { margin-bottom: 32px } -.hero-illustration { - margin-top: 40px; - padding-bottom: 40px -} - -.hero-illustration svg { - width: 100%; - max-width: 320px; - height: auto; - margin: 0 auto; - overflow: visible -} - -@media (min-width: 641px) { +@media (min-width:641px) { .hero { text-align: left; padding-top: 92px; @@ -457,20 +419,9 @@ p { padding-right: 48px; min-width: 512px } - - .hero-illustration { - margin-top: -68px; - padding-bottom: 0 - } - - .hero-illustration svg { - max-width: none; - width: 528px - } } -@media (min-width: 1025px) { - +@media (min-width:1025px) { .hero-copy { padding-right: 88px; min-width: 552px @@ -478,8 +429,9 @@ p { } .features-wrap { - display: flex; - flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px; justify-content: center; margin-right: -12px; margin-left: -12px @@ -495,21 +447,26 @@ p { .feature { padding: 12px; - width: 276px; - max-width: 276px; - flex-grow: 1; + flex-grow: 1 } .feature-inner { height: 100%; - background: #fff; - padding: 40px 24px; - border-radius: 15px; + display: flex; + gap: 1.5rem +} + +@media (max-width: 768px) { + .feature-inner { + flex-direction: column; + } } .feature-icon { - display: flex; - justify-content: center + width: 3.5rem; + height: 3.5rem; + border-radius: 5px; + border: 2px solid #fff } .feature-title { @@ -517,25 +474,21 @@ p { margin-bottom: 8px } -@media (min-width: 641px) { +@media (min-width:641px) { .features { position: relative } +} - .features .section-square { - position: absolute; - top: 0; - left: 0; - height: 240px; - width: 44%; - background: #F6F8FA - } +.feature-description { + display: flex; + flex-direction: column } .quote-section { - background-color: #1F2B35; + background-color: #1f2b35; padding: 25px; - text-align: center; + text-align: center } .pricing { @@ -550,7 +503,7 @@ p { left: 0; width: 100%; height: 200px; - background: #1F2B35; + background: #1f2b35; overflow: hidden } @@ -558,33 +511,26 @@ p { margin-bottom: 48px } -.pricing-tables-wrap { - display: flex; - flex-wrap: wrap; - justify-content: center; - margin-right: -12px; - margin-left: -12px -} - .pricing-tables-wrap:last-child { margin-bottom: -12px } -.pricing-table { - padding: 12px; - width: 344px; - max-width: 344px; - flex-grow: 1 -} - .pricing-table-inner { position: relative; display: flex; - flex-wrap: wrap; + flex-direction: row; background: #fff; - padding: 24px; + padding: 20px; height: 100%; - border-radius: 15px; + border-radius: 10px; + box-shadow: 0px 15px 24px rgba(0, 0, 0, 0.55); +} + +@media (max-width: 768px) { + .pricing-table-inner { + flex-direction: column; + gap: 25px; + } } .pricing-table-inner>* { @@ -599,45 +545,79 @@ p { right: 0; bottom: 0; left: 0; - box-shadow: 0 16px 48px #E2E8ED; + box-shadow: 0 16px 48px #e2e8ed; mix-blend-mode: multiply; - border-radius: 15px; + border-radius: 15px } -@supports (-ms-ime-align: auto) { +@supports (-ms-ime-align:auto) { .pricing-table-inner::before { - box-shadow: 0 16px 48px rgba(31, 43, 53, 0.12) + box-shadow: 0 16px 48px rgba(31, 43, 53, .12) } } .pricing-table-header { - position: relative + position: relative; + display: flex; + flex-direction: column; + padding-right: 2rem; +} + +@media (max-width: 768px) { + .pricing-table-header { + padding-right: 0; + } } .pricing-table-header::after { content: ''; position: absolute; bottom: 0; - left: 0; - width: 100%; + right: 1rem; + height: 100%; display: block; - height: 1px; - background: #E2E8ED + width: 1px; + background: #e2e8ed +} + +@media (max-width: 768px) { + .pricing-table-header::after { + display: none; + } } .pricing-table-title { - font-family: "Mukta", sans-serif; - color: #1F2B35 + font-family: Mukta, sans-serif; + color: #1f2b35; + font-size: 20px; + font-weight: 700; } -.pricing-table-price-currency { - color: #6F8394 +.pricing-table-collection { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; } -.pricing-table-features li { +.pricing-table-features { + width: 40%; + min-width: 13.5rem; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +@media (max-width: 768px) { + .pricing-table-features { + display: none; + } +} + +.pricing-table-features li:not(:last-child) { display: flex; align-items: center; - margin-bottom: 14px + margin-bottom: 14px; } .pricing-table-features li .list-icon { @@ -647,31 +627,19 @@ p { margin-right: 12px } -@media (min-width: 641px) { - .pricing .section-square { - position: absolute; - top: calc(100% - 440px); - right: 0; - height: 240px; - width: 44%; - background: #F6F8FA - } - +@media (min-width:641px) { .pricing .section-title { margin-bottom: 64px } } -@supports (-ms-ime-align: auto) { -} - .section-inner { position: relative; padding-top: 48px; padding-bottom: 48px } -@media (min-width: 641px) { +@media (min-width:641px) { .section-inner { padding-top: 80px; padding-bottom: 80px @@ -681,17 +649,17 @@ p { .site-footer { font-size: 14px; line-height: 20px; - letter-spacing: 0px; - background: #1F2B35 + letter-spacing: 0; + background: #1f2b35 } .site-footer a { text-decoration: none } -.site-footer a:hover, -.site-footer a:active { - color: #6F8394; +.site-footer a:active, +.site-footer a:hover { + color: #6f8394; text-decoration: underline } @@ -704,13 +672,13 @@ p { } .site-footer-inner.has-top-divider::before { - background: rgba(255, 255, 255, 0.08) + background: rgba(255, 255, 255, .08) } .footer-brand, +.footer-copyright, .footer-links, -.footer-social-links, -.footer-copyright { +.footer-social-links { flex: none; width: 100%; display: inline-flex; @@ -735,15 +703,15 @@ p { padding: 8px } -@media (min-width: 641px) { +@media (min-width:641px) { .site-footer-inner { justify-content: space-between } .footer-brand, + .footer-copyright, .footer-links, - .footer-social-links, - .footer-copyright { + .footer-social-links { flex: 50% }