Last active
April 3, 2025 21:39
-
-
Save LcsGa/d7c62dd7472759a68395e1ed313ab0ed to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| @property --bg-color { | |
| syntax: '<color>'; | |
| inherits: true; | |
| initial-value: #fff; | |
| } | |
| body { | |
| display: grid; | |
| grid-template-rows: 2fr 1fr 3fr 2fr; /* let's do like all of this is not set manually but dynamically */ | |
| animation: change-theme forwards; | |
| animation-timeline: --section-1, --section-2, --section-3, --section-4; | |
| background-color: var(--bg-color); | |
| } | |
| #section-1 { | |
| view-timeline: --section-1; | |
| } | |
| #section-2 { | |
| view-timeline: --section-2; | |
| } | |
| #section-3 { | |
| view-timeline: --section-3; | |
| } | |
| #section-4 { | |
| view-timeline: --section-4; | |
| } | |
| @keyframes change-theme { | |
| --section-1 { | |
| --bg-color: hsl(0, 62%, 93%); | |
| } | |
| --section-2 { | |
| --bg-color: hsl(240, 100%, 90%); | |
| } | |
| --section-3 { | |
| --bg-color: hsl(120, 100%, 91%); | |
| } | |
| --section-4 { | |
| --bg-color: hsl(60, 100%, 91%); | |
| } | |
| } | |
| </style> | |
| <body> | |
| <section id="section-1">...</section> | |
| <section id="section-2">...</section> | |
| <section id="section-3">...</section> | |
| <section id="section-4">...</section> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment