Top Rated Pages By Year

Link to article: Top Rated Pages By Year.

:root { --box-accent: #823f3f; }

.page-calendar-box > ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(4.75rem, 100%), 1fr));
    font-feature-settings: 'case', 'ss01', 'ss04', 'tnum';
}


.page-calendar-box > ul > li {
    position: relative;
    display: flex;
    place-items: center;
    box-shadow: inset 0  -.05rem 0 #ccc;
}
.page-calendar-box > ul > li > a {
    display: block;
    flex-grow: 1;
    padding: .25rem;
    text-align: center;
    font-size: 0;
    text-underline-offset: 0.1rem;
}
.page-calendar-box > ul > li > a::first-line {
    font-size: 1.05rem;
}
.page-calendar-box > ul > li:is(:hover,:focus-within) > a {
    background-color: #fff0f0dd;
}

.page-calendar-box > ul > li > ul {
    position: absolute;
    display: grid;
    gap: .05rem;
    top: 100%; left: 0;
    width: 100%;
    background: #fffa;
    -webkit-backdrop-filter: blur(.25rem);
    backdrop-filter: blur(.25rem);
    padding: 0;
    font-size: 1em;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}
.page-calendar-box > ul > li:is(:hover, :focus-within) > ul {
    opacity: 1;
    pointer-events: auto;
}
.page-calendar-box > ul li ul li {
    display: none;
}

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


.tale-list {
    display: grid;
    gap: .75rem;
    margin-block: 1.5rem;
}

.tale-block {
    background-color: #fff;
    box-shadow: 0 0 0.325rem rgb(0 0 0 / 0.25);
    contain: paint;
    padding: .625rem;
    --box-accent: inherit;

    display: grid;
    grid-template-areas:
        "title index"
        "info date";
    grid-template-columns: 1fr max-content;
    gap: .425rem;
}

.tale-block .index {
    grid-area: index;
    display: flex;
    text-align: end;
    justify-content: end;
    align-items: baseline;
    gap: .25ex;
    color: #b7b7b7;
}
.tale-block .index span:first-child {
    font-size: .575em;
}
.tale-block .index .numbering {
    font-feature-settings: 'case', 'ss01', 'ss04', 'tnum';
    font-size: .95em;
}

.tale-block  .title {
    grid-area: title;
    display: flex;
    gap: .325ex 0.75ex;
    align-items: center;
    flex-wrap: wrap;
}
.tale-block .title > a {
    font-weight: bold;
    font-size: 1.075em;
}
.tale-block .title > .author { font-size: .775em; flex-grow: 1; }
.author .printuser {
    display: inline-flex;
    align-items: baseline;
    gap: .325em;
}
.author .printuser img {
    margin: 0;
    padding: 0;
    padding-left: .475rem;
}

.tale-block .date {
    grid-area: date;
    font-feature-settings: 'case', 'ss01', 'ss04', 'tnum';
    font-size: .75em;
}

.sec-info {
    grid-area: info;
    display: grid;
    grid-template-columns: 6.25rem 3.25rem;
    align-items: center;
    gap: .5rem;
    min-width: max-content;
    font-size: .825em;
}
.sec-info > br { display: none; }
.sec-info .comments { text-align: end; }
.sec-info .comments > span { font-size: 0; }

.tale-list .pager {
    border-block-start: .225rem solid var(--box-accent);
}

(none)

fragment:nav-generic-css

```
tale-list
```
```
content-type-description
```
```
tale-block
```
```
index
```
```
numbering
```
```
title
```
```
author
```
```
date
```
```
sec-info
```
```
rating
```
```
comments
```

[[include fragment:nav-generic-css]]

[[module PageCalendar category="_default"]]

[[div class="tale-list content-type-description"]]
[[module ListPages category="*" order="rating desc" wrapper="no" separate="false" perPage="50" limit="200" date="@URL|last 12 month"]]

[[div class="tale-block"]]
[[div_ class="index"]]
[[span]]Rank No.[[/span]][[span class="numbering"]]%%index%%[[/span]]
[[/div]]
[[div_ class="title"]]
%%linked_title%% [[span class="author"]]by %%created_by_linked%%[[/span]]
[[/div]]
[[div_ class="date"]]
%%created_at|%Y %b %e|agohover%%
[[/div]]

