added and edited some comments

assets/styles/fonts.css

@@ -1,3 +1,9 @@
+/*
+----------
+@font-face
+----------
+*/
+
 @font-face {
     font-display: swap;
     font-family: Roboto;

assets/styles/global.css

@@ -24,7 +24,11 @@
     color-scheme: dark;
 }
 
-/* Resets */
+/*
+------
+Resets
+------
+*/
 
 *,
 *::before,
@@ -87,7 +91,11 @@ ul { list-style: none; }
     }
 }
 
-/* Utility and Helper */
+/*
+------------------
+Utility and Helper
+------------------
+*/
 
 @supports (display: flex) {
     .-flex { display: flex; }

assets/styles/no-js.css

@@ -1,3 +1,9 @@
+/*
+--------------
+No JS Fallback
+--------------
+*/
+
 .noscript__settings { display: block; }
 
 .noscript__message {

assets/styles/settings.css

@@ -1,4 +1,8 @@
-/* Settings */
+/*
+--------
+Settings
+--------
+*/
 
 :root[data-theme="light"] .settings__svg--theme-sun { display: none; }
 :root[data-theme="dark"] .settings__svg--theme-sun { display: block; }
@@ -12,13 +16,20 @@
     --settings-interact: var(--color-1);
 
     color: hsl(var(--settings-color));
-    max-height: 16.25rem; /* Height of .settings__buttons. Set it so people can interact with stuff directly below it. */
+    /*
+        Height of .settings__buttons.
+        Set it so people can interact with stuff directly below it.
+    */
+    max-height: 16.25rem;
     transition: left cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.25s;
 
     position: fixed;
     top: 1.125rem;
     bottom: 1.125rem;
-    left: -2.625rem; /* Width of .settings__buttons */
+    /*
+        Width of .settings__buttons.
+    */
+    left: -2.625rem;
     z-index: 99;
 }
 
@@ -82,7 +93,11 @@
 /* Settings > SVG */
 
 .settings__svg--toggle-settings {
-    padding: 13.67%; /* Use padding on svg to make it smaller (Remember to set the padding below 50%). */
+    /*
+        Use padding on svg to make it smaller.
+        Remember to set the padding below 50%.
+    */
+    padding: 13.67%;
     transition: transform cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.25s;
 }
 

assets/styles/simple-note.css

@@ -1,3 +1,9 @@
+/*
+-----------
+Simple Note
+-----------
+*/
+
 body {
     color: hsla(var(--color-1));
     background-color: hsl(var(--color-2));

index.html

@@ -120,7 +120,11 @@
         </ul>
 
         <!-- No JS Fallback -->
-        <noscript class="noscript__settings" hidden> <!-- Use hidden so the list doesn't appear twice when both CSS and JS are disabled (Unhide in CSS). -->
+        <!--
+            Use hidden so the list doesn't appear twice when
+            both CSS and JS are disabled (Unhide in CSS).
+        -->
+        <noscript class="noscript__settings" hidden>
             <ul class="settings__buttons settings__buttons--no-js">
                 <li class="settings__button-item">
                     <a class="settings__button settings__button--github" aria-labelledby="settings__button-label--github--no-js" rel="noopener" href="https://github.com/westtle/simple-note" target="_blank">