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

Michel Felipe
1 parent 457d1bb2
Showing 1 changed file with 15 additions and 11 deletions Show diff stats
src/app/layout.scss
@@ -335,26 +335,30 @@ a.link-black {
  
 blockquote {
   border-left: medium none;
-  padding: 60px 0 0 65px;
+  padding: 60px 0 0 0px;
   position: relative;
   margin: 0px;
   border-left: none;
  
-  &:before {
-    content: "\231C";
-    font-size: 300px;
-    line-height: 200px;
-    position: absolute;
-    top: 25px;
-    left: -25px;
-    font-weight: bolder;
-    opacity: 0.5;
+  .content-highlight-icon {
     @each $category,
     $color in $categories {
       .#{$category} & {
-        color: $color;
+        border-left: 34px solid $color;
+        border-top: 33px solid $color;
       }
     }
+    width: 110px;
+    height: 112px;
+    position: absolute;
+    display: inline-block;
+    opacity: .5;
+  }
+
+  .content-highlight-text {
+    position: relative;
+    left: 60px;
+    top: 65px;
   }
 }