67 lines
1.5 KiB
SCSS
67 lines
1.5 KiB
SCSS
/**
|
|
|
|
Styles to apply the handwritten effect to a thinger
|
|
|
|
**/
|
|
|
|
.handwritten-wrap {
|
|
font-family: "Caveat", cursive;
|
|
|
|
a {
|
|
position: relative;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: -2px;
|
|
right: -2px;
|
|
bottom: -0.15em;
|
|
height: 0.3em;
|
|
pointer-events: none;
|
|
|
|
background: repeating-linear-gradient(
|
|
-3deg,
|
|
currentColor 0 1.5px,
|
|
transparent 1.5px 4px
|
|
);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
del {
|
|
position: relative;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
del::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: -4px;
|
|
top: 50%;
|
|
width: calc(100% + 8px);
|
|
height: 1.4em;
|
|
transform: translateY(-50%);
|
|
pointer-events: none;
|
|
|
|
background-color: currentColor;
|
|
|
|
-webkit-mask-image: url("data:image/svg+xml;utf8,\
|
|
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'>\
|
|
<path d='M2 8 Q20 2 40 10 T80 8 T98 10' stroke='white' stroke-width='3' fill='none'/>\
|
|
<path d='M2 14 Q30 6 60 14 T98 12' stroke='white' stroke-width='2' fill='none'/>\
|
|
</svg>");
|
|
-webkit-mask-repeat: repeat-x;
|
|
-webkit-mask-size: auto 100%;
|
|
|
|
mask-image: url("data:image/svg+xml;utf8,\
|
|
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'>\
|
|
<path d='M2 8 Q20 2 40 10 T80 8 T98 10' stroke='white' stroke-width='3' fill='none'/>\
|
|
<path d='M2 14 Q30 6 60 14 T98 12' stroke='white' stroke-width='2' fill='none'/>\
|
|
</svg>");
|
|
mask-repeat: repeat-x;
|
|
mask-size: auto 100%;
|
|
}
|
|
}
|