Merge pull request #8 from corigne/dev

Styles Update
corigne · May 9, 2024 · cf597a7 · cf597a7
2 parents 4d6a93a + 39ee2da
commit cf597a7
Show file tree

Hide file tree

Showing 10 changed files with 1,155 additions and 112 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,13 +11,17 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "devDependencies": {
+    "@catppuccin/tailwindcss": "^0.1.6",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "autoprefixer": "^10.4.19",
     "mdsvex": "^0.11.0",
+    "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.2.3",
     "svelte": "^4.2.7",
     "svelte-check": "^3.6.0",
+    "tailwindcss": "^3.4.3",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
     "vite": "^5.0.3"

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/app.css b/src/app.css
@@ -0,0 +1,18 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    h1 {
+        @apply text-2xl font-bold py-2
+    }
+    h2 {
+        @apply text-xl font-semibold py-2
+    }
+    a {
+        @apply text-sapphire font-semibold
+    }
+    a:hover {
+        @apply underline
+    }
+}
diff --git a/src/app.html b/src/app.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %sveltekit.head%
   </head>
-  <body data-sveltekit-preload-data="hover">
-    <div style="display: contents">%sveltekit.body%</div>
+  <body class="dark:frappe latte bg-crust h-full min-h-screen" data-sveltekit-preload-data="hover" >
+    <div class="text" style="display: contents">%sveltekit.body%</div>
   </body>
 </html>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+import "../app.css"
 import Footer from "./footer.svelte"
 import Header from "./header.svelte"
 </script>
@@ -9,22 +10,13 @@ import Header from "./header.svelte"
     </style>
 </svelte:head>
 
-<div class="layout">
+<div class="flex flex-col h-screen items-center overflow-scroll">
     <Header />
-    <main>
+    <main class="bg-base text-text md:w-5/6 max-w-7xl w-full py-4 px-4 mb-auto md:rounded-lg">
         <slot />
     </main>
     <Footer />
 </div>
 
 <style>
-* {
-    font-family: "Hack", monospace;
-}
-.layout {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    padding-inline: 1em;
-}
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,25 +1,7 @@
-<div class="content">
-    <h1>Under Carp-entry</h1>
-    <img src="carp.jpg" alt="A carp being held."/>
-    <p>
+<div class="flex flex-col items-center">
+    <h1 class="text-bold ">Under Carp-entry</h1>
+    <img class="py-4" src="carp.jpg" alt="A carp being held."/>
+    <h2>
         Coming soon!
-    </p>
+    </h2>
 </div>
-
-<style>
-    h1 {
-        text-align: center;
-    }
-    p {
-        text-align: center;
-    }
-    .content {
-        display: flex;
-        flex-direction: column;
-    }
-
-    img {
-        width: 700px;
-        margin: auto;
-    }
-</style>
diff --git a/src/routes/footer.svelte b/src/routes/footer.svelte
@@ -2,16 +2,6 @@
     import * as config from '$lib/config'
 </script>
 
-<footer>
+<footer class="border-t my-2 pt-2">
     <p>{config.title} &copy {new Date().getFullYear()}</p>
 </footer>
-
-<style>
-    footer {
-        border-top: 1px solid gray;
-    }
-
-    p {
-        color: gray;
-    }
-</style>
diff --git a/src/routes/header.svelte b/src/routes/header.svelte
@@ -2,13 +2,13 @@
 import * as config from '$lib/config'
 </script>
 
-<div class="header">
-    <nav>
+<div class="w-5/6 text-xl max-w-7xl flex justify-center items-center">
+    <nav class="py-5 gap-5 flex mx-auto flex-col w-10/12 items-center justify-around md:flex-row md:w-5/6 ">
         <a href="/" class="title">
             <b>{config.title}</b>
         </a>
 
-        <ul class="links">
+        <ul class="flex gap-12 justify-evenly list-none">
             <li>
                 <a href="">about</a>
             </li>
@@ -20,63 +20,6 @@ import * as config from '$lib/config'
             </li>
         </ul>
 
-        <button>Toggle</button>
+        <button class="bg-overlay2 hover:bg-sapphire font-bold py-1 px-2 rounded transition-colors">Toggle</button>
     </nav>
 </div>
-
-<style>
-.header {
-    max-width: 1200px;
-    width: 80%;
-    margin-inline: auto;
-}
-
-nav {
-    padding-block: 2em;
-}
-
-.links {
-    list-style: none;
-}
-
-a {
-    color: inherit;
-    text-decoration: none;
-}
-a:hover{
-    text-decoration: underline;
-}
-@media (max-width: 768px) {
-    .header {
-        width: 100%;
-        text-align: center;
-    }
-    .links {
-        display: flex;
-        flex-direction: column;
-        gap: 1em;
-        width: 80%;
-        margin-inline: auto;
-        padding: 0;
-    }
-    li {
-        text-align: center;
-        padding-inline: 0;
-    }
-}
-
-@media (min-width: 768px) {
-    nav {
-        display: flex;
-        justify-content: space-around;
-    }
-
-    .links {
-        max-width: 70%;
-        display: flex;
-        flex-grow: 1;
-        justify-content: space-evenly;
-        margin-block: 0;
-    }
-}
-</style>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: ['./src/**/*.{html,js,svelte,ts}'],
+    theme: {
+        fontFamily: {
+            sans: ['Hack', 'sans-serif'],
+            monospace: ['Hack Mono', 'monospace']
+        },
+        extend: {},
+    },
+    plugins: [
+        require("@catppuccin/tailwindcss"),
+    ],
+}