layout test

.gitignore

@@ -7,5 +7,6 @@ dist
 index.html
 pip-wheel-metadata/
 *.pdf
-*.css
 *.pyz
+node_modules/
+.python-version

custom.css

@@ -0,0 +1,335 @@
+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);
+}
+
+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%;
+  }
+
+} */

data/01.txt

@@ -0,0 +1,7 @@
+아. 일단 되서 다행이다.
+포기한 것 보단, 낫지..
+
+그치만, 너무 힘들었어. 흠..
+
+이제 서버를 뒤에 두는 거 할 수 있게 되었어.
+CNAME 이라던가. A record 같은걸 이용해서, dns를 더 확보해야 그만큼 서버를 둘 수가 있게 되는 것 같은데...

data/phenomenon/01.txt

@@ -0,0 +1,11 @@
+현상.
+
+객체인가 현상인가.
+
+창문밖에, 나무한그루가 있고, 초록빛깔 나뭇잎들위로 뜨거운 여름 햇볕이 쏟아져. 그 잎사귀들이 초록빛으로 빛나는 장면.
+
+혹은 그런 현상을, 나는 목격한다. 목격이라는 현상. 눈이라는 장치에 초록의 빛의 광선들이, 에너지들이 쏟아져들어와서, 어디를 얼마만큼인지 모를, 신경에 광에너지 반응을 일으키고, 그것이 어째서인지, 머리속에서 2차원적인 공간에 대한 정보로, 바뀌어서 전달이 되는 시각이라는 현상.
+
+그러나, 또한 그것을 자극이라고 받아들이면서, 그것이 머리속에서-라고 추정되는- 그곳의 사고-라는 현상을 통해서 아, 저것이 하나의 현상인가, 혹은 저것은 객체들의 집합인가 하는 질문아닌 질문을 불러일으키는 객체의 현상적 객체 관찰이라는 현상의 발생.
+
+그러나, 그것이 사실은 저 나무와 우리의 머리와 우리의 마음-이라고 추정되는- 그것과 빛이라는 매체가 어떤 에너지들을 그저 주고 받는 현상. 즉, 마치, 나뭇잎에 빛에너지가 우주로 부터 쏟아지자, 그것들 중에 일부가 반사해서, 어느 구체의 공간에 들어와, 어느 생체전기회로에 자극이 되어, 그것이 무언가 복잡해보이는 신경다발의 집합체에 신호를 주고, 그에 따른 약간의 반응적 추가 전기신호가 발생하는 상황. 그렇게 다함께 한덩어리로 연결되어진 그러한 현상.

data/phenomenon/degree2/hello2.txt

@@ -0,0 +1 @@
+yo.

data/phenomenon/hello.md

@@ -0,0 +1 @@
+나는 너에게, 안녕! 하고.

data/player/player.html

@@ -2,8 +2,8 @@
 <html>
   <head>
     <title>player</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js"></script>
+    <script src="./.js/p5.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
+    <script src="./.js/p5.sound.min.js"></script>
   </head>
   <body>
     <script>
@@ -12,7 +12,7 @@
       var timer;
       function setup() {
         noCanvas();
-        audio = createAudio("sample.mp3", function() {
+        audio = createAudio("./.audio/sample.mp3", function() {
           button = createSpan("▶️");
           button.mouseClicked(function () {
             audio.play();
@@ -27,7 +27,7 @@
         //   console.log('onplay!');
         // }
       }
-      
+
       function draw() {
         if (loaded) {
           timer.html(" " + new Date(audio.time() * 1000).toISOString().substr(11, 8));

data/readme.txt

@@ -1 +0,0 @@
-Hello.

distribusi/distribusi.py

@@ -145,8 +145,6 @@ def render_dir(args, root):
                             # what types of text files to expand
                             a = '<section id="{}">{}</section>'.format(name, open(full_path).read())
                         elif subtype in CODE_TYPES or name.endswith('.txt'):
-                            # if the plain text is code,
-                            # which types do we wrap in pre-tags?
                             a = "<div>" + open(full_path).read() + "</div>"
                         else:
                             subtype = subtype + ' unkown-file'
@@ -154,14 +152,13 @@ def render_dir(args, root):
                             # a = FILE_TYPES[type_]
 
                     if type_ == 'image':
-                        a = FILE_TYPES[type_].format(relative_path, caption)
                         if args.thumbnail:
                             a = thumbnail(relative_path, relative_path, args)
                         if args.no_filenames:
                             caption = ""
                         if args.captions:
                             caption = caption(relative_path)
-                            a = FILE_TYPES[type_].format(relative_path, caption)
+                        a = FILE_TYPES[type_].format(relative_path, caption)
 
                 if subtype in SUB_TYPES:
                     a = SUB_TYPES[subtype]
@@ -237,9 +234,7 @@ def distribusify(args, directory):  # noqa
                                 # what types of text files to expand
                                 a = '<section id="{}">{}</section>'.format(name, open(full_path).read())
                             elif subtype in CODE_TYPES or name.endswith('.txt'):
-                                # if the plain text is code,
+                                a = "<div>" + open(full_path).read() + "</div>"
-                                # which types do we wrap in pre-tags?
-                                a = "<pre>" + open(full_path).read() + "</pre>"
                             else:
                                 subtype = subtype+' unkown-file'
                                 a = "<a href='{}'>{}</a>"
@@ -283,7 +278,10 @@ def distribusify(args, directory):  # noqa
                 if args.unfolding:
                     rd = render_dir(args, "{}/{}".format(root, name))
                     h = '<div id="folder-{}" class="unfolded">\n{}\n{}</div>'.format(name, a, rd)
-                    html.append(h)
+                    if root != directory:
+                        html.insert(-1, h)
+                    else:
+                        html.append(h)
                 else:
                     html.insert(0, div(args, 'dir', 'dir', a, 'folder'))