revert: restore original Bliss wallpaper background
Remove custom CSS background and restore the classic Windows XP Bliss wallpaper from Wikimedia Commons. https://claude.ai/code/session_01MUG7BRZMG28eYmJHGbetRB
This commit is contained in:
Claude
parent
9a9fdeeaed
commit
e2efe781b0
91
index.html
91
index.html
@ -37,99 +37,13 @@
|
|||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Desktop - Custom Bliss-style background */
|
/* Desktop */
|
||||||
.desktop {
|
.desktop {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100vh - 30px);
|
height: calc(100vh - 30px);
|
||||||
|
background: url('https://upload.wikimedia.org/wikipedia/en/2/27/Bliss_%28Windows_XP%29.png') center center / cover no-repeat;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
/* Sky gradient */
|
|
||||||
background:
|
|
||||||
/* Clouds - fluffy white shapes */
|
|
||||||
radial-gradient(ellipse 120px 80px at 15% 25%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 40%, transparent 70%),
|
|
||||||
radial-gradient(ellipse 80px 50px at 18% 28%, rgba(255,255,255,0.9) 0%, transparent 60%),
|
|
||||||
radial-gradient(ellipse 100px 60px at 12% 22%, rgba(255,255,255,0.85) 0%, transparent 65%),
|
|
||||||
|
|
||||||
radial-gradient(ellipse 150px 90px at 45% 18%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 45%, transparent 70%),
|
|
||||||
radial-gradient(ellipse 90px 55px at 42% 22%, rgba(255,255,255,0.9) 0%, transparent 60%),
|
|
||||||
radial-gradient(ellipse 110px 65px at 50% 15%, rgba(255,255,255,0.85) 0%, transparent 65%),
|
|
||||||
|
|
||||||
radial-gradient(ellipse 130px 85px at 75% 22%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 40%, transparent 70%),
|
|
||||||
radial-gradient(ellipse 85px 50px at 78% 25%, rgba(255,255,255,0.9) 0%, transparent 60%),
|
|
||||||
radial-gradient(ellipse 95px 55px at 72% 19%, rgba(255,255,255,0.85) 0%, transparent 65%),
|
|
||||||
|
|
||||||
radial-gradient(ellipse 100px 70px at 88% 30%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 45%, transparent 70%),
|
|
||||||
radial-gradient(ellipse 70px 45px at 92% 28%, rgba(255,255,255,0.85) 0%, transparent 60%),
|
|
||||||
|
|
||||||
radial-gradient(ellipse 90px 60px at 30% 35%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.6) 40%, transparent 70%),
|
|
||||||
|
|
||||||
/* Sky gradient - bright blue at top, lighter toward horizon */
|
|
||||||
linear-gradient(180deg,
|
|
||||||
#1e5799 0%,
|
|
||||||
#2989d8 20%,
|
|
||||||
#45a5dc 35%,
|
|
||||||
#7db9e8 50%,
|
|
||||||
#b3d9f2 65%,
|
|
||||||
#d4eaf7 80%,
|
|
||||||
#e8f4fc 100%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Rolling green hills */
|
|
||||||
.desktop::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 55%;
|
|
||||||
background:
|
|
||||||
/* Foreground hill - brightest green with grass texture */
|
|
||||||
radial-gradient(ellipse 180% 100% at 50% 150%, #4a9f38 0%, #3d8c2e 30%, transparent 60%),
|
|
||||||
/* Main rolling hill */
|
|
||||||
radial-gradient(ellipse 200% 120% at 30% 100%, #5cb347 0%, #4a9f38 40%, transparent 70%),
|
|
||||||
radial-gradient(ellipse 180% 100% at 80% 110%, #52a83f 0%, #4a9f38 35%, transparent 65%),
|
|
||||||
/* Background hills - slightly darker/bluer */
|
|
||||||
radial-gradient(ellipse 250% 80% at 60% 60%, #5fb84a 0%, #4da63c 50%, transparent 80%),
|
|
||||||
radial-gradient(ellipse 200% 70% at 20% 70%, #58b244 0%, #4a9f38 45%, transparent 75%),
|
|
||||||
/* Base green field */
|
|
||||||
linear-gradient(180deg,
|
|
||||||
#6bc455 0%,
|
|
||||||
#5cb347 15%,
|
|
||||||
#4fa53d 30%,
|
|
||||||
#459935 50%,
|
|
||||||
#3d8c2e 70%,
|
|
||||||
#358026 85%,
|
|
||||||
#2d7420 100%
|
|
||||||
);
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Grass detail overlay */
|
|
||||||
.desktop::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 20%;
|
|
||||||
background:
|
|
||||||
repeating-linear-gradient(
|
|
||||||
85deg,
|
|
||||||
transparent 0px,
|
|
||||||
transparent 3px,
|
|
||||||
rgba(70, 140, 50, 0.1) 3px,
|
|
||||||
rgba(70, 140, 50, 0.1) 4px
|
|
||||||
),
|
|
||||||
repeating-linear-gradient(
|
|
||||||
95deg,
|
|
||||||
transparent 0px,
|
|
||||||
transparent 4px,
|
|
||||||
rgba(90, 160, 60, 0.08) 4px,
|
|
||||||
rgba(90, 160, 60, 0.08) 5px
|
|
||||||
);
|
|
||||||
z-index: 1;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Desktop Icons */
|
/* Desktop Icons */
|
||||||
@ -141,7 +55,6 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 10;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.desktop-icon {
|
.desktop-icon {
|
||||||
|
|||||||
@ -37,99 +37,13 @@
|
|||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Desktop - Custom Bliss-style background */
|
/* Desktop */
|
||||||
.desktop {
|
.desktop {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100vh - 30px);
|
height: calc(100vh - 30px);
|
||||||
|
background: url('https://upload.wikimedia.org/wikipedia/en/2/27/Bliss_%28Windows_XP%29.png') center center / cover no-repeat;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
/* Sky gradient */
|
|
||||||
background:
|
|
||||||
/* Clouds - fluffy white shapes */
|
|
||||||
radial-gradient(ellipse 120px 80px at 15% 25%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 40%, transparent 70%),
|
|
||||||
radial-gradient(ellipse 80px 50px at 18% 28%, rgba(255,255,255,0.9) 0%, transparent 60%),
|
|
||||||
radial-gradient(ellipse 100px 60px at 12% 22%, rgba(255,255,255,0.85) 0%, transparent 65%),
|
|
||||||
|
|
||||||
radial-gradient(ellipse 150px 90px at 45% 18%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 45%, transparent 70%),
|
|
||||||
radial-gradient(ellipse 90px 55px at 42% 22%, rgba(255,255,255,0.9) 0%, transparent 60%),
|
|
||||||
radial-gradient(ellipse 110px 65px at 50% 15%, rgba(255,255,255,0.85) 0%, transparent 65%),
|
|
||||||
|
|
||||||
radial-gradient(ellipse 130px 85px at 75% 22%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 40%, transparent 70%),
|
|
||||||
radial-gradient(ellipse 85px 50px at 78% 25%, rgba(255,255,255,0.9) 0%, transparent 60%),
|
|
||||||
radial-gradient(ellipse 95px 55px at 72% 19%, rgba(255,255,255,0.85) 0%, transparent 65%),
|
|
||||||
|
|
||||||
radial-gradient(ellipse 100px 70px at 88% 30%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 45%, transparent 70%),
|
|
||||||
radial-gradient(ellipse 70px 45px at 92% 28%, rgba(255,255,255,0.85) 0%, transparent 60%),
|
|
||||||
|
|
||||||
radial-gradient(ellipse 90px 60px at 30% 35%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.6) 40%, transparent 70%),
|
|
||||||
|
|
||||||
/* Sky gradient - bright blue at top, lighter toward horizon */
|
|
||||||
linear-gradient(180deg,
|
|
||||||
#1e5799 0%,
|
|
||||||
#2989d8 20%,
|
|
||||||
#45a5dc 35%,
|
|
||||||
#7db9e8 50%,
|
|
||||||
#b3d9f2 65%,
|
|
||||||
#d4eaf7 80%,
|
|
||||||
#e8f4fc 100%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Rolling green hills */
|
|
||||||
.desktop::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 55%;
|
|
||||||
background:
|
|
||||||
/* Foreground hill - brightest green with grass texture */
|
|
||||||
radial-gradient(ellipse 180% 100% at 50% 150%, #4a9f38 0%, #3d8c2e 30%, transparent 60%),
|
|
||||||
/* Main rolling hill */
|
|
||||||
radial-gradient(ellipse 200% 120% at 30% 100%, #5cb347 0%, #4a9f38 40%, transparent 70%),
|
|
||||||
radial-gradient(ellipse 180% 100% at 80% 110%, #52a83f 0%, #4a9f38 35%, transparent 65%),
|
|
||||||
/* Background hills - slightly darker/bluer */
|
|
||||||
radial-gradient(ellipse 250% 80% at 60% 60%, #5fb84a 0%, #4da63c 50%, transparent 80%),
|
|
||||||
radial-gradient(ellipse 200% 70% at 20% 70%, #58b244 0%, #4a9f38 45%, transparent 75%),
|
|
||||||
/* Base green field */
|
|
||||||
linear-gradient(180deg,
|
|
||||||
#6bc455 0%,
|
|
||||||
#5cb347 15%,
|
|
||||||
#4fa53d 30%,
|
|
||||||
#459935 50%,
|
|
||||||
#3d8c2e 70%,
|
|
||||||
#358026 85%,
|
|
||||||
#2d7420 100%
|
|
||||||
);
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Grass detail overlay */
|
|
||||||
.desktop::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 20%;
|
|
||||||
background:
|
|
||||||
repeating-linear-gradient(
|
|
||||||
85deg,
|
|
||||||
transparent 0px,
|
|
||||||
transparent 3px,
|
|
||||||
rgba(70, 140, 50, 0.1) 3px,
|
|
||||||
rgba(70, 140, 50, 0.1) 4px
|
|
||||||
),
|
|
||||||
repeating-linear-gradient(
|
|
||||||
95deg,
|
|
||||||
transparent 0px,
|
|
||||||
transparent 4px,
|
|
||||||
rgba(90, 160, 60, 0.08) 4px,
|
|
||||||
rgba(90, 160, 60, 0.08) 5px
|
|
||||||
);
|
|
||||||
z-index: 1;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Desktop Icons */
|
/* Desktop Icons */
|
||||||
@ -141,7 +55,6 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 10;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.desktop-icon {
|
.desktop-icon {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user