Shortest Pages By Month

Link to article: Shortest Pages By Month.

Module Styles

• .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: "Year";
      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: "January"; }
  .page-calendar-box > ul li ul li a[href$=".2"] { --month: "February"; }
  .page-calendar-box > ul li ul li a[href$=".3"] { --month: "March"; }
  .page-calendar-box > ul li ul li a[href$=".4"] { --month: "April"; }
  .page-calendar-box > ul li ul li a[href$=".5"] { --month: "May"; }
  .page-calendar-box > ul li ul li a[href$=".6"] { --month: "June"; }
  .page-calendar-box > ul li ul li a[href$=".7"] { --month: "July"; }
  .page-calendar-box > ul li ul li a[href$=".8"] { --month: "August"; }
  .page-calendar-box > ul li ul li a[href$=".9"] { --month: "September"; }
  .page-calendar-box > ul li ul li a[href$=".10"] { --month: "October"; }
  .page-calendar-box > ul li ul li a[href$=".11"] { --month: "November"; }
  .page-calendar-box > ul li ul li a[href$=".12"] { --month: "December"; }
  .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; }
  }

Inline Styles

• (none)

Includes

• fragment:nav-generic-css

CSS Classes

• navflow

• content-box

• content-type-title

• content-type-description

• content-type-footer

Page Source

[[div class="navflow"]]
[[div class="content-box"]]
[[div class="content-type-title"]]
[[module ListPages limit="1" date="@URL|last month" order="size" category="_default"]]
Shortest Pages of %%created_at|%B %Y%%
[[/module]]
[[/div]]
[[div class="content-type-description"]]
[[module ListPages category="_default" rating=">10" order="size" separate="false" limit="200" perPage="50" tags="-_listpages scp tale goi-format" date="@URL|last month" separate="false"  prependLine="||||~ Page ||~ Rating ||~ [[size 0%]]Comments[[/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"]]
[[/div]]






[[include 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: "Year";
    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: "January"; }
.page-calendar-box > ul li ul li a[href$=".2"] { --month: "February"; }
.page-calendar-box > ul li ul li a[href$=".3"] { --month: "March"; }
.page-calendar-box > ul li ul li a[href$=".4"] { --month: "April"; }
.page-calendar-box > ul li ul li a[href$=".5"] { --month: "May"; }
.page-calendar-box > ul li ul li a[href$=".6"] { --month: "June"; }
.page-calendar-box > ul li ul li a[href$=".7"] { --month: "July"; }
.page-calendar-box > ul li ul li a[href$=".8"] { --month: "August"; }
.page-calendar-box > ul li ul li a[href$=".9"] { --month: "September"; }
.page-calendar-box > ul li ul li a[href$=".10"] { --month: "October"; }
.page-calendar-box > ul li ul li a[href$=".11"] { --month: "November"; }
.page-calendar-box > ul li ul li a[href$=".12"] { --month: "December"; }
.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]]