Merge pull request #1 from sabler/styles

.gitignore

@@ -128,3 +128,4 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+src/.DS_Store

.postcssrc

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "tailwindcss": true
+  }
+}

package.json

@@ -4,7 +4,6 @@
   "description": "",
   "type": "module",
   "scripts": {
-    "dev": "rm -rf dist && tsc && node dist/index.js",
     "build": "parcel build src/index.html --dist-dir build",
     "start": "parcel src/index.html --no-cache"
   },
@@ -18,7 +17,9 @@
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "parcel": "^2.12.0",
+    "postcss": "^8.2.1",
     "process": "^0.11.10",
+    "tailwindcss": "^3.4.14",
     "typescript": "^5.6.2"
   },
   "dependencies": {

src/App.tsx

@@ -1,13 +1,18 @@
 import React from "react";
-import { calculateDuration } from "./modules/countdown";
+import Paragraph from "./components/Paragraph";
 import Countdown from "./components/Countdown";
 import countdownConfig from "./config/countdown.config.json";
 
 const App: React.FC = () => {
   return (
-    <div className="countdown-clock">
-      <Countdown startAt={countdownConfig.targetTimeDate} />
-    </div>
+    <>
+    <Paragraph copy={countdownConfig.mainCopy}/>
+
+      <div className="countdown-clock">
+        <Countdown startAt={countdownConfig.targetTimeDate} />
+      </div>
+
+    </>
   );
 };
 

src/components/Countdown.tsx

@@ -1,9 +1,9 @@
-import * as styles from "../css/modules/countdown.module.css";
 import React from "react";
 import { useEffect } from "react";
 import { useState } from "react";
 import { calculateDuration } from "../modules/countdown";
 import { StartingTime } from "../types";
+import Stars from "./Stars";
 
 const Countdown = ({ startAt }: StartingTime) => {
   const [timeLeft, setTimeLeft] = useState("--:--:--");
@@ -18,9 +18,7 @@ const Countdown = ({ startAt }: StartingTime) => {
     let intervalId: NodeJS.Timeout;
 
     if (endTime.timeToStop > 0) {
-
       intervalId = setInterval(() => {
-
         setTimeLeft(endTime.timeToStopFormatted);
         setDaysLeft(endTime.days.toString().padStart(2, "0"));
         setHoursLeft(endTime.hours.toString().padStart(2, "0"));
@@ -32,30 +30,33 @@ const Countdown = ({ startAt }: StartingTime) => {
           clearInterval(intervalId);
         }
       }, 1000);
-
     }
     return () => clearInterval(intervalId);
-
   }, [timeLeft]);
 
   return (
-    <div className={`${styles.countdown}`}>
-      <div>
-        <p>{daysLeft}</p>
-        <p>Days</p>
-      </div>
-      <div>
-        <p>{hoursLeft}</p>
-        <p>Hours</p>
-      </div>
-      <div>
-        <p>{minutesLeft}</p>
-        <p>Minutes</p>
-      </div>
-      <div>
-        <p>{secondsLeft}</p>
-        <p>Seconds</p>
+    <div>
+      <Stars />
+
+      <div className="countdown text-cyan-200 xxs:max-sm:grid grid-cols-1 gap-4 md:flex justify-center gap-4 flex-row">
+        <div>
+          <p className="leading-3 text-center">{daysLeft}</p>
+          <p className="leading-3 text-center xxs: text-sm md:text-sm">Days</p>
+        </div>
+        <div>
+          <p className="leading-3 text-center">{hoursLeft}</p>
+          <p className="leading-3 text-center xxs: text-sm md:text-sm">Hours</p>
+        </div>
+        <div>
+          <p className="leading-3 text-center">{minutesLeft}</p>
+          <p className="leading-3 text-center xxs: text-sm md:text-sm">Minutes</p>
+        </div>
+        <div>
+          <p className="leading-3 text-center">{secondsLeft}</p>
+          <p className="leading-3 text-center xxs: text-sm md:text-sm">Seconds</p>
+        </div>
       </div>
+      <Stars />
     </div>
   );
 };

src/components/Headline.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { CopyProps } from "../types";
+
+const Headline: React.FC<CopyProps> = ({ copy, highlight }) => {
+    return (
+      <div className="headline my-4 text-center">
+        <span className="uppercase text-med font-bold text-cyan-200">{copy}</span>
+      </div>
+    );
+  };
+
+  export default Headline;

src/components/Paragraph.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { CopyProps } from "../types";
+
+const Paragraph: React.FC<CopyProps> = ({ copy, highlight }) => {
+  return (
+    <div className="paragraph xxs:text-xs sm:text-sm md:text-med">
+      <p className="p-2 text-balance text-center text-white">
+     {copy}
+      </p>
+    </div>
+  );
+};
+
+
+export default Paragraph;

