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

update

Browse source
This commit is contained in:
brookee 2024-02-28 23:01:46 -05:00
parent f47791c4d4
commit f2fd13cd41
5 changed files with 261 additions and 327 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
hugo.toml
View file

@ -72,37 +72,15 @@ theme = "agnes-hugo-theme"
################### Pricing Columns #################### ################### Pricing Columns ####################
[[params.pricing]] [[params.pricing]]
PricingTitle = "Starter" PricingTitle = "Etiam sit amet"
PricingRate = "27" 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]] [[params.pricing.Features]]
Description = "Lorem ipsum is common text" Description = "Lorem ipsum dolor sit amet"
[[params.pricing.Features]] [[params.pricing.Features]]
Description = "Lorem ipsum is common text" Description = "consectetur adipiscing elit"
[[params.pricing.Features]] [[params.pricing.Features]]
Description = "Lorem ipsum is common text" Description = "Etiam faucibus finibus"
[[params.pricing.Features]] [[params.pricing.Features]]
Description = "Lorem ipsum is common text" Description = "Etiam sit amet mi sapien"
[[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"

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

@ -3,9 +3,12 @@
<div class="container"> <div class="container">
<div class="hero-inner"> <div class="hero-inner">
<div class="hero-copy"> <div class="hero-copy">
<h1 class="hero-title h2-mobile mt-0 is-revealing">{{ .Site.Params.Content.LeadTitle | markdownify }}</h1> <h1 class="hero-title h2-mobile mt-0 is-revealing">{{ .Site.Params.Content.LeadTitle | markdownify }}
</h1>
<p class="hero-paragraph is-revealing">{{ .Site.Params.Content.LeadDescription | markdownify }}</p> <p class="hero-paragraph is-revealing">{{ .Site.Params.Content.LeadDescription | markdownify }}</p>
<p class="hero-cta is-revealing"><a class="button button-primary button-shadow" href="{{ .Site.Params.Content.ButtonURL}}">{{ .Site.Params.Content.ButtonCaption | markdownify }}</a></p> <p class="hero-cta is-revealing"><a class="button button-primary button-shadow"
href="{{ .Site.Params.Content.ButtonURL}}">{{ .Site.Params.Content.ButtonCaption | markdownify
}}</a></p>
</div> </div>
</div> </div>
</div> </div>
@ -20,18 +23,16 @@
{{ end }} {{ end }}
</section> </section>
{{ end }} {{ end }}
<section class="features section text-center"> <section class="features section">
<div class="container"> <div class="container">
<div class="features-inner section-inner"> <div class="features-inner section-inner">
<div class="features-wrap"> <div class="features-wrap">
{{ range site.Params.feature }} {{ range site.Params.feature }}
<div class="feature is-revealing"> <div class="feature is-revealing feature-inner">
<div class="feature-inner"> <img class="feature-icon" src="{{ .FeatureImage }}">
<div class="feature-icon"> <div class="feature-description">
<img src="{{ .FeatureImage }}"> <h4 class="feature-title h3-mobile">{{ .FeatureTitle }}</h4>
</div> <p class="text-sm">{{ .FeatureDescription }}</p>
<h4 class="font-color-dark feature-title h3-mobile">{{ .FeatureTitle }}</h4>
<p class="font-color-dark text-sm">{{ .FeatureDescription }}</p>
</div> </div>
</div> </div>
{{ end }} {{ end }}
@ -43,35 +44,32 @@
<div class="container"> <div class="container">
<div class="pricing-inner section-inner has-top-divider"> <div class="pricing-inner section-inner has-top-divider">
<h2 id="pricing" class="section-title mt-0 text-center">Pricing</h2> <h2 id="pricing" class="section-title mt-0 text-center">Pricing</h2>
<div class="pricing-tables-wrap"> {{ with index site.Params.pricing 0 }}
{{ range site.Params.pricing }}
<div class="pricing-table">
<div class="pricing-table-inner"> <div class="pricing-table-inner">
<div class="pricing-table-main">
<div class="font-color-dark pricing-table-header is-revealing"> <div class="font-color-dark pricing-table-header is-revealing">
<div class="pricing-table-title mt-12 mb-8">{{ .PricingTitle }}</div> <div class="pricing-table-title mt-12 mb-8">{{ .PricingTitle }}</div>
<div class="pricing-table-price mb-32 pb-24"><span class="font-color-dark pricing-table-price-currency h4">$</span><span class="font-color-dark pricing-table-price-amount h2">{{ .PricingRate }}</span>/mo</div> <div class="pricing-table-collection">
<div class="pricing-table-price"><span style="font-size: 16px;"
class="font-color-dark">{{.PricingDesc}}</span>
</div> </div>
<ul class="pricing-table-features list-reset text-xs mt-24"> <a href="{{ .ButtonURL }}" style="margin-top:15px;" class="button button-primary button-shadow">{{ .ButtonText }}</a>
</div>
</div>
<ul class="pricing-table-features list-reset text-xs">
{{ range .Features }} {{ range .Features }}
<li class="is-revealing"> <li class="is-revealing">
<span class="list-icon"> <span class="list-icon">
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<path fill="#5FFAD0" fill-rule="nonzero" d="M5.6 8.4L1.6 6 0 7.6 5.6 14 16 3.6 14.4 2z"/> <path fill="#5FFAD0" fill-rule="nonzero"
d="M5.6 8.4L1.6 6 0 7.6 5.6 14 16 3.6 14.4 2z" />
</svg> </svg>
</span> </span>
<span class="font-color-dark">{{ .Description }}</span> <span class="font-color-dark">{{ .Description }}</span>
</li> </li>
{{ end }} {{ end }}
</ul> </ul>
</div>
<!-- <div class="pricing-table-cta is-revealing">
<a class="button button-primary button-shadow button-block" href="#">{{ .ButtonCaption }}</a>
</div> -->
</div>
</div> </div>
{{ end }} {{ end }}
</div>
</div> </div>
</div> </div>
</section> </section>

10
themes/agnes-hugo-theme/layouts/partials/head.html
View file

@ -3,20 +3,10 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
{{ with .Site.Params}} {{ with .Site.Params}}
{{ "<!-- google analytics tag (gtag.js)-->" | safeHTML }}
<script async src="https://www.googletagmanager.com/gtag/js?id={{ .google_analytics_id }}"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '{{ .google_analytics_id }}');
</script>
{{ end }} {{ end }}
{{ $title := print .Site.Title " | " .Title }} {{ $title := print .Site.Title " | " .Title }}
{{ if .IsHome }}{{ $title = .Site.Title }}{{ end }} {{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}
<title>{{ $title }}</title> <title>{{ $title }}</title>
<link href="https://fonts.googleapis.com/css?family=Hind+Vadodara:400,700|Mukta:500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/style.css"> <link rel="stylesheet" type="text/css" href="/css/style.css">
<script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script> <script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>
</head> </head>

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

@ -8,12 +8,12 @@
<title>{{ .Site.Title }}</title> <title>{{ .Site.Title }}</title>
<defs> <defs>
<linearGradient x1="0%" y1="100%" y2="0%" id="logo-a"> <linearGradient x1="0%" y1="100%" y2="0%" id="logo-a">
<stop stop-color="#007CFE" stop-opacity="0" offset="0%"/> <stop stop-color="#0559B0" stop-opacity="0" offset="0%" />
<stop stop-color="#007DFF" offset="100%"/> <stop stop-color="#0559B0" offset="100%" />
</linearGradient> </linearGradient>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="logo-b"> <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="logo-b">
<stop stop-color="#FF4F7A" stop-opacity="0" offset="0%"/> <stop stop-color="#BE5476" stop-opacity="0" offset="0%" />
<stop stop-color="#FF4F7A" offset="100%"/> <stop stop-color="#BE5476" offset="100%" />
</linearGradient> </linearGradient>
</defs> </defs>
<g fill="none" fill-rule="evenodd"> <g fill="none" fill-rule="evenodd">

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

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