responsive fixes for /blog/29/

www/data/css/styles.css

@@ -2612,6 +2612,12 @@ html, body {
     height: 150px;
   }
 }
+.project-lawful-ebook-blogpost {
+  /* Level: 0 */
+  /* Level: 1 */
+  /* Level: 2 */
+  /* Level: 3 */
+}
 .project-lawful-ebook-blogpost code {
   background-color: rgba(0, 0, 0, 0.1);
   border-radius: 2px;
@@ -2678,7 +2684,42 @@ html, body {
   width: 100%;
   border: 1px solid #555;
 }
+@media (max-device-width: 767px) {
+  .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;
+  }
+}
+@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;
+  }
+}
+@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) {
+  .project-lawful-ebook-blogpost .variant .dlbutton svg {
+    width: 48px;
+  }
+  .project-lawful-ebook-blogpost .variant .dlbutton a .span_dl {
+    font-size: 1em;
+  }
+}
 
+.project-lawful-ebook-blogpost {
+  /* Level: 0 - 3 */
+}
 .project-lawful-ebook-blogpost .variant.alt-variants {
   display: flex;
   flex-direction: column;
@@ -2703,6 +2744,11 @@ html, body {
 .project-lawful-ebook-blogpost .dlbtn_alt svg {
   fill: #BBB;
 }
+@media (max-device-width: 1199px) {
+  .project-lawful-ebook-blogpost .dlbtn_alt svg {
+    width: 16px;
+  }
+}
 .project-lawful-ebook-blogpost .dlbtn_alt .span_mb {
   font-size: 0.75em;
   grid-column: 4;

www/data/css/styles.min.css

@@ -506,8 +506,23 @@ html,body{margin:0;padding:0;height:100%}
 .project-lawful-ebook-blogpost .variant .dlbutton a .span_mb{font-size:.75em}
 .project-lawful-ebook-blogpost .variant .dlbutton svg{fill:#BBB}
 .project-lawful-ebook-blogpost .variant img{width:100%;border:1px solid #555}
+@media(max-device-width:767px){
+	.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}
+}
+@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}
+}
+@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){
+	.project-lawful-ebook-blogpost .variant .dlbutton svg{width:48px}
+	.project-lawful-ebook-blogpost .variant .dlbutton a .span_dl{font-size:1em}
+}
 .project-lawful-ebook-blogpost .variant.alt-variants{display:flex;flex-direction:column;gap:4px}
 .project-lawful-ebook-blogpost .dlbtn_alt{display:grid;grid-template-columns:24px auto 1fr auto;grid-column-gap:1rem;color:#ddd;background-color:#222;border:1px solid black;border-radius:4px;text-decoration:none;cursor:pointer;padding:6px;align-items:center}
 .project-lawful-ebook-blogpost .dlbtn_alt:hover{background-color:#555}
 .project-lawful-ebook-blogpost .dlbtn_alt svg{fill:#BBB}
+@media(max-device-width:1199px){.project-lawful-ebook-blogpost .dlbtn_alt svg{width:16px}}
 .project-lawful-ebook-blogpost .dlbtn_alt .span_mb{font-size:.75em;grid-column:4}

www/data/css/styles_projectlawfulebook.scss

@@ -78,6 +78,27 @@
         width: 100%;
         border: 1px solid #555;
     }
+
+    @include rdmedia(0) {
+        .variant .dlbutton svg        { width: 16px;   }
+        .variant .dlbutton a .span_dl { display: none; }
+        .variant .dlbutton a .span_mb { display: none; }
+    }
+    @include rdmedia(1) {
+        .variant .dlbutton svg        { width: 32px;    }
+        .variant .dlbutton a .span_dl { font-size: 1em; }
+        .variant .dlbutton a .span_mb {                 }
+    }
+    @include rdmedia(2) {
+        .variant .dlbutton svg        { width: 48px;    }
+        .variant .dlbutton a .span_dl {                 }
+        .variant .dlbutton a .span_mb {                 }
+    }
+    @include rdmedia(3) {
+        .variant .dlbutton svg        { width: 48px;    }
+        .variant .dlbutton a .span_dl { font-size: 1em; }
+        .variant .dlbutton a .span_mb {                 }
+    }
 }
 
 .project-lawful-ebook-blogpost
@@ -113,9 +134,10 @@
 
     .dlbtn_alt svg {
         fill: #BBB;
-
     }
 
+    @include rdmedia_range(0, 3) { .dlbtn_alt svg { width: 16px; } }
+
     .dlbtn_alt .span_mb {
         font-size: 0.75em;
         grid-column: 4;

www/statics/blog/proj_lawful_ebook.html

@@ -8,7 +8,8 @@
         <li>Then I <a href="https://github.com/Mikescher/ProjectLawfulEbook">hacked together a bit of C# code</a> to generate epub files</li>
         <li>All external images (and optionally avatars) are included in the epub</li>
         <li>I went through all the avatar files and made them square images (simplified my css, and looked better - most were already squares or almost-squares)</li>
-        <li>Various properties of the final file/layout can be changed, I generated the variants I found useful, but if anyone wants something special it should be enough to close the repo, edit <code>Program.cs</code> and run <code>make</code></li>
+        <li>Various properties of the final file/layout can be changed, I generated the variants I found useful. <br/>
+            But if anyone wants something special it should be easy enough to clone the repo, edit <code>Program.cs</code> and run <code>make</code></li>
     </ul>
 
     <h2># Variants</h2>