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: 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);