Closable Alerts

A Hugo shortcode to create alerts that begin popped out on page load, but can be closed by the user.

# file.md
{{< closable_alert >}}
**Info**
<br />
I'm useful information for you.
{{< /closable_alert >}}

{{< closable_alert style="warning" >}}
**Bold Text!**
<br />
I'm a very important warning.
{{< /closable_alert >}}

{{< closable_alert style="success" >}}
**Good job!**
<br />
You did a good thing, way to _go_.
{{< /closable_alert >}}

{{< closable_alert style="danger" >}}
**Ruh Roh!**
<br />
Things are not good at all.
{{< /closable_alert >}}

# closable_alert.html

<!-- Closable alerts with no CSS framework needed https://www.w3schools.com/howto/howto_js_alert.asp -->
<style>
    .alert {
        padding: 20px;
        background-color: #2196F3;
        color: white;
        opacity: 1;
        transition: opacity 0.6s;
        margin-bottom: 15px;
    }

    .alert.success {
        background-color: #04AA6D;
    }

    .alert.danger {
        background-color: #f44336;
    }

    .alert.warning {
        background-color: #ff9800;
    }

    .closebtn {
        margin-left: 15px;
        color: white;
        font-weight: bold;
        float: right;
        font-size: 22px;
        line-height: 20px;
        cursor: pointer;
        transition: 0.3s;
    }

    .closebtn:hover {
        color: black;
    }
</style>
<div class="alert {{ with .Get "style"}}{{ . }}{{ end }}">
    <span class="closebtn" onclick="var div=this.parentElement; div.style.opacity='0';setTimeout(function(){ div.style.display = 'none'; }, 600);">&times;</span> 
    {{ .Inner | markdownify }}
</div>