put full dimensions on image

This commit is contained in:
Rhiannon Morris 2020-08-09 01:22:00 +02:00
parent d8c22fef0f
commit 1e0b955029
5 changed files with 87 additions and 40 deletions

View file

@ -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);
}