[website] add Halloween mood 🎃 (#1716)

<!--- Provide a general summary of your changes in the Title above -->

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->

We all need some Halloween mood these days, you know? 🎃

## How has this been tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- For example: -->
<!--- I have added unit tests -->
<!--- I have added Voice Over tests -->
<!--- Code cannot be tested automatically so I have tested it only
manually -->

With the blessing of some holy spirits 👻

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] Bug fix (non-breaking change which fixes an issue).
- [ ] New feature (non-breaking change which adds functionality).
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected).
- [x] Nice improve.

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [ ] My code follows the code style of this project.
- [ ] I have updated the documentation accordingly or it's not required.
- [ ] Unit tests are not broken.
- [ ] I have added changelog note to corresponding `CHANGELOG.md` file
with planned publish date.
- [ ] I have added new unit tests on added of fixed functionality.

website/docs/.vitepress/theme/style.css

@@ -1,10 +1,57 @@
 @import url('../../../../semcore/utils/lib/themes/auto.css');
+/* Second import for Halloween only */
+@import url('../../../src/fonts.css');
 
 /**
  * Customize default theme styling by overriding CSS variables:
  * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
  */
 
+/* Here Halloween styles start  */
+
+:root {
+  --halloween-gradient: linear-gradient(180deg, #FF642D 78.4%, #E43016 78.41%, #B22012 79.8%, #9F0707 81.89%);
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: var(--halloween-gradient);
+  --vp-home-hero-image-background-image: var(--halloween-gradient);
+  --vp-home-hero-image-filter: blur(40px);
+}
+
+.dark {
+  --halloween-gradient: linear-gradient(180deg, #FF642D 79.8%, #00FF1A 81.2%, #00FF1A 82.94%);
+  --vp-c-brand-1: #ff642d !important;
+  --vp-c-brand-2: #ff642d !important;
+  --vp-c-brand-3: #e15320 !important;
+}
+
+.VPHero[data-ui-name], h1 {
+  font-family: 'Creepster', -apple-system, serif, Garamond !important;
+}
+
+@media (min-width: 640px) {
+    .main h1 .name {
+      font-size: 56px !important;
+    }
+  }
+
+  @media (min-width: 960px) {
+    .main h1 .name {
+      font-size: 80px !important;
+    }
+  }
+
+.page-title {
+    font-size: 48px !important;
+    line-height: 56px !important;
+    background: var(--halloween-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+/* Here Halloween styles end  */
+
+
 ::selection {
   background: rgba(171, 108, 254, 0.24);
 }
@@ -62,13 +109,12 @@
  * Component: Home
  * -------------------------------------------------------------------------- */
 
-:root {
-  --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(315deg, #8932FF 35%, #4FD3FE 96%);
-
-  --vp-home-hero-image-background-image: linear-gradient(315deg, #8932FF 35%, #91E4FF 65%);
-  --vp-home-hero-image-filter: blur(40px);
-}
+/* :root {
+    --vp-home-hero-name-color: #FF642D;
+    --vp-home-hero-name-background: -webkit-linear-gradient(315deg, #8932FF 35%, #4FD3FE 96%);
+    --vp-home-hero-image-background-image: linear-gradient(315deg, #8932FF 35%, #91E4FF 65%);
+    --vp-home-hero-image-filter: blur(40px);
+} */
 
 .image-container {
   width: 240px !important;
@@ -564,15 +610,27 @@ video {
 
 /* To remove hover styles that our components in the sandboxes are inheriting from the website */
 
-h1[class], h2[class], h3[class], h4[class], h5[class], h6[class] {
+h1[class],
+h2[class],
+h3[class],
+h4[class],
+h5[class],
+h6[class] {
+  font-family: 'Inter', -apple-system, sans-serif, Arial;
   font-weight: var(--intergalactic-bold, 700);
 }
 
 .vp-doc a[class]:hover {
   color: var(--vp-c-indigo-1) !important;
 }
 
-.vp-doc h1[class], .vp-doc h2[class], .vp-doc h3[class], .vp-doc h4[class], .vp-doc h5[class], .vp-doc h6[class] {
+.vp-doc h1[class],
+.vp-doc h2[class],
+.vp-doc h3[class],
+.vp-doc h4[class],
+.vp-doc h5[class],
+.vp-doc h6[class] {
+  font-family: 'Inter', -apple-system, sans-serif, Arial;
   margin: unset;
 }
 
@@ -604,7 +662,7 @@ h1[class], h2[class], h3[class], h4[class], h5[class], h6[class] {
   color: var(--vp-c-indigo-1);
 }
 
-.vp-doc li[class] + li[class]:not([data-ui-name="InputTags.Tag"]) {
+.vp-doc li[class]+li[class]:not([data-ui-name="InputTags.Tag"]) {
   margin: unset;
 }
 
@@ -662,7 +720,10 @@ h1[class], h2[class], h3[class], h4[class], h5[class], h6[class] {
   margin: 24px 0 16px 0;
 }
 
-.vp-doc a[class]:not(.playground-runtime a), .vp-doc a[class]:hover:not(.playground-runtime a), .vp-doc a[class]:active:not(.playground-runtime a), .vp-doc a[class]:visited:not(.playground-runtime a) {
+.vp-doc a[class]:not(.playground-runtime a),
+.vp-doc a[class]:hover:not(.playground-runtime a),
+.vp-doc a[class]:active:not(.playground-runtime a),
+.vp-doc a[class]:visited:not(.playground-runtime a) {
   color: var(--vp-c-indigo-2);
 }
 
@@ -1053,6 +1114,7 @@ h1[class], h2[class], h3[class], h4[class], h5[class], h6[class] {
   text-decoration: line-through;
   color: var(--intergalactic-text-secondary);
 }
+
 .types-deprecated-tag {
   color: var(--vp-c-danger-1);
   border: 1px solid var(--vp-c-danger-3);
@@ -1073,6 +1135,6 @@ h1[class], h2[class], h3[class], h4[class], h5[class], h6[class] {
   padding: 20px;
 }
 
-.vp-doc li[data-ui-name] + li[data-ui-name] {
+.vp-doc li[data-ui-name]+li[data-ui-name] {
   margin-top: 2px;
-}
+}

website/docs/index.md

@@ -14,7 +14,7 @@ hero:
       text: Explore Github
       link: https://github.com/semrush/intergalactic
   image:
-    src: /galaxy-whale.png
+    src: /halloween.png
     alt: Galaxy whale – mascot
 
 features:

website/src/fonts.css

@@ -38,4 +38,12 @@
   font-style: normal;
   font-weight: 700;
   src: url('./fonts/FactorA-Bold.woff2') format('woff2');
+}
+
+/* For Halloween only */
+@font-face {
+  font-family: 'Creepster';
+  font-style: normal;
+  font-weight: 400;
+  src: url('./fonts/Creepster-Regular.ttf');
 }