Tales By Year

Link to article: Tales By Year.

Module Styles

• :root { --box-accent: #3b5c97; }
  
  .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: contents;
  }
  .page-calendar-box > ul li ul li a {
      display: block;
      padding: .325rem;
      min-width: max-content;
      box-shadow: 0 0 0 .05rem #ccc;
      transition: background-color 0.125s ease-out;
      font-size: 0;
      text-align: center;
      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.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"
           "desc desc";
      grid-template-columns: 1fr max-content;
      gap: .425rem;
  }
  
  .tale-block .index {
      grid-area: index;
      display: grid;
      text-align: end;
      align-self: self-start;
      color: #b7b7b7;
  }
  .tale-block .index span:first-child {
      font-size: .575em;
  }
  .tale-block .index .numbering {
      font-feature-settings: 'case', 'ss01', 'ss04', 'tnum';
      font-size: .825em;
  }
  
  .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: .825em;
  }
  
  .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; }
  
  .description { grid-area: desc; }
  .description > :not(.preview) { display: none; }
  .description:not(:has(> .preview)) { display: none; } /* progressive enhancement */
  .description > .preview {
      display: block;
      font-size: .9125em;
      padding-block-start: .425rem;
      border-block-start: .05rem solid #ddd;
  }
  .description > .preview > p:first-child { margin-block-start: 0.25em; }
  .description > .preview > p:last-child { margin-block-end: 0.25em; }
  
  .tale-list .pager {
      border-block-start: .225rem solid var(--box-accent);
  }

Inline Styles

• (none)

Includes

• fragment:nav-generic-css

CSS Classes

• tale-list

• content-type-description

• tale-block

• index

• numbering

• title

• author

• date

• sec-info

• rating

• comments

• description

Page Source

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

[[module PageCalendar category="_default"]]

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

[[div class="tale-block"]]
[[div_ class="index"]]
[[span]]Index No.[[/span]][[span class="numbering"]][[#expr %%total%% - %%index%% + 1]][[/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 class="description"]]
%%content{2}%%
[[/div]]
[[/div]]

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




[[module css]]
:root { --box-accent: #3b5c97; }

.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: contents;
}
.page-calendar-box > ul li ul li a {
    display: block;
    padding: .325rem;
    min-width: max-content;
    box-shadow: 0 0 0 .05rem #ccc;
    transition: background-color 0.125s ease-out;
    font-size: 0;
    text-align: center;
    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.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"
         "desc desc";
    grid-template-columns: 1fr max-content;
    gap: .425rem;
}

.tale-block .index {
    grid-area: index;
    display: grid;
    text-align: end;
    align-self: self-start;
    color: #b7b7b7;
}
.tale-block .index span:first-child {
    font-size: .575em;
}
.tale-block .index .numbering {
    font-feature-settings: 'case', 'ss01', 'ss04', 'tnum';
    font-size: .825em;
}

.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: .825em;
}

.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; }

.description { grid-area: desc; }
.description > :not(.preview) { display: none; }
.description:not(:has(> .preview)) { display: none; } /* progressive enhancement */
.description > .preview {
    display: block;
    font-size: .9125em;
    padding-block-start: .425rem;
    border-block-start: .05rem solid #ddd;
}
.description > .preview > p:first-child { margin-block-start: 0.25em; }
.description > .preview > p:last-child { margin-block-end: 0.25em; }

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