Add _example_ folder

Author: KugiHaito

example.css

@@ -0,0 +1,19 @@
+/* Demo CSS file - example code */
+.demo {
+    display: flex;
+}
+
+.demo .item {
+    cursor: pointer;
+    flex-grow: 1;
+}
+
+.demo .item:hover {
+    background: rgba(0, 0, 0, .2);
+}
+
+.demo .item:focus,
+.demo .item.selected {
+    background-color: rgba(0, 0, 0, .8);
+    color: #FFF;
+}

example/demo.css

@@ -0,0 +1,156 @@
+/* External Example Code */
+@charset "UTF-8";
+
+:root {
+    --theme-color: #eb2300;
+    --my-height: 1.2;
+}
+
+::-webkit-scrollbar {
+    width: 8px;
+    height: 5px;
+}
+::-webkit-scrollbar-track {
+    background-color: #fff;
+}
+::-webkit-scrollbar-thumb {
+    background: var(--theme-color);
+}
+
+::selection {
+    background: rgba(0, 0, 0, .3);
+}
+
+@import "custom.css";
+@import url("bluish.css") screen, tv;
+@import url('landscape.css') screen and (orientation:landscape);
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+
+}
+
+#title {
+    font-weight: 600;
+}
+
+@keyframes example {
+    from { margin-top: 50px; }
+    50% { 
+        margin-top: 150px;
+        margin-left: 80px;
+    }
+    20%, 80% {
+        margin-top: 80px;
+        margin-left: -80px;
+    }
+    to { margin-top: 100px; }
+}
+
+body {
+    padding: 20px 40px;
+}
+
+input:checked~div {
+    background: #e3e3e3;
+}
+
+input:checked~div:hover {
+    background: #5f5757;
+}
+
+input[class~='danger']:checked ~ div:hover {
+    background: red !important;
+}
+
+body p.warning {
+    color: yellow;
+    filter: hue-rotate(180deg) drop-shadow(8px 8px 0 green);
+    box-shadow: 8px 8px 0 0 green, 12px 12px 0 0 red;
+}
+
+@font-face {
+    font-family: "Open Sans";
+    src: url("../assets/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: ideal-sans-serif;
+    src: local(ideal-sans-serif),
+         url(ideal-sans-serif.woff) format("woff"),
+         url(basic-sans-serif.ttf) format("truetype");
+    font-weight: 500;
+}
+
+p, span {color: #212121;margin: 5px 0;}
+
+
+@media (max-width: 760px) {
+    body {
+        padding: 10px 20px;
+    }
+
+    p, span {
+        margin: 0;
+    }
+}
+
+@media (max-height: 500px) and (orientation: landscape), not print {
+    body {
+        padding: 5px 10px;
+    }
+}
+
+@media screen, print {
+    body {
+        --my-height: 1.2;
+        line-height: var(--my-height);
+        line-height: calc(var(--my-height) - 0.2);
+    }
+}
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px), not print {
+    body {
+        line-height: 1.4; 
+    }
+}
+
+pre:hover {
+    transition: background-color 300ms linear 0s, transform 500ms ease-in-out 300ms;
+}
+
+pre::after, pre::before {
+    /* content: ''; */
+    background: rgb(250, 119, 11);
+    margin: 50px;
+    padding: 50px;
+}
+
+[data-span="lead"] {
+    border-bottom: 1px solid #5f5757;
+}
+[data-span="lead"]:hover, [data-span="lead"]:focus {
+    border-bottom: 1px solid var(--theme-color);
+}
+
+.btn {
+    color:white;
+    background: var(--theme-color);
+    border-radius: 3px;
+    font-weight: 600;
+    margin: 5px;
+    padding: 5px 10px;
+    text-decoration: none;
+}
+
+.btn:focus {
+    color: red;
+    background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7) no-repeat;
+}
+
+/* PseudoEvent: only-read (not work!) */
+.btn@click {
+    box-shadow: 0 0 5px red;
+}