blog/src/lib/components/Markdown.css

.markdown {
    width: 100%;
    overflow-wrap: anywhere;

    @media (width>480px) {
        font-size: 1.125em;
    }

    & h1, h2 {
        font-weight: 600;
        padding-top: 25px;
        @media(width>999px){padding-top:50px; margin-top:0;}

        &::before {
            display: inline-block;
            content: '§';
            margin-right: 4px;
            width: 4px;
            color: #0000;
            background-color: var(--theme-color);
        }
    }

    & p {
        margin: 0 0.5em;
        line-height: 2em;
        @media (width>480px) {
            margin: 1em 2em;
        }
    }

    & a[target="_blank"]:after {
        content: '■';
        font-size: 1em;
        line-height: 1em;
        width: 1em;
        height: 1em;
        display: inline-block;
        mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg"><path d="m293.3-240q-22 0-37.67-15.67-15.67-15.67-15.67-37.67v-373.3q0-22 15.67-37.67 15.67-15.67 37.67-15.67h186.7v53.33h-186.7v373.3h373.3v-186.7h53.33v186.7q0 22-15.67 37.67-15.67 15.67-37.67 15.67zm125.3-141.3-37.33-37.33 248-248h-96v-53.33h186.7v186.7h-53.33v-96z"/></svg>');
        vertical-align: super;
    }

    & li {
        line-height: 1.75em;
        &::marker {
            /* color: var(--theme-color); */
            font-size: 1rem;
        }
    }

    & img {
        display: block;
        margin: 1em auto;
        max-width: 100%;
        max-height: 60vh;
    }

    & code {
        font-size: 1rem;
        margin: 0 3px;
        padding: 0 3px;
        border-radius: 3px;
        background-color: var(--code-color);
    }
    & details {
        margin: 0 0.5em;
        padding: 0 .5em;
        border: dashed #8888 2px;
        border-radius: 6px;
        line-height: 2em;
        @media (width>480px) {
            margin: 1em 2em;
        }
    }
    & pre {
        position: relative;
        margin: 1em;
        padding: 1em;
        box-sizing: border-box;
        border-radius: 8px;
        background-color: var(--code-block);
        color: #d1d9e1;
        overflow: auto;
        scrollbar-width: thin;
        scrollbar-color: #aaa #444;
        
        @media (width<480px) {
            margin: 1em 0;
        }
        & code {
            margin: 0;
            padding: 0;
            border-radius: 0;
            background-color: #fff0;
        }
        /* 
        issue: 擬似要素は { イベントリスナを設置できない, アニメーション不可, スクロールに巻き込まれる }
        &::after {
            content: '';
            background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="white"><path d="m200-120c-44 0-80-35.6-80-80v-560c0-44 35.6-80 80-80h167c15-47.5 62.7-80 113-80 55.7 0 100 35 114 80h166c44 0 80 35.6 80 80v560c0 44-35.6 80-80 80zm0-80h560v-560h-80v120h-400v-120h-80zm280-560c22.8 0 40-17.2 40-40 0-22.8-17.2-40-40-40-22.8 0-40 17.2-40 40 0 22.8 17.2 40 40 40z"/></svg>');
            width: 1.5em;
            height: 1.5em;
            position: absolute;
            top: 1em;
            right: 1em;
        } */
    }
    & table {
        margin: 1em auto;
        font-size: 1.125em;
        border-collapse: collapse;

        & thead tr {
            border-bottom: solid 2px var(--black-white);
        }
        & tbody tr {
            border-top: solid color-mix(in srgb, var(--black-white) 20%, var(--back-color)) 2px;
            /* background-color: color-mix(in srgb, var(--black-white) 10%, var(--back-color)); */
        }
        & td,th {
            border-width: 0px;
            padding: .5em 1em;
        }
        & th:first-child, td:first-child {
            padding-left: 2em;
        }
        & th:last-child, td:last-child {
            padding-right: 2em;
        }

    }
    & blockquote {
        padding: 8px 16px;
        border-left: solid #d1d9e0 4px;
        margin: 1em 0;
        color: var(--font-gray);
        & p {margin: 0;}
    }
    & iframe {
        display: block;
        margin: 30px auto;
        border: none;
        width: 80%;
        aspect-ratio: 16/9;
        border-radius: 12px;
        box-shadow: 0px 6px 30px var(--frame-shadow);
        max-height: 75vh;
        transition: max-height .3s ease-in-out;
        &.hide {
            max-height: 30px;
        }
        @media(width<480px) {
            width: 100%;
            aspect-ratio: 4/3;
            box-shadow: 0px 4px 16px var(--frame-shadow);
        }
        @media(width>1280px) {
            width: 60%;
        }
        &[src*="youtube.com"]{
            aspect-ratio: 16/9;
        }
    }
    & video {
        display: block;
        margin: 30px auto;
        width: 80%;
        border-radius: 15px;
        box-shadow: 0px 6px 30px var(--frame-shadow);
        @media(width<480px) {
            width: 100%;
        }
        @media(width>1280px) {
            width: 60%;
        }
    }
    & math[display="block"] {
        margin: 1rem;
        font-size: 1.5rem;
    }
    & .markdown-alert {
        padding: 8px 16px;
        margin: 1em 0;

        & .markdown-alert-title {
            display: flex;
            align-items: center;
            & svg {
                fill: currentColor;
                margin-right: 8px;
            }
        }
        & p {
            margin: 0;
        }

        &.markdown-alert-note {
            border-left: solid #0969da 4px;
            & .markdown-alert-title {
                color: #0969da;
            }
        }
        &.markdown-alert-tip {
            border-left: solid #1a7f37 4px;
            & .markdown-alert-title {
                color: #1a7f37;
            }
        }
        &.markdown-alert-important {
            border-left: solid #8250df 4px;
            & .markdown-alert-title {
                color: #8250df;
            }
        }
        &.markdown-alert-warning {
            border-left: solid #9a6700 4px;
            & .markdown-alert-title {
                color: #9a6700;
            }
        }
        &.markdown-alert-caution {
            border-left: solid #cf222e 4px;
            & .markdown-alert-title {
                color: #cf222e;
            }
        }
    }
}