diff --git a/custom.css b/custom.css
deleted file mode 100644
index 37dab79..0000000
--- a/custom.css
+++ /dev/null
@@ -1,347 +0,0 @@
-body {
- display: flex;
- flex-direction: column;
- margin: 0;
- padding-left: 1em;
- padding-right: 1em;
- padding-top: 1em;
-}
-
-body {
- font: 1em/1.5 AppleGothic, NanumGothic, Sans-serif;
- letter-spacing: +0.02em;
- word-spacing: +0.2em;
- color: rgba(100, 255, 200, 1.0);
- background-color: rgba(0, 20, 40, 1.0);
-}
-
-#header {
- padding-bottom: 3em;
-}
-
-#header::after {
- content: "lost|traIn";
- font-size: 3.6em;
- font-weight: 700;
- opacity: 0.3;
- color: rgba(100, 255, 200, 0.5);
-}
-
-figure {
- margin: 0;
- padding: 0;
-}
-
-div {
- margin-top: 0;
- margin-bottom: 1em;
- margin-left: 0;
- margin-right: 0;
- padding: 0;
- max-width: unset;
-}
-
-.plain div {
- white-space: pre-line;
-}
-
-a,
-a:link,
-a:visited {
- text-decoration: none;
- color: rgba(100, 255, 200, 1.0);
- border: 1px solid rgba(100, 255, 200, .25);
-}
-
-a:hover {
- color: hotpink;
-}
-
-.unfolded {
- display: flex;
- flex-direction: column;
-}
-
-.audio {
- display: block;
-}
-
-.unfolded>a:nth-child(1) {
- font-size: 1.1em;
- color: rgba(100, 255, 200, 0.5);
- font-weight: 700;
- border: unset;
- margin-bottom: 1em;
- padding-left: 0;
-}
-
-.unfolded>div {
- padding-left: 0.5em;
-}
-
-body>.unfolded {
- margin-top: 2em;
-}
-
-.dir::before {
- content: "";
- font-size: unset;
-}
-
-.unkown-file::before {
- content: "";
- font-size: unset;
-}
-
-audio::-webkit-media-controls-panel {
- background-color: rgba(50, 135, 120, 1.0);
-}
-
-.image {
- max-width: 700px;
-}
-
-a[href^="../"] {
- visibility: hidden;
-}
-
-a[href^="../"]::before {
- visibility: visible;
- content: "«";
- padding-top: 1em;
- padding-bottom: 2em;
-}
-
-/* audio {
-}
-*/
-
-/* * {
- box-sizing: border-box;
-}
-
-body {
- top:0;
- left: 0;
- width: calc(100% - 10em);
- min-width: 1024px;
- padding: 2em 3em;
- background-color: #e9d8fd;
- font-size: 17px;
- line-height: 1.3;
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: flex-start;
- align-items: stretch;
- align-content: stretch;
-}
-
-a {
- color:magenta;
-}
-a:visited {
- color:magenta;
-}
-a[href^="../"] {
- visibility: hidden;
-}
-a[href^="../"]::before {
- visibility: visible;
- content: "← BACK";
- font-size: 12pt;
- color: white;
- font-family: monospace;
- position: fixed;
- background-color: magenta;
- width: 100%;
- top: 0;
- left: 0;
- padding: 0.35em;
-}
-.dir > a {
- color:#ff1a75;
-}
-.dir > a:visited {
- color:#ff1a75;
-}
-
-.footnotes {
- font-size:14px;
- color:#222;
-}
-.filename,
-figcaption{
- display: block;
- font-size: 13px;
- margin-top:1em;
-}
-div.html {
- width:50%;
- margin-bottom: 5em;
- margin-right:5%;
-}
-pre{
- white-space: pre-wrap;
-}
-
-div.pdf{
- width:40%;
- margin-right:5%;
- height: 800px;
-}
-div.pdf object.pdf{
- width:100%;
- height: 90%;
-}
-img{
- width:90%;
-}
-
-.plain::before {
- display: block;
- width: 150px;
- content:"Other files: ";
- padding-bottom:1em;
-
-}
-
-.plain > a {
- color:magenta;
- display:block;
- word-wrap:break-word;
-
-}
-.plain{
- position: absolute;
- top:10em;
- right:2em;
- width:255px;
- padding-left:7%;
- font-size:13px;
- color:#333;
-}
-
-div.dir::before{
- content:"";
-}
-
-div.dir{
- background-color: white;
- border-top: 3px solid black;
- border-bottom: 3px solid #ff1a75;
- border-radius: 14px;
- float: left;
- display: block;
- margin: calc(1em - 3px) 0;
- padding:1em;
- color:#ff1a75;
- font-size:16px;
-}
-#menuBar {
- margin-bottom:5%;
- width:95%;
- min-width: 900px;
-}
-img.logo{
- width: 100px;
- height: auto;
-}
-em.moddate{
- font-size: 8pt;
- margin-top:3em;
-}
-h2#colophon{
- page-break-before: always;
-}
-
-#WELCOME.html{
- color:magenta;
-}
-
-.bibliotecha {
- background-color: lemonchiffon !important;
-}
-
-.homebrewserver {
- background-color: peachpuff !important;
-}
-
-.homebrewserver .toc, .homebrewserver #forkongithub, header#banner {display:none;}
-
-.homebrewserver .entry-title{
- font-size:27px;
- font-weight: bold;
-}
-
-.homebrewserver h2{
- font-size:20px;
-}
-
-.relearn {
- background-color: powderblue !important;
-}
-.relearn .printimg{
- display: none;
-}
-.pad {
- position: relative;
- display: block;
- margin-top: 5em;
-}
-.pad + hr{
- display: none;
-}
-#nooo\.relearn\.call\.for\.tracks a:after{
- content: "";
-}
-#nooo\.relearn\.call\.for\.tracks a.footnote{
- display: none;
-}
-.relearn iframe{
- display: block;
- width: 100%;
- height: 500px;
- margin:1em 0;
- background-color: white;
- border:0;
-}
-
-@media (max-width: 767px) {
-
- body {
- min-width: 100%;
- padding: 1em;
- margin: 0;
- }
-
- #menuBar {
- width: 100%;
- min-width: auto;
- float: none;
- }
-
- #folder {
- width: 100%;
- margin: 0.2em 0;
- }
-
- .plain {
- display: none;
- }
-
- div.html {
- width: 100%;
- margin-right: 0;
- margin-bottom: 2em;
- }
-
- div.pdf {
- display: none;
- }
-
- img {
- width: 100%;
- }
-
-} */
diff --git a/distribusi/page_template.py b/distribusi/page_template.py
index a10c8d3..46402b9 100644
--- a/distribusi/page_template.py
+++ b/distribusi/page_template.py
@@ -5,19 +5,13 @@ html_head = """
-
+
+
"""
html_footer = """
diff --git a/run.sh b/run.sh
index bbf86de..4f7e3ee 100755
--- a/run.sh
+++ b/run.sh
@@ -1,4 +1,4 @@
#!/bin/bash
pip install -r py3/requirements.txt
-python run.py -d ./data/ -nf -s custom.css --no-hidden --unfolding
+python run.py -d ./data/ -nf -s styles/dark.css --no-hidden --unfolding
diff --git a/styles/aurora.css b/styles/aurora.css
new file mode 100644
index 0000000..cf08615
--- /dev/null
+++ b/styles/aurora.css
@@ -0,0 +1,152 @@
+/************************************
+ originally from distribusi START >>>
+ ************************************/
+
+/* .image {
+ max-width: 100%%;
+} */
+
+.pdf object {
+ width: 640px;
+ height: 640px;
+}
+
+/* .dir::before {
+ content: "📁 ";
+ font-size: 18px;
+} */
+
+.filename {
+ display: block;
+ font-family: mono;
+}
+
+/* .unkown-file::before {
+ content: "📄 ";
+ font-size: 18px;
+} */
+
+div {
+ /* max-width: 640px; */
+ display: inline-block;
+ vertical-align: top;
+ /* margin: 1em;
+ padding: 1em; */
+}
+
+video {
+ width: 640px;
+ max-height: 640px;
+}
+/*************************************
+ <<< END of originally from distribusi
+ *************************************/
+
+/* layout */
+
+div {
+ margin-bottom: 1em;
+}
+
+.plain div {
+ white-space: pre-line;
+}
+
+figure {
+ margin: 0;
+ padding: 0;
+}
+
+.audio {
+ display: block;
+}
+
+.image {
+ max-width: 700px;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ margin: 0;
+ padding-left: 1em;
+ padding-right: 1em;
+ padding-top: 1em;
+ scrollbar-width: none;
+}
+
+body::-webkit-scrollbar {
+ width: 0;
+ height: 0;
+}
+
+#header {
+ padding-bottom: 3em;
+}
+
+.unfolded {
+ display: flex;
+ flex-direction: column;
+}
+
+.unfolded>div {
+ padding-left: 0.5em;
+}
+
+body>.unfolded {
+ margin-top: 2em;
+}
+
+/* theme */
+
+body {
+ font: 1em/1.5 AppleGothic, NanumGothic, Sans-serif;
+ letter-spacing: +0.02em;
+ word-spacing: +0.2em;
+ color: rgba(100, 255, 200, 1.0);
+ background-color: rgba(0, 20, 40, 1.0);
+}
+
+#header::after {
+ content: "lost|traIn";
+ font-size: 3.6em;
+ font-weight: 700;
+ opacity: 0.3;
+ color: rgba(100, 255, 200, 0.5);
+}
+
+a,
+a:link,
+a:visited {
+ text-decoration: none;
+ color: rgba(100, 255, 200, 1.0);
+ border: 1px solid rgba(100, 255, 200, .25);
+}
+
+a:hover {
+ color: hotpink;
+}
+
+.unfolded>a:nth-child(1) {
+ font-size: 1.1em;
+ color: rgba(100, 255, 200, 0.5);
+ font-weight: 700;
+ border: unset;
+ margin-bottom: 1em;
+ padding-left: 0;
+}
+
+audio::-webkit-media-controls-enclosure {
+ background-color: rgba(50, 135, 120, 1.0);
+}
+
+a[href^="../"] {
+ visibility: hidden;
+}
+
+a[href^="../"]::before {
+ visibility: visible;
+ content: "«";
+ padding-top: 1em;
+ padding-bottom: 2em;
+}
diff --git a/styles/dark.css b/styles/dark.css
new file mode 100644
index 0000000..7120a59
--- /dev/null
+++ b/styles/dark.css
@@ -0,0 +1,162 @@
+/************************************
+ originally from distribusi START >>>
+ ************************************/
+
+/* .image {
+ max-width: 100%%;
+} */
+
+.pdf object {
+ width: 640px;
+ height: 640px;
+}
+
+/* .dir::before {
+ content: "📁 ";
+ font-size: 18px;
+} */
+
+.filename {
+ display: block;
+ font-family: mono;
+}
+
+/* .unkown-file::before {
+ content: "📄 ";
+ font-size: 18px;
+} */
+
+div {
+ /* max-width: 640px; */
+ display: inline-block;
+ vertical-align: top;
+ /* margin: 1em;
+ padding: 1em; */
+}
+
+video {
+ width: 640px;
+ max-height: 640px;
+}
+/*************************************
+ <<< END of originally from distribusi
+ *************************************/
+
+/* layout */
+
+div {
+ margin-bottom: 1em;
+}
+
+.plain div {
+ white-space: pre-line;
+}
+
+figure {
+ margin: 0;
+ padding: 0;
+}
+
+.audio {
+ display: block;
+}
+
+.image {
+ max-width: 700px;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ margin: 0;
+ padding-left: 1em;
+ padding-right: 1em;
+ padding-top: 1em;
+ scrollbar-width: none;
+}
+
+body::-webkit-scrollbar {
+ width: 0;
+ height: 0;
+}
+
+#header {
+ padding-bottom: 3em;
+}
+
+.unfolded {
+ display: flex;
+ flex-direction: column;
+}
+
+.unfolded>div {
+ padding-left: 0.5em;
+}
+
+body>.unfolded {
+ margin-top: 2em;
+}
+
+/* theme */
+
+body {
+ font: 1em/1.5 AppleGothic, NanumGothic, Sans-serif;
+ letter-spacing: +0.02em;
+ word-spacing: +0.2em;
+ color: rgba(127, 127, 127, 1.0);
+ background-color: rgba(20, 20, 20, 1.0);
+}
+
+#header::after {
+ content: "lost|traIn";
+ font-size: 3.6em;
+ font-weight: 700;
+ opacity: 0.3;
+ color: rgba(127, 127, 127, 0.5);
+}
+
+a,
+a:link,
+a:visited {
+ text-decoration: none;
+ color: rgba(127, 127, 127, 1.0);
+ border: 1px solid rgba(127, 127, 127, .25);
+ /* color: rgba(0, 0, 0, 0.5); */
+ /* border: 1px solid rgba(0, 0, 0, .25); */
+}
+
+a:hover {
+ color: hotpink;
+}
+
+.unfolded>a:nth-child(1) {
+ font-size: 1.1em;
+ color: rgba(127, 127, 127, 0.5);
+ font-weight: 700;
+ border: unset;
+ margin-bottom: 1em;
+ padding-left: 0;
+}
+
+audio::-webkit-media-controls-enclosure {
+ background-color: rgba(50, 50, 50, 1.0);
+}
+
+audio::-webkit-media-controls-current-time-display {
+ text-shadow: none;
+}
+
+audio::-webkit-media-controls-time-remaining-display {
+ text-shadow: none;
+}
+
+a[href^="../"] {
+ visibility: hidden;
+}
+
+a[href^="../"]::before {
+ visibility: visible;
+ content: "«";
+ padding-top: 1em;
+ padding-bottom: 2em;
+}
diff --git a/styles/white.css b/styles/white.css
new file mode 100644
index 0000000..276b9a3
--- /dev/null
+++ b/styles/white.css
@@ -0,0 +1,149 @@
+/************************************
+ originally from distribusi START >>>
+ ************************************/
+
+/* .image {
+ max-width: 100%%;
+} */
+
+.pdf object {
+ width: 640px;
+ height: 640px;
+}
+
+/* .dir::before {
+ content: "📁 ";
+ font-size: 18px;
+} */
+
+.filename {
+ display: block;
+ font-family: mono;
+}
+
+/* .unkown-file::before {
+ content: "📄 ";
+ font-size: 18px;
+} */
+
+div {
+ /* max-width: 640px; */
+ display: inline-block;
+ vertical-align: top;
+ /* margin: 1em;
+ padding: 1em; */
+}
+
+video {
+ width: 640px;
+ max-height: 640px;
+}
+/*************************************
+ <<< END of originally from distribusi
+ *************************************/
+
+/* layout */
+
+div {
+ margin-bottom: 1em;
+}
+
+.plain div {
+ white-space: pre-line;
+}
+
+figure {
+ margin: 0;
+ padding: 0;
+}
+
+.audio {
+ display: block;
+}
+
+.image {
+ max-width: 700px;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ margin: 0;
+ padding-left: 1em;
+ padding-right: 1em;
+ padding-top: 1em;
+}
+
+#header {
+ padding-bottom: 3em;
+}
+
+.unfolded {
+ display: flex;
+ flex-direction: column;
+}
+
+.unfolded>div {
+ padding-left: 0.5em;
+}
+
+body>.unfolded {
+ margin-top: 2em;
+}
+
+/* theme */
+
+body {
+ font: 1em/1.5 AppleGothic, NanumGothic, Sans-serif;
+ letter-spacing: +0.02em;
+ word-spacing: +0.2em;
+ /* color: rgba(100, 255, 200, 1.0); */
+ /* background-color: rgba(0, 20, 40, 1.0); */
+}
+
+#header::after {
+ content: "lost|traIn";
+ font-size: 3.6em;
+ font-weight: 700;
+ opacity: 0.3;
+ /* color: rgba(100, 255, 200, 0.5); */
+ color: rgba(0, 0, 0, 0.2);
+}
+
+a,
+a:link,
+a:visited {
+ text-decoration: none;
+ /* color: rgba(100, 255, 200, 1.0); */
+ /* border: 1px solid rgba(100, 255, 200, .25); */
+ color: rgba(0, 0, 0, 0.5);
+ border: 1px solid rgba(0, 0, 0, .25);
+}
+
+a:hover {
+ color: hotpink;
+}
+
+.unfolded>a:nth-child(1) {
+ font-size: 1.1em;
+ /* color: rgba(100, 255, 200, 0.5); */
+ font-weight: 700;
+ border: unset;
+ margin-bottom: 1em;
+ padding-left: 0;
+}
+
+audio::-webkit-media-controls-panel {
+ /* background-color: rgba(50, 135, 120, 1.0); */
+}
+
+a[href^="../"] {
+ visibility: hidden;
+}
+
+a[href^="../"]::before {
+ visibility: visible;
+ content: "«";
+ padding-top: 1em;
+ padding-bottom: 2em;
+}