Buttons page

assets/sass/_handwritten.scss

@@ -0,0 +1,67 @@
+/**
+
+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%;
+  }
+}