/*******************************************************************************************
 * This file add the support of the style.css
 *******************************************************************************************/
@charset "UTF-8";

@media only screen and (max-width: 900px) {
    :root {
        /*
            8vw: <article> padding
            1px: dummpy
        */

        --artile_main_width: calc(100% - 8vw - 1px);
    }

    /* release the static layout*/
    body {
        height: 100%;
        max-height: 100%;
        overflow-y: auto;
    }

    /* sticky header */
    header {
        height: 6vh;
        position: sticky;
        top: 0px;
        width: 100%;
        font-size: 10pt;
        background-color: #282c34;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    header > div {
        line-height: 6vh;
    }

    /* remove the sidebar */
    aside:where(.exapandable, .sidebar) {
        display: none;
    }

    /* Slide sidebar */
    main:has(article.main > button.sidebar-toggle-btn[aria-expanded="true"]) {
        width: 130%;

        animation: slide-in 0.5s forwards;
        transform: translateX(calc(-20%));
    }

    aside.sidebar {
        width: 30%;
        border-right: 3pt solid rgb(59, 59, 59);
    }

    /* Add some padding */
    article.main {
        padding: 4vw;

        /*
            6vh: header
            6vh: footer
            8vw: <article> padding
            2pt: border of header and footer
            12px: padding in footer
        */
        min-height: calc(100vh - 6vh - 6vh - 8vw - 2pt - 12px);
    }

    /* show the navbar button */
    article.main > button.sidebar-toggle-btn {
        background-color: #282c34;
        border: 1px solid grey;
        border-radius: 20%;
        padding: 0.2em;
        color: #c6c6c7;
        font-size: 22pt;
        line-height: 0.6em;
        display: block;
        position: fixed;
        top: 20px;
        right: 10px;
        cursor: pointer;
    }

    article.main > button.sidebar-toggle-btn:where(:hover, :active, :focus) {
        color: white;
        border-color: white;
        border-width: 2px;
    }

    /* move the position of article information */
    article.main > div.title {
        flex-direction: column;
    }

    article.main > div.title > div.author-date-readtime {
        flex-direction: row;
    }

    article.main > div.title > div.author-date-readtime > div {
        padding-top: 0;
        padding-right: 2em;
    }

    article.main > div.article-meta {
        margin-top: 0.2em;
    }

    /* re-layout the footer */
    footer {
        height: 6vh;
        font-size: 14pt;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    footer > div > ul {
        flex-wrap: wrap;
    }

    footer > div.footer-left {
        min-width: 60%;
        max-width: 100%;
    }

    footer > div.footer-right {
        display: none;
    }
}

@media only screen and (max-width: 700px) {
    /* Slide sidebar */
    main:has(article.main > button.sidebar-toggle-btn[aria-expanded="true"]) {
        width: 150%;
    }

    aside.sidebar {
        width: 50%;
    }
}

@media only screen and (max-width: 440px) {
    :root {
        /*
            12vw: <article> padding
            1px: dummpy
        */

        --artile_main_width: calc(100% - 12vw - 1px);
    }

    /* Slide sidebar */
    main:has(article.main > button.sidebar-toggle-btn[aria-expanded="true"]) {
        width: 180%;
    }

    aside.sidebar {
        width: 80%;
    }

    /* Add some padding */
    article.main {
        padding: 6vw;

        /*
            6vh: header
            6vh: footer
            12vw: <article> padding
            2pt: border of header and footer
            12px: padding in footer
        */
        min-height: calc(100vh - 6vh - 6vh - 12vw - 2pt - 12px);
    }

    /* move the position of article information */
    article.main > div.title > div.author-date-readtime {
        align-items: flex-start;
        flex-direction: column;
    }

    article.main > div.title > div.author-date-readtime > div {
        padding-top: 1em;
    }

    /* re-layout the footer */
    footer {
        font-size: 12pt;
    }
}