Enhance css

package-lock.json

@@ -20,6 +20,9 @@
         "tailwindcss": "^3.4.3",
         "vinxi": "^0.3.11"
       },
+      "devDependencies": {
+        "sass": "^1.77.2"
+      },
       "engines": {
         "node": ">=18"
       }
@@ -4960,6 +4963,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
+      "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==",
+      "devOptional": true
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -8090,6 +8099,23 @@
         }
       ]
     },
+    "node_modules/sass": {
+      "version": "1.77.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.2.tgz",
+      "integrity": "sha512-eb4GZt1C3avsX3heBNlrc7I09nyT00IUuo4eFhAbeXWU2fvA7oXI53SxODVAA+zgZCk9aunAZgO+losjR3fAwA==",
+      "devOptional": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/scule": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz",

package.json

@@ -23,5 +23,8 @@
   },
   "engines": {
     "node": ">=18"
+  },
+  "devDependencies": {
+    "sass": "^1.77.2"
   }
 }

src/app.css

@@ -1,16 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-h1 {
-  @apply text-5xl font-bold;
-}
-h2 {
-  @apply text-4xl font-bold;
-}
-h3 {
-  @apply text-3xl font-bold;
-}
-h3 {
-  @apply text-2xl font-bold;
-}

src/app.scss

@@ -0,0 +1,54 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+main {
+  h1,
+  h2,
+  h3,
+  h4 {
+    @apply mt-[.4em] mb-[.2em] scroll-mt-2 leading-normal;
+  }
+
+  h1 {
+    @apply text-5xl font-bold;
+  }
+  h2 {
+    @apply text-4xl font-bold;
+  }
+  h3 {
+    @apply text-3xl font-bold;
+  }
+  h4 {
+    @apply text-2xl font-bold;
+  }
+
+  p {
+    @apply my-2 leading-normal;
+  }
+
+  article {
+    @apply max-w-4xl;
+
+    img {
+      @apply my-2 inline-flex;
+    }
+
+    ul {
+      margin: 0.5rem 0.5rem 0.5rem 1.5rem;
+      list-style-type: disc;
+      list-style: disc;
+      ul {
+        margin: 0 1rem;
+      }
+    }
+
+    table {
+      @apply table;
+    }
+
+    a {
+      @apply text-primary;
+    }
+  }
+}

src/app.tsx

@@ -3,7 +3,7 @@ import { FileRoutes } from "@solidjs/start/router";
 import { Suspense } from "solid-js";
 import Nav from "~/components/Nav";
 import Footer from "./components/Footer";
-import "./app.css";
+import "./app.scss";
 import "./fonts.css";
 
 export default function App() {

src/routes/index.mdx

@@ -4,7 +4,7 @@ import { NewsList } from "~/components/NewsList"
 <main>
 
   <div
-    class="hero h-[70vh] min-h-96"
+    class="hero h-[70vh] min-h-96 shadow-lg"
     style="background-image: url(/dresden.webp);"
   >
     <div class="hero-overlay bg-opacity-40 backdrop-blur-sm"></div>
@@ -20,12 +20,12 @@ import { NewsList } from "~/components/NewsList"
     </div>
   </div>
 
-<section class="container mx-auto p-4">
+<section class="container mx-auto p-4 pt-0">
   <div class="flex flex-col md:flex-row mx-8 justify-center min-h-[40vh]">
     <div class="grow p-8">
       <div class="flex items-center sticky top-[40vh] text-5xl relative">
         <h2>Internet Exchange</h2>
-        <div class="circle bg-primary h-5 w-5 rounded-full absolute left-[-2.5rem] md:left-auto md:right-[-2.75rem]"></div>
+        <div class="circle bg-primary shadow h-5 w-5 rounded-full absolute left-[-2.5rem] md:left-auto md:right-[-2.75rem]"></div>
       </div>
     </div>
     <div class="grow flex flex-col justify-center gap-4 p-8 border-primary" style="border-bottom-width: 0.25rem; border-left-width: 0.25rem;">
@@ -41,7 +41,7 @@ import { NewsList } from "~/components/NewsList"
     </div>
     <div class="grow p-8 border-transparent md:border-base-100" style="border-top-width: 0.25rem;">
       <div class="flex items-center sticky top-[40vh] text-5xl relative">
-        <div class="circle bg-primary h-5 w-5 rounded-full absolute right-[-2.5rem] md:right-auto md:left-[-2.75rem]"></div>
+        <div class="circle bg-primary shadow h-5 w-5 rounded-full absolute right-[-2.5rem] md:right-auto md:left-[-2.75rem]"></div>
         <h2>Association</h2>
       </div>
     </div>
@@ -51,7 +51,7 @@ import { NewsList } from "~/components/NewsList"
     <div class="grow p-8 border-transparent md:border-base-100" style="border-top-width: 0.25rem">
       <div class="flex items-center sticky top-[40vh] text-5xl relative">
         <h2>Support</h2>
-        <div class="circle bg-primary h-5 w-5 rounded-full absolute left-[-2.5rem] md:left-auto md:right-[-2.75rem]"></div>
+        <div class="circle bg-primary shadow h-5 w-5 rounded-full absolute left-[-2.5rem] md:left-auto md:right-[-2.75rem]"></div>
       </div>
     </div>
     <div class="grow flex flex-col justify-center gap-4 p-8 border-primary" style="border-bottom-width: 0.25rem; border-left-width: 0.25rem;">

src/routes/news/[slug].tsx

@@ -34,12 +34,15 @@ export default () => {
         />
         {/* <h1 class="absolute bottom-0 left-0 p-4 backdrop-blur text-white drop-shadow-md bg-gray-800/40">{post()?.title}</h1> */}
       </div>
-      <section class="container mx-auto p-4">
-        <h1 class="my-12">{post()?.title}</h1>
-        <p>{post()?.published}</p>
-        <p>{post()?.authors.join(", ")}</p>
+      <div class="container mx-auto p-4">
+        <article>
+          <h1>{post()?.title}</h1>
+          <p>
+            {post()?.published} by {post()?.authors.join(", ")}
+          </p>
           <div innerHTML={post()?.body} />
-      </section>
+        </article>
+      </div>
     </main>
   );
 };