Cyper/CyBySide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed diamond rotation
All checks were successful
Deploy Blog to Folder / deploy (push) Successful in 4s
Details

Browse Source
This commit is contained in:
Cyper
2025-07-13 20:11:16 -04:00
parent 62c34b6fb4
commit 69aa30ed29
2 changed files with 20 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
public/css/home.css
View File

@ -62,10 +62,27 @@
/* Shape classes */
.diamond {
width: calc(100% / sqrt(2)); /* ≈ 100% / √2 (100% because square width = 1, which translates to 100%) */
width: 100%;
aspect-ratio: 1 / 1;
transform: rotate(45deg);
margin: auto;
animation: spin-in 1s forwards;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.diamond::after {
content: "";
position: absolute;
width: calc(100% / sqrt(2)); /* Shrink so rotated square fits inside wrapper */
aspect-ratio: 1 / 1;
background: var(--fill-color);
transform: rotate(45deg);
}
.circle {
border-radius: 75%;
}
main > * {