diff --git a/src/components/Layout/JoinCommunity/JoinCommunity.astro b/src/components/Layout/JoinCommunity/JoinCommunity.astro index 0cd7120..c6788df 100644 --- a/src/components/Layout/JoinCommunity/JoinCommunity.astro +++ b/src/components/Layout/JoinCommunity/JoinCommunity.astro @@ -11,6 +11,12 @@ import './JoinCommunity.scss'; Web3 gives people control over their data, privacy, and ownership.

+
+ +
-
- -
diff --git a/src/components/Layout/JoinCommunity/JoinCommunity.scss b/src/components/Layout/JoinCommunity/JoinCommunity.scss index ab6dc62..742bcca 100644 --- a/src/components/Layout/JoinCommunity/JoinCommunity.scss +++ b/src/components/Layout/JoinCommunity/JoinCommunity.scss @@ -2,79 +2,83 @@ @import "/src/styles/vars.scss"; #join-community { - display: flex; - align-items: center; - justify-content: space-between; - gap: 2em; - padding: 5em 7.5%; - background: $color-aquamarine; - color: $color-blue-charcoal-2; - @include fluid-font-size(0.625rem); - - div { - flex-grow: 1; - - &:first-child { - flex-grow: 10; - } - - &:last-child { - flex-grow: 0; - } - } - - @media screen and (max-width: 56rem) { - flex-wrap: wrap; - justify-content: center; - - div:first-child { - flex-basis: 100%; - margin-bottom: 2em; - text-align: center; - } + display: flex; + align-items: center; + justify-content: space-between; + gap: 2em; + padding: 5em 7.5%; + background: $color-aquamarine; + color: $color-blue-charcoal-2; + @include fluid-font-size(0.625rem); div { - flex-grow: 0; + flex-grow: 1; + + &:first-child { + flex-grow: 10; + } + + &:last-child { + flex-grow: 0; + } } - } - h2 { - margin-bottom: 0.25em; - @include fluid-font-size(2rem); - font-weight: 700; - line-height: 153%; - text-transform: none; - color: inherit; - } + @media screen and (max-width: 56rem) { + flex-wrap: wrap; + justify-content: center; - p { - font-family: $font-family-jaldi; - @include fluid-font-size(1.5rem); - line-height: 157%; - } + div:first-child { + flex-basis: 100%; + margin-bottom: 2em; + text-align: center; + } - a { - display: block; - color: #0B3F48; - - &:hover { - color: inherit; + div { + flex-grow: 0; + } } - } - .github-logo svg { - @include fluid-width(3.625rem); - } + h2 { + margin-bottom: 0.25em; + @include fluid-font-size(2rem); + font-weight: 700; + line-height: 153%; + text-transform: none; + color: inherit; + } - .discord-logo svg { - @include fluid-width(3.625rem); - } + p { + font-family: $font-family-jaldi; + @include fluid-font-size(1.5rem); + line-height: 157%; + } - .twitter-logo svg { - @include fluid-width(3.625rem); - } + a { + display: block; + color: #0B3F48; - .facebook-logo svg { - @include fluid-width(3.625rem); - } + &:hover { + color: inherit; + } + } + + .github-logo svg { + @include fluid-width(3.625rem); + } + + .git-logo svg { + @include fluid-width(3.625rem); + } + + .discord-logo svg { + @include fluid-width(3.625rem); + } + + .twitter-logo svg { + @include fluid-width(3.625rem); + } + + .facebook-logo svg { + @include fluid-width(3.625rem); + } }