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

🔧 Change image limiting style

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

21
index.html
View file

@ -331,7 +331,26 @@
<p>
Images can be "limited", so that they never occupy too much screen real estate, especially if they're very tall.
</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>
<h2>
Formatting

9
src/rules/skeleton.less vendored
View file

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

7
src/targets/paper.module.css
View file

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

2
src/targets/paper.module.css.map
View file

File diff suppressed because one or more lines are too long

10
src/targets/paper.root.css
View file

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

2
src/targets/paper.root.css.map
View file

File diff suppressed because one or more lines are too long

7
src/targets/royalblue.module.css
View file

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

2
src/targets/royalblue.module.css.map
View file

File diff suppressed because one or more lines are too long

10
src/targets/royalblue.root.css
View file

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

2
src/targets/royalblue.root.css.map
View file

File diff suppressed because one or more lines are too long

3
src/vars/module.less
View file

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

3
src/vars/root.less
View file

@ -22,7 +22,8 @@
@separator-heavy: ~".separator-heavy";
@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-hoverable: ~"[title], .status-hoverable";