Tw

packages/javascript-fun/package.json

@@ -23,7 +23,7 @@
     "@types/react": "^18.2.7",
     "@types/react-dom": "^18.2.4",
     "app-constant": "1.0.0",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.16",
     "classnames": "^2.3.1",
     "clean-webpack-plugin": "^4.0.0",
     "css-loader": "^6.8.1",
@@ -34,11 +34,12 @@
     "less-loader": "^11.1.1",
     "mini-css-extract-plugin": "^2.7.6",
     "numeral": "^2.0.6",
-    "postcss": "^8.4.24",
+    "postcss": "^8.4.31",
     "postcss-loader": "^7.3.2",
-    "purecss": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "style-loader": "^3.3.3",
+    "tailwindcss": "^3.3.5",
     "ts-loader": "^9.4.3",
     "typed.js": "^2.0.16",
     "webpack": "^5.84.1",

packages/javascript-fun/src/client/layout/tw.css

@@ -0,0 +1,42 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  h1 {
+    font-size: 2.4em;
+  }
+
+  h2 {
+    font-size: 1.25em;
+  }
+  h3 {
+    font-size: 1.125em;
+  }
+  a,
+  p,
+  span {
+    font-size: 0.875em;
+  }
+  @media only screen and (min-width: 768px) and (max-width: 1023px) {
+    h1 {
+      font-size: 1.3em;
+    }
+  }
+  @media (max-width: 767px) {
+    h1 {
+      font-size: 1.1em;
+    }
+    h2 {
+      font-size: 1em;
+    }
+    h3 {
+      font-size: 0.875em;
+    }
+    a,
+    p,
+    span {
+      font-size: 0.75em;
+    }
+  }
+}

packages/javascript-fun/src/components/AppContainer/Layout/components/AdUnit/index.tsx

@@ -1,13 +1,12 @@
 import { FC } from 'react';
-import style from './style.less';
 
 interface AdUnitProps {
   slot: string;
   client: string;
 }
 
 const AdUnit: FC<AdUnitProps> = ({ client, slot }) => (
-  <div className={style.adContainer}>
+  <div className="mt-1 p-0 border-0 border-neutral-300 rounded-md overflow-hidden md:border-2 md:p-2 md:mt-5">
     <script
       async
       src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${client}`}

packages/javascript-fun/src/components/AppContainer/Layout/components/BackToTop/index.tsx

@@ -1,13 +1,19 @@
 import { FC } from 'react';
-import style from './style.less';
 
 interface DisqusProps {
   iconCdnUrl: string;
 }
 
 const BackToTop: FC<DisqusProps> = ({ iconCdnUrl }) => (
-  <div className={style.scrollBtn}>
-    <img src={`${iconCdnUrl}/fa-chevron-up.svg`} alt="back to top" />
+  <div
+    id="scrollToTopBtn"
+    className="fixed bottom-20 right-0 md:right-10 h-10 w-10 opacity-0 invisible text-center rounded-l md:rounded-md bg-current transition duration-300 hover:bg-green-300 cursor-pointer"
+  >
+    <img
+      src={`${iconCdnUrl}/fa-chevron-up.svg`}
+      className="inline-block w-5 h-5 mt-1"
+      alt="back to top"
+    />
   </div>
 );
 

packages/javascript-fun/src/components/AppContainer/Layout/components/Disqus/index.tsx

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import style from './style.less';
 
 interface DisqusProps {
   title: string;
@@ -8,10 +7,10 @@ interface DisqusProps {
 }
 
 const Disqus: FC<DisqusProps> = ({ title, canonicalUrl, identifier }) => (
-  <div className={style.commentBox}>
+  <div className="p-4 text-center">
     <button
       type="button"
-      className={`pure-button pure-button-primary ${style.commentToggleBtn}`}
+      className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
     >
       &#128172; &nbsp; Display Comments
     </button>

packages/javascript-fun/src/components/AppContainer/Layout/components/Footer/index.tsx

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import style from './style.less';
 
 interface FooterProps {
   domain: string;
@@ -15,31 +14,36 @@ const Footer: FC<FooterProps> = ({
   author,
   year,
   pageSpeedUrl,
-}) => (
-  <footer className={style.footer}>
-    <div>
-      Full score &#9989;&nbsp;&nbsp;by&nbsp;
-      <a
-        href={pageSpeedUrl}
-        className={style.blue}
-        target="_blank"
-        rel="noopener"
-      >
-        Google PageSpeed
-      </a>
-    </div>
-    <div>
-      &copy; Copyright {year}&nbsp;
-      {hideAuthor ? (
-        domain
-      ) : (
-        <a href="/about/">
-          <b>{author}</b>
+}) => {
+  const childDivStyle = 'pt-2 text-center text-neutral-500';
+  const linkStyle = 'text-blue-500 ml-1';
+
+  return (
+    <footer className="p-0 mt-20 border-t-2">
+      <div className={childDivStyle}>
+        Full score &#9989; by
+        <a
+          href={pageSpeedUrl}
+          className={linkStyle}
+          target="_blank"
+          rel="noopener"
+        >
+          Google PageSpeed
         </a>
-      )}
-    </div>
-    <div>All rights reserved.</div>
-  </footer>
-);
+      </div>
+      <div className={childDivStyle}>
+        &copy; Copyright {year}
+        {hideAuthor ? (
+          domain
+        ) : (
+          <a href="/about/" className={linkStyle}>
+            <b>{author}</b>
+          </a>
+        )}
+      </div>
+      <div className={`${childDivStyle} pb-4`}>All rights reserved.</div>
+    </footer>
+  );
+};
 
 export default Footer;

packages/javascript-fun/src/components/AppContainer/Layout/components/GithubCorner/index.tsx

@@ -1,28 +1,34 @@
 // https://github.com/tholman/github-corners
 import { FC } from 'react';
-import style from './style.less';
 
 const title = 'View source code';
 interface GithubCornerProps {
   url: string;
 }
 
 const GithubCorner: FC<GithubCornerProps> = ({ url }) => (
-  <div className={style.container}>
-    <a href={url} aria-label={title} title={title}>
+  <div className="hidden md:block relative">
+    <a
+      className="absolute top-0 right-0 group"
+      href={url}
+      aria-label={title}
+      title={title}
+    >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="80"
         height="80"
         viewBox="0 0 250 250"
-        className={style.svgDom}
       >
-        <path d="M0 0l115 115h15l12 27 108 108V0z" />
+        <path className="fill-current" d="M0 0l115 115h15l12 27 108 108V0z" />
         <path
-          className={style.octoArm}
+          className="fill-white origin-[130px_106px] group-hover:animate-octocatWaveAnim"
           d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
         />
-        <path d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z" />
+        <path
+          className="fill-white"
+          d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"
+        />
         <title>{title}</title>
       </svg>
     </a>