markdown.theme.pcss.css

README.md

https://blackpointcyber.com/styleguide

https://github.com/timlrx/tailwind-nextjs-starter-blog

https://next-drupal.org

https://www.npmjs.com/package/@vercel/examples-ui

https://github.com/ijjk/notion-blog/tree/main/src/styles

https://www.meilisearch.com

https://volta.net/changelog

https://bryanohagan.com

https://www.spacedrive.com/docs/product/getting-started/introduction

markdown.theme.sass

:root{--background-light:#f6f8fa;--background-white:#fff;--background-highlight:#f8f8f8;--background-error:#e3d2d2;--background-error-dark:#ffdddd;--background-success:#ddffdd;--color-gray-light:#999988;--color-gray:#999999;--color-gray-dark:#888888;--color-gray-darker:#555555;--color-black:#000000;--color-red:#a61717;--color-red-dark:#aa0000;--color-red-light:#d14;--color-green:#009926;--color-teal:#009999;--color-blue:#0086B3;--color-blue-dark:#445588;--color-purple:#800080;--color-purple-dark:#990073;--color-cyan:#008080;--color-navy:#000080;--color-brown:#3c5d5d}.markdown-body{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-size:16px;line-height:1.5;word-wrap:break-word;.csv-data{.blob-num{padding:10px 8px 9px;text-align:right;background:var(--background-white);border:0}tr{border-top:0}th{font-weight:600;background:var(--background-light);border-top:0}}}.highlight{background-color:var(--background-highlight);table{td{padding:5px}pre{margin:0}}.c,.c1,.cd,.cm{color:var(--color-gray-light);font-style:italic}.cp,.cs{color:var(--color-gray);font-weight:bold;font-style:italic}.err{color:var(--color-red);background-color:var(--background-error)}.gd{color:var(--color-black);background-color:var(--background-error-dark)}.ge{color:var(--color-black);font-style:italic}.gr,.gt{color:var(--color-red-dark)}.bp,.gh,.gp,.gu{color:var(--color-gray)}.gi{color:var(--color-black);background-color:var(--background-success)}.go{color:var(--color-gray-dark)}.gs,.k,.kc,.kd,.kn,.kp,.kr,.kv,.o,.ow{color:var(--color-black);font-weight:bold}.kt,.nc{color:var(--color-blue-dark);font-weight:bold}.il,.m,.mb,.mf,.mh,.mi,.mo,.mx{color:var(--color-teal)}.s,.s1,.s2,.sb,.sc,.sd,.se,.sh,.si,.sx{color:var(--color-red-light)}.sr{color:var(--color-green)}.ss{color:var(--color-purple-dark)}.na,.no,.nv,.vc,.vg,.vi{color:var(--color-cyan)}.nb{color:var(--color-blue)}.nd{color:var(--color-brown);font-weight:bold}.ni{color:var(--color-purple)}.ne,.nf,.nl{color:var(--color-red-dark);font-weight:bold}.nn{color:var(--color-gray-darker)}.nt{color:var(--color-navy)}.w{color:var(--color-gray-darker)}}:root{--box-shadow-light:rgba(27, 31, 35, 0.1);--box-shadow-medium:rgba(27, 31, 35, 0.15);--box-shadow-dark:rgba(27, 31, 35, 0.07);--color-white:#fff;--color-blue:#0366d6;--color-blue-light:#f1f8ff;--color-gray-dark:#24292e;--color-gray:#f6f8fa;--color-gray-light:#6a737d;--color-gray-lighter:#fafbfc;--color-gray-link:#586069;--color-green:#28a745;--color-green-light:#dcffe4;--color-red:#d73a49;--color-red-light:#cb2431;--color-red-bg:#ffdce0;--color-yellow:#ffd33d;--color-yellow-light:#fff5b1;--color-purple:#6f42c1;--color-purple-light:#f5f0ff;--color-orange:#a04100;--color-orange-light:#e36209;--color-pending:#b08800;--color-pending-bg:#dbab09}.box-shadow{box-shadow:0 1px 1px var(--box-shadow-light) !important}.box-shadow-medium{box-shadow:0 1px 5px var(--box-shadow-medium) !important}.box-shadow-large{box-shadow:0 1px 15px var(--box-shadow-medium) !important}.box-shadow-extra-large{box-shadow:0 10px 50px var(--box-shadow-dark) !important}.box-shadow-none{box-shadow:none !important}.bg-white{background-color:var(--color-white) !important}.bg-blue{background-color:var(--color-blue) !important}.bg-blue-light{background-color:var(--color-blue-light) !important}.bg-gray-dark{background-color:var(--color-gray-dark) !important}.bg-gray{background-color:var(--color-gray) !important}.bg-gray-light{background-color:var(--color-gray-lighter) !important}.bg-green{background-color:var(--color-green) !important}.bg-green-light{background-color:var(--color-green-light) !important}.bg-red{background-color:var(--color-red) !important}.bg-red-light{background-color:var(--color-red-bg) !important}.bg-yellow{background-color:var(--color-yellow) !important}.bg-yellow-light{background-color:var(--color-yellow-light) !important}.bg-purple{background-color:var(--color-purple) !important}.bg-purple-light{background-color:var(--color-purple-light) !important}.bg-shade-gradient{background-image:linear-gradient(180deg, rgba(27, 31, 35, 0.065), rgba(27, 31, 35, 0)) !important;background-repeat:no-repeat !important;background-size:100% 200px !important}.text-blue{color:var(--color-blue) !important}.text-red{color:var(--color-red-light) !important}.text-gray-light{color:var(--color-gray-light) !important}.text-gray{color:var(--color-gray-link) !important}.text-gray-dark{color:var(--color-gray-dark) !important}.text-green{color:var(--color-green) !important}.text-orange{color:var(--color-orange) !important}.text-orange-light{color:var(--color-orange-light) !important}.text-purple{color:var(--color-purple) !important}.text-white{color:var(--color-white) !important}.text-inherit{color:inherit !important}.text-pending{color:var(--color-pending) !important}.bg-pending{color:var(--color-pending-bg) !important}.link-gray{color:var(--color-gray-link) !important}.link-gray:hover{color:var(--color-blue) !important}.link-gray-dark{color:var(--color-gray-dark) !important}.link-gray-dark:hover{color:var(--color-blue) !important}.link-hover-blue:hover{color:var(--color-blue) !important}.muted-link{color:var(--color-gray-link) !important}.muted-link:hover{color:var(--color-blue) !important;text-decoration:none}.details-overlay[open] > summary::before{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;display:block;cursor:default;content:" ";background:transparent}.details-overlay-dark[open] > summary::before{z-index:99;background:rgba(27, 31, 35, 0.5)}

:root {
    --font-sans: sans-serif;
    --font-monospace: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    --color-text: #24292e;
    --color-bg: #fff;
    --color-link: #FF9100;
    --color-border: #dfe2e5;
    --color-highlight: #ff0;
    --color-black: #000;

    --font-size-base: 14px;
    --font-size-h1: 32px;
    --font-size-h2: 24px;
    --font-size-h3: 20px;
    --font-size-h4: 16px;
    --font-size-h5: 14px;
    --font-size-h6: 12px;
    --font-size-code: 12px;
    --font-size-small: 90%;

    --font-weight-bold: 600;
    --font-weight-bolder: bolder;

    --line-height-base: 1.5;
}

html {
    font-family: var(--font-sans);
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-system);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-bg);
}

