diff --git a/footer.php b/footer.php index e0f27ce..02a60e3 100644 --- a/footer.php +++ b/footer.php @@ -61,12 +61,39 @@ $footerNav = ! empty( $locations['footer_navigation'] ) +
+ - + +
+

+
+ +
+

+
+ +
+

+
+ +
- + @@ -77,7 +104,7 @@ $footerNav = ! empty( $locations['footer_navigation'] ) null, array( 'circle' => true, - 'classes' => 'social-icons p-0 text-18px', + 'classes' => 'social-icons p-0 text-14px bg-white! text-cwc-blue-02! hover:opacity-80!', ) ); ?> diff --git a/static/img/footer-email.svg b/static/img/footer-email.svg new file mode 100644 index 0000000..ff8200f --- /dev/null +++ b/static/img/footer-email.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/img/footer-map.svg b/static/img/footer-map.svg new file mode 100644 index 0000000..255c10f --- /dev/null +++ b/static/img/footer-map.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/img/footer-phone.svg b/static/img/footer-phone.svg new file mode 100644 index 0000000..41b9c3e --- /dev/null +++ b/static/img/footer-phone.svg @@ -0,0 +1,3 @@ + + + diff --git a/styles/components/site-footer.css b/styles/components/site-footer.css index ab85b3a..d38d6f2 100644 --- a/styles/components/site-footer.css +++ b/styles/components/site-footer.css @@ -18,6 +18,33 @@ a { @apply text-white hover:text-primary-500 underline underline-offset-2; } } + + .contact__item { + @apply flex justify-start items-start font-light text-white text-14px mb-2; + + p { @apply m-0 p-0; } + + a { @apply text-white hover:text-secondary-400 focus-visible:text-secondary-400; } + + &::before { + @apply inline-block mr-2; + + content: ""; + height: 1.5rem; + width: 1.5rem; + } + + &.contact__phone::before { + background: url("../../static/img/footer-phone.svg") no-repeat center center; + } + &.contact__email::before { + background: url("../../static/img/footer-email.svg") no-repeat center center; + } + &.contact__address::before { + background: url("../../static/img/footer-map.svg") no-repeat center center; + padding-top: 2rem; + } + } } @media (max-width: 767px) { diff --git a/styles/fonts/lineicons.css b/styles/fonts/lineicons.css index 989ab31..acd6123 100644 --- a/styles/fonts/lineicons.css +++ b/styles/fonts/lineicons.css @@ -52,19 +52,20 @@ Lineicons regular icon font .circular-icon { @apply box-content bg-secondary rounded-full text-white flex justify-center items-center; - --size: 2rem; + --size: 1.5rem; height: var(--size); text-align: center; width: var(--size); i { - display: inline-block; - height: var(--size); + align-items: center; + display: flex; + height: 100%; + justify-content: center; line-height: 1; - margin-top: 0.5rem; - text-align: center; - vertical-align: middle; - width: var(--size); + margin: 0; + padding: 0; + width: 100%; } &i::before, span { line-height: var(--size) !important; } diff --git a/views/partials/social-media.php b/views/partials/social-media.php index fad6695..30a66e0 100644 --- a/views/partials/social-media.php +++ b/views/partials/social-media.php @@ -29,7 +29,7 @@ if ( $circle ) { foreach ( $sites as $name => $url ) { if ( $url ) { ?> - + Visit our page