style: 🎨 new theme

datonic · Jan 31, 2024 · 980def8 · 980def8
1 parent 342a971
commit 980def8
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 77 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/src/layouts/Layout.astro → src/layouts/Base.astro b/src/layouts/Layout.astro → src/layouts/Base.astro
@@ -17,7 +17,7 @@ const { description } = Astro.props;
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<title>{title}</title>
 	</head>
-	<body class="bg-neutral-800 text-neutral-300 pt-8 mx-auto max-w-3xl">
+	<body class="bg-neutral-950 text-neutral-300 pt-4 mx-auto max-w-3xl">
 		<slot />
 	</body>
 </html>
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -1,38 +1,39 @@
 ---
-import Layout from "../layouts/Layout.astro";
+import Layout from "../layouts/Base.astro";
 ---
 
 <Layout
     title="About Datonic"
     description="The best place for communities to collaborate on data. Create, curate, and share datasets with the world."
 >
-    <h1 class="text-6xl font-bold my-6">Datonic</h1>
+    <div class="flex justify-between items-center my-6">
+        <h1 class="text-6xl font-bold my-6">
+            <a class="text-amber-400" href="/">Datonic</a>
+        </h1>
+
+        <img src="/favicon.svg" alt="Datonic Logo" class="h-10 mr-12" />
+    </div>
 
     <main>
         <p class="text-3xl py-4">
-            Datonic is, for now,
-            <a
-                href="https://publish.obsidian.md/davidgasquez/Open+Data"
-                class="hover:underline text-amber-300"
-            >
-                only an idea
-            </a> in someone's mind.
+            Datonic aims to be the best place for communities to collaborate on
+            data. It is not a new standard. It aims to build upon, coalesce, and
+            make bridges.
         </p>
 
         <p class="text-3xl py-4">
-            It aims to be the best way to share and collaborate on open
-            datasets. It is not a new standard. It aims to build upon, coalesce,
-            and make bridges.
+            The goal is to bring Open Data to the level of Open Source by making
+            Open Data compatible with the modern data ecosystem.
         </p>
 
         <p class="text-3xl py-4">
-            The goal is to bring Open Data to the level of Open Source by making
-            Open Data compatible with the modern data ecosystem.
+            Let's move towards a world that produces open data with open source
+            software using open protocols running on open infrastructure.
         </p>
 
-        <h3 class="text-6xl pt-8">Ideals to Strive</h3>
+        <h3 class="text-5xl pt-8 text-amber-400">Ideals to Strive</h3>
 
-        <ul class="text-3xl list-inside list-disc py-4 leading-10">
+        <ul class="text-3xl list-inside list-disc pl-6 py-4 leading-10">
             <li>Community Focus</li>
             <li>Modularity</li>
             <li>Permissionless Ecosystem</li>
@@ -44,17 +45,4 @@ import Layout from "../layouts/Layout.astro";
             <li>Optimized for Humans</li>
         </ul>
     </main>
-
-    <nav class="text-3xl py-4 text-amber-300">
-        <ul>
-            <a class="pr-6 hover:underline" href="/">Home</a>
-            <a class="pr-6 hover:underline" href="https://github.com/datonic"
-                >GitHub</a
-            >
-            <a
-                class="pr-6 hover:underline"
-                href="https://twitter.com/datonic_io">Twitter</a
-            >
-        </ul>
-    </nav>
 </Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,22 +1,81 @@
 ---
-import Layout from "../layouts/Layout.astro";
+import Layout from "../layouts/Base.astro";
 ---
 
 <Layout
 	title="Datonic"
 	description="The best place for communities to collaborate on data. Create, curate, and share datasets with the world."
 >
-	<h1 class="text-6xl font-bold my-6">Datonic</h1>
+	<div class="flex justify-between items-center my-6">
+		<h1 class="text-6xl font-bold my-6">
+			<a class="text-amber-400" href="/">Datonic</a>
+		</h1>
+
+		<img src="/favicon.svg" alt="Datonic Logo" class="h-10 mr-12" />
+	</div>
+
 	<main>
 		<p class="text-3xl py-4">
 			The best place for communities to collaborate on data. Create,
 			curate, and share datasets with the world.
 		</p>
 	</main>
 
-	<nav class="text-3xl py-4 text-amber-300">
+	<div class="grid grid-cols-2 gap-4 py-12">
+		<div class="pb-4">
+			<h2 class="text-3xl">
+				<a
+					class="text-amber-400 hover:underline"
+					href="https://github.com/datonic/datadex">Data Portals</a
+				>
+			</h2>
+			<p class="text-2xl pt-3">
+				Open source, serverless, and local-first Data Platforms to
+				collaborate on Open Data.
+			</p>
+		</div>
+
+		<div class="pb-4">
+			<h2 class="text-3xl">
+				<a
+					class="text-amber-400 hover:underline"
+					href="https://github.com/datonic/hub">Hub</a
+				>
+			</h2>
+			<p class="text-2xl pt-3">
+				A place to discuss how to do open data with open source software
+				using open protocols running on open infrastructure.
+			</p>
+		</div>
+
+		<div class="pb-4">
+			<h2 class="text-3xl">
+				<a class="text-amber-400 hover:underline" href="/about">About</a
+				>
+			</h2>
+			<p class="text-2xl pt-3">
+				Learn more about how Datonic works, how you can collaborate, and
+				what are our intentions and views on Open Data.
+			</p>
+		</div>
+
+		<div class="pb-4">
+			<h2 class="text-3xl">
+				<a
+					class="text-amber-400 hover:underline"
+					href="https://publish.obsidian.md/davidgasquez/Open+Data"
+					>Open Data Notes</a
+				>
+			</h2>
+			<p class="text-2xl pt-3">
+				Explore how Open data creates open knowledge and how can we
+				improve the current open data ecosystem.
+			</p>
+		</div>
+	</div>
+
+	<nav class="text-amber-400">
 		<ul>
-			<a class="pr-6 hover:underline" href="/about">About</a>
 			<a class="pr-6 hover:underline" href="https://github.com/datonic"
 				>GitHub</a
 			>