.emacs.d

My Emacs configuration files.
Log | Files | Refs | README

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:
Asnippets/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>