add initial colors

2025-02-23 20:40:25 +03:30 · 2025-02-23 20:40:25 +03:30 · 3d77fa1751
commit 3d77fa1751
parent e5fe6615a2
4 changed files with 33 additions and 5 deletions
--- a/src/app.html
+++ b/src/app.html
@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover">
+	<body class="bg-foundation text-primary_text" data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -3,4 +3,6 @@
 	let { children } = $props();
 </script>

+<div class="">
 	{@render children()}
+</div>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -1,4 +1,13 @@
-<h1>Portfolio Under Construction...</h1>
+<div>
+	<span class="text-2xl">Portfolio under construction...</span>
+	<br />
+	This is some text using the primary text color. <!------>
+	<br />
+	And some <span class="text-muted_text"> muted </span> text <!------>
+	<br />
+	And some <span class="text-accent_text"> accented </span> text
+</div>
+
 <!-- Brief Bio
 -->

--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -6,7 +6,24 @@ export default {
 	content: ['./src/**/*.{html,js,svelte,ts}'],

 	theme: {
-		extend: {}
+		extend: {},
+        colors:{
+            foundation: '#282828',
+            primary: '#282828',
+            secondary: '#000000',
+            accent: '#ff0000',
+
+            neutral: '#000000',
+
+            primary_text: '#fbf1c7',
+            muted_text: '#a89984',
+            accent_text: '#fb4934',
+
+            red: '#000000',
+            green: '#000000',
+            blue: '#000000',
+            yellow: '#000000'
+        }
 	},

 	plugins: [typography, containerQueries]