starred/Foundry
1
0
Fork 0
mirror of https://github.com/Misterio77/Foundry.git synced 2026-09-26 17:10:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(projects/website): refine ambient star field

Browse Source 
Assisted-by: pi (gpt-5.6-sol)
This commit is contained in:
Gabriel Fontes
2026-09-02 16:59:38 -03:00
parent 22cdd0417a
commit d2211ab8f5
3 changed files with 27 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
projects/website/_src/_sass/_base.scss
+7 -6
View File
@@ -211,10 +211,11 @@ body {
inset: 0;
z-index: 0;
background-image:
radial-gradient(circle, color-mix(in srgb, var(--primary) 72%, transparent) 0 0.065rem, color-mix(in srgb, var(--primary) 18%, transparent) 0.1rem, transparent 0.2rem),
radial-gradient(circle, color-mix(in srgb, var(--primary) 58%, transparent) 0 0.055rem, color-mix(in srgb, var(--primary) 14%, transparent) 0.09rem, transparent 0.18rem);
background-position: 2rem 3rem, 11rem 8rem;
background-size: 23rem 19rem, 31rem 29rem;
radial-gradient(circle, color-mix(in srgb, var(--primary) var(--ambient-star-core), transparent) 0 0.065rem, color-mix(in srgb, var(--primary) var(--ambient-star-inner), transparent) 0.1rem, color-mix(in srgb, var(--primary) var(--ambient-star-glow), transparent) 0.2rem, transparent 0.32rem),
radial-gradient(circle, color-mix(in srgb, var(--primary) var(--ambient-star-faint-core), transparent) 0 0.055rem, color-mix(in srgb, var(--primary) var(--ambient-star-faint-inner), transparent) 0.09rem, color-mix(in srgb, var(--primary) var(--ambient-star-glow), transparent) 0.18rem, transparent 0.28rem),
radial-gradient(circle, color-mix(in srgb, var(--primary) var(--ambient-star-dust-core), transparent) 0 0.045rem, color-mix(in srgb, var(--primary) var(--ambient-star-dust-inner), transparent) 0.075rem, color-mix(in srgb, var(--primary) var(--ambient-star-glow), transparent) 0.15rem, transparent 0.24rem);
background-position: 2rem 3rem, 11rem 8rem, 17rem 15rem;
background-size: 23rem 19rem, 31rem 29rem, 43rem 37rem;
content: "";
opacity: 0.46;
pointer-events: none;
@@ -222,8 +223,8 @@ body {
}
&::after {
background-position: 7rem 13rem, 19rem 4rem;
background-size: 37rem 31rem, 29rem 41rem;
background-position: 7rem 13rem, 19rem 4rem, 29rem 23rem;
background-size: 37rem 31rem, 29rem 41rem, 47rem 43rem;
opacity: 0.3;
animation-delay: -4.5s;
animation-duration: 13s;
projects/website/_src/_sass/_content.scss
+6
View File
@@ -90,6 +90,12 @@ main > article > section > ul {
}
}
// Keep ambient stars clear of article content while softly feathering the edges.
article > section {
background: var(--background-body);
box-shadow: 0 0 1.5rem 0.5rem var(--background-body);
}
.document > section {
max-width: var(--document-width);
margin-inline: auto;
projects/website/_src/_sass/_tokens.scss
+14
View File
@@ -43,6 +43,13 @@
--focus-offset: 2px;
--glow-soft: 0 0 var(--space-3) color-mix(in srgb, var(--primary) 30%, transparent);
--glow-strong: 0 0 var(--space-4) color-mix(in srgb, var(--primary) 65%, transparent);
--ambient-star-core: 72%;
--ambient-star-inner: 18%;
--ambient-star-faint-core: 58%;
--ambient-star-faint-inner: 14%;
--ambient-star-dust-core: 42%;
--ambient-star-dust-inner: 10%;
--ambient-star-glow: 6%;
--starlight-rule: linear-gradient(90deg, var(--border), color-mix(in srgb, var(--primary) 75%, var(--border)), var(--border)) 1;
// Motion
@@ -54,6 +61,13 @@
@media (prefers-color-scheme: light) {
--background-body: color-mix(in srgb, var(--surface_container_lowest) 89%, var(--primary) 11%);
--background-alt: color-mix(in srgb, var(--surface_container_high) 79%, var(--primary) 21%);
--ambient-star-core: 90%;
--ambient-star-inner: 28%;
--ambient-star-faint-core: 74%;
--ambient-star-faint-inner: 22%;
--ambient-star-dust-core: 56%;
--ambient-star-dust-inner: 16%;
--ambient-star-glow: 10%;
}
@include settings.mobile {