small screen layout fix.

distribusi/page_template.py

@@ -6,6 +6,7 @@ html_head = """
     <!-- Generated with distribusi https://git.vvvvvvaria.org/varia/distribusi -->
     <meta name="generator" content="distribusi" />
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>lost|traIn</title>
     <style>
       %s

run.sh

@@ -1,3 +1,3 @@
 #!/bin/bash
 
-python run.py -d ./data/ -nf -s styles/aurora.css --no-hidden --unfolding
+python run.py -d ./data/ -nf -s styles/white.css --no-hidden --unfolding

styles/aurora.css

@@ -59,10 +59,12 @@ figure {
 
 .audio {
   display: block;
+  width: 100%;
 }
 
 .image {
   max-width: 700px;
+  width: 100%;
 }
 
 body {
@@ -110,6 +112,7 @@ body {
   word-spacing: +0.2em;
   color: rgba(100, 255, 200, 1.0);
   background-color: rgba(0, 20, 40, 1.0);
+  word-break: keep-all;
 }
 
 #header::after {
@@ -173,3 +176,21 @@ a[href^="../"]::before {
   padding-top: 1em;
   padding-bottom: 2em;
 }
+
+@media (max-width: 600px) {
+  body {
+    padding-left: 0.75em;
+    padding-right: 0.75em;
+    padding-top: 0.5em;
+    font: 0.95em/1.5 AppleGothic, NanumGothic, Sans-serif;
+  }
+
+  #header {
+    text-align: right;
+  }
+
+  #header::after {
+    font-size: 2.3em;
+    opacity: 0.2;
+  }
+}

styles/dark.css

@@ -59,10 +59,12 @@ figure {
 
 .audio {
   display: block;
+  width: 100%;
 }
 
 .image {
   max-width: 700px;
+  width: 100%;
 }
 
 body {
@@ -97,6 +99,11 @@ body>.unfolded {
   margin-top: 2em;
 }
 
+time {
+  font-size: 0.65em;
+  text-align: right;
+}
+
 /* theme */
 
 body {
@@ -105,6 +112,7 @@ body {
   word-spacing: +0.2em;
   color: rgba(127, 127, 127, 1.0);
   background-color: rgba(20, 20, 20, 1.0);
+  word-break: keep-all;
 }
 
 #header::after {
@@ -129,15 +137,25 @@ a:hover {
   color: hotpink;
 }
 
-.unfolded>a:nth-child(1) {
+.unfolded>.title {
-  font-size: 1.1em;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding-left: 0;
+}
+
+.unfolded>.title>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;
 }
 
+time {
+  color: rgba(100, 255, 200, .2);
+}
+
 audio::-webkit-media-controls-enclosure {
   background-color: rgba(50, 50, 50, 1.0);
 }
@@ -160,3 +178,21 @@ a[href^="../"]::before {
   padding-top: 1em;
   padding-bottom: 2em;
 }
+
+@media (max-width: 600px) {
+  body {
+    padding-left: 0.75em;
+    padding-right: 0.75em;
+    padding-top: 0.5em;
+    font: 0.95em/1.5 AppleGothic, NanumGothic, Sans-serif;
+  }
+
+  #header {
+    text-align: right;
+  }
+
+  #header::after {
+    font-size: 2.3em;
+    opacity: 0.2;
+  }
+}

styles/white.css

@@ -59,10 +59,12 @@ figure {
 
 .audio {
   display: block;
+  width: 100%;
 }
 
 .image {
   max-width: 700px;
+  width: 100%;
 }
 
 body {
@@ -72,6 +74,12 @@ body {
   padding-left: 1em;
   padding-right: 1em;
   padding-top: 1em;
+  scrollbar-width: none;
+}
+
+body::-webkit-scrollbar {
+  width: 0;
+  height: 0;
 }
 
 #header {
@@ -91,14 +99,20 @@ body>.unfolded {
   margin-top: 2em;
 }
 
+time {
+  font-size: 0.65em;
+  text-align: right;
+}
+
 /* 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); */
+  color: rgba(10, 10, 10, 0.8);
   /* background-color: rgba(0, 20, 40, 1.0); */
+  word-break: keep-all;
 }
 
 #header::after {
@@ -106,7 +120,6 @@ body {
   font-size: 3.6em;
   font-weight: 700;
   opacity: 0.3;
-  /* color: rgba(100, 255, 200, 0.5); */
   color: rgba(0, 0, 0, 0.2);
 }
 
@@ -114,8 +127,6 @@ 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);
 }
@@ -124,19 +135,37 @@ a:hover {
   color: hotpink;
 }
 
-.unfolded>a:nth-child(1) {
+.unfolded>.title {
-  font-size: 1.1em;
+  width: 100%;
-  /* color: rgba(100, 255, 200, 0.5); */
+  display: flex;
-  font-weight: 700;
+  justify-content: space-between;
-  border: unset;
-  margin-bottom: 1em;
   padding-left: 0;
 }
 
-audio::-webkit-media-controls-panel {
+.unfolded>.title>a:nth-child(1) {
+  /* font-size: 1.1em; */
+  /* color: rgba(100, 255, 200, 0.25); */
+  font-weight: 700;
+  border: unset;
+  padding-left: 0;
+}
+
+time {
+  color: rgba(100, 255, 200, .2);
+}
+
+audio::-webkit-media-controls-enclosure {
   /* background-color: rgba(50, 135, 120, 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;
 }
@@ -147,3 +176,21 @@ a[href^="../"]::before {
   padding-top: 1em;
   padding-bottom: 2em;
 }
+
+@media (max-width: 600px) {
+  body {
+    padding-left: 0.75em;
+    padding-right: 0.75em;
+    padding-top: 0.5em;
+    font: 0.95em/1.5 AppleGothic, NanumGothic, Sans-serif;
+  }
+
+  #header {
+    text-align: right;
+  }
+
+  #header::after {
+    font-size: 2.3em;
+    opacity: 0.2;
+  }
+}