From 26d0256f3627ca04ab0911d465451cace7863e57 Mon Sep 17 00:00:00 2001 From: Aadil Ayub Date: Fri, 12 Jul 2024 15:47:10 +0500 Subject: [PATCH] add footer gradients --- assets/css/custom.css | 33 +++++++++++++++++++++++++++------ theme.json | 7 ++++++- 2 files changed, 33 insertions(+), 7 deletions(-) diff --git a/assets/css/custom.css b/assets/css/custom.css index b4cb815..6e5c255 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -41,21 +41,42 @@ ul.wp-block-navigation.mobile-header-nav li { .main-header-nav .wp-block-navigation-item__content { width: -webkit-fill-available; text-align: center; - } + } } /* style footer on mobile */ +.wp-block-column.footer-gradient-column { position: relative; } + +.wp-block-column.footer-gradient-column::before { + content: ''; + display: inline-block; + position: absolute; + top: 0; + left: 0; +} + @media (min-width: 1080px) { .wp-block-column.footer-gradient-column { padding-left: 2rem !important; - border-left: 8px solid var(--wp--preset--color--turquoise-green); + } + + .wp-block-column.footer-gradient-column::before { + background: var(--wp--preset--gradient--violet-to-green-vertical); + width: 8px; + height: 100%; + left: 0; } } @media (max-width: 786px) { .wp-block-column.footer-gradient-column { - padding-top: 1.5rem !important; - border-top: 8px solid var(--wp--preset--color--turquoise-green); + padding-top: 2.5rem !important; + } + + .wp-block-column.footer-gradient-column::before { + background: var(--wp--preset--gradient--violet-to-green); + width: 100%; + height: 8px; } } @@ -251,7 +272,7 @@ a.wp-block-tiptip-hyperlink-group-block { .blog-post-content blockquote.wp-block-quote { margin-inline-start: -1.5rem; } - + .blog-post-content h2.wp-block-heading { margin-inline: auto; padding-inline-start: .5em; @@ -269,4 +290,4 @@ a.wp-block-tiptip-hyperlink-group-block { --wp--preset--font-size--huge : 45px; --wp--preset--font-size--xx-large: 38px; } -} \ No newline at end of file +} diff --git a/theme.json b/theme.json index 436eebf..1546497 100644 --- a/theme.json +++ b/theme.json @@ -25,6 +25,11 @@ "gradient": "linear-gradient(270deg, var(--wp--preset--color--bright-light-green) 0%, var(--wp--preset--color--turquoise-green) 20%, var(--wp--preset--color--turquoise-blue) 40%, var(--wp--preset--color--azure) 60%, var(--wp--preset--color--vibrant-blue) 80%, var(--wp--preset--color--violet) 100%);", "name": "Violet to Bright Green", "slug": "violet-to-green" + }, + { + "gradient": "linear-gradient(0deg, var(--wp--preset--color--bright-light-green) 0%, var(--wp--preset--color--turquoise-green) 20%, var(--wp--preset--color--turquoise-blue) 40%, var(--wp--preset--color--azure) 60%, var(--wp--preset--color--vibrant-blue) 80%, var(--wp--preset--color--violet) 100%);", + "name": "Violet to Bright Green (Vertical)", + "slug": "violet-to-green-vertical" } ], "palette": [ @@ -684,4 +689,4 @@ ], "version": 3, "$schema": "https://schemas.wp.org/trunk/theme.json" -} \ No newline at end of file +}