vlw/vlw.se
1
0
Fork 0
mirror of https://codeberg.org/vlw/vlw.se.git synced 2025-09-14 05:13:46 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add page glow effect (#21)

Browse source
This commit is contained in:
Victor Westerlund 2024-05-06 08:02:07 +00:00 • committed by GitHub
parent 3f944e1a33
commit f963a8993d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 45 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
assets/css/document.css
View file

@ -33,6 +33,29 @@ body {
font-size: 15px;
}
body::before {
transition: 1s opacity;
content: "";
position: absolute;
top: -5%;
right: 0;
width: 20%;
height: 5%;
border-radius: 100%;
z-index: 1000;
box-shadow:
0 0 30svh 10svh rgba(var(--primer-color-accent), .2),
0 0 30svh 60svh rgba(var(--primer-color-accent), .1),
0 0 30svh 150svh rgba(var(--primer-color-accent), .02)
;
opacity: 0;
}
/* "enable" the corner glow effect on initial load when a page has been fully loaded */
body[vv-page]::before {
opacity: 1;
}
body.search-dialog-open {
overflow: hidden;
}
@ -309,6 +332,20 @@ dialog.search search search-results > svg {
/* # Size queries */
@media (min-width: 700px) {
/* # Cornerstones */
body::before {
right: unset;
left: 0;
box-shadow:
0 0 30svh 10svh rgba(var(--primer-color-accent), .1),
0 0 30svh 60svh rgba(var(--primer-color-accent), .05),
0 0 30svh 150svh rgba(var(--primer-color-accent), .02)
;
}
/* ## Header */
header {
grid-template-columns: 1fr 250px var(--running-size);
}
@ -318,9 +355,9 @@ dialog.search search search-results > svg {
margin: 0 calc(var(--padding) / 2);
}
/* # Menu */
/* ### Menu */
/* < Move the search box to the header */
/* Move the search box to the header */
header searchbox {
display: grid;
}

6
assets/css/pages/index.css
View file

@ -1,3 +1,9 @@
/* # Overrides */
body[vv-page="/"]::before {
opacity: 0;
}
/* # Main styles */
/* ## Picture */