From 82f6f6121978a0937b347e108bd4f19531b98555 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Sat, 12 Jan 2019 13:08:40 +0200
Subject: [PATCH] Fix issues with fullscreen snippet

---
 fullscreen.md => snippets/fullscreen.md | 50 ++-----------------------
 1 file changed, 4 insertions(+), 46 deletions(-)
 rename fullscreen.md => snippets/fullscreen.md (51%)

diff --git a/fullscreen.md b/snippets/fullscreen.md
similarity index 51%
rename from fullscreen.md
rename to snippets/fullscreen.md
index 91c7658d6..8a6a6858f 100644
--- a/fullscreen.md
+++ b/snippets/fullscreen.md
@@ -8,10 +8,10 @@ The :fullscreen CSS pseudo-class represents an element that's displayed when the
 <div class="container">
   <p><em>Click the button below to enter the element into fullscreen mode. </em></p>
   <div class="element" id="element">
-    <p>I'm in fullscreen mode!</p>
+    <p>I change color in fullscreen mode!</p>
   </div>
   <br>
-  <button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Go Full Screen!</button>
+  <button onclick="var el = document.getElementById('element'); el.requestFullscreen();">Go Full Screen!</button>
 </div>
 ```
 
@@ -49,51 +49,9 @@ The :fullscreen CSS pseudo-class represents an element that's displayed when the
 
 #### Demo
 
-<div class="snippet-demo">
-  <div class="snippet-demo__sinppet-fullscreen">
-    <div class="container">
-	  <p><em>Click the button below to enter the element into fullscreen mode. </em></p>
-	  <div class="element" id="element">
-	    <p>I'm in fullscreen mode!</p>
-	  </div>
-	  <button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Go Full Screen!</button>
-	</div>
-  </div>
-</div>
-
-<style>
-.container {
-    margin: 40px auto;
-    max-width: 700px;
-}
-
-.element {
-    padding: 20px;
-    height: 300px;
-    width: 100%;
-    background-color: skyblue;
-}
-
-.element p {
-    text-align: center;
-    color: white;
-    font-size: 3em;
-}
-
-.element:-ms-fullscreen p {
-    visibility: visible;
-}
-
-.element:fullscreen {
-    background-color: #e4708a;
-    width: 100vw;
-    height: 100vh;
-}
-</style>
-
 #### Explanation
 
-1. `fullscreen` CSS pseudo-class selector is used to select and style an element that is being displayed in full-screen mode.
+1. `fullscreen` CSS pseudo-class selector is used to select and style an element that is being displayed in fullscreen mode.
 
 #### Browser support
 
@@ -102,4 +60,4 @@ The :fullscreen CSS pseudo-class represents an element that's displayed when the
 * https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen
 * https://caniuse.com/#feat=fullscreen
 
-<!-- tags: animation -->
+<!-- tags: visual -->