Cafe Theme
Image.
Cafe Theme is an aesthetic theme by EstrellaYoshte, because the Wanderer's Library probably has like a gazillion coffee shops catered to all walks of life.
How to include

To put this theme on your page, slap this somewhere in your page:
[[include :wanderers-library:component:cafe]]
Here's some links for you:
Examples

A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.
Titles can be created by putting between one and six plus "+" at the start of the line
+ Titles
This is a tab view.
This is a blockquote, created by putting "> " at the start of each line.
More text

That's a horizontal rule

Nested blockquotes

And another¹
This is a	table
You should know	how to make these
already
[[div class="cafe-receipt"]]
The body font is Zilla Slab.
The Header and Title font is Barlow.
The UI font used is Space Grotesk.
Source Code

+ show block
– hide block
@import url('https://api.fonts.coollabs.io/css2?family=Barlow:ital,wght@0,200;0,400;0,700;1,200;1,400;1,700&display=swap');
@import url('https://api.fonts.coollabs.io/css2?family=Space+Grotesk&display=swap');
@import url('https://api.fonts.coollabs.io/css2?family=Zilla+Slab:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 
:root {
    --bright-accent: 238,194,145;
    --medium-accent: 249, 131, 94;
    --white-monochrome: 245,242,234;
    --pale-gray-monochrome: 247,230,173;
    --light-gray-monochrome: 205, 160, 50;
    --dark-gray-monochrome: 32, 27, 26;
    --header-height-on-desktop: 26.25rem;
    --header-height-on-mobile: 22.5rem;
    --topbar-height-on-desktop: 2.5rem;
    --header-font: 'Barlow', Candara, Calibri, Arial, sans-serif;
    --title-font: var(--header-font);
    --UI-font: 'Space Grotesk', Segoe, Segoe UI, Candara, Calibri, Arial, sans-serif;
    --body-font: 'Zilla Slab', serif;
 
    --header-title: "Café Wayfarer";
    --header-subtitle: "Refreshments for the Learned Mind";
    --header-image:  url(https://wanderers-library.wdfiles.com/local--files/component%3Acafe/Bakery_products_of_Caf%C3%A9_W%2C_Brighton_2023-07-13.jpg);
    --gradient-header: var(--header-image);
    --footer-image: url(https://wanderers-library.wdfiles.com/local--files/component%3Acafe/Piccolo_at_filter_coffee_at_Wood_St_Coffee%2C_Walthamstow.jpg);
 
    --rating-module-text-color: var(--black-monochrome);
    --rating-module-text-hover-color: var(--white-monochrome);
    --modal-header-stripe: var(--black-monochrome);
    --hover-link-color: var(--bright-accent);
    --visited-link-color: var(--medium-accent);
    --link-color: var(--swatch-tertiary-color);
    --hoverblock-txt: var(--white-monochrome);
    --hoverblock-footer-txt: var(--swatch-tertiary-color);
 
    --menu-roundness: 2.25rem;
}
 
/*---------------------*/
/*------- HEADER -------*/
/*---------------------*/
 
#header {
    position: static;
    grid-template-rows: calc(var(--search-height) + 0.875rem) auto 1fr calc(var(--search-height) + 0.9rem);
    grid-template-columns: 1fr min(calc(100% - 1.5rem), var(--header-width-on-desktop)) 1fr;
    background-image:  linear-gradient(to bottom, rgb(var(--black-monochrome),0.375) calc(var(--search-height) + 0.875rem), rgb(var(--black-monochrome),0.775)), var(--gradient-header);
}
 
#header::before {
    grid-row: 1/2;
    opacity: 1;
    background: unset;
    background-color: rgb(var(--swatch-topmenu-bg-color));
}
#header::after {
    content: "";
    display: block;
    grid-row: 1/2;
    grid-column: 2/3;
    justify-self: center;
    width: calc(var(--search-height)*2 + .5rem);
    height: calc(var(--search-height)*2 + .5rem);
    padding: 0.5rem;
    border-radius: 50%;
    background: var(--logo-image) no-repeat center;
    background-size: calc(100% - 1rem);
    background-color: rgb(var(--swatch-topmenu-bg-color));
    pointer-events: none;
}
 
/*------- Header Title -------*/
 
#header h1 {
    grid-row: 3/4;
    padding-block: 1.125rem 1.875rem;
}
#header h1 a { grid-gap: .625rem; }
#header h1 a::before {
    text-shadow: none;
    font-weight: 200;
    font-size: 1.675em;
    line-height: .875;
}
#header h1 a::after {
    all: unset;
    content: var(--header-subtitle);
    color: rgb(var(--swatch-text-secondary-color));
    font-family: var(--body-font);
    font-size: 0.575em;
    letter-spacing: .05vw;
    line-height: 1.5;
}
 
/*------- Top Bar -------*/
 
