From 38f39999b597e4168ed1cab0d715cd420edc08f3 Mon Sep 17 00:00:00 2001
From: westtle <103447524+westtle@users.noreply.github.com>
Date: Wed, 14 Feb 2024 11:18:46 +0700
Subject: [PATCH] added and edited some comments

---
 assets/styles/fonts.css       |  6 ++++++
 assets/styles/global.css      | 12 ++++++++++--
 assets/styles/no-js.css       |  6 ++++++
 assets/styles/settings.css    | 23 +++++++++++++++++++----
 assets/styles/simple-note.css |  6 ++++++
 index.html                    |  6 +++++-
 6 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/assets/styles/fonts.css b/assets/styles/fonts.css
index 2fc42bc..33c8dfc 100644
--- a/assets/styles/fonts.css
+++ b/assets/styles/fonts.css
@@ -1,3 +1,9 @@
+/*
+----------
+@font-face
+----------
+*/
+
 @font-face {
     font-display: swap;
     font-family: Roboto;
diff --git a/assets/styles/global.css b/assets/styles/global.css
index e82b1e3..c8de85e 100644
--- a/assets/styles/global.css
+++ b/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; }
diff --git a/assets/styles/no-js.css b/assets/styles/no-js.css
index cf5cbeb..54c6153 100644
--- a/assets/styles/no-js.css
+++ b/assets/styles/no-js.css
@@ -1,3 +1,9 @@
+/*
+--------------
+No JS Fallback
+--------------
+*/
+
 .noscript__settings { display: block; }
 
 .noscript__message {
diff --git a/assets/styles/settings.css b/assets/styles/settings.css
index 16ae747..b4b41e4 100644
--- a/assets/styles/settings.css
+++ b/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;
 }
 
diff --git a/assets/styles/simple-note.css b/assets/styles/simple-note.css
index 31eb56a..3fb9a51 100644
--- a/assets/styles/simple-note.css
+++ b/assets/styles/simple-note.css
@@ -1,3 +1,9 @@
+/*
+-----------
+Simple Note
+-----------
+*/
+
 body {
     color: hsla(var(--color-1));
     background-color: hsl(var(--color-2));
diff --git a/index.html b/index.html
index 831bfb3..27ac372 100644
--- a/index.html
+++ b/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">