put full dimensions on image
This commit is contained in:
parent
d8c22fef0f
commit
1e0b955029
5 changed files with 87 additions and 40 deletions
|
@ -9,16 +9,31 @@ body {
|
|||
}
|
||||
|
||||
#mainfig {
|
||||
--border-thickness: 2px;
|
||||
|
||||
margin: 1em auto;
|
||||
width: min-content;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 2px solid var(--text-col);
|
||||
border: var(--border-thickness) solid var(--text-col);
|
||||
border-radius: 1em;
|
||||
box-shadow: var(--text-shadow);
|
||||
background: hsl(340, 45%, 65%);
|
||||
}
|
||||
|
||||
#mainfig::after {
|
||||
content: attr(data-width) ' × ' attr(data-height);
|
||||
|
||||
position: absolute;
|
||||
top: calc(0px - var(--border-thickness));
|
||||
right: calc(0px - var(--border-thickness));
|
||||
padding: 0.15em 0.75em;
|
||||
|
||||
background: hsl(0, 0%, 0%, 50%);
|
||||
border: var(--border-thickness) solid var(--text-col);
|
||||
border-bottom-left-radius: 1em;
|
||||
}
|
||||
|
||||
#mainfig:focus-within {
|
||||
box-shadow: var(--focus-box);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue