@dmthepm/commune 0.1.0

package/src/styles/design-system.css

@@ -0,0 +1,157 @@
+/**
+ * Commune Design System
+ * Clean, modern, with light/dark mode support
+ */
+
+/* Only import Tailwind utilities - NOT base (which resets everything) */
+@tailwind utilities;
+
+:root {
+  /* Light mode colors */
+  --c-bg: #ffffff;
+  --c-bg-soft: #f8f9fa;
+  --c-bg-muted: #e9ecef;
+  --c-text: #1a1a1a;
+  --c-text-muted: #6c757d;
+  --c-text-accent: #495057;
+  --c-border: rgba(0, 0, 0, 0.08);
+  --c-border-focus: rgba(0, 0, 0, 0.2);
+  
+  /* Accent colors - vibrant but tasteful */
+  --c-accent: #5b7ff9;
+  --c-accent-hover: #4a6ed8;
+  --c-accent-soft: rgba(91, 127, 249, 0.1);
+  --c-accent-border: rgba(91, 127, 249, 0.3);
+  
+  /* Shadows */
+  --c-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
+  --c-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
+  --c-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
+  --c-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
+  
+  /* Z-index scale */
+  --z-header: 50;
+  --z-panes: 40;
+  --z-hover: 110;
+  --z-modal-shade: 100;
+  --z-modal: 101;
+  
+  /* Border radius */
+  --c-radius-sm: 0.5rem;
+  --c-radius-md: 0.75rem;
+  --c-radius-lg: 1rem;
+  
+  /* Spacing */
+  --c-space-xs: 0.25rem;
+  --c-space-sm: 0.5rem;
+  --c-space-md: 1rem;
+  --c-space-lg: 1.5rem;
+  --c-space-xl: 2rem;
+}
+
+/* Dark mode via data-theme attribute or system preference */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --c-bg: #0f0f0f;
+    --c-bg-soft: #1a1a1a;
+    --c-bg-muted: #252525;
+    --c-text: #e4e4e4;
+    --c-text-muted: #a1a1a1;
+    --c-text-accent: #c4c4c4;
+    --c-border: rgba(255, 255, 255, 0.1);
+    --c-border-focus: rgba(255, 255, 255, 0.25);
+    
+    --c-accent: #7089ff;
+    --c-accent-hover: #8a9eff;
+    --c-accent-soft: rgba(112, 137, 255, 0.15);
+    --c-accent-border: rgba(112, 137, 255, 0.4);
+    
+    --c-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
+    --c-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
+    --c-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
+    --c-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);
+  }
+}
+
+:root[data-theme="dark"] {
+  --c-bg: #0f0f0f;
+  --c-bg-soft: #1a1a1a;
+  --c-bg-muted: #252525;
+  --c-text: #e4e4e4;
+  --c-text-muted: #a1a1a1;
+  --c-text-accent: #c4c4c4;
+  --c-border: rgba(255, 255, 255, 0.1);
+  --c-border-focus: rgba(255, 255, 255, 0.25);
+  
+  --c-accent: #7089ff;
+  --c-accent-hover: #8a9eff;
+  --c-accent-soft: rgba(112, 137, 255, 0.15);
+  --c-accent-border: rgba(112, 137, 255, 0.4);
+  
+  --c-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --c-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
+  --c-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
+  --c-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);
+}
+
+/* Global resets and base styles */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  background: var(--c-bg);
+  color: var(--c-text);
+  line-height: 1.6;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+a {
+  color: var(--c-accent);
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 0.15s ease;
+}
+
+a:hover {
+  color: var(--c-accent-hover);
+}
+
+button {
+  cursor: pointer;
+  font-family: inherit;
+  transition: all 0.15s ease;
+}
+
+/* Scroll lock utilities */
+body.panes-open,
+body.modal-open {
+  overflow: hidden;
+}
+
+/* Every link that opens a new tab carries the same external-link marker.
+   This is a design-system invariant: one rule, globally, so no page or
+   component has to remember to add its own. */
+
+/* The marker must never wrap onto its own line, orphaned from the label it
+   belongs to. `nowrap` has to come before the ::after rule that creates it. */
+a[target="_blank"] {
+  white-space: nowrap;
+}
+
+a[target="_blank"]::after {
+  content: "↗";
+  display: inline-block;
+  margin-left: 0.25rem;
+  font-size: 0.8em;
+  line-height: 1;
+  opacity: 0.6;
+  transition: opacity 0.15s ease;
+}
+
+a[target="_blank"]:hover::after {
+  opacity: 1;
+}
+

package/src/styles/notes.css

@@ -0,0 +1,85 @@
+/**
+ * Andy-style note typography and styling.
+ * 
+ * Goals:
+ * - Generous white space
+ * - Readable line length (65ch)
+ * - Subtle link underlines
+ * - Dense but not cramped
+ */
+
+/* Link styling is now handled in page-specific styles */
+/* Removed conflicting Starlight variables */
+
+.prose h2, .prose h3 {
+	font-weight: 600;
+	line-height: 1.3;
+	margin-top: 2em;
+	margin-bottom: 0.75em;
+}
+
+.prose p {
+	margin-top: 1.25em;
+	margin-bottom: 1.25em;
+	line-height: 1.7;
+}
+
+.prose ul, .prose ol {
+	margin-top: 1.25em;
+	margin-bottom: 1.25em;
+}
+
+.prose li {
+	margin-top: 0.5em;
+	margin-bottom: 0.5em;
+}
+
+/* Status badges */
+.status-badge {
+	display: inline-flex;
+	align-items: center;
+	padding: 0.25rem 0.75rem;
+	font-size: 0.75rem;
+	font-weight: 500;
+	border-radius: 9999px;
+}
+
+/* Backlinks and related notes styling */
+.backlinks, .related-notes {
+	position: sticky;
+	top: 6rem;
+}
+
+.backlinks a, .related-notes a {
+	transition: all 0.15s ease;
+}
+
+/* Mobile responsiveness */
+@media (max-width: 1023px) {
+	.backlinks, .related-notes {
+		position: static;
+		margin-top: 3rem;
+		padding-top: 2rem;
+		border-top: 1px solid var(--c-border);
+	}
+}
+
+/* Scroll lock when panes or modal are open */
+body.panes-open, body.modal-open {
+	overflow: hidden;
+}
+
+/* Research link styling - opens in new tab */
+a.research-link::after {
+	content: "↗";
+	display: inline-block;
+	margin-left: 0.25rem;
+	font-size: 0.8em;
+	opacity: 0.6;
+	transition: opacity 0.15s ease;
+}
+
+a.research-link:hover::after {
+	opacity: 1;
+}
+