From 1dd24b26852364d3cb348a56d124d9db2f07e4ce Mon Sep 17 00:00:00 2001
From: Marais Devis <maraisdcdevis@gmail.com>
Date: Wed, 10 Jul 2024 10:10:45 +0200
Subject: [PATCH] Chenge Css to Scss

---
 app/globals.scss     |  55 +++++++-------
 app/page.module.css  | 168 -------------------------------------------
 app/page.module.scss |   4 ++
 app/page.tsx         |  12 ++--
 4 files changed, 39 insertions(+), 200 deletions(-)
 delete mode 100644 app/page.module.css
 create mode 100644 app/page.module.scss

diff --git a/app/globals.scss b/app/globals.scss
index 91faf00..16756c6 100644
--- a/app/globals.scss
+++ b/app/globals.scss
@@ -1,31 +1,23 @@
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --color-background: rgb(253, 247, 228);
+  --color-layout: rgb(222, 208, 182);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-html,
 body {
-  max-width: 100vw;
-  overflow-x: hidden;
+  margin: 0;
+  font-family: -apple-system, 'system-ui', 'Segoe UI', 'Noto Sans', Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  background: var(--color-background);
+  // Avoid fixed footer obscuring content
+  padding-bottom: 50px;
 }
 
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+main {
+  padding: 1rem;
 }
 
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
+a {
+  color: black;
 }
 
 nav {
@@ -47,13 +39,22 @@ nav {
   }
 }
 
-a {
-  color: inherit;
-  text-decoration: none;
+button {
+  font-size: 0.875rem;
+  border-radius: 6px;
+  padding: 0.5rem;
+  cursor: pointer;
 }
 
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
+label {
+  display: flex;
+  flex-direction: column;
+}
+
+input {
+  font-size: 1rem;
+  border-radius: 5px;
+  border: 1px solid;
+  padding: 0.5rem;
+  margin-bottom: 0.5rem;
 }
diff --git a/app/page.module.css b/app/page.module.css
deleted file mode 100644
index ee9b8e6..0000000
--- a/app/page.module.css
+++ /dev/null
@@ -1,168 +0,0 @@
-.page {
-  --gray-rgb: 0, 0, 0;
-  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
-  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
-
-  --button-primary-hover: #383838;
-  --button-secondary-hover: #f2f2f2;
-
-  display: grid;
-  grid-template-rows: 20px 1fr 20px;
-  align-items: center;
-  justify-items: center;
-  min-height: 100svh;
-  padding: 80px;
-  gap: 64px;
-  font-family: var(--font-geist-sans);
-}
-
-@media (prefers-color-scheme: dark) {
-  .page {
-    --gray-rgb: 255, 255, 255;
-    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
-    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
-
-    --button-primary-hover: #ccc;
-    --button-secondary-hover: #1a1a1a;
-  }
-}
-
-.main {
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-  grid-row-start: 2;
-}
-
-.main ol {
-  font-family: var(--font-geist-mono);
-  padding-left: 0;
-  margin: 0;
-  font-size: 14px;
-  line-height: 24px;
-  letter-spacing: -0.01em;
-  list-style-position: inside;
-}
-
-.main li:not(:last-of-type) {
-  margin-bottom: 8px;
-}
-
-.main code {
-  font-family: inherit;
-  background: var(--gray-alpha-100);
-  padding: 2px 4px;
-  border-radius: 4px;
-  font-weight: 600;
-}
-
-.ctas {
-  display: flex;
-  gap: 16px;
-}
-
-.ctas a {
-  appearance: none;
-  border-radius: 128px;
-  height: 48px;
-  padding: 0 20px;
-  border: none;
-  border: 1px solid transparent;
-  transition:
-    background 0.2s,
-    color 0.2s,
-    border-color 0.2s;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: 500;
-}
-
-a.primary {
-  background: var(--foreground);
-  color: var(--background);
-  gap: 8px;
-}
-
-a.secondary {
-  border-color: var(--gray-alpha-200);
-  min-width: 180px;
-}
-
-.footer {
-  grid-row-start: 3;
-  display: flex;
-  gap: 24px;
-}
-
-.footer a {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.footer img {
-  flex-shrink: 0;
-}
-
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  a.primary:hover {
-    background: var(--button-primary-hover);
-    border-color: transparent;
-  }
-
-  a.secondary:hover {
-    background: var(--button-secondary-hover);
-    border-color: transparent;
-  }
-
-  .footer a:hover {
-    text-decoration: underline;
-    text-underline-offset: 4px;
-  }
-}
-
-@media (max-width: 600px) {
-  .page {
-    padding: 32px;
-    padding-bottom: 80px;
-  }
-
-  .main {
-    align-items: center;
-  }
-
-  .main ol {
-    text-align: center;
-  }
-
-  .ctas {
-    flex-direction: column;
-  }
-
-  .ctas a {
-    font-size: 14px;
-    height: 40px;
-    padding: 0 16px;
-  }
-
-  a.secondary {
-    min-width: auto;
-  }
-
-  .footer {
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .logo {
-    filter: invert();
-  }
-}
diff --git a/app/page.module.scss b/app/page.module.scss
new file mode 100644
index 0000000..092e221
--- /dev/null
+++ b/app/page.module.scss
@@ -0,0 +1,4 @@
+.homePage {
+  width: 100%;
+  min-height: 100vh;
+}
diff --git a/app/page.tsx b/app/page.tsx
index cff29bf..b51b26c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,12 +1,14 @@
-import styles from './page.module.css';
+import styles from './page.module.scss';
 
 export default function Home() {
   return (
-    <div className={styles.page}>
-      <main className={styles.main}>
-        <div>home page coming soon</div>
+    <div className={styles.homePage}>
+      <main>
+        <hgroup>
+          <h1>Welcome to the Event Network Project!</h1>
+          <p>A place to find what might be happening around the city!</p>
+        </hgroup>
       </main>
-      <footer className={styles.footer}>maybe some footer stuff</footer>
     </div>
   );
 }