feat: ✨ added adr example, updated styles, content types

package.json

@@ -19,10 +19,14 @@
     "@astrojs/react": "^3.0.4",
     "@astrojs/tailwind": "^5.0.2",
     "@astrojs/ts-plugin": "^1.2.0",
+    "@nanostores/logger": "^0.2.4",
+    "@nanostores/persistent": "^0.9.1",
     "@nanostores/react": "^0.7.1",
     "@types/react": "^18.2.33",
     "@types/react-dom": "^18.2.14",
     "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/recipes": "^0.5.1",
+    "@vanilla-extract/sprinkles": "^1.6.1",
     "@vanilla-extract/vite-plugin": "^3.9.0",
     "@visx/drag": "^3.3.0",
     "@visx/event": "^3.3.0",

src/components/GlobalStyles.astro

@@ -13,5 +13,6 @@
 
   * {
     font-family: "Satoshi-Variable", sans-serif;
+    /* color: hsl(280, 100%, 70%); */
   }
 </style>

src/components/QuadrantNav.astro

@@ -4,9 +4,10 @@ import * as styles from "./QuadrantNav.css.ts";
 
 <div class:list={[styles.radarWrapper]}>
   <div class:list={[styles.quadrantsOverlay]}>
+    <h1 class:list={[styles.headingOne, styles.radStyle]}>Tech Radar</h1>
     <section class:list={[styles.quadrant, styles.topLeft]} id="tools">
       <a href="/quadrants/tools">
-        <h2>Tools<span class:list={[styles.chevron]}>></span></h2>
+        <h2>Tools<span class:list={[styles.chevron]}></span></h2>
       </a>
     </section>
     <section class:list={[styles.quadrant, styles.topRight]} id="techniques">

src/components/QuadrantNav.css.ts

@@ -1,3 +1,4 @@
+import { margin } from "./Radar.css";
 // QuadrantNav.css.ts
 import { style } from "@vanilla-extract/css";
 
@@ -20,11 +21,13 @@ export const quadrantsOverlay = style({
 });
 
 export const quadrant = style({
-  width: "50%",
-  height: "50%",
+  width: "25%",
+  height: "25%",
   position: "relative",
   cursor: "pointer",
   transition: "background-color 0.3s",
+  padding: "1rem",
+  background: "#EEF5FC",
   ":hover": {
     backgroundColor: "rgba(255, 255, 255, 0.1)",
   },
@@ -43,19 +46,43 @@ export const chevron = style({
 export const topLeft = style({
   top: 0,
   left: 0,
+  ":hover": {
+    backgroundColor: "#E87D7D",
+  },
 });
 
 export const topRight = style({
   top: 0,
   right: 0,
+  ":hover": {
+    backgroundColor: "#B37DE8",
+  },
 });
 
 export const bottomLeft = style({
   bottom: 0,
   left: 0,
+  ":hover": {
+    backgroundColor: "#7DE8E8",
+  },
 });
 
 export const bottomRight = style({
   bottom: 0,
   right: 0,
+  ":hover": {
+    backgroundColor: "#B3E87D",
+  },
+});
+
+export const headingOne = style({
+  fontSize: "2rem",
+});
+
+export const radStyle = style({
+  background:
+    "linear-gradient(to right, hsl(280, 100%, 70%), hsl(240, 100%, 70%), hsl(200, 100%, 70%))",
+  WebkitBackgroundClip: "text",
+  WebkitTextFillColor: "transparent",
+  display: "inline",
 });

src/components/Radar.css.ts

@@ -1,16 +1,104 @@
-import { style, styleVariants } from "@vanilla-extract/css";
+import {
+  style,
+  styleVariants,
+  createGlobalTheme,
+  globalStyle,
+  createTheme,
+} from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { defineProperties, createSprinkles } from "@vanilla-extract/sprinkles";
 
-export const root = style({
-  fontFamily: "Comic Sans Ms",
-  color: "blue",
+export const [darkTheme, darkThemeVars] = createTheme({
+  color: {
+    background: "#000",
+    text: "#fff",
+  },
+});
+
+export const buttonRecipe = recipe({
+  base: {
+    /* Base styles */
+  },
+  variants: {
+    size: {
+      small: {
+        /* Small size styles */
+      },
+      large: {
+        /* Large size styles */
+      },
+    },
+    color: {
+      primary: {
+        /* Primary color styles */
+      },
+      secondary: {
+        /* Secondary color styles */
+      },
+    },
+  },
+  // Define more variants and compound variants
+});
+
+const layoutProperties = defineProperties({
+  properties: {
+    display: ["none", "block", "flex", "grid"],
+    flexDirection: ["row", "column"],
+  },
+});
+
+export const layoutSprinkles = createSprinkles(layoutProperties);
+
+export const colors = createGlobalTheme(":root", {
+  primary: "#005f73",
+  secondary: "#0a9396",
+  accent: "#94d2bd",
+  background: "#e9d8a6",
+  text: "#3d405b",
+});
+
+export const typography = createGlobalTheme(":root", {
+  fontSizes: {
+    small: "0.8rem",
+    medium: "1rem",
+    large: "1.2rem",
+  },
+  fontWeights: {
+    regular: "400",
+    medium: "500",
+    bold: "700",
+  },
+  fontFamily: "Arial, sans-serif",
+});
+
+export const spacing = createGlobalTheme(":root", {
+  small: "8px",
+  medium: "16px",
+  large: "24px",
 });
 
+export const margin = {
+  small: style({ margin: spacing.small }),
+  medium: style({ margin: spacing.medium }),
+};
+
 export const size = styleVariants({
   small: { fontSize: 16 },
   medium: { fontSize: 24 },
   large: { fontSize: 32 },
 });
 
+export const root = style({
+  fontFamily: "Comic Sans Ms",
+  color: "blue",
+});
+
+globalStyle("body", {
+  fontFamily: typography.fontFamily,
+  color: colors.text,
+  backgroundColor: colors.background,
+});
+
 export const text = style({
   fontFamily: "Comic Sans Ms",
   color: "blue",
@@ -47,3 +135,14 @@ export const hoverStyle = {
     r: "15",
   },
 };
+
+export const responsiveStyle = style({
+  "@media": {
+    "screen and (min-width: 768px)": {
+      padding: "24px",
+    },
+    "screen and (min-width: 1024px)": {
+      padding: "48px",
+    },
+  },
+});