Commit 109f62632f65ac004adbee4cd73f76dee9a25088

Authored by Michel Felipe
1 parent 457d1bb2

Remove :before selector on blockquote tags to a span with border top and left to add a highlight

Showing 1 changed file with 15 additions and 11 deletions   Show diff stats
src/app/layout.scss
@@ -335,26 +335,30 @@ a.link-black { @@ -335,26 +335,30 @@ a.link-black {
335 335
336 blockquote { 336 blockquote {
337 border-left: medium none; 337 border-left: medium none;
338 - padding: 60px 0 0 65px; 338 + padding: 60px 0 0 0px;
339 position: relative; 339 position: relative;
340 margin: 0px; 340 margin: 0px;
341 border-left: none; 341 border-left: none;
342 342
343 - &:before {  
344 - content: "\231C";  
345 - font-size: 300px;  
346 - line-height: 200px;  
347 - position: absolute;  
348 - top: 25px;  
349 - left: -25px;  
350 - font-weight: bolder;  
351 - opacity: 0.5; 343 + .content-highlight-icon {
352 @each $category, 344 @each $category,
353 $color in $categories { 345 $color in $categories {
354 .#{$category} & { 346 .#{$category} & {
355 - color: $color; 347 + border-left: 34px solid $color;
  348 + border-top: 33px solid $color;
356 } 349 }
357 } 350 }
  351 + width: 110px;
  352 + height: 112px;
  353 + position: absolute;
  354 + display: inline-block;
  355 + opacity: .5;
  356 + }
  357 +
  358 + .content-highlight-text {
  359 + position: relative;
  360 + left: 60px;
  361 + top: 65px;
358 } 362 }
359 } 363 }
360 364