From 43e0098b70522d10e39a57d17979c67949a6ae12 Mon Sep 17 00:00:00 2001
From: westtle <103447524+westtle@users.noreply.github.com>
Date: Sun, 11 Feb 2024 21:29:41 +0700
Subject: [PATCH] added different css file for base/global styling

---
 assets/styles/global.css | 106 ++++++++++++++++++++++++++++++++++++++
 assets/styles/style.css  | 107 ---------------------------------------
 index.html               |   1 +
 3 files changed, 107 insertions(+), 107 deletions(-)
 create mode 100644 assets/styles/global.css

diff --git a/assets/styles/global.css b/assets/styles/global.css
new file mode 100644
index 0000000..e70be1e
--- /dev/null
+++ b/assets/styles/global.css
@@ -0,0 +1,106 @@
+:root {
+    /* Fonts */
+    --font-roboto: Roboto, sans-serif;
+    --font-roboto-slab: "Roboto Slab", serif;
+    
+    --font-1: var(--font-roboto);
+    --font-2: var(--font-roboto-slab);
+
+    /* Colors */
+    --black: 0, 0%, 0%;
+    --white: 0, 0%, 100%;
+    --cod-gray: 0, 0%, 6%;
+    --boulder: 0, 0%, 46%;
+
+    --color-1: var(--black), 80%;
+    --color-2: var(--white);
+    --color-3: var(--boulder), 80%; /* Placeholder and Icons */
+}
+
+:root[data-theme="dark"] {
+    --color-1: var(--white), 80%;
+    --color-2: var(--cod-gray);
+
+    color-scheme: dark;
+}
+
+/* Resets */
+
+*,
+*::before,
+*::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html { min-height: 100%; }
+
+img,
+svg {
+    display: block;
+    max-width: 100%;
+    height: auto;
+}
+
+svg { width: 100%; }
+
+button,
+input,
+textarea {
+    display: block;
+    color: inherit;
+    background-color: transparent;
+    border: none;
+    font: inherit;
+}
+
+ol,
+ul { list-style: none; }
+
+::placeholder {
+    color: hsl(var(--color-3));
+    opacity: 1;
+}
+
+:focus-visible {
+    outline: 0.125rem solid;
+    outline-color: hsl(var(--color-1, 0 0% 0%));
+    outline-offset: var(--focus-offset, 0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+}
+
+/* Utility and Helper */
+
+.-flex-column {
+    display: flex;
+    flex-direction: column;
+}
+
+.-flex-grow { flex-grow: 1; }
+
+.--sr-only {
+    border: none;
+    width: 0.0625rem;
+    height: 0.0625rem;
+    padding: 0;
+    margin: -0.0625rem;
+    overflow: hidden;
+    white-space: nowrap; 
+    position: absolute;
+    top: auto;
+    left: -99rem;
+    clip: rect(0 0 0 0);
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+}
\ No newline at end of file
diff --git a/assets/styles/style.css b/assets/styles/style.css
index 5883aeb..4d3d595 100644
--- a/assets/styles/style.css
+++ b/assets/styles/style.css
@@ -1,29 +1,3 @@
-:root {
-    /* Fonts */
-    --font-roboto: Roboto, sans-serif;
-    --font-roboto-slab: "Roboto Slab", serif;
-    
-    --font-1: var(--font-roboto);
-    --font-2: var(--font-roboto-slab);
-
-    /* Colors */
-    --black: 0, 0%, 0%;
-    --white: 0, 0%, 100%;
-    --cod-gray: 0, 0%, 6%;
-    --boulder: 0, 0%, 46%;
-
-    --color-1: var(--black), 80%;
-    --color-2: var(--white);
-    --color-3: var(--boulder), 80%; /* Placeholder and Icons */
-}
-
-:root[data-theme="dark"] {
-    --color-1: var(--white), 80%;
-    --color-2: var(--cod-gray);
-
-    color-scheme: dark;
-}
-
 :root[data-theme="light"] .settings__svg--theme-sun { display: none; }
 :root[data-theme="dark"] .settings__svg--theme-sun { display: block; }
 :root[data-theme="dark"] .settings__svg--theme-moon { display: none; }
@@ -32,87 +6,6 @@
 .settings__svg-westtle--background,
 .settings__svg-westtle--cat { transition: fill ease-in-out 0.11s; }
 
-/* Resets */
-
-*,
-*::before,
-*::after {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-@media (prefers-reduced-motion: reduce) {
-    *,
-    *::before,
-    *::after {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-        scroll-behavior: auto !important;
-    }
-}
-
-html { min-height: 100%; }
-
-img,
-svg {
-    display: block;
-    max-width: 100%;
-    height: auto;
-}
-
-svg { width: 100%; }
-
-button,
-input,
-textarea {
-    display: block;
-    color: inherit;
-    background-color: transparent;
-    border: none;
-    font: inherit;
-}
-
-ol,
-ul { list-style: none; }
-
-::placeholder {
-    color: hsl(var(--color-3));
-    opacity: 1;
-}
-
-:focus-visible {
-    outline: 0.125rem solid;
-    outline-color: hsl(var(--color-1, 0, 0%, 0%));
-    outline-offset: var(--focus-offset, 0);
-}
-
-/* Utility and Helper Class */
-
-.-flex-column {
-    display: flex;
-    flex-direction: column;
-}
-
-.-flex-grow { flex-grow: 1; }
-
-.--sr-only {
-    border: none;
-    width: 0.0625rem;
-    height: 0.0625rem;
-    padding: 0;
-    margin: -0.0625rem;
-    overflow: hidden;
-    white-space: nowrap; 
-    position: absolute;
-    top: auto;
-    left: -99rem;
-    clip: rect(0 0 0 0);
-    clip: rect(0, 0, 0, 0);
-    clip-path: inset(50%);
-}
-
 body {
     color: hsl(var(--color-1));
     background-color: hsl(var(--color-2));
diff --git a/index.html b/index.html
index 460b5bb..b7e50cd 100644
--- a/index.html
+++ b/index.html
@@ -25,6 +25,7 @@
 
     <link rel="manifest" href="./manifest.webmanifest">
     <link rel="stylesheet" type="text/css" href="./assets/styles/fonts.css">
+    <link rel="stylesheet" type="text/css" href="./assets/styles/global.css">
     <link rel="stylesheet" type="text/css" href="./assets/styles/style.css">
 </head>
 <body class="-flex-column -flex-grow">