From d8453b4ab0029de3d4f8af8d66653d62f84d264b Mon Sep 17 00:00:00 2001
From: z3rOR0ne <z3rOR0ne@protonmail.com>
Date: Fri, 10 Nov 2023 23:39:29 -0800
Subject: [PATCH] :wrench: Created defaults from multiple sources

---
 defaults.css | 61 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 defaults.js  | 10 +++++++++
 2 files changed, 71 insertions(+)
 create mode 100644 defaults.css
 create mode 100644 defaults.js

diff --git a/defaults.css b/defaults.css
new file mode 100644
index 00000000..7dc71c60
--- /dev/null
+++ b/defaults.css
@@ -0,0 +1,61 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:root {
+  color-scheme: light dark;
+}
+
+body {
+  font-family: system-ui;
+  font-size: 1.125rem;
+  line-height: 1.5;
+}
+
+main {
+  width: min(70ch, 100% - 4rem);
+  margin-inline: auto;
+}
+
+img,
+svg,
+video {
+  max-width: 100%;
+  display: block;
+}
+
+/* Utility Classes */
+
+/* simple wrapper around flex with gap */
+.flex {
+  display: flex;
+  gap: var(--gap, 1em);
+}
+
+/*  https://kittygiraudel.com/snippets/sr-only-class/
+ *  https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html 
+ *  sr-only special class designed to hide 
+ *  from sighted users, but not from screen readers */
+.sr-only:not(:focus):not(:active) {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+/* Stop Animations During Window Resizing Trick
+ * https://css-tricks.com/stop-animations-during-window-resizing/
+ * Used in conjunction with defaults.js*/
+.resize-animation-stopper * {
+  animation: none !important;
+  transition: none !important;
+}
diff --git a/defaults.js b/defaults.js
new file mode 100644
index 00000000..d1e436c5
--- /dev/null
+++ b/defaults.js
@@ -0,0 +1,10 @@
+/* Stop Animations During Window Resizing Trick
+ * https://css-tricks.com/stop-animations-during-window-resizing/*/
+let resizeTimer;
+window.addEventListener("resize", () => {
+  document.body.classList.add("resize-animation-stopper");
+  clearTimeout(resizeTimer);
+  resizeTimer = setTimeout(() => {
+    document.body.classList.remove("resize-animation-stopper");
+  }, 400);
+});