ai generated solutions to our ai generated problems
This commit is contained in:
+11
-11
@@ -57,20 +57,20 @@ const missingStaticDataPaths = new Set()
|
||||
const pixelSunSvg = `data:image/svg+xml,${encodeURIComponent(`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" shape-rendering="crispEdges">
|
||||
<rect width="16" height="16" fill="none"/>
|
||||
<path fill="#ffb24d" d="M6 0h4v2h2v2h2v2h2v4h-2v2h-2v2h-2v2H6v-2H4v-2H2v-2H0V6h2V4h2V2h2z"/>
|
||||
<path fill="#ffe06b" d="M5 3h6v1h2v3h1v3h-1v2h-3v1H5v-1H4v-2H3V6h1V4h1z"/>
|
||||
<path fill="#fff7c9" d="M5 3h4v1h2v2H8v1H5z"/>
|
||||
<path fill="#f58f33" d="M11 10h2v2h-3v1H6v-1h3v-1h2z"/>
|
||||
<path fill="currentColor" d="M5 1h6v1h2v2h1v2h1v4h-1v2h-1v2h-2v1H5v-1H3v-2H2v-2H1V6h1V4h1V2h2z"/>
|
||||
<path fill="var(--sprite-light)" d="M5 3h5v1h2v2h1v3h-1v2h-2v1H5v-1H4V9H3V6h1V4h1z"/>
|
||||
<path fill="var(--sprite-shine)" d="M5 3h3v1h2v2H8v1H5z"/>
|
||||
<path fill="var(--sprite-shadow)" d="M11 9h2v2h-2v1H6v-1h3v-1h2z"/>
|
||||
</svg>
|
||||
`)}`
|
||||
const pixelMoonSvg = `data:image/svg+xml,${encodeURIComponent(`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" shape-rendering="crispEdges">
|
||||
<rect width="16" height="16" fill="none"/>
|
||||
<path fill="#fff6df" d="M7 1h5v1h2v2h1v7h-1v2h-2v1H6v-1H4v-2H3V5h1V3h3z"/>
|
||||
<path fill="#8fb2d9" d="M5 4h2v2H5zm5-1h2v1h1v2h-2V5h-1zm-4 6h2v2H6zm4 2h3v1h-1v1h-2zM4 7h1v3H4z"/>
|
||||
<path fill="#5f83b1" d="M5 10h1v2h2v1H6v-1H5zm7-5h1v2h-2V6h1zM8 3h1v2H7V4h1z"/>
|
||||
<path fill="#1f2749" d="M7 0h5v1h2v1h1v2h1v7h-1v2h-1v1h-2v1H6v-1H4v-1H3v-2H2V5h1V3h1V2h3zm0 1v1H5v1H4v2H3v6h1v2h2v1h6v-1h2v-2h1V4h-1V2h-2V1z"/>
|
||||
<path fill="#ffffff" d="M6 3h2v1H7v2H5V5h1zm4 4h2v1h1v1h-3zM8 11h1v1H7v-1z"/>
|
||||
<path fill="var(--sprite-light)" d="M7 1h5v1h2v2h1v7h-1v2h-2v1H6v-1H4v-2H3V5h1V3h3z"/>
|
||||
<path fill="var(--sprite-mid)" d="M5 4h2v2H5zm5-1h2v1h1v2h-2V5h-1zm-4 6h2v2H6zm4 2h3v1h-1v1h-2zM4 7h1v3H4z"/>
|
||||
<path fill="var(--sprite-shadow)" d="M5 10h1v2h2v1H6v-1H5zm7-5h1v2h-2V6h1zM8 3h1v2H7V4h1z"/>
|
||||
<path fill="currentColor" d="M7 0h5v1h2v1h1v2h1v7h-1v2h-1v1h-2v1H6v-1H4v-1H3v-2H2V5h1V3h1V2h3zm0 1v1H5v1H4v2H3v6h1v2h2v1h6v-1h2v-2h1V4h-1V2h-2V1z"/>
|
||||
<path fill="var(--sprite-shine)" d="M6 3h2v1H7v2H5V5h1zm4 4h2v1h1v1h-3zM8 11h1v1H7v-1z"/>
|
||||
</svg>
|
||||
`)}`
|
||||
|
||||
@@ -2901,8 +2901,8 @@ function PixelMountains() {
|
||||
style={skyPaths}
|
||||
>
|
||||
<img alt="" className="pixel-sun" src={pixelSunSvg} />
|
||||
<img alt="" className="pixel-moon" src={pixelMoonSvg} />
|
||||
<span className="pixel-stars">
|
||||
<span className="pixel-moon-group">
|
||||
<img alt="" className="pixel-moon" src={pixelMoonSvg} />
|
||||
<span className="pixel-star pixel-star-a" />
|
||||
<span className="pixel-star pixel-star-b" />
|
||||
<span className="pixel-star pixel-star-c" />
|
||||
|
||||
+42
-11
@@ -200,33 +200,64 @@ h3 {
|
||||
}
|
||||
|
||||
.pixel-sun,
|
||||
.pixel-moon {
|
||||
.pixel-moon-group {
|
||||
position: absolute;
|
||||
display: block;
|
||||
image-rendering: pixelated;
|
||||
image-rendering: crisp-edges;
|
||||
transform: translate(-50%, -50%);
|
||||
will-change: left, opacity, top, transform;
|
||||
}
|
||||
|
||||
.pixel-sun,
|
||||
.pixel-moon {
|
||||
image-rendering: pixelated;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
|
||||
.pixel-sun {
|
||||
left: 78%;
|
||||
top: 18%;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
color: var(--color-fury-glow);
|
||||
--sprite-light: var(--color-soft-apricot-200);
|
||||
--sprite-shine: var(--color-soft-apricot-50);
|
||||
--sprite-shadow: var(--color-fury-violet);
|
||||
}
|
||||
|
||||
.pixel-moon {
|
||||
.pixel-moon-group {
|
||||
left: 78%;
|
||||
top: 18%;
|
||||
width: 136px;
|
||||
height: 136px;
|
||||
color: var(--color-border);
|
||||
--sprite-light: var(--color-soft-apricot-50);
|
||||
--sprite-mid: var(--color-fury-glow);
|
||||
--sprite-shadow: var(--color-fury-violet);
|
||||
--sprite-shine: #ffffff;
|
||||
}
|
||||
|
||||
.pixel-stars {
|
||||
:root[data-theme="dark"] .pixel-moon-group {
|
||||
color: #1f2749;
|
||||
--sprite-light: #fff6df;
|
||||
--sprite-mid: #8fb2d9;
|
||||
--sprite-shadow: #5f83b1;
|
||||
--sprite-shine: #ffffff;
|
||||
}
|
||||
|
||||
.pixel-moon {
|
||||
position: absolute;
|
||||
left: 78%;
|
||||
top: 18%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 136px;
|
||||
height: 136px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .pixel-sun {
|
||||
color: var(--color-fury-violet);
|
||||
--sprite-light: var(--color-fury-glow);
|
||||
--sprite-shine: var(--color-soft-apricot-100);
|
||||
--sprite-shadow: var(--color-fury-cyan);
|
||||
}
|
||||
|
||||
.pixel-star {
|
||||
@@ -254,11 +285,11 @@ h3 {
|
||||
}
|
||||
|
||||
.pixel-sky-light .pixel-sun,
|
||||
.pixel-sky-dark .pixel-moon {
|
||||
.pixel-sky-dark .pixel-moon-group {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pixel-sky-light .pixel-moon,
|
||||
.pixel-sky-light .pixel-moon-group,
|
||||
.pixel-sky-dark .pixel-sun {
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -273,7 +304,7 @@ h3 {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.pixel-sky-light-to-dark .pixel-moon {
|
||||
.pixel-sky-light-to-dark .pixel-moon-group {
|
||||
animation: celestialPathEnter 980ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
left: 0;
|
||||
offset-anchor: center;
|
||||
@@ -283,7 +314,7 @@ h3 {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.pixel-sky-dark-to-light .pixel-moon {
|
||||
.pixel-sky-dark-to-light .pixel-moon-group {
|
||||
animation: celestialPathExit 980ms cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
|
||||
left: 0;
|
||||
offset-anchor: center;
|
||||
|
||||
Reference in New Issue
Block a user