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: [],