Updated styling

- added clsx to make it easier to combine css modules and Tailwind
classes
- updated styling to use Tailwind inline
- removed @babel/eslint-parser, not needed

Author: high1

.eslintrc.json

@@ -10,7 +10,6 @@
     "Atomics": "readonly",
     "SharedArrayBuffer": "readonly"
   },
-  // "parser": "@babel/eslint-parser",
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true

package.json

@@ -16,6 +16,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "clsx": "^1.1.1",
     "core-js": "3",
     "regenerator-runtime": "^0.13.7",
     "solid-js": "^0.23.10"

pnpm-lock.yaml

@@ -1,13 +1,7 @@
 .header {
   background-color: #282c34;
   color: whitesmoke;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
   font-size: calc(10px + 2vmin);
-  text-align: center;
 }
 
 .link {
@@ -21,8 +15,10 @@
 
 .logo {
   height: 40vmin;
-  pointer-events: none;
-  margin-bottom: 1.0rem;
+}
+
+.wordmark {
+  height: 7vmin;
 }
 
 @media (prefers-reduced-motion: no-preference) {
@@ -31,16 +27,9 @@
   }
 }
 
-.wordmark {
-  height: 5vmin;
-  /* margin: 1rem 0; */
-}
-
 :global code {
   background: #FFF3;
   @apply rounded-md p-2;
-  /* padding: 4px 8px; */
-  /* border-radius: 4px; */
 }
 
 @keyframes spin {

src/components/App/App.module.css

@@ -1,4 +1,5 @@
 import { Component, createSignal, onCleanup } from 'solid-js';
+import clsx from 'clsx';
 
 import logo from 'assets/logo.svg';
 import wordmark from 'assets/wordmark.svg';
@@ -10,15 +11,20 @@ const App: Component = () => {
   onCleanup(() => clearInterval(timer));
   return (
     <>
-      <header class={styles.header}>
-        <img src={logo} class={styles.logo} alt="logo" />
+      <header
+        class={clsx(
+          styles.header,
+          'min-h-screen flex flex-col justify-center items-center text-center'
+        )}
+      >
+        <img src={logo} class={clsx(styles.logo, 'pointer-events-none mb-4')} alt="logo" />
         <a
           class={styles.link}
           href="https://github.com/ryansolid/solid#documentation"
           target="_blank"
           rel="noopener noreferrer"
         >
-          <img src={wordmark} class={`${styles.wordmark} my-4`} alt="wordmark" />
+          <img src={wordmark} class={clsx(styles.wordmark, 'my-4')} alt="wordmark" />
         </a>
         <p class="my-4">
           Edit <code>src/App.tsx</code> and save to reload.