diff --git a/assets/sass/pages/homepage.scss b/assets/sass/pages/homepage.scss index fc7b75a..8be4488 100644 --- a/assets/sass/pages/homepage.scss +++ b/assets/sass/pages/homepage.scss @@ -171,7 +171,7 @@ grid-template-columns: 1fr 1fr; @include media-up(lg) { - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(5, 1fr); position: absolute; bottom: 5%; width: 100%; @@ -186,6 +186,49 @@ justify-content: center; } + .nav-cube { + width: 106.5px; + position: relative; + + &:hover { + .nav-cube-text { + opacity: 1; + } + } + + .heart-icon { + font-size: 1.5em; + } + + .nav-cube-text { + position: absolute; + display: block; + bottom: 0; + right: 0; + color: white; + font-size: 20px; + font-weight: bold; + z-index: 8000; + transform: rotate(-20deg); + border: 1px solid #0f0; + padding: 2px; + padding-left: 5px; + padding-right: 5px; + border-radius: 5px; + 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; + } + } + } + .time-display { width: 150px; margin: auto; diff --git a/assets/sass/pages/resources.scss b/assets/sass/pages/resources.scss index 06ec85d..46983d9 100644 --- a/assets/sass/pages/resources.scss +++ b/assets/sass/pages/resources.scss @@ -186,63 +186,16 @@ } } -// Companion Cube -.companion-cube { - position: fixed; - bottom: 40px; - right: 40px; - width: 80px; - height: 80px; - background: linear-gradient( - 135deg, - rgba(200, 200, 200, 0.2) 0%, - rgba(150, 150, 150, 0.3) 100% - ); - border: 2px solid rgba(200, 200, 200, 0.4); - border-radius: 8px; - box-shadow: - 0 10px 30px rgba(0, 0, 0, 0.5), - inset 0 0 20px rgba(255, 255, 255, 0.1); - transform: rotateX(15deg) rotateY(-15deg); - transform-style: preserve-3d; - animation: cube-float 4s ease-in-out infinite; - position: relative; +.background-cube { + position: absolute; + left: 10%; + bottom: 10%; + width: 150px; + z-index: -1; + transform: rotate(5deg); - // Heart symbol in center - &::before { - content: "♥"; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 32px; - color: rgba(255, 100, 150, 0.6); - text-shadow: 0 0 10px rgba(255, 100, 150, 0.8); - } - - // Corner circles - &::after { - content: ""; - position: absolute; - width: 12px; - height: 12px; - border-radius: 50%; - background: rgba(200, 200, 200, 0.4); - top: 8px; - left: 8px; - box-shadow: - 60px 0 0 rgba(200, 200, 200, 0.4), - 0 60px 0 rgba(200, 200, 200, 0.4), - 60px 60px 0 rgba(200, 200, 200, 0.4); - } - - @include media-up(md) { - width: 100px; - height: 100px; - - &::before { - font-size: 40px; - } + .heart-icon { + font-size: 2em; } } diff --git a/assets/sass/partials/_companion-cube.scss b/assets/sass/partials/_companion-cube.scss new file mode 100644 index 0000000..f3d983f --- /dev/null +++ b/assets/sass/partials/_companion-cube.scss @@ -0,0 +1,198 @@ +.companion-cube-container { + width: 100%; + aspect-ratio: 1/1; + display: flex; + align-items: center; + justify-content: center; + margin: 2rem auto; + position: relative; + + // Ground shadow beneath the cube + &::after { + content: ""; + position: absolute; + bottom: -30%; + left: 50%; + transform: translateX(-50%); + width: 250%; + height: 50%; + background: radial-gradient(ellipse, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 40%, transparent 70%); + border-radius: 50%; + filter: blur(8px); + z-index: -1; + + @include media-down(md) { + bottom: -4%; + filter: blur(6px); + } + + @include media-down(sm) { + bottom: -3%; + filter: blur(4px); + } + } +} + + +.companion-cube-face { + width: 100%; + height: 100%; + position: relative; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, #e8e0d5 0%, #d0c8bd 50%, #beb6ab 100%); + border-radius: 8px; + box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3); + + clip-path: polygon( + /* Top left corner */ + 0% 0%, + 0% 35%, + /* Left indent */ + 6% 37.5%, + 6% 62.5%, + 0% 65%, + /* Bottom left corner */ + 0% 100%, + 35% 100%, + /* Bottom indent */ + 37.5% 94%, + 62.5% 94%, + 65% 100%, + /* Bottom right corner */ + 100% 100%, + 100% 65%, + /* Right indent */ + 94% 62.5%, + 94% 37.5%, + 100% 35%, + /* Top right corner */ + 100% 0%, + 65% 0%, + /* Top indent */ + 62.5% 6%, + 37.5% 6%, + 35% 0% + ); + + @include media-down(md) { + border-radius: 6px; + } +} + +.cube-center-circle { + position: absolute; + width: 70%; + height: 70%; + background: linear-gradient(135deg, #6a6a6a 0%, #4a4a4a 50%, #3a3a3a 100%); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; +} + +.center-inner-ring { + position: absolute; + width: 60%; + height: 60%; + border: 2px solid #5a5a5a; + border-radius: 50%; + background: linear-gradient(135deg, #e8e0d5 0%, #d0c8bd 50%, #beb6ab 100%); + border-radius: 50%; + + @include media-down(md) { + border-width: 1.5px; + } +} + +.grey-bar { + position: absolute; + background-color: #5a5a5a; + + &.horizontal-top, &.horizontal-bottom { + height: 2.5%; + } + + &.vertical-left, &.vertical-right { + width: 2.5%; + } + + &.horizontal-top { + left: 0; right: 0; + top: 37.5%; + } + + &.horizontal-bottom { + left: 0; right: 0; + bottom: 37.5%; + } + + &.vertical-left { + left: 37.5%; + top: 0; bottom: 0; + } + + &.vertical-right { + right: 37.5%; + top: 0; bottom: 0; + } +} + +// Pink connector bars extending from center +.pink-bar { + position: absolute; + background: #ff80bf; + + &.vertical { + top: 0; bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 5%; + } + + &.horizontal { + top: 50%; + right: 0; left: 0; + transform: translateY(-50%); + height: 5%; + } + +} + +.heart-icon { + font-size: 5rem; + z-index: 3; + color: #ffc0e5; + pointer-events: none; + -webkit-text-stroke: 2px #8b5a6f; + animation: heartPulse 3s ease-in-out infinite; + + @include media-down(lg) { + font-size: 4rem; + } + + @include media-down(md) { + font-size: 3rem; + -webkit-text-stroke: 1.5px #8b5a6f; + } + + @include media-down(sm) { + font-size: 2rem; + -webkit-text-stroke: 1px #8b5a6f; + } +} + +// Pulsing heart animation +@keyframes heartPulse { + 0%, 100% { + transform: scale(1); + opacity: 1; + } + 50% { + transform: scale(1.3); + opacity: 0.85; + } +} + diff --git a/assets/sass/style.scss b/assets/sass/style.scss index b5a53f8..e165389 100644 --- a/assets/sass/style.scss +++ b/assets/sass/style.scss @@ -15,6 +15,7 @@ @import "partials/window"; @import "partials/crt-tv"; @import "partials/graphs"; +@import "partials/companion-cube"; @import "partials/content-screens"; diff --git a/layouts/index.html b/layouts/index.html index 3d3a5cb..8b05950 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -239,7 +239,7 @@
-
MUSIC & AUDIO GEAR
+
Music & Audio Gear
{{ partial "elements/ipod.html" . }} @@ -265,6 +265,16 @@
+
+ +
+ {{ partial "elements/companion-cube.html" . }} +
Experiments & Resources
+
+ +
+ +
{{ partial "elements/crt-tv.html" . }}
diff --git a/layouts/partials/elements/companion-cube.html b/layouts/partials/elements/companion-cube.html new file mode 100644 index 0000000..741d192 --- /dev/null +++ b/layouts/partials/elements/companion-cube.html @@ -0,0 +1,20 @@ +
+
+ +
+
+
+
+ + +
+ +
+
+ +
+ +
♥︎
+
+
+
diff --git a/layouts/resources/list.html b/layouts/resources/list.html index c33b3cf..b207e6f 100644 --- a/layouts/resources/list.html +++ b/layouts/resources/list.html @@ -31,7 +31,9 @@ -
- +
+ {{ partial "elements/companion-cube.html" . }} +
+ {{ end }}