minor layout tweaks

matsonj · Dec 14, 2024 · 0ccc539 · 0ccc539
1 parent bee758c
commit 0ccc539
Show file tree

Hide file tree

Showing 2 changed files with 346 additions and 0 deletions.
diff --git a/evidence/pages/+layout.svelte b/evidence/pages/+layout.svelte
@@ -0,0 +1,15 @@
+<script>
+	import '@evidence-dev/tailwind/fonts.css';
+	import './app.css';
+	import { EvidenceDefaultLayout } from '@evidence-dev/core-components';
+	export let data;
+</script>
+
+<EvidenceDefaultLayout {data} 
+	xProfile="https://www.x.com/matsonj"
+	blueskyProfile="https://bsky.app/profile/matsonj.com"
+	githubRepo="https://www.github.com/matsonj/nba-monte-carlo"
+	title="mdsinabox"
+	builtWithEvidence=true>
+	<slot slot="content" />
+</EvidenceDefaultLayout>
diff --git a/evidence/pages/app.css b/evidence/pages/app.css
@@ -0,0 +1,331 @@
+/* Write your global styles here, in PostCSS syntax */
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	html {
+		@apply scroll-smooth;
+	}
+
+	body {
+		@apply select-none;
+	}
+
+	/* Default border color */
+	* {
+		@apply border-base-300;
+	}
+
+	/* osx style scrollbars */
+	.pretty-scrollbar {
+		scrollbar-width: thin;
+		scrollbar-color: theme('colors.base-300') transparent;
+	}
+
+	.pretty-scrollbar::-webkit-scrollbar {
+		height: 6px;
+		width: 6px;
+	}
+
+	.pretty-scrollbar::-webkit-scrollbar-track {
+		background-color: transparent;
+	}
+
+	.pretty-scrollbar::-webkit-scrollbar-thumb {
+		background-color: transparent;
+		border-radius: 7px;
+	}
+
+	.pretty-scrollbar:hover::-webkit-scrollbar-thumb {
+		background-color: theme('colors.base-200');
+	}
+
+	/* hidden scrollbar */
+	.no-scrollbar::-webkit-scrollbar {
+		display: none;
+	}
+	.no-scrollbar {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
+
+	/* remove user agent styles for select */
+	select {
+		appearance: none;
+		-moz-appearance: none;
+		-webkit-appearance: none;
+	}
+}
+
+@layer components {
+	.markdown {
+		@apply leading-normal text-base antialiased;
+		font-family: 'Roboto', sans-serif;
+	}
+
+	img.markdown {
+		@apply mx-auto h-auto max-w-full rounded-lg;
+	}
+
+	article.markdown a.markdown {
+		@apply text-primary underline decoration-transparent hover:decoration-primary  transition-all duration-200 !important;
+	}
+
+	p.markdown,
+	ul.markdown,
+	ol.markdown {
+		margin-block-end: 1.2em;
+		margin-block-start: 0em;
+	}
+
+	/* lists */
+
+	ol.markdown {
+		@apply list-decimal ps-6;
+	}
+	ul.markdown {
+		@apply list-disc ps-6;
+	}
+
+	/* 1st level list */
+	ul.markdown,
+	ol.markdown {
+		/* 2nd level unordered list */
+		& ul.markdown {
+			@apply list-circle;
+		}
+		/* 2nd level ordered list */
+		& ol.markdown {
+			@apply list-lower-alpha;
+		}
+
+		/* any 2nd level list */
+		& ul.markdown,
+		& ol.markdown {
+			@apply mt-1;
+			margin-block-end: 0em;
+
+			/* 3rd level unordered list */
+			& ul.markdown {
+				@apply list-square;
+			}
+			/* 3rd level ordered list */
+			& ol.markdown {
+				@apply list-lower-roman;
+			}
+		}
+
+		li.markdown {
+			@apply list-item;
+			text-align: -webkit-match-parent;
+
+			& + li.markdown {
+				@apply mt-1;
+			}
+		}
+	}
+
+	h1.markdown,
+	h2.markdown,
+	h3.markdown,
+	h4.markdown,
+	h5.markdown,
+	h6.markdown {
+		@apply scroll-mt-14 break-inside-avoid text-base-heading;
+		font-family: 'Roboto', sans-serif;
+		/* ensure that table of contents links scroll with room for the header */
+	}
+
+	h1.title:first-of-type,
+	h1.markdown:first-of-type {
+		@apply mt-1 mb-2;
+	}
+
+	h1.title {
+		@apply mt-5 mb-1 text-2xl tracking-wide font-bold break-inside-avoid;
+	}
+
+	h1.markdown {
+		@apply mt-5 mb-1 text-2xl tracking-wide font-bold break-inside-avoid;
+	}
+
+	h2.markdown {
+		@apply mt-3 mb-1 text-xl font-semibold;
+	}
+
+	h3.markdown {
+		@apply mt-2 mb-1 font-semibold text-base;
+	}
+
+	h4.markdown {
+		@apply mt-1 text-sm  font-semibold;
+	}
+
+	h5.markdown {
+		@apply mt-1 text-xs font-semibold;
+	}
+
+	h6.markdown {
+		@apply mt-1 text-xs;
+	}
+
+	hr.markdown {
+		@apply h-px my-8 max-w-xl mx-auto bg-base-300 border-0;
+	}
+
+	code.markdown {
+		@apply font-mono text-[0.875em] bg-base-200 border border-base-300 rounded px-1 select-all py-0.5;
+	}
+
+	form code {
+		font-size: unset;
+	}
+
+	blockquote.markdown {
+		@apply bg-base-200 border-l-4 border-base-content-muted pl-3 my-8 py-2;
+	}
+
+	blockquote.markdown > blockquote.markdown {
+		@apply m-0;
+	}
+
+	blockquote.markdown > :first-child {
+		@apply mt-0;
+	}
+
+	blockquote.markdown > :last-child {
+		@apply mb-0;
+	}
+
+	blockquote.markdown * {
+		@apply text-base-content-muted;
+	}
+	/* Ensure size and color are maintained for bold, italic, strikethrough */
+	strong.markdown {
+		@apply text-[1em] text-inherit;
+	}
+
+	em.markdown {
+		@apply text-[1em] text-inherit;
+	}
+
+	del.markdown {
+		@apply text-[1em] text-inherit;
+	}
+
+	a.markdown {
+		@apply text-[1em] text-inherit;
+	}
+
+	table.markdown {
+		@apply min-w-full  border-collapse text-center mx-auto my-5;
+	}
+
+	th.markdown {
+		@apply text-sm font-medium border-b border-gray-800 py-0 px-2 text-ellipsis overflow-hidden;
+	}
+
+	td.markdown {
+		@apply text-sm py-1 px-2 overflow-hidden text-ellipsis;
+	}
+}
+
+:root {
+	/* Layout header height */
+	--header-height: 3.5rem;
+	/* Font stacks */
+	--monospace-font-family: theme(fontFamily.mono);
+	--ui-font-family: theme(fontFamily.sans);
+	--ui-font-family-compact: theme(fontFamily.sans);
+
+	/*
+		!! DEPRECATED !!
+		Kept for backwards compatibility with users projects
+	*/
+	--blue-50: #eff6ff;
+	--blue-100: #dbeafe;
+	--blue-200: #bfdbfe;
+	--blue-300: #93c5fd;
+	--blue-400: #60a5fa;
+	--blue-500: #3b82f6;
+	--blue-600: #2563eb;
+	--blue-700: #1d4ed8;
+	--blue-800: #1e40af;
+	--blue-900: #1e3a8a;
+	--blue-999: #172554;
+	--blue-link: var(--blue-700);
+
+	--green-50: #f0fdf4;
+	--green-100: #dcfce7;
+	--green-200: #bbf7d0;
+	--green-300: #86efac;
+	--green-400: #4ade80;
+	--green-500: #22c55e;
+	--green-600: #16a34a;
+	--green-700: #15803d;
+	--green-800: #166534;
+	--green-900: #14532d;
+	--green-999: #052e16;
+
+	--grey-50: #f9fafb;
+	--grey-100: #f3f4f6;
+	--grey-200: #e5e7eb;
+	--grey-300: #d1d5db;
+	--grey-400: #9ca3af;
+	--grey-500: #6b7280;
+	--grey-600: #4b5563;
+	--grey-700: #374151;
+	--grey-800: #1f2937;
+	--grey-900: #111827;
+	--grey-999: #030712;
+
+	--red-50: #fef2f2;
+	--red-100: #fee2e2;
+	--red-200: #fecaca;
+	--red-300: #fca5a5;
+	--red-400: #f87171;
+	--red-500: #ef4444;
+	--red-600: #dc2626;
+	--red-700: #b91c1c;
+	--red-800: #991b1b;
+	--red-900: #7f1d1d;
+	--red-999: #450a0a;
+
+	--yellow-50: #fefce8;
+	--yellow-100: #fef9c3;
+	--yellow-200: #fef08a;
+	--yellow-300: #fde047;
+	--yellow-400: #facc15;
+	--yellow-500: #eab308;
+	--yellow-600: #ca8a04;
+	--yellow-700: #a16207;
+	--yellow-800: #854d0e;
+	--yellow-900: #713f12;
+	--yellow-999: #422006;
+}
+
+[data-theme='dark'] .__evidence-leaflet-tile-layer__ {
+	filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
+}
+
+@media print {
+	html {
+		-webkit-print-color-adjust: exact;
+		print-color-adjust: exact;
+	}
+
+	h1,
+	h2,
+	h3,
+	h4 {
+		break-after: avoid-page;
+	}
+
+	article {
+		orphans: 2;
+		widows: 2;
+	}
+}