foster/website
1
0
Fork 0
Code Issues 8 Pull requests Activity

Enhance blockquote style for larger screens

Browse source
This commit is contained in:
Foster Hangdaan 2023-11-29 12:34:55 -05:00
parent 5e1339a292
commit 6ece82ebc0
Signed by: foster
GPG key ID: E48D7F49A852F112
1 changed files with 22 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
_includes/styles/base.scss
View file

@ -130,40 +130,55 @@ blockquote {
border-radius: 5px; border-radius: 5px;
border: 1px solid var(--color-black); border: 1px solid var(--color-black);
border-left: 3rem solid var(--color-black); border-left: 3rem solid var(--color-black);
padding: 1rem; padding: 1em;
margin: 1rem 0; margin: 1em 0;
@media screen and (min-width: 48rem) {
border-left: 4rem solid var(--color-black);
}
&::before { &::before {
display: block;
position: absolute; position: absolute;
height: 24px;
width: 24px;
top: 50%; top: 50%;
margin-top: -12px; margin-top: -12px;
left: calc(-0.75rem - 24px); left: calc(-0.75rem - 24px);
filter: var(--filter-bg); 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 { &.info {
&::before { &::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); color: var(--color-blue);
border-color: var(--color-blue); border-color: var(--color-blue);
} }
&.success { &.success {
&::before { &::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); color: var(--color-success);
border-color: var(--color-success); border-color: var(--color-success);
} }
&.warning { &.warning {
&::before { &::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); color: var(--color-warn);
border-color: var(--color-warn); border-color: var(--color-warn);
} }
&.danger { &.danger {
&::before { &::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); color: var(--color-error);
border-color: var(--color-error); border-color: var(--color-error);