a {
    color: var(--color-link);
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

b, strong {
    font-weight: var(--font-weight-bold);
}

hr, .rule {
    height: 0;
    margin: 15px 0;
    overflow: hidden;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-border);
}

hr::before, .rule::before, hr::after, .rule::after {
    display: table;
    content: "";
}

hr::after, .rule::after {
    clear: both;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0;
}

h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
}

h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
}

h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
}

h4 {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
}

h5 {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-bold);
}

h6 {
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-bold);
}

p {
    margin-top: 0;
    margin-bottom: 10px;
}

small {
    font-size: var(--font-size-small);
}

tt, code {
    font-family: var(--font-monospace);
    font-size: var(--font-size-code);
}

pre {
    margin-top: 0;
    margin-bottom: 0;
    font-family: var(--font-monospace);
    font-size: var(--font-size-code);
}

styles.pcss.css

:root {
    --background-light: #f6f8fa;
    --background-white: #fff;
    --background-highlight: #f8f8f8;
    --background-error: #e3d2d2;
    --background-error-dark: #ffdddd;
    --background-success: #ddffdd;

    --color-gray-light: #999988;
    --color-gray: #999999;
    --color-gray-dark: #888888;
    --color-gray-darker: #555555;
    --color-black: #000000;
    --color-red: #a61717;
    --color-red-dark: #aa0000;
    --color-red-light: #d14;
    --color-green: #009926;
    --color-teal: #009999;
    --color-blue: #0086B3;
    --color-blue-dark: #445588;
    --color-purple: #800080;
    --color-purple-dark: #990073;
    --color-cyan: #008080;
    --color-navy: #000080;
    --color-brown: #3c5d5d;
}

