refactor: use suitcss

redte-ch · Jul 30, 2024 · 48ac2df · 48ac2df
1 parent 69d1d23
commit 48ac2df
Show file tree

Hide file tree

Showing 17 changed files with 182 additions and 113 deletions.
diff --git a/public/images/logo.png b/public/images/logo.png
diff --git a/src/components/Bio.astro b/src/components/Bio.astro
@@ -0,0 +1,7 @@
+---
+const { text } = Astro.props
+---
+
+<section class="Bio">
+    <p>{text}</p>
+</section>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -1,7 +1,29 @@
 ---
-const redtech = 'https://redte.ch'
+const footerItems = [
+    {
+        text: 'redtech',
+        href: 'https://redte.ch',
+    }
+]
 ---
 
-<footer class="mt-8 ml-7">
-  <p><b>; </b><a href={redtech}>redtech</a><b> .</b></p>
-</footer>
+<footer class="Footer">
+    <p class="Footer-p">
+        <span class="Footer-p-span">; </span>
+        {footerItems.map(({text, href}) => (
+            <a class="Footer-p-a" href={href}>{text}</a>
+        ))}
+
+        <span class="Footer-p-span"> .</span>
+    </p>
+</footer>
+
+<style>
+    .Footer-p-span {
+        @apply font-bold;
+    }
+
+    .Footer-p-a {
+        @apply text-sm;
+    }
+</style>
diff --git a/src/layouts/Head.astro → src/components/Head.astro b/src/layouts/Head.astro → src/components/Head.astro
@@ -1,11 +1,13 @@
 ---
 import "../styles/global.css"
 const title = "Maison Quiroga"
-const description = "" +
-  "Roberto Quiroga Valdovinos. " +
-  "Artiste peintre. " +
-  "Œuvres et contact : @maisonquiroga (Instagram). " +
-  "Exposition permanente : Lautaro Rosas 558 Cerro Alegre, Valparaíso, Chili."
+const author = "Roberto Quiroga Valdovinos"
+const description = `
+    Roberto Quiroga Valdovinos. 
+    Artiste peintre. 
+    Œuvres et contact : @maisonquiroga (Instagram). 
+    Exposition permanente : Lautaro Rosas 558 Cerro Alegre, Valparaíso, Chili.
+`
 ---
 
 <head>
@@ -14,7 +16,7 @@ const description = "" +
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   <title>{title}</title>
   <meta name="description" content={description}>
-  <meta name="author" content="Roberto Quiroga Valdovinos" />
+  <meta name="author" content={author} />
   <link rel="icon" href="/favicon.ico" sizes="32x32">
   <link rel="icon" href="/icon.svg" type="image/svg+xml">
 </head>
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -0,0 +1,63 @@
+---
+import Logo from './Logo.astro';
+---
+
+<header class="Header">
+    <Logo src="/images/logo.jpg" alt="Logo de Maison Quiroga"/>
+
+    <h1 class="Header-h1">
+        RQV
+    </h1>
+
+    <h1 class="Header-h1-sm">
+        Roberto
+    </h1>
+
+    <h1 class="Header-h1-md">
+        Roberto Quiroga
+    </h1>
+
+    <h1 class="Header-h1-lg">
+        Roberto Quiroga Valdovinos
+    </h1>
+
+    <h2 class="Header-h2">
+        Peintre.
+    </h2>
+
+    <h2 class="Header-h2-sm">
+        Artiste peintre.
+    </h2>
+
+    <h2 class="Header-h2-md">
+        Artiste peintre.
+        <span class="Header-h2--light">Valparaíso.</span>
+    </h2>
+
+    <h2 class="Header-h2-lg">
+        Artiste peintre.
+        <span class="Header-h2--light">Valparaíso, Chili.</span>
+    </h2>
+</header>
+
+<style>
+    .Header-h1, .Header-h2 {
+        @apply block sm:hidden;
+    }
+
+    .Header-h1-sm, .Header-h2-sm {
+        @apply hidden sm:block md:hidden;
+    }
+
+    .Header-h1-md, .Header-h2-md {
+        @apply hidden md:block lg:hidden;
+    }
+
+    .Header-h1-lg, .Header-h2-lg {
+        @apply hidden lg:block;
+    }
+
+    .Header-h2--light {
+        @apply text-gray-300;
+    }
+</style>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
diff --git a/src/components/Logo.astro b/src/components/Logo.astro
@@ -1,7 +1,22 @@
 ---
-const { class: className, src, ...rest } = Astro.props
+const { src, alt, ...rest } = Astro.props
 ---
 
-<div class={ className }>
-    <img src={ src } { ...rest } class="w-20 h-20" alt="Logo"/>
-</div>
+<div class="Logo">
+    <img
+        class="Logo-img"
+        src={ src }
+        alt={ alt }
+        { ...rest }
+    />
+</div>
+
+<style>
+    .Logo {
+        @apply -mb-20;
+    }
+
+    .Logo-img {
+        @apply w-20 h-20;
+    }
+</style>
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
@@ -0,0 +1,25 @@
+---
+const navItems = [
+    {
+        text: '/Œuvres choisies',
+        href: 'https://www.instagram.com/maisonquiroga/'
+    },
+    {
+        text: '/Contact',
+        href: 'mailto:roberto@maisonquiroga.art'
+    }
+]
+---
+
+<nav class="Nav">
+    {navItems.map(({ text, href }) => (
+        <a class="Nav-a" href={href}>{text}</a>
+    ))}
+</nav>
+
+<style>
+    .Nav-a {
+        @apply pr-8;
+        @apply text-lg;
+    }
+</style>
diff --git a/src/layouts/Home.astro b/src/layouts/Home.astro
@@ -1,13 +1,16 @@
 ---