[[div_ class="sec-info"]]
[[span class="rating"]]Rating: [[#ifexpr %%rating%% > -1 | + | - ]][[#expr abs(%%rating%%)]][[/span]]
[[span class="comments"]]%%comments%% [[span]]Comments[[/span]]💬︎[[/span]]
[[/div]]

[[/div]]

[[/module]]
[[/div]]




[[module css]]
:root { --box-accent: #823f3f; }

.page-calendar-box > ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(4.75rem, 100%), 1fr));
    font-feature-settings: 'case', 'ss01', 'ss04', 'tnum';
}


.page-calendar-box > ul > li {
    position: relative;
    display: flex;
    place-items: center;
    box-shadow: inset 0  -.05rem 0 #ccc;
}
.page-calendar-box > ul > li > a {
    display: block;
    flex-grow: 1;
    padding: .25rem;
    text-align: center;
    font-size: 0;
    text-underline-offset: 0.1rem;
}
.page-calendar-box > ul > li > a::first-line {
    font-size: 1.05rem;
}
.page-calendar-box > ul > li:is(:hover,:focus-within) > a {
    background-color: #fff0f0dd;
}

.page-calendar-box > ul > li > ul {
    position: absolute;
    display: grid;
    gap: .05rem;
    top: 100%; left: 0;
    width: 100%;
    background: #fffa;
    -webkit-backdrop-filter: blur(.25rem);
    backdrop-filter: blur(.25rem);
    padding: 0;
    font-size: 1em;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}
.page-calendar-box > ul > li:is(:hover, :focus-within) > ul {
    opacity: 1;
    pointer-events: auto;
}
.page-calendar-box > ul li ul li {
    display: none;
}

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


.tale-list {
    display: grid;
    gap: .75rem;
    margin-block: 1.5rem;
}

.tale-block {
    background-color: #fff;
    box-shadow: 0 0 0.325rem rgb(0 0 0 / 0.25);
    contain: paint;
    padding: .625rem;
    --box-accent: inherit;

    display: grid;
    grid-template-areas:
        "title index"
        "info date";
    grid-template-columns: 1fr max-content;
    gap: .425rem;
}

.tale-block .index {
    grid-area: index;
    display: flex;
    text-align: end;
    justify-content: end;
    align-items: baseline;
    gap: .25ex;
    color: #b7b7b7;
}
.tale-block .index span:first-child {
    font-size: .575em;
}
.tale-block .index .numbering {
    font-feature-settings: 'case', 'ss01', 'ss04', 'tnum';
    font-size: .95em;
}

.tale-block  .title {
    grid-area: title;
    display: flex;
    gap: .325ex 0.75ex;
    align-items: center;
    flex-wrap: wrap;
}
.tale-block .title > a {
    font-weight: bold;
    font-size: 1.075em;
}
.tale-block .title > .author { font-size: .775em; flex-grow: 1; }
.author .printuser {
    display: inline-flex;
    align-items: baseline;
    gap: .325em;
}
.author .printuser img {
    margin: 0;
    padding: 0;
    padding-left: .475rem;
}

.tale-block .date {
    grid-area: date;
    font-feature-settings: 'case', 'ss01', 'ss04', 'tnum';
    font-size: .75em;
}

.sec-info {
    grid-area: info;
    display: grid;
    grid-template-columns: 6.25rem 3.25rem;
    align-items: center;
    gap: .5rem;
    min-width: max-content;
    font-size: .825em;
}
.sec-info > br { display: none; }
.sec-info .comments { text-align: end; }
.sec-info .comments > span { font-size: 0; }

.tale-list .pager {
    border-block-start: .225rem solid var(--box-accent);
}
[[/module]]

[!--
Fragment list:
https://scp-wiki.wikidot.com/fragment:top-rated-by-year-08
https://scp-wiki.wikidot.com/fragment:top-rated-by-year-09
https://scp-wiki.wikidot.com/fragment:top-rated-by-year-10
https://scp-wiki.wikidot.com/fragment:top-rated-by-year-11
https://scp-wiki.wikidot.com/fragment:top-rated-by-year-12
https://scp-wiki.wikidot.com/fragment:top-rated-by-year-13
https://scp-wiki.wikidot.com/fragment:top-rated-by-year-14
https://scp-wiki.wikidot.com/fragment:top-rated-by-year-19
https://scp-wiki.wikidot.com/fragment:top-rated-by-year-20
https://scp-wiki.wikidot.com/fragment:top-rated-by-year-21
https://scp-wiki.wikidot.com/fragment:top-rated-by-year-22
--]

Top Rated Pages By Year

Module Styles

Inline Styles

Includes

CSS Classes

Page Source