hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Allow floating images to start/end of a paragraph

Browse Source
This commit is contained in:
daudix
2024-06-27 22:55:35 +03:00
parent c4e48dedf7
commit fa8b441f7b
4 changed files with 77 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
sass/_media.scss
View File

@ -11,6 +11,45 @@ video {
width: 100%;
}
&.start,
&.end,
&[src*="#start"],
&[src*="#end"] {
margin: 0;
width: 30%;
@media only screen and (max-width: 720px) {
float: none;
margin-inline-start: 0;
margin-inline-end: 0;
width: 100%;
}
}
&.start,
&[src*="#start"] {
float: left;
transform-origin: left;
margin-inline-end: 1rem;
:root[dir="rtl"] & {
float: right;
transform-origin: right;
}
}
&.end,
&[src*="#end"] {
float: right;
transform-origin: right;
margin-inline-start: 1rem;
:root[dir="rtl"] & {
float: left;
transform-origin: left;
}
}
&.pixels,
&[src*="#pixels"] {
image-rendering: pixelated;
@ -35,6 +74,23 @@ img {
border-radius: 0;
}
&.start,
&.end,
&[src*="#start"],
&[src*="#end"] {
&:hover {
transform: scale(1.6);
}
@media only screen and (max-width: 720px) {
transform-origin: unset;
&:hover {
transform: scale(1.1);
}
}
}
&.transparent,
&[src*="#transparent"] {
&:hover {