Skip to content

Commit

Permalink
It's Christmas again 🎅
Browse files Browse the repository at this point in the history
  • Loading branch information
@4lejandrito
4lejandrito committed Dec 20, 2021
1 parent eccf7ab commit 1921b3b
Show file tree
Hide file tree
Showing 7 changed files with 119 additions and 79 deletions.
Binary file added packages/creepyface-site/public/santa-hat.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
121 changes: 71 additions & 50 deletions packages/creepyface-site/src/components/Logo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
import { Point } from 'creepyface'
import React, { useCallback, useEffect, useRef, useState } from 'react'
import { useRafLoop, useWindowSize } from 'react-use'
import santaHat from '../../public/santa-hat.png'
import { useTranslate } from './Language'

const isChristmas = () => {
const today = new Date()
const day = today.getDate()
const month = today.getMonth()
return (month === 11 && day >= 15) || (month === 0 && day <= 7)
}

const Pointer = (props: {
animating: boolean
Expand Down Expand Up @@ -40,97 +49,109 @@ export default function Logo(props: {
setAnimating(true)
}
}
const translate = useTranslate()
return (
<svg
className={'logo' + (animating ? ' animate' : '')}
onMouseEnter={animate}
onClick={animate}
viewBox={`0 0 317.8 78`}
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<title>Creepyface</title>
<Pointer
animating={animating}
onPositionChange={props.onPointerPositionChange}
/>
<g className="eye">
<circle className="pupil" cx="83" cy="46" r="3.7" />
</g>
<g className="eye">
<circle className="pupil" cx="115.8" cy="46" r="3.7" />
</g>
<g className="text">
<path
d="M27.6,39.2l-1,11.7c-0.5-0.1-1.1-0.2-1.6-0.3s-1-0.1-1.6-0.1c-1.3,0-2.6,0.2-3.8,0.5
<div className="logo">
<div className="wrapper">
<svg
className={animating ? ' animate' : ''}
onMouseEnter={animate}
onClick={animate}
viewBox={`0 0 317.8 78`}
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<title>Creepyface</title>
<Pointer
animating={animating}
onPositionChange={props.onPointerPositionChange}
/>
<g className="eye">
<circle className="pupil" cx="83" cy="46" r="3.7" />
</g>
<g className="eye">
<circle className="pupil" cx="115.8" cy="46" r="3.7" />
</g>
<g className="text">
<path
d="M27.6,39.2l-1,11.7c-0.5-0.1-1.1-0.2-1.6-0.3s-1-0.1-1.6-0.1c-1.3,0-2.6,0.2-3.8,0.5
c-1.2,0.3-2.3,0.8-3.2,1.5c-0.9,0.7-1.7,1.6-2.2,2.6s-0.8,2.3-0.8,3.7c0,1,0.2,1.9,0.5,2.7s0.7,1.4,1.3,1.9s1.3,0.9,2.1,1.2
S19,65,20,65c0.7,0,1.4-0.1,2.1-0.2s1.4-0.3,2.2-0.6s1.4-0.5,2.1-0.8s1.3-0.6,1.9-1l-0.4,13.1c-0.7,0.4-1.5,0.7-2.3,1
S23.9,77,23,77.3s-1.8,0.4-2.6,0.5c-0.9,0.1-1.7,0.2-2.5,0.2c-2.6,0-5-0.5-7.2-1.5s-4-2.3-5.6-4c-1.5-1.7-2.8-3.7-3.6-5.9
C0.4,64.3,0,61.9,0,59.4c0-3,0.4-5.9,1.3-8.5S3.4,46,5.1,44s3.8-3.5,6.2-4.6c2.5-1.1,5.3-1.7,8.5-1.7c1.3,0,2.6,0.1,3.9,0.3
C25.1,38.3,26.3,38.7,27.6,39.2z"
/>
<path
d="M62.8,50.4c0,1.4-0.1,2.8-0.4,3.9c-0.3,1.2-0.6,2.3-1.2,3.2c-0.5,1-1.2,1.9-2.1,2.7c-0.9,0.8-1.9,1.6-3.1,2.4
/>
<path
d="M62.8,50.4c0,1.4-0.1,2.8-0.4,3.9c-0.3,1.2-0.6,2.3-1.2,3.2c-0.5,1-1.2,1.9-2.1,2.7c-0.9,0.8-1.9,1.6-3.1,2.4
l6.6,11.8l-12.5,2.4l-4.3-11.9L42.3,65L42,76.8H30c0.1-4.2,0.2-8.4,0.3-12.6c0.1-4.2,0.2-8.4,0.3-12.6c0-2.1,0.1-4.2,0.1-6.3
s0.1-4.2,0.2-6.3c1.3-0.5,2.6-0.9,3.8-1.2c1.3-0.3,2.5-0.6,3.8-0.7c1.3-0.2,2.6-0.3,3.9-0.4c1.3-0.1,2.6-0.1,4-0.1
c2.1,0,4.2,0.3,6.1,0.9c2,0.6,3.7,1.5,5.2,2.6c1.5,1.2,2.7,2.6,3.7,4.4C62.4,46,62.8,48.1,62.8,50.4z M50.4,51.3
c0-0.8-0.1-1.5-0.3-2.1s-0.5-1.2-0.9-1.7s-0.9-0.8-1.6-1.1C47,46.1,46.2,46,45.4,46c-0.4,0-0.7,0-1.1,0.1c-0.4,0-0.7,0.1-1,0.2
l-0.4,10.4h0.7c0.8,0,1.6-0.1,2.4-0.3s1.6-0.5,2.2-0.9c0.7-0.4,1.2-1,1.6-1.6C50.2,53,50.4,52.2,50.4,51.3z"
/>
<path
d="M162.6,51.6c0,1.8-0.3,3.4-0.8,4.8c-0.5,1.4-1.3,2.6-2.2,3.7s-2,1.9-3.3,2.6c-1.3,0.7-2.6,1.3-4,1.8
/>
<path
d="M162.6,51.6c0,1.8-0.3,3.4-0.8,4.8c-0.5,1.4-1.3,2.6-2.2,3.7s-2,1.9-3.3,2.6c-1.3,0.7-2.6,1.3-4,1.8
c-1.4,0.5-2.9,0.8-4.5,1c-1.5,0.2-3.1,0.3-4.5,0.3v11.9h-13c0-2.1,0-4.2,0-6.2s0-4,0-6s0-4,0-6s0-4.1,0-6.2c0-2.3,0-4.5,0-6.8
s0-4.5,0.1-6.8c2.4-0.7,4.7-1.2,7.1-1.6c2.4-0.4,4.8-0.5,7.3-0.5c1.4,0,2.9,0.1,4.3,0.3c1.4,0.2,2.8,0.6,4.1,1.1s2.5,1.1,3.6,1.9
c1.1,0.8,2.1,1.6,2.9,2.7s1.5,2.2,1.9,3.6S162.6,49.9,162.6,51.6z M150.3,52.5c0-1.2-0.4-2.1-1.1-2.8c-0.7-0.7-1.7-1-2.9-1
c-0.4,0-0.8,0-1.2,0.1s-0.8,0.1-1.2,0.2l-0.3,8.1c0.3,0,0.5,0.1,0.8,0.1c0.2,0,0.5,0,0.8,0c0.7,0,1.3-0.1,1.9-0.3
c0.6-0.2,1.2-0.5,1.7-1c0.5-0.4,0.9-0.9,1.2-1.5C150.1,53.9,150.3,53.2,150.3,52.5z"
/>
<path d="M198.1,39.5L185,60.9l0.4,15.8h-14.3l0.3-15.6l-10.2-20.7l14.2-1.8l4.5,12l4.8-12L198.1,39.5z" />
<path
d="M224.6,37.6c-0.1,1.7-0.2,3.5-0.3,5.2s-0.2,3.4-0.4,5.2l-11.8,0.6v3.5h10.2l-0.6,8.6L212,61l0.1,15.4
/>
<path d="M198.1,39.5L185,60.9l0.4,15.8h-14.3l0.3-15.6l-10.2-20.7l14.2-1.8l4.5,12l4.8-12L198.1,39.5z" />
<path
d="M224.6,37.6c-0.1,1.7-0.2,3.5-0.3,5.2s-0.2,3.4-0.4,5.2l-11.8,0.6v3.5h10.2l-0.6,8.6L212,61l0.1,15.4
L198,76.7l0.9-39L224.6,37.6L224.6,37.6z"
/>
<path
d="M257.7,74.8l-13.8,1.8l-1.7-6.3h-6.3l-1.4,6.3l-14.2-1.4l11.1-37.1l15.5-0.8L257.7,74.8z M241.2,61.8
/>
<path
d="M257.7,74.8l-13.8,1.8l-1.7-6.3h-6.3l-1.4,6.3l-14.2-1.4l11.1-37.1l15.5-0.8L257.7,74.8z M241.2,61.8
l-2.1-9.7l-2.1,9.7H241.2z"
/>
<path
d="M284.1,39.2l-1,11.7c-0.5-0.1-1.1-0.2-1.6-0.3s-1-0.1-1.6-0.1c-1.3,0-2.6,0.2-3.8,0.5
/>
<path
d="M284.1,39.2l-1,11.7c-0.5-0.1-1.1-0.2-1.6-0.3s-1-0.1-1.6-0.1c-1.3,0-2.6,0.2-3.8,0.5
c-1.2,0.3-2.3,0.8-3.2,1.5c-0.9,0.7-1.7,1.6-2.2,2.6s-0.8,2.3-0.8,3.7c0,1,0.2,1.9,0.5,2.7s0.7,1.4,1.3,1.9
c0.6,0.5,1.3,0.9,2.1,1.2c0.8,0.3,1.7,0.4,2.7,0.4c0.7,0,1.4-0.1,2.1-0.2s1.4-0.3,2.2-0.6c0.7-0.2,1.4-0.5,2.1-0.8s1.3-0.6,1.9-1
l-0.4,13.1c-0.7,0.4-1.5,0.7-2.3,1s-1.7,0.5-2.6,0.8s-1.8,0.4-2.6,0.5c-0.9,0.1-1.7,0.2-2.5,0.2c-2.6,0-5-0.5-7.2-1.5
s-4-2.3-5.6-4c-1.5-1.7-2.8-3.7-3.6-5.9s-1.3-4.6-1.3-7.2c0-3,0.4-5.9,1.3-8.5s2.1-4.9,3.8-6.9s3.8-3.5,6.2-4.6
c2.5-1.1,5.3-1.7,8.5-1.7c1.3,0,2.6,0.1,3.9,0.3C281.6,38.3,282.9,38.7,284.1,39.2z"
/>
<path
d="M317.8,54.7c0,1.6-0.1,3.2-0.3,4.8c-3.2,0.2-6.3,0.5-9.5,1c-3.1,0.5-6.3,0.9-9.4,1.3c0.5,1.3,1.2,2.4,2.3,3.2
/>
<path
d="M317.8,54.7c0,1.6-0.1,3.2-0.3,4.8c-3.2,0.2-6.3,0.5-9.5,1c-3.1,0.5-6.3,0.9-9.4,1.3c0.5,1.3,1.2,2.4,2.3,3.2
c1,0.8,2.3,1.2,3.7,1.2c0.7,0,1.6-0.1,2.4-0.4c0.9-0.3,1.8-0.6,2.6-1c0.9-0.4,1.7-0.9,2.5-1.3c0.8-0.5,1.5-0.9,2.1-1.3l-1.3,12.6
c-0.7,0.6-1.5,1-2.4,1.4c-0.8,0.4-1.7,0.7-2.6,0.9c-0.9,0.2-1.8,0.4-2.8,0.5c-0.9,0.1-1.8,0.2-2.7,0.2c-1.8,0-3.5-0.2-5-0.8
c-1.5-0.5-2.9-1.2-4.1-2.1s-2.3-2-3.2-3.2c-0.9-1.2-1.7-2.6-2.3-4s-1.1-3-1.4-4.6s-0.5-3.2-0.5-4.9s0.2-3.5,0.5-5.2s0.8-3.4,1.4-5
s1.4-3.1,2.4-4.4c1-1.4,2.1-2.6,3.4-3.6s2.8-1.8,4.4-2.4c1.6-0.6,3.5-0.9,5.4-0.9c1.7,0,3.2,0.2,4.5,0.7c1.4,0.5,2.6,1.1,3.6,1.9
c1.1,0.8,2,1.8,2.8,2.9s1.4,2.3,1.9,3.7s0.9,2.7,1.1,4.2C317.7,51.7,317.8,53.2,317.8,54.7z M306.7,53.3c0-0.5-0.1-1.1-0.2-1.6
s-0.3-1-0.5-1.5c-0.3-0.4-0.6-0.8-1-1.1s-0.9-0.4-1.5-0.4c-0.7,0-1.4,0.2-2,0.6s-1.1,0.9-1.5,1.5s-0.7,1.3-1,2s-0.5,1.4-0.6,1.9
l8.2-0.8v-0.6C306.6,53.3,306.7,53.3,306.7,53.3z"
/>
<path
d="M128.1,59.5c0.2-1.6,0.3-3.2,0.3-4.8c0-1.5-0.1-3-0.5-4.6c-0.2-1.5-0.6-2.8-1.1-4.2s-1.1-2.6-1.9-3.7
/>
<path
d="M128.1,59.5c0.2-1.6,0.3-3.2,0.3-4.8c0-1.5-0.1-3-0.5-4.6c-0.2-1.5-0.6-2.8-1.1-4.2s-1.1-2.6-1.9-3.7
c-0.8-1.1-1.7-2.1-2.8-2.9c-1-0.8-2.2-1.4-3.6-1.9c-1.3-0.5-2.8-0.7-4.5-0.7c-1.9,0-3.8,0.3-5.4,0.9c-1.6,0.6-3.1,1.4-4.4,2.4
s-2.4,2.2-3.4,3.6c-1,1.3-1.8,2.8-2.4,4.4c-0.6,1.6-1.1,3.3-1.4,5s-0.5,3.5-0.5,5.2s0.2,3.3,0.5,4.9s0.8,3.2,1.4,4.6
s1.4,2.8,2.3,4s2,2.3,3.2,3.2c1.2,0.9,2.6,1.6,4.1,2.1c1.5,0.6,3.2,0.8,5,0.8c0.9,0,1.8-0.1,2.7-0.2c1-0.1,1.9-0.3,2.8-0.5
s1.8-0.5,2.6-0.9c0.9-0.4,1.7-0.8,2.4-1.4l1.3-12.6c-0.6,0.4-1.3,0.8-2.1,1.3c-0.8,0.4-1.6,0.9-2.5,1.3c-0.8,0.4-1.7,0.7-2.6,1
c-0.8,0.3-1.7,0.4-2.4,0.4c-1.4,0-2.7-0.4-3.7-1.2c-1.1-0.8-1.8-1.9-2.3-3.2c3.1-0.4,6.3-0.8,9.4-1.3
C121.8,60,124.9,59.7,128.1,59.5z M104.2,48.8c0-5.1,4.2-9.3,9.3-9.3s9.3,4.2,9.3,9.3s-4.2,9.3-9.3,9.3S104.2,53.9,104.2,48.8z"
/>
<path
d="M95.2,59.5c0.2-1.6,0.3-3.2,0.3-4.8c0-1.5-0.1-3-0.5-4.6c-0.2-1.5-0.6-2.8-1.1-4.2s-1.1-2.6-1.9-3.7
/>
<path
d="M95.2,59.5c0.2-1.6,0.3-3.2,0.3-4.8c0-1.5-0.1-3-0.5-4.6c-0.2-1.5-0.6-2.8-1.1-4.2s-1.1-2.6-1.9-3.7
c-0.8-1.1-1.7-2.1-2.8-2.9c-1-0.8-2.2-1.4-3.6-1.9c-1.3-0.5-2.8-0.7-4.5-0.7c-1.9,0-3.8,0.3-5.4,0.9c-1.6,0.6-3.1,1.4-4.4,2.4
s-2.4,2.2-3.4,3.6c-1,1.3-1.8,2.8-2.4,4.4s-1.1,3.3-1.4,5c-0.3,1.7-0.5,3.5-0.5,5.2s0.2,3.3,0.5,4.9c0.3,1.6,0.8,3.2,1.4,4.6
s1.4,2.8,2.3,4s2,2.3,3.2,3.2c1.2,0.9,2.6,1.6,4.1,2.1c1.5,0.6,3.2,0.8,5,0.8c0.9,0,1.8-0.1,2.7-0.2c1-0.1,1.9-0.3,2.8-0.5
s1.8-0.5,2.6-0.9c0.9-0.4,1.7-0.8,2.4-1.4l1.3-12.6c-0.6,0.4-1.3,0.8-2.1,1.3c-0.8,0.4-1.6,0.9-2.5,1.3c-0.8,0.4-1.7,0.7-2.6,1
c-0.8,0.3-1.7,0.4-2.4,0.4c-1.4,0-2.7-0.4-3.7-1.2c-1.1-0.8-1.8-1.9-2.3-3.2c3.1-0.4,6.3-0.8,9.4-1.3C88.9,60,92,59.7,95.2,59.5z
M71.4,48.8c0-5.1,4.2-9.3,9.3-9.3s9.3,4.2,9.3,9.3s-4.2,9.3-9.3,9.3S71.4,53.9,71.4,48.8z"
/>
</g>
</svg>
/>
</g>
</svg>
{isChristmas() && (
<img
className="hat"
alt={translate('Santa hat')}
src={santaHat.src}
/>
)}
</div>
</div>
)
}
1 change: 1 addition & 0 deletions packages/creepyface-site/src/locales/es.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,4 +78,5 @@ export const messages = {
Supports: 'Soporta',
'The main Creepyface': 'La Creepyface principal',
"A stranger's Creepyface": 'La Creepyface de un extraño',
'Santa hat': 'Gorro de Papá Noel',
}
2 changes: 1 addition & 1 deletion packages/creepyface-site/src/scss/_admin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
position: fixed;
left: $spacing;
top: $spacing;
.logo {
.logo svg {
height: 2rem;
}
}
Expand Down
4 changes: 3 additions & 1 deletion packages/creepyface-site/src/scss/_app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@
padding-bottom: 2 * $spacing;
}
.logo {
height: 1.4em;
svg {
height: 1.4em;
}
margin: 0 auto;
@include horizontal {
margin: 0;
Expand Down
4 changes: 3 additions & 1 deletion packages/creepyface-site/src/scss/_liferay.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,9 @@
@include horizontal {
font-size: 3.5rem;
}
height: 1.4em;
svg {
height: 1.4em;
}
}
.subtitle {
display: inline-flex;
Expand Down
66 changes: 40 additions & 26 deletions packages/creepyface-site/src/scss/_logo.scss
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,49 @@
.logo {
display: block;
fill: white;
.light & {
fill: $color-text;
}
.pointer {
pointer-events: none;
}
line-height: 0;
.wrapper {
position: relative;
display: inline-block;
svg {
display: block;
fill: white;
.light & {
fill: $color-text;
}
.pointer {
pointer-events: none;
}

&.animate {
$duration: 0.7s;
.pupil {
animation: pupil $duration cubic-bezier(0.02, 0.01, 0.21, 1);
@keyframes pupil {
10% {
transform: translateX(0);
&.animate {
$duration: 0.7s;
.pupil {
animation: pupil $duration cubic-bezier(0.02, 0.01, 0.21, 1);
@keyframes pupil {
10% {
transform: translateX(0);
}
65% {
animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
transform: translateX(-1.7%);
}
}
}
65% {
animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
transform: translateX(-1.7%);
.pointer {
animation: pointer $duration cubic-bezier(0.02, 0.01, 0.21, 1);
@keyframes pointer {
50% {
animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
transform: translateX(-32%);
}
}
}
}
}
.pointer {
animation: pointer $duration cubic-bezier(0.02, 0.01, 0.21, 1);
@keyframes pointer {
50% {
animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
transform: translateX(-32%);
}
}
.hat {
position: absolute;
top: 10%;
left: 92%;
transform: rotate(30deg);
width: 18%;
}
}
}

0 comments on commit 1921b3b

Please sign in to comment.