From db7745c87f00124d20564328d6b5cfbbb816da3e Mon Sep 17 00:00:00 2001
From: Ryan Freeman <N00173767@student.iadt.ie>
Date: Wed, 17 Nov 2021 21:49:45 +0000
Subject: [PATCH] Updated page styling at different breakpoints

---
 components/Projects.js  |   2 +-
 pages/index.js          |   2 +-
 styles/Home.module.css  |  95 -----------------------------------
 styles/Home.module.scss | 107 ++++++++++++++++++++++++++++++++++++++++
 styles/globals.css      |  15 ------
 5 files changed, 109 insertions(+), 112 deletions(-)
 delete mode 100644 styles/Home.module.css
 create mode 100644 styles/Home.module.scss
 delete mode 100644 styles/globals.css

diff --git a/components/Projects.js b/components/Projects.js
index 2fab950..503f3a1 100644
--- a/components/Projects.js
+++ b/components/Projects.js
@@ -1,4 +1,4 @@
-import styles from '../styles/Home.module.css';
+import styles from '../styles/Home.module.scss';
 import ExternalLink from './ExternalLink';
 
 export default function Projects({projectData}) {
diff --git a/pages/index.js b/pages/index.js
index 287d2a8..99c15c9 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,5 +1,5 @@
 import Head from 'next/head';
-import styles from '../styles/Home.module.css';
+import styles from '../styles/Home.module.scss';
 import GitHub from '../components/GitHub';
 import {getCustomData} from '../lib/custom';
 import Projects from '../components/Projects';
diff --git a/styles/Home.module.css b/styles/Home.module.css
deleted file mode 100644
index 7254008..0000000
--- a/styles/Home.module.css
+++ /dev/null
@@ -1,95 +0,0 @@
-.container {
-    padding: 0 2rem;
-}
-
-.main {
-    min-height: 100vh;
-    padding: 4rem 0;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-.links {
-    margin-top: 1rem;
-}
-
-.title span {
-    display: block;
-    margin-top: 0.5rem;
-    font-size: 24px;
-    font-weight: normal;
-    color: grey;
-}
-
-.title {
-    margin: 0;
-    line-height: 1.15;
-    font-size: 3rem;
-}
-
-.title {
-    text-align: center;
-}
-
-.description {
-    margin: 2rem 0 1rem 0;
-    font-size: 1.5rem;
-    line-height: 1.5;
-}
-
-.grid {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-    max-width: 64rem;
-}
-
-.card {
-    margin: 1rem;
-    padding: 1.5rem;
-    text-align: left;
-    color: inherit;
-    text-decoration: none;
-    border: 2px solid #eaeaea;
-    border-radius: 10px;
-    transition: color 0.15s ease, border-color 0.15s ease;
-    max-width: 24rem;
-}
-
-.card:hover,
-.card:focus,
-.card:active {
-    color: #0070f3;
-    border-color: #0070f3;
-}
-
-.card h2 {
-    margin: 0 0 1rem 0;
-    font-size: 1.5rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.card p {
-    margin: 0;
-    font-size: 1.25rem;
-    line-height: 1.5;
-}
-
-
-.srOnly {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-}
diff --git a/styles/Home.module.scss b/styles/Home.module.scss
new file mode 100644
index 0000000..8c815e1
--- /dev/null
+++ b/styles/Home.module.scss
@@ -0,0 +1,107 @@
+@import "mixins.module";
+
+.container {
+  padding: 0 2rem;
+}
+
+.main {
+  min-height: 100vh;
+  padding: 4rem 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.links {
+  margin-top: 1rem;
+}
+
+
+.title {
+  margin: 0;
+  text-align: center;
+  font-size: 2.5rem;
+  line-height: 1.125;
+  @include sm {
+    font-size: 3rem;
+    line-height: 1.15;
+  }
+}
+
+.title span {
+  display: block;
+  margin-top: 0.5rem;
+  font-size: 1.5rem;
+  font-weight: normal;
+  color: grey;
+}
+
+.description {
+  margin: 2rem 0 1rem 0;
+  font-weight: normal;
+  font-size: 1.5rem;
+  line-height: 1.5;
+}
+
+.grid {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  max-width: 64rem;
+}
+
+.card {
+  margin: 1rem;
+  padding: 1.5rem;
+  text-align: left;
+  color: inherit;
+  text-decoration: none;
+  border: 2px solid #eaeaea;
+  border-radius: 10px;
+  transition: color 0.15s ease, border-color 0.15s ease;
+  max-width: 24rem;
+}
+
+.card:hover,
+.card:focus,
+.card:active {
+  color: #0070f3;
+  border-color: #0070f3;
+}
+
+.card h2 {
+  margin: 0 0 1rem 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 1.125rem;
+  @include sm {
+    font-size: 1.5rem;
+  }
+}
+
+.card p {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.75;
+  @include sm {
+    font-size: 1.25rem;
+    line-height: 1.5;
+  }
+}
+
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
diff --git a/styles/globals.css b/styles/globals.css
deleted file mode 100644
index d295c40..0000000
--- a/styles/globals.css
+++ /dev/null
@@ -1,15 +0,0 @@
-html,
-body {
-    padding: 0;
-    margin: 0;
-    font-family: "Inter", sans-serif;
-}
-
-a {
-    color: inherit;
-    text-decoration: none;
-}
-
-* {
-    box-sizing: border-box;
-}