.markdown-body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 16px;
    line-height: 1.5;
    word-wrap: break-word;

    .csv-data {
        .blob-num {
            padding: 10px 8px 9px;
            text-align: right;
            background: var(--background-white);
            border: 0;
        }

        tr {
            border-top: 0;
        }

        th {
            font-weight: 600;
            background: var(--background-light);
            border-top: 0;
        }
    }
}

.highlight {
    background-color: var(--background-highlight);

    table {
        td {
            padding: 5px;
        }

        pre {
            margin: 0;
        }
    }

    .cm, .c1, .c, .cd {
        color: var(--color-gray-light);
        font-style: italic;
    }

    .cp, .cs {
        color: var(--color-gray);
        font-weight: bold;
        font-style: italic;
    }

    .err {
        color: var(--color-red);
        background-color: var(--background-error);
    }

    .gd {
        color: var(--color-black);
        background-color: var(--background-error-dark);
    }

    .ge {
        color: var(--color-black);
        font-style: italic;
    }

    .gr, .gt {
        color: var(--color-red-dark);
    }

    .gh, .gp, .gu, .bp {
        color: var(--color-gray);
    }

    .gi {
        color: var(--color-black);
        background-color: var(--background-success);
    }

    .go {
        color: var(--color-gray-dark);
    }

    .gs, .kc, .kd, .kn, .kp, .kr, .k, .kv, .ow, .o {
        color: var(--color-black);
        font-weight: bold;
    }

    .kt, .nc {
        color: var(--color-blue-dark);
        font-weight: bold;
    }

    .mf, .mh, .il, .mi, .mo, .m, .mb, .mx {
        color: var(--color-teal);
    }

    .sb, .sc, .sd, .s2, .se, .sh, .si, .sx, .s1, .s {
        color: var(--color-red-light);
    }

    .sr {
        color: var(--color-green);
    }

    .ss {
        color: var(--color-purple-dark);
    }

    .na, .no, .vc, .vg, .vi, .nv {
        color: var(--color-cyan);
    }

    .nb {
        color: var(--color-blue);
    }

    .nd {
        color: var(--color-brown);
        font-weight: bold;
    }

    .ni {
        color: var(--color-purple);
    }

    .ne, .nf, .nl {
        color: var(--color-red-dark);
        font-weight: bold;
    }

    .nn {
        color: var(--color-gray-darker);
    }

    .nt {
        color: var(--color-navy);
    }

    .w {
        color: var(--color-gray-darker);
    }
}

:root {
    --box-shadow-light: rgba(27, 31, 35, 0.1);
    --box-shadow-medium: rgba(27, 31, 35, 0.15);
    --box-shadow-dark: rgba(27, 31, 35, 0.07);

    --color-white: #fff;
    --color-blue: #0366d6;
    --color-blue-light: #f1f8ff;
    --color-gray-dark: #24292e;
    --color-gray: #f6f8fa;
    --color-gray-light: #6a737d;
    --color-gray-lighter: #fafbfc;
    --color-gray-link: #586069;
    --color-green: #28a745;
    --color-green-light: #dcffe4;
    --color-red: #d73a49;
    --color-red-light: #cb2431;
    --color-red-bg: #ffdce0;
    --color-yellow: #ffd33d;
    --color-yellow-light: #fff5b1;
    --color-purple: #6f42c1;
    --color-purple-light: #f5f0ff;
    --color-orange: #a04100;
    --color-orange-light: #e36209;
    --color-pending: #b08800;
    --color-pending-bg: #dbab09;
}

.box-shadow {
    box-shadow: 0 1px 1px var(--box-shadow-light) !important;
}

.box-shadow-medium {
    box-shadow: 0 1px 5px var(--box-shadow-medium) !important;
}

.box-shadow-large {
    box-shadow: 0 1px 15px var(--box-shadow-medium) !important;
}

.box-shadow-extra-large {
    box-shadow: 0 10px 50px var(--box-shadow-dark) !important;
}

.box-shadow-none {
    box-shadow: none !important;
}

.bg-white {
    background-color: var(--color-white) !important;
}

