Merge pull request #11 from minh-de-rien/feature/home-page

Home Page: Adjust margins and paddings
minh-de-rien · Jan 26, 2024 · 5f024e8 · 5f024e8
2 parents e23183a + ea27e9d
commit 5f024e8
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 59 deletions.
diff --git a/.github/workflows/super-linter.yml b/.github/workflows/super-linter.yml
@@ -21,10 +21,13 @@ jobs:
         uses: actions/checkout@v3
         with:
           fetch-depth: 0
+
 
       - name: Lint Code Base
         uses: github/super-linter@v4
         env:
           VALIDATE_ALL_CODEBASE: false
+          VALIDATE_TYPESCRIPT_ES: false
+          VALIDATE_TYPESCRIPT_STANDARD: false
           DEFAULT_BRANCH: "main"
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/public/fonts/bettins-ywpem.ttf b/public/fonts/bettins-ywpem.ttf
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -9,7 +9,7 @@ import Magnifying from './icons/Magnifying.astro';
 <header class="sticky top-0 z-40">
 	<nav class="bg-white/80">
 		<div class="border-b-2 border-navy">
-			<div class="grid grid-cols-3 items-center m-3">
+			<div class="grid grid-cols-3 items-center mb-3 mx-3 pt-5">
 				<div class="flex justify-center items-center">
 					<a href="https://www.instagram.com/mimimum.exe/" target="_blank" class="mx-2">
 						<span class="sr-only">Follow Minh's Instagram</span>
@@ -25,27 +25,17 @@ import Magnifying from './icons/Magnifying.astro';
 			</div>
 		</div>
 		<div class="border-b-2 border-navy">
-			<div class="grid grid-cols-3 items-center m-3">
+			<div class="grid grid-cols-3 items-center m-5">
 				<div class="flex justify-center items-center text-navy">
-					<a href="/" class="mx-5"><span class="sr-only">Home</span>
-						Home
-					</a>
-					<a href="/about" class="mx-5"><span class="sr-only">About</span>
-						About
-					</a>
+					<a href="/" class="mx-5"><span class="sr-only"></span>Home</a>
+					<a href="/about" class="mx-5"><span class="sr-only">About</span>About</a>
 				</div>
 				<h1
 					class="flex justify-center text-sm font-semibold text-gray-900 sm:text-xl"
-				>
-					MDR
-				</h1>
+				>MDR</h1>
 				<div class="flex justify-center">
-					<a href="/" class="mx-5"><span class="sr-only">Dinning</span>
-						Dinning
-					</a>
-					<a href="/" class="mx-5"><span class="sr-only">Activities</span>
-						Activities
-					</a>
+					<a href="/" class="mx-5"><span class="sr-only"></span>Dinning</a>
+					<a href="/" class="mx-5"><span class="sr-only"></span>Activities</a>
 				</div>
 			</div>
 		</div>

diff --git a/src/components/widgets/Button.astro b/src/components/widgets/Button.astro
@@ -3,11 +3,11 @@ const { buttonName, className } = Astro.props;
 ---
 
 <button 
-  class:list={["border-2 border-navy m-9 button-shadow text-4xl", 
-  "transition delay-150 hover:bg-navy hover:text-white",
+  class:list={["border-2 border-navy bg-white m-9 button-shadow", 
+  "transition delay-150 hover:bg-navy",
   className]}
 >
-  {buttonName}
+  <p class="hover:text-white">{buttonName}</p>
 </button>
 <style>
   .button-shadow {

diff --git a/src/consts.ts b/src/consts.ts
@@ -1,5 +1,2 @@
-// Place any global data in this file.
-// You can import this data from anywhere in your site by using the `import` keyword.
-
 export const SITE_TITLE = "Minh de rien";
 export const SITE_DESCRIPTION = "Welcome to my website!";
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -3,6 +3,7 @@ import BaseHead from '../components/BaseHead.astro';
 import Header from '../components/Header.astro';
 import Button from '../components/widgets/Button.astro';
 import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
+import '../styles/global.css'
 import '@fontsource/montserrat-alternates';
 ---
 
@@ -13,26 +14,26 @@ import '@fontsource/montserrat-alternates';
 	</head>
 	<body>
 		<Header title={SITE_TITLE} />
-		<main class="m-3 grid grid-rows-2 text-navy">
-			<div class="grid grid-cols-3">
-				<h1 class="col-span-2 font-bold text-9xl flex justify-self-start items-center">MINH DE RIEN</h1>
-				<div></div>
-			</div>
-			<div class="grid grid-cols-3 justify-center py-12">
-				<h2 class="col-span-2 font-montserrat text-4xl flex items-center font-navy">
-					An Intimate Collection of Cherished Locations in Montreal
+		<main class="md:mx-2xl m-3 grid grid-rows-2 justify-center items-center h-full w-full text-navy">
+			<h1 class:list={["font-bold sm:text-5xl md:text-6xl lg:text-6xl xl:text-10xl",
+				"flex justify-center items-center"]}
+			>MINH DE RIEN
+			</h1>
+			<div class="flex justify-around py-12 px-48">
+				<h2 class="font-montserrat text-navy text-5xl">
+					An <span class="font-bettins">Intimate</span> Collection of Cherished Locations in Montreal
 				</h2>
-				<div>
-					<!-- <div class="w-1 h-5 bg-navy flex"></div> -->
-					<Button className="h-24 w-96" buttonName="EXPLORE" class="p-9"/>
-					<!-- <div class="w-1 h-5 bg-navy"></div> -->
+				<div class="pl-20">
+					<!-- <div class=" bg-navy flex">|</div> -->
+					<Button className="h-24 w-96 text-4xl" buttonName="EXPLORE" />
+					<!-- <div class=" bg-navy">|</div> -->
 				</div>
 			</div>
 		</main>
 	</body>
 </html>
 <style>
 	body {
-		background-image: url('public/background.png');
+		background-image: url('../../../public/background.png');
 	}
 </style>
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -160,26 +160,10 @@ hr {
   }
 } */
 
-.sr-only {
-  border: 0;
-  padding: 0;
-  margin: 0;
-  position: absolute !important;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-
-  /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
-  clip: rect(1px 1px 1px 1px);
-
-  /* maybe deprecated but we need to support legacy browsers */
-  clip: rect(1px, 1px, 1px, 1px);
-
-  /* modern browsers, clip-path works inwards from each corner */
-  clip-path: inset(50%);
-
-  /* added line to stop words getting smushed together (as they go onto seperate lines
-    and some screen readers do not understand line feeds as a space
-  */
-  white-space: nowrap;
+@font-face {
+  font-family: Bettins;
+  src: url("/fonts/bettins-ywpem.ttf") format('TrueType');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
 }
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -4,11 +4,22 @@ export default {
 	theme: {
 		extend: {
 			colors: {
-				'navy': '#141E46'
+				navy: '#141E46',
 			}
 		},
 		fontFamily: {
 			'montserrat': '"Montserrat Alternates"',
+			'bettins': 'Bettins'
+		},
+		fontSize: {
+			sm: ['0.875rem', '1.25rem'], 
+			lg: ['1.125rem', '1.75rem'],
+			xl: ['1.25rem', '1.75rem'],
+			'4xl': ['2.25rem', '2.5rem'],
+			'5xl': ['3rem', '1'],
+			'6xl': ['3.75rem', '1'],
+			'7xl': ['4.5rem', '1'],
+			'10xl': '12rem;'
 		}
 	},
 	plugins: [],