👻 Hocus Pocus (#1208)

* Добавляет хэллоуинские цвета

* Обращает булочку в вампира

* Накладывает заклинание на переключатель тем

* Делает цвета дружелюбнее

---------

Co-authored-by: Svetlana Korobtseva <wizzzjer@gmail.com>
Co-authored-by: Igor Korovchenko <igsekor@gmail.com>

Author: 3 people

src/includes/blocks/logo.njk

@@ -11,7 +11,9 @@
   {% endset %}
 
   {% set defaultLetters %}
-    U<span class="logo__eye">•</span><span class="logo__nose">ᴥ</span><span class="logo__eye">•</span>U
+    <!-- U<span class="logo__eye">•</span><span class="logo__nose">ᴥ</span><span class="logo__eye">•</span>U-->
+    <!-- собака-вампиряка -->
+    U<span class="logo__eye">•̀</span><span class="logo__nose">ᵥᵥ</span><span class="logo__eye">•́</span>U
   {% endset %}
   {% set letters = letters if letters else defaultLetters %}
 

src/scripts/modules/logo.js

@@ -21,12 +21,15 @@ class Logo {
 
   setFocusOnElement() {
     this.refs.symbols.innerHTML =
-      'U<span class="logo__eye">&gt;</span><span class="logo__nose">ᴥ</span><span class="logo__eye">&lt;</span>U'
+      // собака-вампиряка (только нос)
+      'U<span class="logo__eye">&gt;</span><span class="logo__nose">ᵥᵥ</span><span class="logo__eye">&lt;</span>U'
   }
 
   unsetFocusOnElement() {
     this.refs.symbols.innerHTML =
-      'U<span class="logo__eye">•</span><span class="logo__nose">ᴥ</span><span class="logo__eye">•</span>U'
+      // 'U<span class="logo__eye">•</span><span class="logo__nose">ᴥ</span><span class="logo__eye">•</span>U'
+      // собака-вампиряка
+      'U<span class="logo__eye">•̀</span><span class="logo__nose">ᵥᵥ</span><span class="logo__eye">•́</span>U'
   }
 
   startAnimation() {

src/scripts/modules/theme-toggle.js

@@ -32,7 +32,7 @@ function hasStoredTheme() {
 
 function getCurrentTheme() {
   const storedTheme = store.getItem(STORAGE_KEY)
-  return storedTheme || THEMES.AUTO
+  return storedTheme || THEMES.DARK
 }
 
 function setCurrentTheme(theme) {

src/styles/base-colors.css

@@ -15,10 +15,22 @@
   --color-violet: 276 100% 72%;
   --color-aquamarine: 162 90% 51%;
 
+  /*
   --color-base-html: hsl(var(--color-orange));
   --color-base-css: hsl(var(--color-blue));
   --color-base-js: hsl(var(--color-yellow));
   --color-base-tools: hsl(var(--color-green));
   --color-base-recipes: hsl(var(--color-violet));
   --color-base-a11y: hsl(var(--color-aquamarine));
+  */
+
+  /* Цвет для Хэлоуина */
+  --boo-color: 15 97% 59%;
+
+  --color-base-html: hsl(var(--boo-color));
+  --color-base-css: hsl(var(--boo-color));
+  --color-base-js: hsl(var(--boo-color));
+  --color-base-tools: hsl(var(--boo-color));
+  --color-base-recipes: hsl(var(--boo-color));
+  --color-base-a11y: hsl(var(--boo-color));
 }

src/styles/blocks/logo.css

@@ -106,7 +106,11 @@
   font-size: calc(var(--image-font-size) * 10 / 7);
   line-height: calc(var(--image-font-size) * 7 / 10);
   top: -0.015em;
-  letter-spacing: calc(var(--logo-letter-spacing) * 1.5);
+
+  /* letter-spacing: calc(var(--logo-letter-spacing) * 1.5); */
+
+  /* собака-вампиряка */
+  letter-spacing: calc(var(--logo-letter-spacing) * 2);
 }
 
 .logo__text {

src/styles/dark-theme.css

@@ -14,13 +14,25 @@
   --color-background: hsl(var(--color-dark));
   --color-fade: hsl(220 7% 25%);
 
+  /*
   --color-html: hsl(25 70% 24%);
   --color-css: hsl(209 70% 24%);
   --color-js: hsl(49 74% 23%);
   --color-tools: hsl(122 56% 23%);
   --color-recipes: hsl(276 39% 32%);
   --color-a11y: hsl(162 95% 15%);
+  */
 
   --color-subscribe-success: hsl(124 46% 29%);
   --color-subscribe-error: hsl(360 100% 28%);
+
+  /* Цвет для Хэлоуина */
+  --boo-color: 28 80% 39%;
+
+  --color-html: hsl(var(--boo-color));
+  --color-css: hsl(var(--boo-color));
+  --color-js: hsl(var(--boo-color));
+  --color-tools: hsl(var(--boo-color));
+  --color-recipes: hsl(var(--boo-color));
+  --color-a11y: hsl(var(--boo-color));
 }

src/styles/light-theme.css

@@ -12,13 +12,25 @@
   --color-background: hsl(var(--color-light));
   --color-fade: hsl(0 0% 92%);
 
+  /*
   --color-html: hsl(var(--color-orange));
   --color-css: hsl(var(--color-blue));
   --color-js: hsl(var(--color-yellow));
   --color-tools: hsl(var(--color-green));
   --color-recipes: hsl(var(--color-violet));
   --color-a11y: hsl(var(--color-aquamarine));
+  */
 
   --color-subscribe-success: hsl(var(--color-green));
   --color-subscribe-error: hsl(var(--color-red));
+
+  /* Цвет для Хэлоуина */
+  --boo-color: 15 97% 59%;
+
+  --color-html: hsl(var(--boo-color));
+  --color-css: hsl(var(--boo-color));
+  --color-js: hsl(var(--boo-color));
+  --color-tools: hsl(var(--boo-color));
+  --color-recipes: hsl(var(--boo-color));
+  --color-a11y: hsl(var(--boo-color));
 }