ritual/ritual.sh
ritual/ritual.sh
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adding cityscape and junk

Browse source
This commit is contained in:
Dan 2025-12-11 11:58:40 +00:00
parent 0d21b06acd
commit c51942e5c0
19 changed files with 1351 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

48
assets/sass/partials/_music.scss
View file

@ -1,15 +1,17 @@
.music {
position: absolute;
bottom: 15%;
right: 27%;
// position: absolute;
// bottom: 15%;
// right: 27%;
cursor: pointer;
position: relative;
height: 100px;
}
.music-text {
display: block;
position: absolute;
top: 0px;
left: -150px;
display: block;
bottom: 0;
right: 0;
color: white;
font-size: 20px;
font-weight: bold;
@ -20,9 +22,17 @@
padding-left: 5px;
padding-right: 5px;
border-radius: 5px;
background-color: black;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
transition: opacity 0.3s ease;
text-align: center;
@include media-down(lg) {
opacity: 1;
transform: rotate(0deg);
bottom: 0;
font-size: 14px;
}
}
.music:hover .music-text {
@ -33,7 +43,7 @@
.notes {
position: absolute;
bottom: 30%;
left: -100px;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
z-index: 9999;
@ -134,8 +144,9 @@
/* iPod group container - maintains relative positioning */
.ipod-group {
position: absolute;
left: -200px;
// position: absolute;
// left: -200px;
position: relative;
width: 150px;
height: 100px;
z-index: 15;
@ -156,16 +167,21 @@
inset 0 -1px 3px rgba(0, 0, 0, 0.2);
transform: rotate(-8deg);
z-index: 2;
@include media-down(lg) {
width: 70px;
height: 110px;
}
}
.ipod::before {
content: "";
position: absolute;
top: 8px;
top: 5%;
left: 50%;
transform: translateX(-50%);
width: 32px;
height: 22px;
width: 80%;
height: 40%;
background: linear-gradient(180deg, #1a1a2a 0%, #0a0a1a 100%);
border-radius: 2px;
box-shadow: inset 0 0 5px rgba(0, 100, 150, 0.3);
@ -173,11 +189,11 @@
.ipod-wheel {
position: absolute;
bottom: 8px;
bottom: 8%;
left: 50%;
transform: translateX(-50%);
width: 32px;
height: 30px;
width: 70%;
height: 42%;
background: radial-gradient(
circle at center,
#fff 0%,