.emacs.d

commit 1fd3d1611e5dfe0e753de050b2d839534bbd7d0c
parent 13b0a22c2651374cbab1b827afe218aec90c3966
Author: Hugo Soucy <hugo.soucy@toumoro.com>
Date:   Wed, 18 Sep 2019 13:41:43 -0400

Add a new web snippet to create a clickable image block

Diffstat:
A
snippets/web-mode/blocks/block-img-clickable
 | 
70
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

1 file changed, 70 insertions(+), 0 deletions(-)
diff --git a/snippets/web-mode/blocks/block-img-clickable b/snippets/web-mode/blocks/block-img-clickable
@@ -0,0 +1,70 @@
+# -*- mode: snippet -*-
+# name: Clickable BLOCK with image & text (HTML/CSS)
+# key: block-img-clickable
+# --
+
+<style>
+    .block-img-clickable {
+        color: #ffffff;
+        display: inline-block;
+        position: relative;
+        text-decoration: none;
+    }
+
+    .block-img-clickable:focus {
+        outline: 0.5rem solid rgb(6, 80, 105);
+        outline-offset: -0.5rem;
+    }
+
+    .block-img-clickable__text {
+        background: rgba(6, 80, 105, 0.75);
+        bottom: 0;
+        color: #ffffff;
+        font-size: 1rem;
+        font-weight: 700;
+        line-height: normal;
+        padding: 2rem 6rem 2rem 2rem;
+        margin: 0;
+        left: 0;
+        position: absolute;
+        right: 0;
+        transition: all 0.25s ease-in-out;
+        z-index: 1;
+    }
+
+    .block-img-clickable:focus .block-img-clickable__text,
+    .block-img-clickable:hover .block-img-clickable__text {
+        background: rgba(6,80,105,1);
+    }
+
+    .block-img-clickable__text::after {
+        background: url("ico-arrow-right.svg") no-repeat;
+        bottom: 0;
+        content: "";
+        display: block;
+        height: 2rem;
+        margin: auto 0;
+        position: absolute;
+        right: 2rem;
+        top: 0;
+        width: 2rem;
+    }
+
+    .block-img-clickable__img {
+        display: inline-block;
+        max-width: 100%;
+        vertical-align: bottom;
+    }
+</style>
+
+<a class="block-img-clickable" href="${1:#}">
+    <h2 class="block-img-clickable__text" id="txtImg0">
+        ${3:Cum sociis natoque penatibus et magnis dis parturient montes,
+        nascetur ridiculus mus.}
+    </h2>
+
+    <img alt=""
+        aria-describedby="txtImg0"
+        class="block-img-clickable__img"
+        src="${2:https://dummyimage.com/1024x768/ccc/000.png}" />
+</a>