From 6ece82ebc04f3f3b413abcfcb6994d26b0abf7ab Mon Sep 17 00:00:00 2001 From: Foster Hangdaan Date: Wed, 29 Nov 2023 12:34:55 -0500 Subject: [PATCH] Enhance blockquote style for larger screens --- _includes/styles/base.scss | 29 ++++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/_includes/styles/base.scss b/_includes/styles/base.scss index 33a80a0..4d685bf 100644 --- a/_includes/styles/base.scss +++ b/_includes/styles/base.scss @@ -130,40 +130,55 @@ blockquote { border-radius: 5px; border: 1px solid var(--color-black); border-left: 3rem solid var(--color-black); - padding: 1rem; - margin: 1rem 0; + padding: 1em; + margin: 1em 0; + @media screen and (min-width: 48rem) { + border-left: 4rem solid var(--color-black); + } &::before { + display: block; position: absolute; + height: 24px; + width: 24px; top: 50%; margin-top: -12px; left: calc(-0.75rem - 24px); filter: var(--filter-bg); - content: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/quote.svg"); + content: ""; + background-image: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/quote.svg"); + background-repeat: no-repeat !important; + background-size: contain !important; + @media screen and (min-width: 48rem) { + margin-top: -16px; + left: calc(-1rem - 32px); + height: 32px; + width: 32px; + } } &.info { &::before { - content: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/info-circle.svg"); + background-image: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/info-circle.svg"); } color: var(--color-blue); border-color: var(--color-blue); } &.success { &::before { - content: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/check.svg"); + background-image: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/check.svg"); } color: var(--color-success); border-color: var(--color-success); } &.warning { &::before { - content: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/alert-triangle.svg"); + background-image: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/alert-triangle.svg"); } color: var(--color-warn); border-color: var(--color-warn); } &.danger { &::before { - content: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/circle-x.svg"); + background-image: url("https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/circle-x.svg"); } color: var(--color-error); border-color: var(--color-error);