#header div#top-bar {
    grid-row: 2/3;
    background: unset;
    padding-block-start: calc(var(--search-height) + 0.25rem);
}
#top-bar div[class*="top-bar"] > ul {
    border-bottom: solid 0.01rem rgb(var(--white-monochrome), .375);
}
#top-bar div[class*="top-bar"] > ul > li > ul {
    border: none;
}
#header div[class*=top-bar]>ul>li>a {
    text-shadow: 0 0 .25rem rgb(var(--dropdown-bg-color));
}
 
#header div[class*=top-bar]>ul>li>a::before { display: none; }
 
/*------- Other -------*/
 
#login-status {
    z-index: 51;
}
#login-status #account-options { background-image: unset; }
 
#header-extra-div-3 {
    position: relative;
    grid-row: 4/5;
    grid-column: 1/4;
}
#header-extra-div-3::before {
    content: "";
    position: absolute;
    bottom: -.05rem;
    left: 0;
    width: 100%;
    height: 0.1rem;
    background-color: rgb(var(--swatch-background));
}
 
#header-extra-div-3::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.125rem; height: 2.125rem;
    border-radius: 50%;
    background-color: rgb(var(--swatch-background));
}
#header-extra-div-3 span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: calc(var(--search-height) + 0.875rem) calc(var(--search-height) + 0.875rem) 0 0;
    background-color: rgb(var(--swatch-background));
    -webkit-mask-image: radial-gradient(circle at top, transparent 0, transparent calc(var(--search-height) + 0.85rem), black calc(var(--search-height) + 0.875rem));
    mask-image: radial-gradient(circle at top, transparent 0, transparent calc(var(--search-height) + 0.85rem), black calc(var(--search-height) + 0.875rem));
}
 
/*---------------------*/
/*------- SIDEBAR-------*/
/*---------------------*/
 
#side-bar .close-menu::before,
#side-bar .close-menu::after {
    top: 0.5rem;
    left: 0.625rem;
}
#side-bar .close-menu::after { border: none; }
 
/*---------------------*/
/*------- MAIN -------*/
/*---------------------*/
 
#main-content {
     padding-block: 0;
 
    --blockquote-bg-color: var(--swatch-secondary-color), 0.125;
}
 
#page-title, .meta-title {
    margin-block: .5em;
}
#page-title::before, .meta-title::before,
#page-title::after, .meta-title::after {
    background-image: unset;
}
 
h1, h2, h3, h4, h5, h6 {
    --wght: 400;
}
 
:where(#main-content) a {
    border-bottom: solid 0.05rem;
    text-decoration-color: transparent!important;
}
span.printuser a:first-of-type:not(:last-of-type) { border: none; }
 
div.rate-box-with-credit-button, div.page-rate-widget-box {
    background: unset;
    padding: calc(var(--menu-roundness)*.15);
    border: solid 0.05rem rgb(var(--bright-accent));
    border-radius: var(--menu-roundness);
    background-color: rgb(var(--swatch-secondary-color), 0.25);
}
div.page-rate-widget-box :is(.rateup,.ratedown,.cancel) a::after,
div.rate-box-with-credit-button div.page-rate-widget-box :is(.rateup,.ratedown,.cancel) a::after {
    border-radius: var(--menu-roundness);
}
 
div:is(.image-block,.scp-image-block) {
    background-color: rgb(var(--dark-gray-monochrome));
    border-radius: var(--menu-roundness);
    padding: calc(var(--menu-roundness)*.5);
    padding-block-end: calc(var(--menu-roundness)*.325);
    gap: calc(var(--menu-roundness)*.25);
    box-shadow: 0 0.05rem 0.325rem rgb(var(--black-monochrome),.5);
}
div:is(.image-block,.scp-image-block) img {
    border-radius: calc(var(--menu-roundness) * .5 + 0.25rem);
}
:is(div.image-block,div.scp-image-block) :is(.image-caption,.scp-image-caption) {
    color: rgb(var(--swatch-secondary-color));
    padding: 0;
    background-color: transparent;
    font-size: 1.125em;
    font-family: var(--title-font);
    --wght: 400;
}
 
:is(blockquote,div.blockquote,[class*=blockquote]) {
    box-shadow: none;
    margin-block-start: 1.325rem;
    padding-inline: 1.375rem;
    --_size: calc(var(--menu-roundness)*.5);
}
:is(blockquote,div.blockquote,[class*=blockquote])::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    box-sizing: border-box;
    border: solid 0.125rem rgb(var(--blockquote-border-color));
    border-radius: calc(var(--menu-roundness)*.5);
    clip-path: polygon(calc(var(--_size) - .125rem/2) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--_size) - .125rem/2), calc(var(--_size) - .125rem/2) calc(var(--_size) - .125rem/2));
    pointer-events: none;
}
:is(blockquote,div.blockquote,[class*=blockquote])::after {
    content: "";
    position: absolute;
    top: calc(var(--_size)*-1);
    left: calc(var(--_size)*-1);
    width: calc(var(--_size)*2);
    height: calc(var(--_size)*2);
    border-radius: var(--_size);
    pointer-events: none;
    border: solid 0.125rem rgb(var(--blockquote-border-color));
    box-sizing: border-box;
    background-image: radial-gradient(circle at center, transparent calc(var(--_size)*.4125),rgb(var(--blockquote-border-color)) calc(var(--_size)*.4325), rgb(var(--blockquote-border-color)) calc(var(--_size)*.5), transparent calc(var(--_size)*.525));
    clip-path: polygon(50% .125rem, calc(100% - .125rem) calc(50% + .125rem/2),102% calc(50% + .125rem/2), 102% 100%, calc(50% + .125rem/2) 102%, calc(50% + .125rem/2) calc(100% - .125rem), .125rem 50%);
}
 
