feat: update global styles and add clickable component

RustLangES · Oct 9, 2024 · 9ea1f5c · 9ea1f5c
1 parent a13e924
commit 9ea1f5c
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 1 deletion.
diff --git a/src/Home.module.css b/src/Home.module.css
diff --git a/src/components/Clickable.astro b/src/components/Clickable.astro
@@ -0,0 +1,10 @@
+<style>
+  .clickable {
+    @apply inline-flex flex-col p-2 shadow-md border-black border-[2px];
+    box-shadow: 5px 5px 1px 1px #000;
+  }
+</style>
+
+<div class="clickable">
+  <slot />
+</div>
diff --git a/src/globals.css b/src/globals.css
@@ -1,3 +1,52 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@import url("https://fonts.cdnfonts.com/css/work-sans");
+@import url("https://fonts.cdnfonts.com/css/alfa-slab-one");
+
+:root {
+  --background: #fed7aa;
+  --orange: #f97316;
+  --black: #000;
+}
+
+body {
+  background: var(--background);
+  box-sizing: border-box;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+}
+
+h1 {
+  @apply text-7xl font-normal;
+  color: var(--orange);
+  font-family: "Alfa Slab One", sans-serif;
+}
+
+h2 {
+  @apply text-4xl font-normal;
+  color: var(--black);
+  font-family: "Alfa Slab One", sans-serif;
+}
+
+h3 {
+  @apply text-4xl font-semibold;
+  color: var(--black);
+  font-family: "Work Sans", sans-serif;
+}
+
+h4 {
+  @apply text-3xl font-light;
+  color: var(--black);
+  font-family: "Work Sans", sans-serif;
+}
+
+p {
+  @apply text-lg font-normal;
+  color: var(--black);
+  font-family: "Work Sans", sans-serif;
+}
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,5 +1,6 @@
 ---
-
+import "../globals.css";
+import Clickable from "../components/Clickable.astro";
 ---
 
 <html lang="en">
@@ -9,8 +10,26 @@
     <meta name="viewport" content="width=device-width" />
     <meta name="generator" content={Astro.generator} />
     <title>Astro</title>
+
+    <!-- -->
+    <link
+      href="https://fonts.cdnfonts.com/css/alfa-slab-one"
+      rel="stylesheet"
+    />
+    <link href="https://fonts.cdnfonts.com/css/work-sans" rel="stylesheet" />
   </head>
   <body>
+    <!-- 
+    <h4>Un espacio seguro</h4>
     <h1>Astro</h1>
+    <h3>En Español</h3>
+
+    <h2>Aprender</h2>
+
+    <Clickable>
+      <p>oli</p>
+    </Clickable>
+
+    -->
   </body>
 </html>