[ts] Clean-up examples

EsotericSoftware · Dec 6, 2023 · 77fe988 · 77fe988
1 parent 1c4aa3c
commit 77fe988
Show file tree

Hide file tree

Showing 29 changed files with 1,524 additions and 1,146 deletions.
diff --git a/spine-ts/.prettierignore b/spine-ts/.prettierignore
@@ -1 +1,2 @@
-**/*
+**/*.ts
+**/*.js
diff --git a/spine-ts/index.css b/spine-ts/index.css
@@ -8,141 +8,221 @@
     - The "symbol *" part is to solve Firefox SVG sprite bug
     - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
  */
- *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
-    all: unset;
-    display: revert;
+*:where(
+    :not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)
+  ) {
+  all: unset;
+  display: revert;
 }
 
 /* Preferred box-sizing value */
 *,
 *::before,
 *::after {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 /* Fix mobile Safari increase font-size on landscape mode */
 html {
-    -moz-text-size-adjust: none;
-    -webkit-text-size-adjust: none;
-    text-size-adjust: none;
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
 }
 
 /* Reapply the pointer cursor for anchor tags */
-a, button {
-    cursor: revert;
+a,
+button {
+  cursor: revert;
 }
 
 /* Remove list styles (bullets/numbers) */
-ol, ul, menu, summary {
-    list-style: none;
+ol,
+ul,
+menu,
+summary {
+  list-style: none;
 }
 
 /* For images to not be able to exceed their container */
 img {
-    max-inline-size: 100%;
-    max-block-size: 100%;
+  max-inline-size: 100%;
+  max-block-size: 100%;
 }
 
 /* removes spacing between cells in tables */
 table {
-    border-collapse: collapse;
+  border-collapse: collapse;
 }
 
 /* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
-input, textarea {
-    -webkit-user-select: auto;
+input,
+textarea {
+  -webkit-user-select: auto;
 }
 
 /* revert the 'white-space' property for textarea elements on Safari */
 textarea {
-    white-space: revert;
+  white-space: revert;
 }
 
 /* minimum style to allow to style meter element */
 meter {
-    -webkit-appearance: revert;
-    appearance: revert;
+  -webkit-appearance: revert;
+  appearance: revert;
 }
 
 /* preformatted text - use only for this feature */
 :where(pre) {
-    all: revert;
-    box-sizing: border-box;
+  all: revert;
+  box-sizing: border-box;
 }
 
 /* reset default text opacity of input placeholder */
 ::placeholder {
-    color: unset;
+  color: unset;
 }
 
 /* fix the feature of 'hidden' attribute.
    display:revert; revert to element instead of attribute */
 :where([hidden]) {
-    display: none;
+  display: none;
 }
 
 /* revert for bug in Chromium browsers
    - fix for the content editable attribute will work properly.
    - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
 :where([contenteditable]:not([contenteditable="false"])) {
-    -moz-user-modify: read-write;
-    -webkit-user-modify: read-write;
-    overflow-wrap: break-word;
-    -webkit-line-break: after-white-space;
-    -webkit-user-select: auto;
+  -moz-user-modify: read-write;
+  -webkit-user-modify: read-write;
+  overflow-wrap: break-word;
+  -webkit-line-break: after-white-space;
+  -webkit-user-select: auto;
 }
 
 /* apply back the draggable feature - exist only in Chromium and Safari */
 :where([draggable="true"]) {
-    -webkit-user-drag: element;
+  -webkit-user-drag: element;
 }
 
 /* Revert Modal native behavior */
 :where(dialog:modal) {
-    all: revert;
-    box-sizing: border-box;
+  all: revert;
+  box-sizing: border-box;
 }
 
 /* Remove details summary webkit styles */
 ::-webkit-details-marker {
-    display: none;
+  display: none;
 }
 
-html, body  {
-    margin: 0;
-    padding: 0;
-    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
+    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
 }
 
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-.btn {
-    display: inline-block; /* Aligns like a button */
-    padding: 0.125em 0.5em; /* Button size */
-    color: #333; /* Text color */
-    background-color: #ccc;
-    border: none; /* No border */
-    border-radius: 5px; /* Rounded corners */
-    text-align: center; /* Center text */
-    text-decoration: none; /* No underline */
-    cursor: pointer; /* Cursor changes to hand symbol */
-    transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effect */
+button {
+  display: inline-block; /* Aligns like a button */
+  padding: 0.125em 0.5em; /* Button size */
+  color: #333; /* Text color */
+  background-color: #ccc;
+  border: none; /* No border */
+  border-radius: 5px; /* Rounded corners */
+  text-align: center; /* Center text */
+  text-decoration: none; /* No underline */
+  cursor: pointer; /* Cursor changes to hand symbol */
+  transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effect */
 
-    /* Slight shadow for depth (optional) */
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  /* Slight shadow for depth (optional) */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 /* Hover state */
-.btn:hover {
-    background-color: #fff; /* Darker shade when hovered */
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Larger shadow on hover */
+button:hover {
+  background-color: #fff; /* Darker shade when hovered */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Larger shadow on hover */
 }
 
 .overlay {
-    display: flex; flex-direction: column; position: fixed; z-index: 10; top: 0; left: 0; gap: 0.5em; padding: 1em;
-    background-color: rgba(0, 0, 0, 0.7);
-    color: #ddd;
-    border-radius: 5px;
-}
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  gap: 0.5em;
+  padding: 1em;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: #ddd;
+  border-radius: 5px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h5 {
+  font-weight: 600;
+  margin: 1rem 0;
+}
+body {
+  background-color: #222;
+  color: #ccc;
+}
+h1 {
+  font-size: 1.5em;
+}
+h2 {
+  font-size: 1em;
+}
+a {
+  color: darkorange;
+}
+ul,
+ol {
+  padding: 1em;
+  line-height: 1.25em;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.h-screen {
+  height: 100vh;
+}
+
+.p-4 {
+  padding: 1em;
+}
-Original file line number
+Diff line change
@@ -1 +1,2 @@
-    **/*
+    **/*.ts
+    **/*.js