blog/29/ added recommended tags

www/data/css/styles.css

@@ -2630,10 +2630,18 @@ html, body {
   grid-template-rows: auto auto;
   grid-column-gap: 1rem;
 }
-.project-lawful-ebook-blogpost .variant h3 {
+.project-lawful-ebook-blogpost .variant .header {
   grid-row: 1;
   grid-column: 1/-1;
+  margin: 1em 0;
+  gap: 0.5em;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.project-lawful-ebook-blogpost .variant .header h3 {
   text-decoration: underline;
+  margin: 0;
 }
 .project-lawful-ebook-blogpost .variant .dlbutton {
   position: relative;
@@ -2694,6 +2702,9 @@ html, body {
   .project-lawful-ebook-blogpost .variant .dlbutton a .span_mb {
     display: none;
   }
+  .project-lawful-ebook-blogpost .variant .header {
+    flex-direction: column;
+  }
 }
 @media (min-device-width: 768px) and (max-device-width: 850px) {
   .project-lawful-ebook-blogpost .variant .dlbutton svg {
@@ -2702,6 +2713,9 @@ html, body {
   .project-lawful-ebook-blogpost .variant .dlbutton a .span_dl {
     font-size: 1em;
   }
+  .project-lawful-ebook-blogpost .variant .header {
+    flex-direction: column;
+  }
 }
 @media (min-device-width: 851px) and (max-device-width: 991px) {
   .project-lawful-ebook-blogpost .variant .dlbutton svg {

www/data/css/styles.min.css

@@ -497,7 +497,8 @@ html,body{margin:0;padding:0;height:100%}
 }
 .project-lawful-ebook-blogpost code{background-color:rgba(0,0,0,0.1);border-radius:2px;padding-left:2px;padding-right:2px}
 .project-lawful-ebook-blogpost .variant{display:grid;grid-template-columns:repeat(6,auto) 1fr;grid-template-rows:auto auto;grid-column-gap:1rem}
-.project-lawful-ebook-blogpost .variant h3{grid-row:1;grid-column:1/-1;text-decoration:underline}
+.project-lawful-ebook-blogpost .variant .header{grid-row:1;grid-column:1/-1;margin:1em 0;gap:.5em;display:flex;flex-direction:row;align-items:center}
+.project-lawful-ebook-blogpost .variant .header h3{text-decoration:underline;margin:0}
 .project-lawful-ebook-blogpost .variant .dlbutton{position:relative;height:100%;padding:0;display:flex;border:0}
 .project-lawful-ebook-blogpost .variant .dlbutton img{opacity:0;pointer-events:none;user-select:none}
 .project-lawful-ebook-blogpost .variant .dlbutton a{display:grid;grid-template-rows:1fr auto auto;grid-row-gap:4px;justify-content:center;align-items:center;justify-items:center;padding:.5rem;cursor:pointer;text-decoration:none;color:#ddd;background-color:#222;border-radius:4px;border:1px solid black;position:absolute;left:0;right:0;top:0;bottom:0}
@@ -510,10 +511,12 @@ html,body{margin:0;padding:0;height:100%}
 	.project-lawful-ebook-blogpost .variant .dlbutton svg{width:16px}
 	.project-lawful-ebook-blogpost .variant .dlbutton a .span_dl{display:none}
 	.project-lawful-ebook-blogpost .variant .dlbutton a .span_mb{display:none}
+	.project-lawful-ebook-blogpost .variant .header{flex-direction:column}
 }
 @media(min-device-width:768px) and (max-device-width:850px){
 	.project-lawful-ebook-blogpost .variant .dlbutton svg{width:32px}
 	.project-lawful-ebook-blogpost .variant .dlbutton a .span_dl{font-size:1em}
+	.project-lawful-ebook-blogpost .variant .header{flex-direction:column}
 }
 @media(min-device-width:851px) and (max-device-width:991px){.project-lawful-ebook-blogpost .variant .dlbutton svg{width:48px}}
 @media(min-device-width:992px) and (max-device-width:1199px){

www/data/css/styles_projectlawfulebook.scss

@@ -16,7 +16,19 @@
         grid-column-gap: 1rem;
     }
 
-    .variant h3 { grid-row: 1; grid-column: 1/-1; text-decoration: underline; }
+    .variant .header {
+        grid-row: 1;
+        grid-column: 1/-1;
+
+        margin: 1em 0;
+        gap: 0.5em;
+
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        h3{ text-decoration: underline; margin: 0; }
+    }
 
     .variant .dlbutton {
         position: relative;
@@ -83,11 +95,13 @@
         .variant .dlbutton svg        { width: 16px;   }
         .variant .dlbutton a .span_dl { display: none; }
         .variant .dlbutton a .span_mb { display: none; }
+        .variant .header              { flex-direction: column; }
     }
     @include rdmedia(1) {
         .variant .dlbutton svg        { width: 32px;    }
         .variant .dlbutton a .span_dl { font-size: 1em; }
         .variant .dlbutton a .span_mb {                 }
+        .variant .header              { flex-direction: column; }
     }
     @include rdmedia(2) {
         .variant .dlbutton svg        { width: 48px;    }

www/statics/blog/proj_lawful_ebook.html

@@ -29,7 +29,7 @@
         <li>the <code>*-inline</code> variant only includes the character-name of each post, and (if possible) the character-name is set inline with the first paragraph</li>
         <li>the <code>*-moreinfo</code> variant also includes the alignment text of each post/character after the character-name.</li>
         <li>the <code>*-avatars</code> variant show the character avatar beside each post. This forces us to include all 600-ish avatars in the epub file, which increases filesize and loading time</li>
-        <li>the <code>*-avatars-moreinfo</code> also includes the alignment text (additionally to the avatar). Here the avatar/character-name/alignment-text are also no longer inlined, but get their own paragraph at the start of every post.</li>
+        <li>the <code>*-avatars-moreinfo</code> also includes the alignment text and author name (additionally to the avatar). Here the avatar/character-name/alignment-text/author-name are also no longer inlined, but get their own paragraph at the start of every post.</li>
         <li>the <code>*-biggerhtml</code> variant looks the same as <code>*-inline</code>, but internally every chapter is a single big file (instead of multiple split files), this makes the initial loading of the epub slower, but codevents a forced page-break after every 128th post.</li>
     </ul>
 
@@ -47,7 +47,7 @@
     <h2># Download</h2>
 
     <div class="variant">
-        <h3>project-lawful-inline.epub</h3>
+        <div class="header"><h3>project-lawful-inline.epub</h3> <i>(recommended for ebook reader)</i></div>
         <div class="dlbutton">
             <img alt="page preview" src="/data/images/blog/ple-scaled-inline-01.jpeg">
             <a rel="nofollow" href="/blog/29/Project_Lawful_ebook/download/inline">
@@ -64,7 +64,7 @@
     </div>
 
     <div class="variant">
-        <h3>project-lawful-avatars.epub</h3>
+        <div class="header"><h3>project-lawful-avatars.epub</h3></div>
         <div class="dlbutton">
             <img alt="page preview" src="/data/images/blog/ple-scaled-avatars-01.jpeg">
             <a rel="nofollow" href="/blog/29/Project_Lawful_ebook/download/avatars">
@@ -81,7 +81,7 @@
     </div>
 
     <div class="variant">
-        <h3>project-lawful-avatars-moreinfo.epub</h3>
+        <div class="header"><h3>project-lawful-avatars-moreinfo.epub</h3> <i>(recommended, if you want something close to the original experience)</i></div>
         <div class="dlbutton">
             <img alt="page preview" src="/data/images/blog/ple-scaled-avatars-moreinfo-01.jpeg">
             <a rel="nofollow" href="/blog/29/Project_Lawful_ebook/download/avatars-moreinfo">
@@ -98,7 +98,7 @@
     </div>
 
     <div class="variant">
-        <h3>project-lawful-moreinfo.epub</h3>
+        <div class="header"><h3>project-lawful-moreinfo.epub</h3></div>
         <div class="dlbutton">
             <img alt="page preview" src="/data/images/blog/ple-scaled-moreinfo-01.jpeg">
             <a rel="nofollow" href="/blog/29/Project_Lawful_ebook/download/moreinfo">
@@ -115,7 +115,7 @@
     </div>
 
     <div class="variant">
-        <h3>project-lawful-biggerhtml.epub</h3>
+        <div class="header"><h3>project-lawful-biggerhtml.epub</h3></div>
         <div class="dlbutton">
             <img alt="page preview" src="/data/images/blog/ple-scaled-biggerhtml-01.jpeg">
             <a rel="nofollow" href="/blog/29/Project_Lawful_ebook/download/biggerhtml">