eswyft/4in1_ws_web
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more cool design for block of quotes

Browse Source
This commit is contained in:
E. S. 2024-05-11 23:00:05 +00:00
parent fa3802a80b
commit b139c3d240
3 changed files with 55 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
htdocs/img/ic_q_close.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 12.0017"><path d="M2.2053,12.0009a12.76,12.76,0,0,0,3.476-3.4959A7.2639,7.2639,0,0,0,6.834,4.5763,4.9279,4.9279,0,0,0,5.7483,1.2877,3.4425,3.4425,0,0,0,2.9962-.0009a2.7969,2.7969,0,0,0-2.1628.91A3.32,3.32,0,0,0,0,3.2431,2.9084,2.9084,0,0,0,.606,5.2164a2.1381,2.1381,0,0,0,1.7.6934q.9764,0,2.2727-1.7659.303,0,.429.3694A4.3231,4.3231,0,0,1,5.134,5.7657a4.9968,4.9968,0,0,1-.8921,2.7034,11.67,11.67,0,0,1-2.6259,2.7571h0Zm8.1826,0a12.6436,12.6436,0,0,0,3.4676-3.4959A7.3013,7.3013,0,0,0,15,4.5763a4.9537,4.9537,0,0,0-1.077-3.2885A3.42,3.42,0,0,0,11.1792-.0009a2.7978,2.7978,0,0,0-2.1632.91,3.32,3.32,0,0,0-.833,2.334,2.9084,2.9084,0,0,0,.606,1.9733,2.1375,2.1375,0,0,0,1.7.6934,1.9768,1.9768,0,0,0,1.6243-.8829q.6653-.8827.6818-.8829.2861,0,.404.3515a4.583,4.583,0,0,1,.1179,1.27,5,5,0,0,1-.8921,2.7034A11.6783,11.6783,0,0,1,9.799,11.2262Z" fill="#aaaaaa" transform="translate(0 0.0009)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 949 B

1
htdocs/img/ic_q_open.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 12.0017"><path d="M12.7947-.0009a12.76,12.76,0,0,0-3.476,3.4959A7.2639,7.2639,0,0,0,8.166,7.4237a4.9279,4.9279,0,0,0,1.0858,3.2885,3.4425,3.4425,0,0,0,2.7521,1.2886,2.7969,2.7969,0,0,0,2.1628-.91A3.32,3.32,0,0,0,15,8.7569a2.9084,2.9084,0,0,0-.606-1.9733,2.1381,2.1381,0,0,0-1.7-.6934q-.9764,0-2.2727,1.7659-.303,0-.429-.3694A4.3231,4.3231,0,0,1,9.866,6.2343a4.9968,4.9968,0,0,1,.8921-2.7034A11.67,11.67,0,0,1,13.3841.7738h0Zm-8.1826,0A12.6436,12.6436,0,0,0,1.1445,3.4951,7.3013,7.3013,0,0,0,0,7.4237a4.9537,4.9537,0,0,0,1.077,3.2885,3.42,3.42,0,0,0,2.7438,1.2886,2.7978,2.7978,0,0,0,2.1632-.91,3.32,3.32,0,0,0,.833-2.334,2.9084,2.9084,0,0,0-.606-1.9733,2.1375,2.1375,0,0,0-1.7-.6934,1.9768,1.9768,0,0,0-1.6243.8829q-.6653.8827-.6818.8829-.2861,0-.404-.3515a4.583,4.583,0,0,1-.1179-1.27,5,5,0,0,1,.8921-2.7034A11.6783,11.6783,0,0,1,5.201.7738Z" fill="#aaaaaa" transform="translate(0 0.0009)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 954 B

54
htdocs/scss/app/blog.scss
View File

@ -447,10 +447,62 @@ body.wide .blog-post {
}
.blog-quote {
padding: $base-padding;
position: relative;
//padding: $base-padding;
background: $hover-hl;
border-left: 2px $hover-hl-darker2 solid;
border-radius: 2px;
margin: $base-padding 0;
font-size: $fs - 2px;
&-begin, &-end {
position: relative;
background-color: $hover-hl-darker2;
font-weight: 600;
padding: 7px $base-padding;
}
&-begin-simple {
height: 14px;
position: relative;
}
&-begin:before,
&-begin-simple:before,
&-end:after,
&-end-simple:after {
display: block;
width: 15px;
height: 12px;
position: absolute;
content: '';
}
&-begin {
text-align: left;
padding-left: 37px;
}
&-begin:before, &-begin-simple:before {
background: url(/img/ic_q_open.svg) center center no-repeat;
background-size: 15px 12px;
left: 13px;
top: 8px;
}
&-end {
padding-right: 37px;
text-align: right;
}
&-end:after, &-end-simple:after {
background: url(/img/ic_q_close.svg) center center no-repeat;
background-size: 15px 12px;
right: 13px;
bottom: 9px;
}
&-content {
padding: $base-padding;
> blockquote:last-child {
margin-bottom: 0;
}
}
}