1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-22 11:34:21 +00:00

🔧 Change image limiting style

This commit is contained in:
Steffo 2021-07-27 15:09:37 +02:00 committed by Stefano Pigozzi
parent 3719609881
commit a5c3840f73
12 changed files with 58 additions and 20 deletions

View file

@ -331,7 +331,26 @@
<p> <p>
Images can be "limited", so that they never occupy too much screen real estate, especially if they're very tall. Images can be "limited", so that they never occupy too much screen real estate, especially if they're very tall.
</p> </p>
<img class="image-limited" src="https://i.redd.it/0b2r669b73f41.jpg" alt="USB key in a bottle"/> <div class="split">
<section>
<h3>
Half
</h3>
<p>
The following image has a limit of half the vertical viewport:
</p>
<img class="image-limit-half" src="https://i.redd.it/0b2r669b73f41.jpg" alt="USB key in a bottle"/>
</section>
<section>
<h3>
Quarter
</h3>
<p>
The following image has a limit of a quarter of the vertical viewport:
</p>
<img class="image-limit-quarter" src="https://i.redd.it/0b2r669b73f41.jpg" alt="USB key in a bottle"/>
</section>
</div>
</section> </section>
<h2> <h2>
Formatting Formatting

View file

@ -226,9 +226,12 @@
object-fit: contain; object-fit: contain;
} }
// Limit even further the size of an image based on the size of the screen @{image-limit-half} {
@{image-limited} { max-height: max(28.2vw, 50vh);
max-height: max(37.5vw, 66.6vh); }
@{image-limit-quarter} {
max-height: max(14.1vw, 25vh);
} }
/// ===== Forms ===== /// ===== Forms =====

View file

@ -289,8 +289,11 @@
margin-right: auto; margin-right: auto;
object-fit: contain; object-fit: contain;
} }
.bluelib .image-limited { .bluelib .image-limit-half {
max-height: max(37.5vw, 66.6vh); max-height: max(28.2vw, 50vh);
}
.bluelib .image-limit-quarter {
max-height: max(14.1vw, 25vh);
} }
.bluelib .form { .bluelib .form {
display: grid; display: grid;

File diff suppressed because one or more lines are too long

View file

@ -375,9 +375,13 @@ body .image,
margin-right: auto; margin-right: auto;
object-fit: contain; object-fit: contain;
} }
body .image-limited, body .image-limit-half,
.bluelib .image-limited { .bluelib .image-limit-half {
max-height: max(37.5vw, 66.6vh); max-height: max(28.2vw, 50vh);
}
body .image-limit-quarter,
.bluelib .image-limit-quarter {
max-height: max(14.1vw, 25vh);
} }
body form, body form,
.bluelib form, .bluelib form,

File diff suppressed because one or more lines are too long

View file

@ -289,8 +289,11 @@
margin-right: auto; margin-right: auto;
object-fit: contain; object-fit: contain;
} }
.bluelib .image-limited { .bluelib .image-limit-half {
max-height: max(37.5vw, 66.6vh); max-height: max(28.2vw, 50vh);
}
.bluelib .image-limit-quarter {
max-height: max(14.1vw, 25vh);
} }
.bluelib .form { .bluelib .form {
display: grid; display: grid;

File diff suppressed because one or more lines are too long

View file

@ -375,9 +375,13 @@ body .image,
margin-right: auto; margin-right: auto;
object-fit: contain; object-fit: contain;
} }
body .image-limited, body .image-limit-half,
.bluelib .image-limited { .bluelib .image-limit-half {
max-height: max(37.5vw, 66.6vh); max-height: max(28.2vw, 50vh);
}
body .image-limit-quarter,
.bluelib .image-limit-quarter {
max-height: max(14.1vw, 25vh);
} }
body form, body form,
.bluelib form, .bluelib form,

File diff suppressed because one or more lines are too long

View file

@ -22,7 +22,8 @@
@separator-heavy: ~".separator-heavy"; @separator-heavy: ~".separator-heavy";
@image: ~"img, .image"; @image: ~"img, .image";
@image-limited: ~".image-limited"; @image-limit-half: ~".image-limit-half";
@image-limit-quarter: ~".image-limit-quarter";
@status-disabled: ~".status-disabled"; @status-disabled: ~".status-disabled";
@status-hoverable: ~".status-hoverable"; @status-hoverable: ~".status-hoverable";

View file

@ -22,7 +22,8 @@
@separator-heavy: ~".separator-heavy"; @separator-heavy: ~".separator-heavy";
@image: ~"img, .image"; @image: ~"img, .image";
@image-limited: ~".image-limited"; @image-limit-half: ~".image-limit-half";
@image-limit-quarter: ~".image-limit-quarter";
@status-disabled: ~"[disabled], .status-disabled"; @status-disabled: ~"[disabled], .status-disabled";
@status-hoverable: ~"[title], .status-hoverable"; @status-hoverable: ~"[title], .status-hoverable";