diff --git a/src/livecodes/styles/index.css b/src/livecodes/styles/index.css index bf6b6ee3bd..c19babea8c 100644 --- a/src/livecodes/styles/index.css +++ b/src/livecodes/styles/index.css @@ -95,77 +95,65 @@ body, } } -/* Logo SVG */ -.B { - stroke: none; -} - -.C { - fill: url('#C'); -} - -.E { - fill-rule: nonzero; -} - -@keyframes pulse2 { - 0%, - 100% { - opacity: 0; - } - - 50% { - opacity: 1; - } -} - @keyframes pulse { 0%, 100% { - opacity: 0.9; + transform: scale(0.8) translateY(-4%) translateX(-7%); } 50% { - opacity: 1; + transform: scale(1); } } @keyframes colorPulse { 0%, 100% { - stop-color: #d7d7d7; + stop-color: #8a8a8a; } 50% { - stop-color: #b0b0b0; + stop-color: #d7d7d7; } } @keyframes colorPulse2 { 0%, 100% { - stop-color: #626262; + stop-color: #444; } 50% { - stop-color: #444; + stop-color: #626262; } } -#loading:not(.click-to-load) #cube-container { - animation: pulse2 3s ease-in-out infinite; - scale: 0.9; +svg .B { + stroke: none; +} + +svg .C { + fill: url('#C'); +} + +svg .E { + fill-rule: nonzero; +} + +#loading:not(.click-to-load) svg #cube-container { + animation: pulsate 3s ease-in-out infinite; transform-origin: center; } -#loading:not(.click-to-load) #inner-cube { - animation: pulse 2s ease-in-out infinite; +#loading:not(.click-to-load) svg #inner-cube { + animation: pulse 3s ease-in-out infinite; + transform-origin: center; } -#loading:not(.click-to-load) #gradient-stop-1 { - animation: colorPulse 4s ease-in-out infinite; +#loading:not(.click-to-load) svg #gradient-stop-1 { + animation: colorPulse 1s ease-in-out infinite; } -#loading:not(.click-to-load) #gradient-stop-2 { - animation: colorPulse2 4s ease-in-out infinite; +#loading:not(.click-to-load) svg #gradient-stop-2 { + animation: colorPulse2 1s ease-in-out infinite; }