-import Head from "./Head.astro"
-import Footer from "../components/Footer.astro";
+import Head from "../components/Head.astro"
+import Header from "../components/Header.astro"
+import Nav from "../components/Nav.astro"
+import Footer from "../components/Footer.astro"
 ---
 
 <html lang="fr">
     <Head />
-
     <body>
         <main>
+            <Header />
+            <Nav />
             <slot />
             <Footer />
         </main>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,67 +1,22 @@
 ---
-import Logo from "../components/Logo.astro"
-import Hero from "../components/Hero.astro"
-import Social from "../components/Social.astro"
 import Home from "../layouts/Home.astro"
+import Bio from "../components/Bio.astro"
+
+const bio = `
+    Né en 1953 à Viña del Mar, Chili, Roberto Quiroga Valdovinos a reçu
+    sa formation d'art à l'Escuela de Bellas Artes de Viña del Mar en
+    1970 et à l'Université de Concepción en 1973. Il a étudié sous la
+    direction de Teresa Vidal, Ismael Pinto, Julio Escamez, Tole
+    Peralta, Albino Echeverría, et Maisner Ordoñez. À la suite du
+    sanglant coup d'État de 1973, il s'est vu contraint de quitter le
+    pays pour emprunter le chemin de l'exil, ce qui a imprimé une
+    marque décisive sur son œuvre. Aujourd'hui, il dirige la Galerie
+    Lugar Inamible et expose ses travaux au Café Zeit.
+`
 ---
 
 <Home>
-    <Logo
-        class="logo"
-        src="/images/logo.png"
-        alt="Red Innovation Logo"
-    />
-
-    <Hero class="hero">
-        <h1 class="block md:hidden">
-            RGQV
-        </h1>
-
-        <h1 class="hidden md:block lg:hidden">
-            Roberto Quiroga
-        </h1>
-
-        <h1 class="hidden lg:block 3xl:hidden">
-            Roberto Quiroga Valdovinos
-        </h1>
-
-        <h1 class="hidden 3xl:block">
-            Roberto Gerardo Quiroga Valdovinos
-        </h1>
-
-        <h2 class="block sm:hidden">
-            Peintre.
-        </h2>
-
-        <h2 class="hidden sm:block md:hidden">
-            Artiste peintre.
-        </h2>
-
-        <h2 class="hidden md:block lg:hidden">
-            Artiste peintre. <span>Valparaíso.</span>
-        </h2>
-
-        <h2 class="hidden lg:block">
-            Artiste peintre. <span>Valparaíso, Chili.</span>
-        </h2>
-
-        <p>
-            Né en 1953 à Viña del Mar, Chili, Roberto Quiroga Valdovinos a reçu
-            sa formation d'art à l'Escuela de Bellas Artes de Viña del Mar en
-            1970 et à l'Université de Concepción en 1973. Il a étudié sous la
-            direction de Teresa Vidal, Ismael Pinto, Julio Escamez, Tole
-            Peralta, Albino Echeverría, et Maisner Ordoñez. À la suite du
-            sanglant coup d'État de 1973, il s'est vu contraint de quitter le
-            pays pour emprunter le chemin de l'exil, ce qui a imprimé une
-            marque décisive sur son œuvre. Aujourd'hui, il dirige la Galerie
-            Lugar Inamible et expose ses travaux au Café Zeit.
-        </p>
-    </Hero>
-
-    <Social
-        instagram="https://www.instagram.com/maisonquiroga/"
-        email="mailto:roberto@maisonquiroga.art"
-    />
+    <Bio text={bio} />
 
     <section class="block-v">
         <h3>[Expositions personnelles]</h3>

diff --git a/src/styles/_base.css b/src/styles/_base.css
@@ -15,6 +15,6 @@ main {
     @apply text-left !important;
 }
 
-section {
-    @apply pl-8 pr-8 !important;
+header, nav, section, footer {
+    @apply pt-8 pl-8 pr-8 !important;
 }
diff --git a/src/styles/_hero.css b/src/styles/_hero.css
diff --git a/src/styles/_logo.css b/src/styles/_logo.css
diff --git a/src/styles/_social.css b/src/styles/_social.css
diff --git a/src/styles/_text.css b/src/styles/_text.css
@@ -1,46 +1,45 @@
 h1 {
-    @apply ml-16 !important;
-    @apply pl-8 !important;
     @apply text-5xl !important;
-    @apply font-black !important;
+    @apply text-primary !important;
 }
 
 h2 {
-    @apply ml-16 !important;
-    @apply pl-8 !important;
     @apply text-4xl !important;
-    @apply font-bold !important;
     @apply lowercase !important;
     @apply text-secondary !important;
 }
 
-h2 span {
-    @apply text-gray-300 !important;
+h1, h2 {
+    @apply ml-16 !important;
+    @apply pl-8 !important;
 }
 
 h3 {
-    @apply mt-8 mr-16 !important;
     @apply text-sm !important;
-    @apply font-bold !important;
     @apply lowercase !important;
     @apply text-gray-900 !important;
 }
 
+h1, h2, h3 {
+    @apply font-bold !important;
+}
+
 p {
-    @apply mt-8 mr-16 !important;
-    @apply text-sm !important;
     @apply font-light !important;
     @apply text-gray-700 !important;
 }
 
 a {
-    @apply text-sm !important;
     @apply underline !important;
     @apply lowercase !important;
     @apply font-normal !important;
     @apply text-secondary !important;
 }
 
+p {
+    @apply text-sm !important;
+}
+
 a:hover {
     @apply text-primary !important;
 }