refactor(css): set some globals

redte-ch · Nov 2, 2023 · 97837f1 · 97837f1
1 parent 4a9e0eb
commit 97837f1
Show file tree

Hide file tree

Showing 12 changed files with 110 additions and 57 deletions.
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
@@ -1,3 +1,7 @@
-<section class="bg-white pt-32 pr-16 pb-16 pl-16">
+---
+const { class: className, ...rest } = Astro.props
+---
+
+<section class={ className } { ...rest }>
     <slot />
 </section>
diff --git a/src/components/Logo.astro b/src/components/Logo.astro
@@ -1,6 +1,7 @@
 ---
-const logoSrc = "/images/logo.png"
-const altText = "Red Innovation Logo"
+const { class: className, ...rest } = Astro.props
 ---
 
-<img class="w-48 h-48" src={logoSrc} alt={altText} />
+<div class={ className }>
+    <img class="w-48 h-48" { ...rest } />
+</div>
diff --git a/src/layouts/Head.astro b/src/layouts/Head.astro
@@ -1,5 +1,5 @@
 ---
-const styleHref = "/src/styles/global.css"
+import "../styles/global.css"
 ---
 
 <meta charset="utf-8" />
@@ -8,4 +8,3 @@ const styleHref = "/src/styles/global.css"
 <title>Red Innovation</title>
 <meta name="description" content="Public tech for a better future">
 <meta name="author" content="Mauko Quiroga-Alvarado" />
-<link href={styleHref} rel="stylesheet"/>
diff --git a/src/layouts/Home.astro b/src/layouts/Home.astro
@@ -2,14 +2,14 @@
 import Head from "./Head.astro"
 ---
 
-<html lang="en" class="bg-neutral text-primary">
-<head>
-    <Head />
-</head>
+<html lang="en">
+    <head>
+        <Head />
+    </head>
 
-<body class="min-h-screen grid place-items-center">
-    <main class="max-w-4xl text-left m-10">
-        <slot />
-    </main>
-</body>
+    <body>
+        <main>
+            <slot />
+        </main>
+    </body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -5,19 +5,22 @@ import Home from "../layouts/Home.astro"
 ---
 
 <Home>
-    <div class="-mb-24 pt-16 pr-16 pl-16">
-        <Logo class="text-right" />
-    </div>
-    <Hero>
-        <h1 class="mb-4 text-5xl font-black">
+    <Logo
+        class="logo"
+        src="/images/logo.png"
+        alt="Red Innovation Logo"
+    />
+
+    <Hero class="hero">
+        <h1>
             Public tech for a better future
         </h1>
 
-        <h2 class="mb-2 text-secondary text-2xl font-bold">
+        <h2>
             Building the present of European digital public infrastructure
         </h2>
 
-        <p class="text-primary text-lg font-normal">
+        <p>
             <b>
                 We enable governments & companies to generate AI solutions by
                 ensuring compliance with EU rules & guidelines.

diff --git a/src/styles/_base.css b/src/styles/_base.css
@@ -0,0 +1,16 @@
+html {
+    @apply bg-neutral !important;
+    @apply text-primary !important;
+}
+
+body {
+    @apply grid !important;
+    @apply min-h-screen !important;
+    @apply place-items-center !important;
+}
+
+main {
+    @apply m-8 !important;
+    @apply max-w-4xl !important;
+    @apply text-left !important;
+}
diff --git a/src/styles/_font.css b/src/styles/_font.css
@@ -0,0 +1,34 @@
+@font-face {
+    font-family: 'AkzidenzGrotesk';
+    font-style: normal;
+    font-weight: 300;
+    src: url('/public/fonts/AkzidenzGrotesk-300.otf') format('opentype');
+}
+
+@font-face {
+    font-family: 'AkzidenzGrotesk';
+    font-style: normal;
+    font-weight: 400;
+    src: url('/public/fonts/AkzidenzGrotesk-400.otf') format('opentype');
+}
+
+@font-face {
+    font-family: 'AkzidenzGrotesk';
+    font-style: normal;
+    font-weight: 500;
+    src: url('/public/fonts/AkzidenzGrotesk-500.otf') format('opentype');
+}
+
+@font-face {
+    font-family: 'AkzidenzGrotesk';
+    font-style: normal;
+    font-weight: 700;
+    src: url('/public/fonts/AkzidenzGrotesk-700.otf') format('opentype');
+}
+
+@font-face {
+    font-family: 'AkzidenzGrotesk';
+    font-style: normal;
+    font-weight: 900;
+    src: url('/public/fonts/AkzidenzGrotesk-900.otf') format('opentype');
+}
diff --git a/src/styles/_hero.css b/src/styles/_hero.css
@@ -0,0 +1,4 @@
+.hero {
+    @apply bg-white;
+    @apply pt-32 pr-16 pb-16 pl-16;
+}
diff --git a/src/styles/_logo.css b/src/styles/_logo.css
@@ -0,0 +1,4 @@
+.logo {
+    @apply -mb-24;
+    @apply pt-16 pr-16 pl-16;
+}
diff --git a/src/styles/_text.css b/src/styles/_text.css
@@ -0,0 +1,18 @@
+h1 {
+    @apply mb-4 !important;
+    @apply text-5xl !important;
+    @apply font-black !important;
+}
+
+h2 {
+    @apply mb-2 !important;
+    @apply text-2xl !important;
+    @apply font-bold !important;
+    @apply text-secondary !important;
+}
+
+p {
+    @apply text-lg !important;
+    @apply font-normal !important;
+    @apply text-primary !important;
+}
diff --git a/src/styles/fonts.css b/src/styles/fonts.css
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -1,4 +1,8 @@
-@import "fonts.css";
+@import "_base.css";
+@import "_font.css";
+@import "_hero.css";
+@import "_logo.css";
+@import "_text.css";
 
 @tailwind base;
 @tailwind components;