236 lines
5.8 KiB
CSS
236 lines
5.8 KiB
CSS
@import "tailwindcss";
|
|
|
|
@plugin "@tailwindcss/typography";
|
|
|
|
@layer components {
|
|
.prose-styles {
|
|
@apply hover:prose-a:text-black prose prose-blockquote:border-l-black prose-blockquote:text-neutral-600 prose-code:text-black prose-headings:text-black text-neutral-600 prose-pre:rounded-xl prose-pre:p-4 max-w-none prose-headings:font-medium prose-pre:normal-case prose-pre:bg-white;
|
|
/* Base layout classes */
|
|
@apply prose max-w-3xl pt-0 mx-auto;
|
|
}
|
|
.simple-prose-styles {
|
|
@apply prose text-xs prose-headings:text-xs prose-pre:normal-case;
|
|
}
|
|
}
|
|
@layer base {
|
|
a {
|
|
@apply text-blue-400 no-underline transition-colors;
|
|
}
|
|
a:hover {
|
|
@apply underline;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
table {
|
|
@apply min-w-full border-collapse;
|
|
}
|
|
table thead {
|
|
@apply bg-gray-200;
|
|
}
|
|
table th {
|
|
@apply py-3 px-6 text-left text-xs font-medium text-gray-600 uppercase tracking-wider;
|
|
}
|
|
table td {
|
|
@apply py-4 px-6 border-b border-gray-200;
|
|
}
|
|
table tbody tr {
|
|
@apply transition-colors;
|
|
}
|
|
table tbody tr:nth-child(odd) {
|
|
@apply bg-white;
|
|
}
|
|
table tbody tr:nth-child(even) {
|
|
@apply bg-gray-50;
|
|
}
|
|
table tbody tr:nth-child(odd):hover {
|
|
@apply bg-orange-50;
|
|
}
|
|
table tbody tr:nth-child(even):hover {
|
|
@apply bg-orange-100;
|
|
}
|
|
}
|
|
@layer base {
|
|
.astro-imagetools-img {
|
|
@apply min-w-full border-collapse rounded-lg overflow-hidden;
|
|
background-image: none !important;
|
|
object-fit: contain;
|
|
}
|
|
.lightbox-main{
|
|
background-image: none !important;
|
|
}
|
|
}
|
|
@layer base {
|
|
.specs-table {
|
|
@apply min-w-full border-collapse rounded-lg overflow-hidden;
|
|
}
|
|
.specs-table thead {
|
|
@apply bg-gray-200;
|
|
}
|
|
.specs-table th {
|
|
@apply py-3 px-6 text-left text-xs text-gray-600 uppercase tracking-wider;
|
|
}
|
|
.specs-table td {
|
|
@apply py-4 px-6 border-b border-gray-200;
|
|
}
|
|
.specs-table tbody tr {
|
|
@apply transition-colors;
|
|
}
|
|
.specs-table tbody tr:nth-child(odd) {
|
|
@apply bg-white;
|
|
}
|
|
.specs-table tbody tr:nth-child(even) {
|
|
@apply bg-gray-50;
|
|
}
|
|
.specs-table tbody tr:nth-child(odd):hover {
|
|
@apply bg-orange-50;
|
|
}
|
|
.specs-table tbody tr:nth-child(even):hover {
|
|
@apply bg-orange-100;
|
|
}
|
|
/* Bold the first column cells */
|
|
.specs-table th:first-child,
|
|
.specs-table td:first-child {
|
|
@apply font-semibold;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.table-default {
|
|
@apply min-w-full border-collapse shadow-lg;
|
|
}
|
|
.table-default thead {
|
|
@apply bg-gray-200;
|
|
}
|
|
.table-default th {
|
|
@apply py-3 px-6 text-left text-xs font-medium text-gray-600 uppercase tracking-wider;
|
|
}
|
|
.table-default td {
|
|
@apply py-4 px-6 border-b border-gray-200;
|
|
}
|
|
.table-default tbody tr {
|
|
@apply transition-colors;
|
|
}
|
|
/* Alternating row colors */
|
|
.table-default tbody tr:nth-child(odd) {
|
|
@apply bg-white;
|
|
}
|
|
.table-default tbody tr:nth-child(even) {
|
|
@apply bg-gray-50;
|
|
}
|
|
/* Hover effects with orange tint */
|
|
.table-default tbody tr:nth-child(odd):hover {
|
|
@apply bg-orange-50;
|
|
}
|
|
.table-default tbody tr:nth-child(even):hover {
|
|
@apply bg-orange-100;
|
|
}
|
|
}
|
|
|
|
|
|
@theme {
|
|
/* Typography*/
|
|
--font-sans: "Inter", sans-serif;
|
|
--font-mono: "IBM PLex Mono", monospace;
|
|
--text-xs:1rem;
|
|
/* Colors */
|
|
--color-orange-50: hsl(22, 100%, 96%);
|
|
--color-orange-100: hsl(25, 100%, 91%);
|
|
--color-orange-200: hsl(22, 100%, 82%);
|
|
--color-orange-300: hsl(20, 100%, 71%);
|
|
--color-orange-400: hsl(16, 100%, 60%);
|
|
--color-orange-500: hsl(14, 100%, 52%);
|
|
--color-orange-600: hsl(9, 100%, 50%);
|
|
--color-orange-700: hsl(6, 98%, 40%);
|
|
--color-orange-800: hsl(4, 87%, 34%);
|
|
--color-orange-900: hsl(4, 83%, 28%);
|
|
--color-orange-950: hsl(1, 89%, 15%);
|
|
/* colors */
|
|
--color-white: #fafafa;
|
|
--color-black: #12161d;
|
|
}
|
|
|
|
@supports (font-variation-settings: normal) {
|
|
:root {
|
|
font-family: InterVariable, sans-serif;
|
|
}
|
|
}
|
|
:root {
|
|
/* Typography*/
|
|
font-family: Inter, sans-serif;
|
|
font-feature-settings: "liga" 1, "calt" 1,
|
|
/* Contextual Alternates */ "dlig" 1, /* Discretionary Ligatures */ "ss07" 1,
|
|
/* fSquare punctuation */ "ss08" 1, /* Square quotes */ "zero" 1,
|
|
/* Slashed zero */ "tnum" 1, /* Tabular numbers */ "cv03" 1,
|
|
/* Open six */ "cv04" 1, /* Open nine */ "cv01" 1,
|
|
/* Alternate one */ "cv09", /* Flat-top three */ "cv02" 1; /* Open 4 */
|
|
/* style code blocks*/
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.markdown-content {
|
|
@apply prose dark:prose-invert max-w-none font-mono;
|
|
}
|
|
|
|
/* Headings (Scaled Down & Responsive) */
|
|
.markdown-content h1 {
|
|
@apply text-xl font-medium mt-5 mb-3 md:mt-6 md:mb-4;
|
|
}
|
|
.markdown-content h2 {
|
|
@apply text-xs font-medium mt-4 mb-2 md:mt-5 md:mb-3;
|
|
}
|
|
.markdown-content h3 {
|
|
@apply text-sm font-medium mt-3 mb-1 md:mt-4 md:mb-3;
|
|
}
|
|
.markdown-content h4 {
|
|
@apply text-neutral-500 font-medium mt-3 mb-1 md:mt-4 md:mb-2;
|
|
}
|
|
.markdown-content h5 {
|
|
@apply text-sm font-medium mt-2 mb-1 md:mt-3 md:mb-2;
|
|
}
|
|
.markdown-content h6 {
|
|
@apply text-xs font-medium mt-2 mb-1 uppercase md:mt-3 md:mb-2;
|
|
}
|
|
|
|
/* Paragraphs */
|
|
.markdown-content p {
|
|
@apply text-neutral-500 leading-relaxed mb-3 md:mb-4;
|
|
}
|
|
|
|
/* Lists */
|
|
.markdown-content ul {
|
|
@apply list-disc list-inside ml-0 pl-0 md:ml-5;
|
|
}
|
|
.markdown-content li {
|
|
@apply text-neutral-500 leading-relaxed;
|
|
}
|
|
.markdown-content ol {
|
|
@apply list-decimal list-inside ml-3 md:ml-5;
|
|
}
|
|
|
|
/* Code Blocks */
|
|
.markdown-content pre {
|
|
@apply bg-gray-900 text-white p-2 rounded-md overflow-x-auto md:p-3;
|
|
}
|
|
.markdown-content code {
|
|
@apply bg-gray-800 text-xs p-1 rounded-md md:text-sm;
|
|
}
|
|
|
|
/* Links */
|
|
.markdown-content a {
|
|
@apply text-blue-600 hover:underline dark:text-blue-400;
|
|
}
|
|
|
|
/* Blockquotes */
|
|
.markdown-content blockquote {
|
|
@apply border-l-4 border-gray-500 pl-3 italic text-gray-600 md:pl-4;
|
|
}
|