diff --git a/demo.js b/demo-386.js
similarity index 100%
rename from demo.js
rename to demo-386.js
diff --git a/demo-386.scss b/demo-386.scss
new file mode 100644
index 0000000..2ceb4d8
--- /dev/null
+++ b/demo-386.scss
@@ -0,0 +1,197 @@
+/**
+ * variables
+ *
+ */
+
+$text-color: #000;
+$link-color: #fefe5b;
+$background-color: #000084;
+$background-contrast-color: #bbbbbb;
+
+
+/**
+ * default elements
+ *
+ */
+
+body {
+ color: $text-color;
+ background-color: $background-color;
+ font-family: 'PxPlus IBM VGA8', sans-serif;
+ font-style: normal;
+ font-size: 1.2rem;
+}
+
+*:first-letter {
+ color: $link-color;
+}
+
+a {
+ color: $text-color;
+ text-decoration: none;
+}
+
+
+/**
+ * navigation
+ *
+ *
+ */
+
+nav {
+ ul {
+ list-style: none;
+ border: 3px solid #000;
+ margin: 0;
+ padding: 0.6em 0.8em;
+
+ a {
+ display: block;
+ padding: 0.1em;
+ margin: -0.1em;
+
+ &:hover, &.current {
+ color: #fff;
+ background-color: $text-color;
+ }
+ }
+ }
+}
+
+
+/**
+ * footer
+ *
+ *
+ */
+
+footer {
+ position: absolute;
+ bottom: 0;
+ z-index: -1;
+
+ text-align: center;
+ font-size: 3rem;
+ width: 100%;
+
+ background: #000;
+ padding: 0.8em 0;
+
+ i {
+ color: #fff !important;
+ }
+}
+
+
+/**
+ * panel
+ *
+ *
+ */
+
+.panel {
+ padding: 6px 0;
+ background-color: $background-contrast-color;
+}
+
+
+/**
+ * icons
+ *
+ *
+ */
+
+[class^="icon-tiny"], [class*=" icon-tiny"] {
+ font-family: 'PxPlus IBM VGA8', sans-serif !important;
+ font-style: normal;
+ color: $link-color;
+}
+
+.icon-tiny-hamburger-open, .icon-tiny-hamburger-close {
+ position: absolute;
+ top: 3px;
+ transition: transform .2s;
+ margin: 3px;
+
+ &:after {
+ content: '\2bc5';
+ }
+}
+
+.icon-tiny-hamburger-open {
+ transform: rotate(0deg);
+}
+
+.icon-tiny-hamburger-close {
+ transform: rotate(180deg);
+}
+
+
+/**
+ * tiny-tiny-hamburger
+ *
+ *
+ */
+
+.tiny-hamburger {
+ &__inner {
+ padding: 4px 8px 5px;
+ }
+
+ // modal with animation
+ &__modal {
+ height: auto;
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.2s;
+ }
+
+ &__button {
+ appearance: none;
+ border: none;
+ background: transparent;
+ padding: 0.3em 0.5em;
+
+ &:hover {
+ cursor: pointer;
+ outline: none;
+ background-color: $background-contrast-color;
+ }
+
+ &:focus {
+ outline: none;
+ }
+ }
+}
+
+.navbar {
+ position: fixed;
+ width: 100%;
+ text-align: center;
+ background-color: white;
+
+ li {
+ display: inline-block;
+ margin: 0 0.3em;
+
+ a {
+ display: block;
+ transition: all .1s ease-in-out;
+
+ &:hover {
+ transform: scale(1.3);
+ }
+ }
+
+ &.current {
+ a {
+ transform: scale(1.3);
+ }
+ }
+ }
+}
+
+.section {
+ padding: 6em;
+ line-height: 1.8;
+}
diff --git a/dist/css/demo-386.css b/dist/css/demo-386.css
new file mode 100644
index 0000000..30fceef
--- /dev/null
+++ b/dist/css/demo-386.css
@@ -0,0 +1,186 @@
+@charset "UTF-8";
+
+/**
+ * variables
+ *
+ */
+
+/**
+ * default elements
+ *
+ */
+
+body {
+ color: #000;
+ background-color: #000084;
+ font-family: "PxPlus IBM VGA8", sans-serif;
+ font-style: normal;
+ font-size: 1.2rem;
+}
+
+*:first-letter {
+ color: #fefe5b;
+}
+
+a {
+ color: #000;
+ text-decoration: none;
+}
+
+/**
+ * navigation
+ *
+ *
+ */
+
+nav ul {
+ list-style: none;
+ border: 3px solid #000;
+ margin: 0;
+ padding: 0.6em 0.8em;
+}
+
+nav ul a {
+ display: block;
+ padding: 0.1em;
+ margin: -0.1em;
+}
+
+nav ul a:hover,
+nav ul a.current {
+ color: #fff;
+ background-color: #000;
+}
+
+/**
+ * footer
+ *
+ *
+ */
+
+footer {
+ position: absolute;
+ bottom: 0;
+ z-index: -1;
+ text-align: center;
+ font-size: 3rem;
+ width: 100%;
+ background: #000;
+ padding: 0.8em 0;
+}
+
+footer i {
+ color: #fff !important;
+}
+
+/**
+ * panel
+ *
+ *
+ */
+
+.panel {
+ padding: 6px 0;
+ background-color: #bbbbbb;
+}
+
+/**
+ * icons
+ *
+ *
+ */
+
+[class^=icon-tiny],
+[class*=" icon-tiny"] {
+ font-family: "PxPlus IBM VGA8", sans-serif !important;
+ font-style: normal;
+ color: #fefe5b;
+}
+
+.icon-tiny-hamburger-open,
+.icon-tiny-hamburger-close {
+ position: absolute;
+ top: 3px;
+ transition: transform 0.2s;
+ margin: 3px;
+}
+
+.icon-tiny-hamburger-open:after,
+.icon-tiny-hamburger-close:after {
+ content: "\2BC5";
+}
+
+.icon-tiny-hamburger-open {
+ transform: rotate(0deg);
+}
+
+.icon-tiny-hamburger-close {
+ transform: rotate(180deg);
+}
+
+/**
+ * tiny-tiny-hamburger
+ *
+ *
+ */
+
+.tiny-hamburger__inner {
+ padding: 4px 8px 5px;
+}
+
+.tiny-hamburger__modal {
+ height: auto;
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.2s;
+}
+
+.tiny-hamburger__button {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ border: none;
+ background: transparent;
+ padding: 0.3em 0.5em;
+}
+
+.tiny-hamburger__button:hover {
+ cursor: pointer;
+ outline: none;
+ background-color: #bbbbbb;
+}
+
+.tiny-hamburger__button:focus {
+ outline: none;
+}
+
+.navbar {
+ position: fixed;
+ width: 100%;
+ text-align: center;
+ background-color: white;
+}
+
+.navbar li {
+ display: inline-block;
+ margin: 0 0.3em;
+}
+
+.navbar li a {
+ display: block;
+ transition: all 0.1s ease-in-out;
+}
+
+.navbar li a:hover {
+ transform: scale(1.3);
+}
+
+.navbar li.current a {
+ transform: scale(1.3);
+}
+
+.section {
+ padding: 6em;
+ line-height: 1.8;
+}
+
diff --git a/dist/index.html b/dist/index.html
index 03cfd68..c9cb33b 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -8,7 +8,7 @@
-
+
@@ -63,6 +63,6 @@
-
+