adding spoiler

Ryccoo · Jun 18, 2016 · cabe7d6 · cabe7d6
1 parent d5316a7
commit cabe7d6
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 0 deletions.
diff --git a/_includes/style.scss b/_includes/style.scss
@@ -21,3 +21,4 @@
 @import "components/share";
 @import "components/side-by-side";
 @import "components/social-links";
+@import "components/spoiler";
diff --git a/_posts/2015-02-24-markdown-extra-components.markdown b/_posts/2015-02-24-markdown-extra-components.markdown
@@ -22,6 +22,7 @@ You can pick as item to see how to apply in markdown.
 - [Side-by-Side](#side-by-side)
 - [Star](#star)
 - [Especial Breaker](#especial-breaker)
+- [Spoiler](#spoiler)
 
 #### External Elements
 - [Gist](#gist)
@@ -123,6 +124,18 @@ You can add a especial *hr* to your text.
 
 ---
 
+## Spoiler
+
+You can add an especial hidden content that appears on hover.
+
+{% highlight html %}
+<div class="spoiler"><p>your content</p></div>
+{% endhighlight %}
+
+<div class="spoiler"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
+
+---
+
 ## Gist
 
 You can add Gists from github.

diff --git a/_sass/components/spoiler.sass b/_sass/components/spoiler.sass
@@ -0,0 +1,15 @@
+.spoiler
+    position: relative
+
+    &:before
+        content: ''
+        background-color: #fafae0
+        position: absolute
+        top: 0
+        bottom: 0
+        left: 0
+        right: 0
+        z-index: 50
+
+    &:hover:before
+        display: none