From 8a22671f0b40765849b4ab1fb0de858ce835082d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mike=20Schw=C3=B6rer?= Date: Tue, 12 Sep 2023 16:48:45 +0200 Subject: [PATCH] responsive fixes for /blog/29/ --- www/data/css/styles.css | 46 +++++++++++++++++++++ www/data/css/styles.min.css | 15 +++++++ www/data/css/styles_projectlawfulebook.scss | 24 ++++++++++- www/statics/blog/proj_lawful_ebook.html | 3 +- 4 files changed, 86 insertions(+), 2 deletions(-) diff --git a/www/data/css/styles.css b/www/data/css/styles.css index b3b5be8..a21f0fe 100644 --- a/www/data/css/styles.css +++ b/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; diff --git a/www/data/css/styles.min.css b/www/data/css/styles.min.css index 7d4f036..72a137b 100644 --- a/www/data/css/styles.min.css +++ b/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} diff --git a/www/data/css/styles_projectlawfulebook.scss b/www/data/css/styles_projectlawfulebook.scss index 1ee4527..dd340ca 100644 --- a/www/data/css/styles_projectlawfulebook.scss +++ b/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; diff --git a/www/statics/blog/proj_lawful_ebook.html b/www/statics/blog/proj_lawful_ebook.html index 92c3baa..1bc74f2 100644 --- a/www/statics/blog/proj_lawful_ebook.html +++ b/www/statics/blog/proj_lawful_ebook.html @@ -8,7 +8,8 @@
  • Then I hacked together a bit of C# code to generate epub files
  • All external images (and optionally avatars) are included in the epub
  • 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)
    • -
  • 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 Program.cs and run make
    • +
  • 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 easy enough to clone the repo, edit Program.cs and run make

    • # Variants