From 63defc6dd70f14383442a52e8b61318a2ff1f3e9 Mon Sep 17 00:00:00 2001
From: westtle <103447524+westtle@users.noreply.github.com>
Date: Sun, 11 Feb 2024 21:50:55 +0700
Subject: [PATCH] added .-flex utility class

used display flex in its own class instead in .-flex-column.
---
 assets/styles/global.css |  7 ++-----
 index.html               | 10 +++++-----
 2 files changed, 7 insertions(+), 10 deletions(-)
diff --git a/assets/styles/global.css b/assets/styles/global.css
index 0d2c5fc..52eed34 100644
--- a/assets/styles/global.css
+++ b/assets/styles/global.css
@@ -108,11 +108,8 @@ ul { list-style: none; }
 
 /* Utility and Helper */
 
-.-flex-column {
-    display: flex;
-    flex-direction: column;
-}
-
+.-flex { display: flex; }
+.-flex-column { flex-direction: column; }
 .-flex-grow { flex-grow: 1; }
 
 .--sr-only {
diff --git a/index.html b/index.html
index 25bde01..ab8f4f3 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html class="-flex-column -flex-grow" data-theme="light" lang="en" dir="ltr">
+<html class="-flex -flex-column -flex-grow" data-theme="light" lang="en" dir="ltr">
 <head>
     <meta charset="utf-8">
     <meta name="apple-mobile-web-app-title" content="Simple Note">
@@ -28,7 +28,7 @@
     <link rel="stylesheet" type="text/css" href="./assets/styles/settings.css">
     <link rel="stylesheet" type="text/css" href="./assets/styles/simple-note.css">
 </head>
-<body class="-flex-column -flex-grow">
+<body class="-flex -flex-column -flex-grow">
     <aside class="settings" data-expanded="false">
         <button class="settings__button settings__button--toggle-settings" aria-label="Settings" aria-describedby="settings__button-description--toggle-settings" aria-expanded="false" aria-controls="settings__buttons">
             <svg class="settings__svg settings__svg--toggle-settings" role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -90,10 +90,10 @@
         </ul>
     </aside>
 
-    <main class="-flex-column -flex-grow">
-        <section class="simple-note -flex-column -flex-grow">
+    <main class="-flex -flex-column -flex-grow">
+        <section class="simple-note -flex -flex-column -flex-grow">
             <h1 class="--sr-only">Simple Note</h1>
-            <div class="simple-note__inputs -flex-column -flex-grow">
+            <div class="simple-note__inputs -flex -flex-column -flex-grow">
                 <label class="simple-note__label simple-note__label--title --sr-only" for="simple-note__input--title">Note Title</label>
                 <input id="simple-note__input--title" class="simple-note__input simple-note__input--title" type="text" placeholder="Title..." spellcheck="false">
                 <label class="simple-note__label simple-note__label--body --sr-only" for="simple-note__input--body">Note Content</label>
