🎅 🎅 🎅

site/theme/static/index.less

@@ -21,3 +21,4 @@
 @import './theme';
 @import './docsearch';
 @import './nprogress';
+@import './santa';

site/theme/static/santa.less

@@ -0,0 +1,171 @@
+.santa {
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 8px;
+  margin-right: 8px;
+}
+
+.santa-body {
+  font-size: 24px;
+  color: #f91047;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 1em;
+  height: 1em;
+  background-color: currentColor;
+  box-shadow: inset 0 -0.25em rgba(0, 0, 0, 0.1);
+  border-radius: 50%;
+  transform-origin: center bottom;
+  animation: balance alternate infinite 2s ease-in-out;
+}
+
+.santa-head {
+  font-size: 0.4em;
+  width: 1em;
+  height: 1.9em;
+  background-color: white;
+  border-radius: 0.5em;
+  transform: translateY(-1em);
+  position: relative;
+}
+
+.santa-head::before {
+  content: '';
+  width: 1em;
+  height: 0.375em;
+  display: block;
+  background-color: #ff9876;
+  position: absolute;
+  left: 0;
+  top: 0.65em;
+}
+
+.santa-ear {
+  background-color: #fc8363;
+  width: 0.1em;
+  height: 0.3em;
+  position: absolute;
+  top: 0.75em;
+}
+
+.santa-ear:nth-of-type(1) {
+  border-radius: 0.05em 0 0 0.05em;
+  left: -0.1em;
+}
+
+.santa-ear:nth-of-type(2) {
+  border-radius: 0 0.05em 0.05em 0;
+  right: -0.1em;
+}
+
+.santa-hat {
+  content: '';
+  width: 1em;
+  height: 0.15em;
+  position: absolute;
+  transform: scale(1.1);
+  top: 0.5em;
+  left: 0;
+  background-color: white;
+}
+
+.santa-hat::before {
+  content: '';
+  display: block;
+  width: 1em;
+  height: 0.5em;
+  background: #f91047;
+  border-radius: 0.5em 0.5em 0 0;
+  z-index: 2;
+  position: absolute;
+  top: -0.5em;
+}
+
+.santa-hat::after {
+  /* pompom */
+  content: '';
+  width: 0.25em;
+  height: 0.25em;
+  display: block;
+  background-color: white;
+  border-radius: 50%;
+  position: absolute;
+  z-index: 0;
+  top: -0.72em;
+  right: 0;
+  box-shadow: -0.2em 0.2em 0 0.12em rgba(0, 0, 0, 0.2), -0.2em 0.2em 0 0.12em #f91047;
+}
+
+.santa-eye {
+  width: 0.12em;
+  height: 0.12em;
+  background-color: black;
+  border-radius: 50%;
+  position: absolute;
+  top: 0.76em;
+  left: 0.2em;
+}
+
+.santa-eye + .santa-eye {
+  left: auto;
+  right: 0.2em;
+}
+
+.santa-nose {
+  width: 0.12em;
+  height: 0.22em;
+  background-color: #f24c4c;
+  border-radius: 0 0 0.12em 0.12em;
+  position: absolute;
+  top: 0.84em;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.santa-mouth {
+  width: 0.18em;
+  height: 0.1em;
+  border-bottom-right-radius: 5vw;
+  border-bottom-left-radius: 5vw;
+  margin-top: 0.3em;
+  background-color: black;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  animation: hohoho 4s linear forwards infinite;
+}
+
+@keyframes hohoho {
+  0%,
+  10%,
+  20%,
+  40%,
+  100% {
+    /* smiling */
+    width: 0.18em;
+    height: 0.1em;
+    border-bottom-right-radius: 1vw;
+    border-bottom-left-radius: 1vw;
+  }
+
+  5%,
+  15%,
+  25%,
+  35% {
+    /* hohoho */
+    width: 0.15em;
+    height: 0.2em;
+    border-radius: 50%;
+  }
+}
+
+@keyframes balance {
+  from {
+    transform: rotate(-4deg);
+  }
+  to {
+    transform: rotate(4deg);
+  }
+}

site/theme/template/Layout/Header.jsx

@@ -4,6 +4,7 @@ import { Link } from 'bisheng/router';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { Select, Menu, Row, Col, Icon, Popover, Input, Badge, Button } from 'antd';
+import Santa from './Santa';
 import * as utils from '../utils';
 import { version as antdVersion } from '../../../../package.json';
 
@@ -238,6 +239,7 @@ export default class Header extends React.Component {
                 alt="Ant Design"
                 src="https://gw.alipayobjects.com/zos/rmsportal/DkKNubTaaVsKURhcVGkh.svg"
               />
+              <Santa />
             </Link>
           </Col>
           <Col xxl={20} xl={19} lg={19} md={19} sm={0} xs={0}>

site/theme/template/Layout/Santa.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Tooltip } from 'antd';
+
+export default () => {
+  const now = new Date();
+  const isChristmas = now.getMonth() === 11 && now.getDate() === 25;
+  return (
+    isChristmas && (
+      <Tooltip title="🎅🏻 Merry Chrismas!">
+        <div className="santa">
+          <div className="santa-body">
+            <div className="santa-head">
+              <div className="santa-ear" />
+              <div className="santa-ear" />
+              <div className="santa-hat" />
+              <div className="santa-eye" />
+              <div className="santa-eye" />
+              <div className="santa-nose" />
+              <div className="santa-mouth" />
+            </div>
+          </div>
+        </div>
+      </Tooltip>
+    )
+  );
+};