Добавляет немного стилевых правок и файлик гугла

Author: Inventoris

src/googlebdaa36f0f1259217.html

@@ -0,0 +1 @@
+google-site-verification: googlebdaa36f0f1259217.html

src/index.html

@@ -103,7 +103,7 @@ <h3 class="forecast__month-title" id="month-chart-title">Прогноз KP-ин
     <section class="test" id="test-section">
       <h2 class="test__title">Квиз перед путешествием</h2>
       <div class="test__wrapper test__wrapper_closed">
-        <p class="test__subtitle">Готовы к поездке?</p>
+        <span class="test__subtitle pseudo-heading-3">Готовы к поездке?</span>
         <p class="test__paragraph">
           Этот небольшой тест поможет собраться в путешествие за северным сиянием и ничего не забыть, в конце будут советы.
         </p>

src/scripts/modules/month-forecast.js

@@ -22,10 +22,10 @@ function monthTableFiller(data) {
 
   const crudeForecast = data.slice(indexOfStart, data.length)
   const treatedForecast = crudeForecast
-    .replaceAll(/\n+/g, '     ') // Заменяем знаки разрыва строки на 5 пробелов
+    .replaceAll(/\n+/g, '     ')    // Заменяем знаки разрыва строки на 5 пробелов
     .replaceAll(/\s{10}/g, '     ') // Заменяем места, где 10 пробелов, на 5 пробелов
     .trim()
-    .split('     ') // Создаём массив, разбивая строку по 5 пробелов
+    .split('     ')
 
   const monthChartData = []
   const monthChartLabels = []

src/scripts/modules/test.js

@@ -1,11 +1,37 @@
+const questions = [
+  'У вас будет свой транспорт?',
+  'Уже выбрали места для наблюдений за сиянием?',
+  'Изучили, как сделать хорошие фотографии ночью?',
+  'Погоду обещают безоблачную?',
+  'KP-индексы в дни поездки 3 и выше?',
+  'Тёплая одежда с собой?',
+  'А еда и горячие напитки?'
+]
+
+const grades = [
+  'Всё в порядке, можно смело ехать. И добавить нечего.',
+  'Неплохо, но есть над чем поработать:',
+  'Вы полны энтузиазма, но подготовка хромает:'
+]
+
+const tips = [
+  'Без своего транспорта почти никак. Можно греться или уехать из под внезапных туч',
+  'Если выбрать места для наблюдений заранее, не придётся искать точку посреди кромешной тьмы',
+  'Приятнее, когда можно фотографировать сияние сразу, а не разбираться на месте в настройках. Почитайте гайды или туториалы по ночной съёмке',
+  'Даже если прогноз KP-индексов хороший, тучи легко перекроют весь вид. Планировать поездку стоит на ясные дни',
+  'Если KP-индексы на дни поездки низкие, сияние будет выглядеть как беловатые разводы в небе, а не яркие зелёные волны',
+  'Без теплой одежды можно легко замерзнуть, одевайтесь как на долгую прогулку',
+  'На холоде приятно иметь согревающие напитки, вроде чая или кофе. А еда поможет не терять силы'
+]
+
 class Test {
   constructor(questions, grades, tips) {
     this.questions = questions
     this.grades = grades
     this.tips = tips
     this.answers = new Object()
-    this.questionNumber = 0 // Счётчик вопросов, начинается с нуля для правильного поиска по массиву вопросов
-    this.progressCount = 1 // Счётчик прогресса внизу теста, начинается с единицы, т.к. привычный для всех счёт начинается тоже с единицы
+    this.questionNumber = 0
+    this.progressCount = 1
   }
 
   Next(question, answer, answerButtons, progress) {
@@ -29,11 +55,11 @@ class Test {
 
     for (let answer in this.answers) {
       if (this.answers[answer].answerType === 'disagree') {
-        questionIndexes.push(answer) // Подводим итог теста. Собираем индексы вопросов, где ответ был «Нет»
+        questionIndexes.push(answer)
       }
     }
 
-    switch (true) { // Выводим оценку
+    switch (true) {
       case (questionIndexes.length === 0):
         question.textContent = this.grades[0]
         break
@@ -65,8 +91,7 @@ class Test {
     for (let questionIndex of questionIndexes) {
       const newParagraph = document.createElement('p')
 
-      newParagraph.textContent = `${answerNumber}. ${this.tips[questionIndex]}` // Индекс вопроса совпадает с индексом совета
-
+      newParagraph.textContent = `${answerNumber}. ${this.tips[questionIndex]}`
       if (questionIndexes.length === 1) {
         newParagraph.textContent = this.tips[questionIndex]
       }
@@ -77,44 +102,18 @@ class Test {
   }
 }
 
-const questions = [
-  'У вас будет свой транспорт?',
-  'Уже выбрали места для наблюдений за сиянием?',
-  'Изучили, как сделать хорошие фотографии ночью?',
-  'Погоду обещают безоблачную?',
-  'KP-индексы в дни поездки 3 и выше?',
-  'Тёплая одежда с собой?',
-  'А еда и горячие напитки?'
-]
-
-const grades = [
-  'Всё в порядке, можно смело ехать. И добавить нечего.',
-  'Неплохо, но есть над чем поработать:',
-  'Вы полны энтузиазма, но подготовка хромает:'
-]
-
-const tips = [
-  'Без своего транспорта почти никак. Можно греться или уехать из под внезапных туч',
-  'Если выбрать места для наблюдений заранее, не придётся искать точку посреди кромешной тьмы',
-  'Приятнее, когда можно фотографировать сияние сразу, а не разбираться на месте в настройках. Почитайте гайды или туториалы по ночной съёмке',
-  'Даже если прогноз KP-индексов хороший, тучи легко перекроют весь вид. Планировать поездку стоит на ясные дни',
-  'Если KP-индексы на дни поездки низкие, сияние будет выглядеть как беловатые разводы в небе, а не яркие зелёные волны',
-  'Без теплой одежды можно легко замерзнуть, одевайтесь как на долгую прогулку',
-  'На холоде приятно иметь согревающие напитки, вроде чая или кофе. А еда поможет не терять силы'
-]
-
-const test = new Test(questions, grades, tips) // Инстанцируем класс
+const test = new Test(questions, grades, tips)
 
 const question = document.querySelector('.test__question')
 const answerButtons = document.querySelectorAll('.test__answer')
 const progress = document.querySelector('.test__progress')
 
-answerButtons.forEach(button => button.addEventListener('click', testHandler))
+answerButtons.forEach((button) => button.addEventListener('click', testHandler))
 
 function testHandler(event) {
   const answer = event.target.id
 
   setTimeout(() => {
-    test.Next(question, answer, answerButtons, progress) // На клик по кнопкам запускаем метод Next с небольшой задержкой
-  }, 70)
+    test.Next(question, answer, answerButtons, progress)
+  }, 50)
 }

src/styles/blocks/header.css

@@ -59,6 +59,7 @@
   .header__menu {
     right: 60px;
     left: 0;
+    padding: 16px;
   }
 
   .menu-list {

src/styles/blocks/test.css

@@ -23,8 +23,6 @@
 }
 
 .test__subtitle {
-  font-size: var(--base-font-size);
-  text-align: center;
   padding-top: 32px;
   margin-bottom: 100px;
 }

src/styles/common/base.css

@@ -34,6 +34,7 @@ a:not(.select-none)::after {
   height: 5px;
   border-radius: var(--button-border-radius);
   background-color: transparent;
+  filter: blur(1px);
   left: calc(100% + 5px);
   top: calc(50% - 1px);
   transition: background-color .125s ease-out;
@@ -46,7 +47,7 @@ a:not(.select-none)::after {
 }
 
 h1 {
-  font-size: calc(var(--base-font-size) * 1.15);
+  font-size: calc(var(--base-font-size) * 1.2);
   font-weight: 600;
 }
 
@@ -56,12 +57,13 @@ h2 {
   font-weight: 500;
 }
 
-h3 {
+h3,
+.pseudo-heading-3 {
   font-size: calc(var(--base-font-size) * 1);
   padding-top: 12px;
 }
 
-h1, h2, h3 {
+h1, h2, h3, .pseudo-heading-3 {
   text-align: center;
 }
 
@@ -110,6 +112,11 @@ svg {
   }
 
   h2 {
-    font-size: var(--base-font-size);
+    font-size: calc(var(--base-font-size) * 1);
+  }
+
+  h3,
+  .pseudo-heading-3 {
+    font-size: calc(var(--base-font-size) * 0.95);
   }
 }