Mikescher
/
www.mikescher.com
1
0
Fork 0
Code Actions

responsive fixes for /blog/29/
Build Docker and Deploy / Build Docker (push) Successful in 12s Details
Build Docker and Deploy / Deploy to Server (push) Successful in 15s Details

This commit is contained in:
Mike Schwörer 2023-09-12 16:48:45 +02:00
parent 300992b49f
commit 8a22671f0b
Signed by: Mikescher
GPG Key ID: D3C7172E0A70F8CF
4 changed files with 86 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
www/data/css/styles.css
View File

@ -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;

15
www/data/css/styles.min.css vendored
View File

@ -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}

24
www/data/css/styles_projectlawfulebook.scss
View File

@ -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;

3
www/statics/blog/proj_lawful_ebook.html
View File

@ -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>