Улучшение оформления кода

src/html/button.html

@@ -1 +1 @@
-<button class="april-fools__button">🎉</button>
+<button class="april-fools__button">🎉</button>

src/html/styles.html

@@ -1,5 +1,5 @@
 <style class="april-fools__styles">
-.april-fools__button {
+  .april-fools__button {
     position: fixed;
     bottom: 0.2rem;
     right: 0.2rem;
@@ -10,17 +10,17 @@
     opacity: 0.3;
     transition: 0.4s all;
     cursor: pointer;
-}
-.april-fools__button:hover {
+  }
+  .april-fools__button:hover {
     opacity: 1;
-}
-.april-fools__joke-row {
+  }
+  .april-fools__joke-row {
     border-bottom: 1px solid black;
-}
-.april-fools__joke-row:first-of-type {
+  }
+  .april-fools__joke-row:first-of-type {
     border-top: 1px solid black;
-}
-.april-fools__joke {
+  }
+  .april-fools__joke {
     display: flex;
     flex-flow: row wrap;
     padding: 10px;
@@ -29,38 +29,38 @@
     align-items: center;
     gap: 1ch;
     cursor: pointer;
-}
-.april-fools__joke:hover {
+  }
+  .april-fools__joke:hover {
     text-shadow: 0 0 black;
-}
-.april-fools__joke:before {
+  }
+  .april-fools__joke:before {
     display: block;
     content: "";
     flex: 0 0 2ch;
     text-align: center;
     content: "✔";
     opacity: 0;
-}
-input.april-fools__joke-input:checked + .april-fools__joke {
+  }
+  input.april-fools__joke-input:checked + .april-fools__joke {
     opacity: 1;
-}
-input.april-fools__joke-input:checked + .april-fools__joke:before {
+  }
+  input.april-fools__joke-input:checked + .april-fools__joke:before {
     opacity: 1;
-}
-.april-fools__joke .april-fools__joke-title {
+  }
+  .april-fools__joke .april-fools__joke-title {
     flex: 1 auto;
     font-weight: bold;
-}
-.april-fools__joke .april-fools__joke-description {
+  }
+  .april-fools__joke .april-fools__joke-description {
     flex: 1 auto;
     text-align: right;
-}
-.april-fools__joke .april-fools__joke-chance {
+  }
+  .april-fools__joke .april-fools__joke-chance {
     flex: 0 0 4ch;
     text-align: right;
-}
-.april-fools__content .april-fools__reset-button {
+  }
+  .april-fools__content .april-fools__reset-button {
     display: block;
     margin: 10px auto;
-}
-</style>
+  }
+</style>

src/html/window.html

@@ -1,15 +1,23 @@
 <div class="april-fools__content">
-    <div class="april-fools__jokes"></div>
+  <div class="april-fools__jokes"></div>
 
-    <button class="april-fools__reset-button">Вернуться к настройкам форума (страница будет перезагружена!)</button>
+  <button class="april-fools__reset-button">
+    Вернуться к настройкам форума (страница будет перезагружена!)
+  </button>
 </div>
 <template class="april-fools__template" id="april-fools__window-row">
-    <div class="april-fools__joke-row">
-        <input type="checkbox" class="april-fools__joke-input" name="april-fools__joke-${joke.id}" id="april-fools__joke-${joke.id}" style="display: none;" />
-        <label class="april-fools__joke" for="april-fools__joke-${joke.id}">
-            <p class="april-fools__joke-title">${joke.title}</p>
-            <p class="april-fools__joke-description">${joke.description}</p>
-            <p class="april-fools__joke-chance">${joke.settings.chance}%</p>
-        </label>
-    </div>
-</template>
+  <div class="april-fools__joke-row">
+    <input
+      type="checkbox"
+      class="april-fools__joke-input"
+      name="april-fools__joke-${joke.id}"
+      id="april-fools__joke-${joke.id}"
+      style="display: none"
+    />
+    <label class="april-fools__joke" for="april-fools__joke-${joke.id}">
+      <p class="april-fools__joke-title">${joke.title}</p>
+      <p class="april-fools__joke-description">${joke.description}</p>
+      <p class="april-fools__joke-chance">${joke.settings.chance}%</p>
+    </label>
+  </div>
+</template>