.bg-blue {
    background-color: var(--color-blue) !important;
}

.bg-blue-light {
    background-color: var(--color-blue-light) !important;
}

.bg-gray-dark {
    background-color: var(--color-gray-dark) !important;
}

.bg-gray {
    background-color: var(--color-gray) !important;
}

.bg-gray-light {
    background-color: var(--color-gray-lighter) !important;
}

.bg-green {
    background-color: var(--color-green) !important;
}

.bg-green-light {
    background-color: var(--color-green-light) !important;
}

.bg-red {
    background-color: var(--color-red) !important;
}

.bg-red-light {
    background-color: var(--color-red-bg) !important;
}

.bg-yellow {
    background-color: var(--color-yellow) !important;
}

.bg-yellow-light {
    background-color: var(--color-yellow-light) !important;
}

.bg-purple {
    background-color: var(--color-purple) !important;
}

.bg-purple-light {
    background-color: var(--color-purple-light) !important;
}

.bg-shade-gradient {
    background-image: linear-gradient(180deg, rgba(27, 31, 35, 0.065), rgba(27, 31, 35, 0)) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 200px !important;
}

.text-blue {
    color: var(--color-blue) !important;
}

.text-red {
    color: var(--color-red-light) !important;
}

.text-gray-light {
    color: var(--color-gray-light) !important;
}

.text-gray {
    color: var(--color-gray-link) !important;
}

.text-gray-dark {
    color: var(--color-gray-dark) !important;
}

.text-green {
    color: var(--color-green) !important;
}

.text-orange {
    color: var(--color-orange) !important;
}

.text-orange-light {
    color: var(--color-orange-light) !important;
}

.text-purple {
    color: var(--color-purple) !important;
}

.text-white {
    color: var(--color-white) !important;
}

.text-inherit {
    color: inherit !important;
}

.text-pending {
    color: var(--color-pending) !important;
}

.bg-pending {
    color: var(--color-pending-bg) !important;
}

.link-gray {
    color: var(--color-gray-link) !important;
}

.link-gray:hover {
    color: var(--color-blue) !important;
}

.link-gray-dark {
    color: var(--color-gray-dark) !important;
}

.link-gray-dark:hover {
    color: var(--color-blue) !important;
}

.link-hover-blue:hover {
    color: var(--color-blue) !important;
}

.muted-link {
    color: var(--color-gray-link) !important;
}

.muted-link:hover {
    color: var(--color-blue) !important;
    text-decoration: none;
}

.details-overlay[open] > summary::before {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    display: block;
    cursor: default;
    content: " ";
    background: transparent;
}

.details-overlay-dark[open] > summary::before {
    z-index: 99;
    background: rgba(27, 31, 35, 0.5);
}

typo.pcss.css

:root {
    --font-sans: sans-serif;
    --font-monospace: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    --color-text: #24292e;
    --color-bg: #fff;
    --color-link: #FF9100;
    --color-border: #dfe2e5;
    --color-highlight: #ff0;
    --color-black: #000;

    --font-size-base: 14px;
    --font-size-h1: 32px;
    --font-size-h2: 24px;
    --font-size-h3: 20px;
    --font-size-h4: 16px;
    --font-size-h5: 14px;
    --font-size-h6: 12px;
    --font-size-code: 12px;
    --font-size-small: 90%;

    --font-weight-bold: 600;
    --font-weight-bolder: bolder;

    --line-height-base: 1.5;
}

html {
    font-family: var(--font-sans);
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-system);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-bg);
}

a {
    color: var(--color-link);
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

b, strong {
    font-weight: var(--font-weight-bold);
}

hr, .rule {
    height: 0;
    margin: 15px 0;
    overflow: hidden;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-border);
}

hr::before, .rule::before, hr::after, .rule::after {
    display: table;
    content: "";
}

hr::after, .rule::after {
    clear: both;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0;
}

h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
}

h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
}

h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
}

h4 {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
}

h5 {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-bold);
}

h6 {
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-bold);
}

p {
    margin-top: 0;
    margin-bottom: 10px;
}

small {
    font-size: var(--font-size-small);
}

tt, code {
    font-family: var(--font-monospace);
    font-size: var(--font-size-code);
}

pre {
    margin-top: 0;
    margin-bottom: 0;
    font-family: var(--font-monospace);
    font-size: var(--font-size-code);
}

/* ... (rest of the styles remain unchanged) ... */