diff --git a/evidence/pages/+layout.svelte b/evidence/pages/+layout.svelte new file mode 100644 index 0000000..c4820af --- /dev/null +++ b/evidence/pages/+layout.svelte @@ -0,0 +1,15 @@ + + + + + diff --git a/evidence/pages/app.css b/evidence/pages/app.css new file mode 100644 index 0000000..b90157e --- /dev/null +++ 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; + } +}