#main-content hr {
    background-image: unset;
    height: 0.05rem;
    margin-block: 1.5rem;
}
 
#page-content .yui-navset {
    isolation: isolate;
}
:is(.yui-navset,.yui-navset-top,.yui-navset-bottom) .yui-nav {
    background: rgb(var(--swatch-primary-darkest));
    padding: calc(var(--menu-roundness)*.375);
    box-sizing: border-box;
    border-radius: calc(var(--menu-roundness)*.625);
    gap: calc(var(--menu-roundness)*.25);
    box-shadow: 0 0.05rem 0.325rem rgb(var(--black-monochrome),.5);
    clip-path: none;
}
.yui-navset .yui-nav li {
    border-radius: calc(var(--menu-roundness)*.25);
    overflow: hidden;
}
:is(.yui-navset,.yui-navset-top,.yui-navset-bottom) .yui-nav .selected { translate: 0; }
.yui-navset .yui-nav li a::before { border-radius: 0; }
 
:is(.yui-navset,.yui-navset-top,.yui-navset-bottom) .yui-content {
    border-radius: calc(var(--menu-roundness)*.5);
    margin-block-start: calc(var(--menu-roundness)*-.875);
    padding-block-start: calc(var(--menu-roundness)*.875);
    position: relative;
    z-index: -1;
}
 
.hovertip {
    border-radius: calc(var(--menu-roundness)*.5);
    padding: calc(var(--menu-roundness)*.125);
}
.hovertip::before { border-radius: inherit; }
 
.cafe-receipt {
    width: min(100%, 32.5rem);
    font-family: var(--mono-font);
    isolation: isolate;
    margin: 1.5rem auto;
    padding: 1.75rem 1.375rem;
    padding-bottom: 3.25rem;
    box-sizing: border-box;
    position: relative;
    line-height: calc(var(--base-font-size)*1.25);
    filter: drop-shadow(0 0.05rem 0.175rem rgb(var(--black-monochrome),.25));
}
.cafe-receipt::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(var(--swatch-background));
    background-image: linear-gradient(to bottom, transparent 25%, rgb(var(--black-monochrome),0.05));
    filter: brightness(1.0375);
    --_mask: radial-gradient(1rem at 75% 100%,#0000 98%,#000) 50% calc(100% - 1rem)/4rem 100% repeat-x, radial-gradient(1rem at 25% 50%,#000 99%,#0000 101%) bottom/4rem 2rem repeat-x;
    -webkit-mask: var(--_mask);
    mask: var(--_mask);
    z-index: -1;
}
 
/*---------------------*/
/*------- BOTTOM -------*/
/*---------------------*/
 
#footer {
    position: relative;
    background-image: linear-gradient(to bottom, rgb(var(--black-monochrome),0.875), rgb(var(--black-monochrome),0.5)), var(--footer-image);
    background-size: cover;
    background-position: center;
    padding: 0.75rem;
    padding-top: 3.5rem;
}
#footer::before {
    content: "";
    position: absolute;
    top: -.1rem; left: 0;
    width: 100%; height: 2.75rem;
    border-radius: 0 0 2.75rem 2.75rem;
    background-color: rgb(var(--swatch-background));
}
 
#footer a { background: initial; }
 
/*---------------------*/
/*------- MOBILE QUERY -------*/
/*---------------------*/
 
@media only screen and (max-width: 56.25rem) {
#header {
    position: sticky;
    grid-template-rows: calc(var(--search-height) + 0.875rem) 1fr auto;
}
#header h1 {
    grid-row: 2/3;
    padding-block: 1.5rem 1rem;
}
#header div#top-bar {
    grid-row: 3/4;
    padding-block-start: 0;
}
#top-bar div[class*="top-bar"] > ul {
    border-bottom: none;
}
#header-extra-div-3 { display: none; }
#main-content { padding-block-start: 1.25rem; }
}
theme
page revision: 16, last edited: 07 Jan 2024 15:09
Edit Rate (+19) Tags Discuss (1) History Files Print Site tools + Options
The Wanderers' Library

Fiction from another world.

How to include

Examples

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

Source Code
