按月份分类的最高分页面

[[div class="navflow"]]
[[div class="content-box"]]
[[div class="content-type-title"]]
[[module ListPages limit="1" date="@URL|last month" order="rating desc" category="_default art component theme"]]
%%created_at|%Y年%m%%月的最高分页面
[[/module]]
[[/div]]
[[div class="content-type-description"]]
[[module ListPages category="_default art component theme wanderers ci mcd-curio adult wanderers-adult scpdeclassified" rating=">5"  tags="原创" order="rating desc" separate="false" limit="100" perPage="100" date="@URL|last month" separate="false"  prependLine="||||~ 页面 ||~ 评分 ||~ [[size 0%]]评论[[/size]]💬︎ ||"]]
|| %%index%%. || %%title_linked%% || +%%rating%% || %%comments%% ||
[[/module]]
[[/div]]
[[div class="content-type-footer"]]
[[[top-rated-pages|]]]
[[/div]]
[[/div]]
[[module PageCalendar category="_default art component theme wanderers ci mcd-curio adult wanderers-adult scpdeclassified"]]
[[/div]]






[[include :scp-wiki:fragment:nav-generic-css]]
[[module css]]
.navflow {
    display: grid;
    grid-template-areas: "list menu";
    grid-template-columns: 1fr auto;
    --box-accent: #823f3f;
}

.page-calendar-box {
    grid-area: menu;
    height: max-content;
    position: sticky;
    top: 0;
    padding: 0;
    font-size: 0.875em;
    border-left: solid 0.25rem var(--box-accent);
    font-feature-settings: 'case','ss01','ss04','tnum';
}
.page-calendar-box > ul::before {
    content: "年份";
    display: block;
    text-align: center;
    font-weight: bold;
    font-size: 0.9125em;
    padding: .325rem;
}

.page-calendar-box > ul > li {
    position: relative;
    border-bottom: solid 0.05rem rgba(0,0,0,0.1);
}
.page-calendar-box > ul > li:last-child {
    border-bottom: unset;
}
.page-calendar-box > ul > li:is(:hover,:focus-within,:has(.selected)) {
    background: var(--box-accent);
}
.page-calendar-box > ul > li > a {
    display: block;
    padding: .25rem .325rem;
    width: 3.5rem;
    font-size: 0; /* hack to get rid of the numbers */
    text-align: center;
}
.page-calendar-box > ul > li > a::first-line {
    font-size: 0.875rem;
}
.page-calendar-box > ul > li:is(:hover,:focus-within,:has(.selected)) > a {
    color: #fff;
    font-weight: bold;
}

.page-calendar-box > ul > li > ul {
    position: absolute;
    top: 0;
    right: 100%;
    width: 15.5rem;
    padding: 0.05rem;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.05rem;
    text-align: center;
    background: #fffa;
    -webkit-backdrop-filter: blur(.25rem);
    backdrop-filter: blur(.25rem);
    box-shadow: inset 0 0 0 .05rem #ccc;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}


.page-calendar-box > ul > li:is(:hover,:focus-within) > ul,
.page-calendar-box > ul > li > ul:is(:hover,:focus-within) {
    opacity: 1;
    pointer-events: auto;
}

.page-calendar-box > ul > li > ul > li { display: contents; }

.page-calendar-box > ul li ul li a {
    padding: .5rem;
    min-width: max-content;
    box-shadow: 0 0 0 .05rem #ccc;
    transition: background-color 0.125s ease-out;
    font-size: 0;
    text-underline-offset: 0.1rem;
}
.page-calendar-box > ul li ul li a[href$=".1"] { --month: "1月"; }
.page-calendar-box > ul li ul li a[href$=".2"] { --month: "2月"; }
.page-calendar-box > ul li ul li a[href$=".3"] { --month: "3月"; }
.page-calendar-box > ul li ul li a[href$=".4"] { --month: "4月"; }
.page-calendar-box > ul li ul li a[href$=".5"] { --month: "5月"; }
.page-calendar-box > ul li ul li a[href$=".6"] { --month: "6月"; }
.page-calendar-box > ul li ul li a[href$=".7"] { --month: "7月"; }
.page-calendar-box > ul li ul li a[href$=".8"] { --month: "8月"; }
.page-calendar-box > ul li ul li a[href$=".9"] { --month: "9月"; }
.page-calendar-box > ul li ul li a[href$=".10"] { --month: "10月"; }
.page-calendar-box > ul li ul li a[href$=".11"] { --month: "11月"; }
.page-calendar-box > ul li ul li a[href$=".12"] { --month: "12月"; }
.page-calendar-box > ul li ul li a::before {
    content: var(--month);
    font-size: 0.775rem;
}
.page-calendar-box > ul li ul li a:is(:hover,:focus) {
    background-color: #fff0f0dd;
}

.page-calendar-box > ul > li > a,
.page-calendar-box > ul li.selected > a {
   pointer-events: none;
}
.page-calendar-box li.selected > a {
    color: inherit; font-weight: bold;
}

/*-------------------------------------------*/

.content-box {
    grid-area: list;
}
.content-type-title {
    position: sticky;
    top: 0;
}
.content-type-title :is(.list-pages-box,.list-pages-item) { display: contents; }
.content-type-description .wiki-content-table td:nth-child(1) {
    font-feature-settings: 'case','ss01','ss04','tnum';
    font-size: 0.675em;
    text-align: end;
    padding-inline: 0.5em 0;
}
.content-type-description .wiki-content-table td:nth-child(2) {
    width: auto;
    font-size: .95em;
}
.content-type-description .wiki-content-table td:is(:nth-child(3),:nth-child(4)) {
    text-align: center;
    width: 1.75rem;
    min-width: max-content;
    font-size: 0.875em;
}

@media screen and (max-width: 767px) {
    .page-calendar-box > ul > li > a {
        width: 2.625rem;
    }
    .page-calendar-box > ul > li > a::first-line {
        font-size: 0.75rem;
    }
   .content-type-description .wiki-content-table :is(td,th):last-child { display: none; }
}
[[/module]]