src/components/Stars.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+const Stars: React.FC = () => {
+  return (
+    <div className="stars"></div>
+  );
+}
+
+
+export default Stars;

src/config/countdown.config.json

@@ -1,3 +1,4 @@
 {
-    "targetTimeDate": "05 November 2024 12:00:00 AM GMT-0400"
+    "targetTimeDate": "05 November 2024 06:00:00 AM GMT-0400",
+    "mainCopy":"The U.S. Presidential Election starts at November 5th, 2024 at 6:00 AM"
 }

src/css/core.css

@@ -1,5 +1,63 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-size: 64px;
+}
+
 body {
-    margin: 0;
-    padding: 0;
-    font-size: 16px;
-}
+  margin: 0;
+  padding: 0;
+}
+
+.paragraph {
+  width: 75cqw;
+}
+
+.paragraph,
+.countdown {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-weight: bold;
+}
+
+.countdown-clock {
+  width: 75cqw;
+  overflow: hidden;
+}
+
+.stars {
+  width: 100%;
+  height: 50px;
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><path d="M100,10 L120.45,70.45 L180,70.45 L130,110 L150.9,170 L100,130 L49.1,170 L70,110 L20,70.45 L79.55,70.45 Z" fill="white" /></svg>');
+  background-size: 50px 50px;
+  background-repeat: repeat-x;
+  -webkit-mask-image: linear-gradient(
+      to right,
+      transparent,
+      black 20%,
+      black 80%,
+      transparent
+    ),
+    linear-gradient(to left, transparent, black 20%, black 80%, transparent);
+  mask-image: linear-gradient(
+      to right,
+      transparent,
+      black 20%,
+      black 80%,
+      transparent
+    ),
+    linear-gradient(to left, transparent, black 20%, black 80%, transparent);
+  -webkit-mask-composite: destination-in;
+  mask-composite: add;
+}
+
+/* .critical {
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+  background: linear-gradient(to right, #ffe10000, #0022ff 15%, #ffe10000);
+  border-radius: 0.4em 0.3em;
+  margin: 0.1em -0.2em 0.1em -0.4em;
+  padding: 0.1em 0.1em 0.2em 0.8em;
+} */

src/css/modules/countdown.module.css

@@ -1,16 +1,11 @@
-.countdown {
+/* .countdown {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 5rem;
   font-weight: bold;
-  display: flex;
-  justify-content: center;
-  gap: 3cqw
-
-}
+} */
 
-.countdown > div {
-  display: inline-block;
+/* .countdown > div {
+  display: block;
   min-width: 7cqw;
   max-width: 11cqw;
 
@@ -23,4 +18,6 @@
 .countdown > div > p:last-of-type {
   margin-top: 0;
   font-size: 1rem;
-}
+} */
+
+

src/index.html

@@ -1,25 +1,31 @@
-<html lang="en"></html>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <title>Countdown to Election Day</title>
-    <link rel="stylesheet" href="css/core.css"></style>
+    <link rel="stylesheet" href="css/core.css" />
 
-    <meta property="og:title" content="Countdown to Election Day in the United States" />
+    <meta
+      property="og:title"
+      content="Countdown to Election Day in the United States"
+    />
     <meta property="og:type" content="website" />
     <!-- <meta property="og:url" content="http://example.com" />
     <meta property="og:image" content="http://example.com/image.jpg" /> -->
     <meta property="og:description" content="Don't forget to vote!" />
     <meta property="og:site_name" content="Election Countdown" />
     <meta property="og:locale" content="en_US" />
-
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no"
+    />
   </head>
-  <body>
-    <div class="main">
-      <div id="app"></div>
-    </div>
-
-
-    
+  <body class="bg-gradient-to-b from-cyan-500 to-blue-500">
+    <main>
+      <div class="flex flex-col justify-center items-center min-h-screen">
+        <div id="app"></div>
+      </div>
+    </main>
+
     <script type="module" src="index.js"></script>
   </body>
-</html>
+</html>

src/types.ts

@@ -21,3 +21,8 @@ export interface DurationObject {
 export interface StartingTime {
   startAt: string;
 }
+
+export interface CopyProps {
+  copy: string;
+  highlight?: boolean;
+}

tailwind.config.js

@@ -0,0 +1,26 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
+  theme: {
+    extend: {
+      screens: {
+        // Add a custom breakpoint for screen sizes 320px and smaller
+        xxs: { max: "640px" }, // Targeting devices <= 320px
+      },
+
+      fontSize: {
+        xxs: ".125rem",
+        xs: ".25rem",
+        sm: ".312rem",
+        med:"0.4rem",
+        base: "1rem",
+        xl: "1.25rem",
+        "2xl": "1.563rem",
+        "3xl": "1.953rem",
+        "4xl": "2.441rem",
+        "5xl": "3.052rem",
+      },
+    },
+  },
+  plugins: [],
+};