Yurt's Workbench

Proposals

Scroll Behaviour

Let's give the page smooth scroll behaviour:

html {
   scroll-behavior: smooth;
}

Try it by clicking one of the later headings in this table of contents!

General Bugs

Page Content

This is one I should really report onto the Black Highlighter github but I'll put it here too. The page content will expand in width readily when certain elements make it go wider, which breaks the flexiness of the layout entirely. This would be plaguing this page due to the CSS code blocks. This is fixed with:

#page-content {
    width: inherit;
}
Meta title

Again, really needs to be fixed on base BHL but we'll make do for now hey

.meta-title p {
    margin: 0;
}

You really should use a div_ instead to just remove the p tag altogether, but it's better for it to work either way.

Header

Top Bar

Under "Join and Create!" there is an input field. I'll make a few edits to it to make it 1.5rem high instead of 2rem high, just to help it fit into the rest of the items in the top bar lists. I'll add a gap between the input field and the button, too.

#top-bar div.top-bar div.newpage_dropdown div.new-page-box input.text {
    height: 1.5rem !important;
}
 
#top-bar div.top-bar div.newpage_dropdown div.new-page-box form, #top-bar div.mobile-top-bar div.newpage_dropdown div.new-page-box form, #top-bar div.top-bar div.newpage_dropdown div.new-page-box input {
    gap: 0.2rem;
}

Additionally, the code for the input field is:

[[module NewPage size="12" button="New Page"]]

The button is quite thick due to this, making the input field very small. I'd use a symbol instead, like:
[[module NewPage size="12" button="note_add"]]

We use this extra code for this:
/* ADD THIS BIT TO WANDERERS DUSTJACKET FONTS COMPONENT */
@font-face {
  font-family: material-icons;
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
 
/* this bit is just to put somewhere in the theme if you want some way to use the icons within the pages of the site */
.material-icons {
  font-family: material-icons;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}
 
/* Similar style here. You'd probably just have these in the same CSS rule but we're doing it seperate for clarity here */
#top-bar div.top-bar div.newpage_dropdown div.new-page-box input.button {
  height: 1.5rem !important;
  font-family: material-icons;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

And if we do that we should also allow the button to become that smaller width. We'll make it a square. We'll also need to change the grid code of the whole form to allow for it.

#top-bar div.top-bar div.newpage_dropdown div.new-page-box input.button {
    min-width: unset;
    width: 1.5rem;
}
 
#top-bar div.top-bar div.newpage_dropdown div.new-page-box form, #top-bar div.mobile-top-bar div.newpage_dropdown div.new-page-box form, #top-bar div.top-bar div.newpage_dropdown div.new-page-box input {
    grid-template-columns: auto auto;
}

Side Bar

New Page Button Form

I'm gonna do something similar to the topbar new page thing here.

First of all I'm going to remove the border that's on the left of it, I think it clutters it up… but moreover it has a double-opacity intersection bit in the bottom-left corner which looks weird in my opinion

#interwiki div.menu-item > div:not(:nth-child(2)):not(.collapsible-block), #side-bar div.menu-item > div:not(:nth-child(2)):not(.collapsible-block) {
    border-left: unset;
}

Instead of being a grid, this form is a flexbox. It really is a 1-dimensional layout so it really should be a flexbox, so this is great. Let's change the flex-direction to be a row, add a gap, change the height — also, there's some styling for the button and the input field. I changed the padding, too!

.side-block div:nth-of-type(1) form {
    flex-direction: row;
    padding: 0.5rem 0.6rem 0.6rem 0.6rem;
    height: 2rem;
    gap: 0.5rem;
}
 
#side-bar div.menu-item input.text {
    height: 2rem !important;
    margin-bottom: unset;
    box-sizing: border-box;
}
 
#side-bar .new-page-box .button {
    width: min-content;
    height: 2rem;
}
Menu items

The menu items use very large text which spills out of the actual items' links themselves, which in my opinion makes the sidebar quite cluttered. So instead of using font size to make the sidebar menu items have a sort of hierarchy to them, let's use font weight and style instead. Also, I changed the colour of the arrows on the sub-items to fit in more.

#interwiki div.menu-item a:visited, #interwiki div.menu-item.small a, #interwiki div.menu-item.small a:visited, #side-bar div.menu-item a, #side-bar div.menu-item a:visited, #side-bar div.menu-item.small a, #side-bar div.menu-item.small a:visited {
    font-size: -webkit-calc(var(--base-font-size)*(13/15));
    font-size: calc(var(--base-font-size)*(13/15));
    --wght: 700;
}
 
#side-bar div.sub-item .text, #side-bar div.sub-item a {
    font-size: -webkit-calc(var(--base-font-size)*(13/15));
    font-size: calc(var(--base-font-size)*(13/15));
    padding-left: 1.5em;
    --wght: 500;
    font-style: italic;
}
 
#side-bar div.sub-item .text::after, #side-bar div.sub-item a::after {
    left: 0.5rem;
    color: inherit;
    opacity: 0.5;
    font-style: normal;
}
Border showing up on the side of the page

This maybe isn't a bug? But I think it's a bug. I'm not sure. If you want it gone, then it's

#side-bar {
   box-sizing: border-box;
}

Also, the border on the right that's left after we do this is not as thick as the border on the left, which is uneven, so let's change it:

#interwiki .side-block, #side-bar .side-block {
    margin: .5rem 1rem 0 0;
}
Collapsible Text

The collapsible blocks used in the side bar have no variables set for their text when opened, so they default to "- Hide Block". This is sufficient, but it would be better if they retained their titles since they double as the headings for each collapsible section.

Just add the hide= argument to each one, like this:

[[collapsible show="+ Contests"]]

[[collapsible show="+ Contests" hide="- Contests"]]

On default BHL and themes based off of it (I'll use the Backrooms Wiki theme since I made it and it's awesome >:3 ) the sidebar looks organised and clean, and one of the reasons that contributes to the cleanliness of the design is that the collapsible blocks resemble headers:

Wanderer's Dust Jacket (WL) Hallprint (BKR)
wanderside.png backside(tehee).png

I'll change the selectors that the sidebar heading code uses to resolve this, and change the way the font weight and size are applied. To make room for the SSS header I expanded the width of the sidebar.

#side-bar .heading, #side-bar div.collapsible-block div.collapsible-block-folded, #side-bar div.collapsible-block div.collapsible-block-unfolded-link {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 2rem;
    box-shadow: 0 0.125rem 0 0 rgb(var(--swatch-primary-darker));
    font-family: var(--title-font);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: inherit;
    font-weight: inherit;
}
 
#side-bar div.collapsible-block div.collapsible-block-folded, #side-bar div.collapsible-block div.collapsible-block-unfolded-link {
    font-size: calc(var(--base-font-size)*0.88);
    font-weight: 400;
}
 
:root {
    --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 22);
}
Collapsible Menu Items

Sub items in the menu have a big border on the right to make it clear that they're sub-items instead of main items. This is useful in more minimalist BHL sidebars like on SCP or Backrooms (though I'm not sure SCP currently has collapsibles in its sidebar? not sure)

That being said, the sidebar on the Wanderer's Library is more ornate and busy to fit its own visual style. One example of this is the nice little arrow at the start of every sub-item in the collapsible menus. Due to this, I think it would be cleaner if the padding on the right was removed.

#side-bar div.collapsible-block div.collapsible-block-content {
    border-right: unset;
}

Widgets

TOC

The —swatch-tertiary-color here looks a bit out of place, let's swap it for a yellow colour:

#main-content {
    --toc-directory-lines-color: var(--swatch-primary-darker), 0.5;
}
Buttons & Tabs Border Radius

This is just a personal opinion thing, not a bug. I think the border radius for the buttons is too extreme, so I'll change it:

:not(.page-rate-widget-box):not(#search-top-box-form) > .owindow .button-bar a,
:not(.page-rate-widget-box):not(#search-top-box-form) > div.buttons input,
:not(.page-rate-widget-box):not(#search-top-box-form) > input.button,
:not(.page-rate-widget-box):not(#search-top-box-form) > button,
:not(.page-rate-widget-box):not(#search-top-box-form) > .button,
:not(.page-rate-widget-box):not(#search-top-box-form) > div.buttons input,
:not(.page-rate-widget-box):not(#search-top-box-form) > input.button,
:not(.page-rate-widget-box):not(#search-top-box-form) > button,
:not(.page-rate-widget-box):not(#search-top-box-form) > .btn {
    border-radius: 0.25rem;
}
 
.yui-navset .yui-nav li,
.yui-navset .yui-nav li a,
.yui-navset .yui-nav li a::before {
    border-radius: 0.5rem 0.5rem 0 0;
}
rating: +3+x
Page Rating Widget

Included page "component:open" does not exist (create it now)

testing how my info-ayers clone works on wl theme and if there're bugs i'll handle em

Included page "component:close" does not exist (create it now)

The look of the rating module has a pretty extreme gradient to it. It reminded me of the rating module from older versions of BHL. Here's my version of the rating module, based on that old BHL code.

#page-content .page-rate-widget-box, #page-content div.rate-box-with-credit-button {
    --box-shadow: rgba(var(--swatch-menubg-black-color),0.15);
    box-shadow: .0625rem .0625rem 0 var(--box-shadow);
    border: .0625rem solid rgba(var(--swatch-menubg-black-color),.25);
    background: linear-gradient(to top,rgba(var(--swatch-primary-darkest),.85) 0,rgb(var(--swatch-primary-darkest)) 100%);
    background-color: rgb(var(--swatch-background));
    padding: 0 .125rem;
}

For the infobox component, remove the background and border of the internal rating module.

#page-content div.rate-box-with-credit-button > div.page-rate-widget-box {
    background: unset;
    border: unset;
}

Colours

Link Colour

The link colour has pretty poor contrast with the background, which can present accessibility concerns for users. I'm just going to use:

:root {
    --link-color: var(--swatch-primary-darker);
}
Button and Tab bg/text

I'm just making a personal choice here and you should only implement this if you actually think it looks better, but I think it does.

:root {
    --ui-button-bg: var(--swatch-alternate-color);
    --ui-button-txt: var(--swatch-primary);
}
 
#main-content {
    --tabs-bg: var(--swatch-alternate-color);
    --tabs-txt: var(--swatch-primary);
}
Button shadow

This is lighter than the button instead of darker than it. This is a —swatch-tertiary-color. I'll just fix this with:

:root {
    --swatch-menubg-medium-color: var(--dark-gray-monochrome);
    --swatch-menubg-medium-dark-color: var(--dark-gray-monochrome);
}

The page bottom option buttons have their icon bg color changed manually which removes all the shadows.

Let's change the way this is implemented to use the BHL variable for this instead! Here:

div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form) > a.btn {
    box-shadow: -.125rem 0 .25rem 0 rgba(var(--swatch-tertiary-color),.25),inset 0-.0625rem 0 0 rgba(var(--swatch-tertiary-color),.75),0 0 0 0 rgb(var(--ui-button-hover-outline)),inset var(--icon-size)0 0 0 rgb(var(--ui-icon-bg));
}
 
div[id*="page-options-bottom"]:not(.page-rate-widget-box):not(#search-top-box-form) > a.btn {
    --ui-icon-bg: var(--bright-accent);
}

Let's, while we're at it, add a shadow to the tags. They're a weird shape so we need to use a CSS filter function.

#main-content .page-tags span {
    filter: drop-shadow(-.125rem 0 0.25rem rgba(var(--swatch-tertiary-color),.25));
}
Colours that shouldn't be the same, but are
Yellow

Multiple colours used in the theme are the same light yellow, which causes problems when it's called to be both the background and the text colour for an element. Let's resolve all those issues by choosing different colours.

Side bar colours are basically fine except for the collapsible block links, let's change those:

#side-bar,
#interwiki {
    /* Folded Colors */
    --sidebar-collapsible-fld-link-hover-bg: var(--swatch-primary);
    --sidebar-collapsible-fld-link-hover-color: var(--swatch-alternate-color);
    --sidebar-collapsible-fld-arrow-color:  var(--sideblock-heading-text-color);
    --sidebar-collapsible-fld-arrow-hover-color: var(--swatch-alternate-color);
 
    /* Unfolded Colors */
    --sidebar-collapsible-ufld-link-hover-bg: var(--swatch-primary);
    --sidebar-collapsible-ufld-link-hover-color: var(--swatch-alternate-color);
    --sidebar-collapsible-ufld-arrow-color: var(--sideblock-heading-text-color);
    --sidebar-collapsible-ufld-arrow-hover-color: var(--sidebar-collapsible-fld-arrow-hover-color);
}

Page watch options links at the bottom of the page become a big yellow rectangle on hover, let's fix that:

div.page-watch-options a:hover, div.page-watch-options a:active {
    color: rgb(var(--swatch-alternate-color));
}

Same happens for the info button within the rating module, let's change it:

#page-content div.rate-box-with-credit-button > .creditButton > p > a:is(:hover, :active, :focus, :focus-within)::before {
   background-color: rgb(var(--swatch-alternate-color));
}

Yellow rectangle problem on files table header and hover links:

table.page-files tbody tr th, table.page-files thead tr th {
    color: rgb(var(--swatch-alternate-color));
}
 
table.page-files tr > td > a:not(.btn):is(:hover, :active, :focus, :focus-within) {
    color: rgb(var(--swatch-alternate-color));
}
Green

As you can see on the license background and footer background (they shouldn't be the same colour) —swatch-primary-darkest and —swatch-alternate-color are the same. Let's just change one of them.

:root {
    --swatch-alternate-color: var(--gray-monochrome);
}

Footer

Link background on hover

The link background on hover is pale gray which is super low contrast, let's change it:

#license-area a:before{
    --license-link-hover-bg-color: var(--swatch-primary),0.3;
}
 
#footer a:before {
    --footer-link-hover-bg-color: var(--swatch-primary),0.3;
}









Testing Area

Meta Title

Meta Title + Rating Module

Included page "component:open" does not exist (create it now)

testing how my info-ayers clone works on wl theme and if there're bugs i'll handle em

Included page "component:close" does not exist (create it now)

The meta-titles have weird text alignment. I'll see if I can sort that out.

hi




1 (current: "object-fit: fill;")

2 (object-fit: cover;)

3 (object-fit: contain; "Temple" background)


STUFF

1969 pages on site.

1672 entries on site.

0 entries on site by roget.


Discord Feeds

Tools

Who invited this guy?
Type name of the user

images, not cc

DATA NOT FOUND — 15 — 12 Sep 2021 02:24 —LAN 2D
Daylight/Nightlight — 17 — 12 Sep 2021 01:55 —Taffeta
The War Comes To Markettown — 20 — 12 Sep 2021 01:25 —minmin
A Town sees Life. A Town sees Death. A Town sees Rebirth. — 7 — 12 Sep 2021 00:32 —Maxyfran73
Black and White and Is My Face Red — 15 — 11 Sep 2021 20:36 —HarryBlank
A watcher, a painter, and an unbearable wait — 19 — 11 Sep 2021 15:17 —LAN 2D
TBGOL's Song and Lore — 11 — 05 Jul 2021 13:57 —DrLucis
2021 Community Survey Results — 15 — 05 Apr 2021 17:59 —Rounderhouse
The Desk of Issa-Antar — 12 — 27 Jan 2021 06:59 —MalyceGraves
Rough Sleeper — 14 — 24 Jan 2021 04:58 —Modulum
Nekra Myrminkia (Dead Ants) — 28 — 23 Jan 2021 18:32 —Draven Addams
Homemade Venusian Cookies with Sulfurroot — 17 — 21 Jan 2021 19:41 —Draven Addams
Sludge Thompkins in: The Phantom From the Deep! (pt. 1) — 23 — 02 Dec 2020 20:11 —CadaverCommander
Homeland — 24 — 12 Aug 2020 23:03 —MalyceGraves
Heart Rot: Chapter 4 — 4 — 14 Feb 2020 03:44 —(user deleted)
Heart Rot: Chapter 2 — 8 — 27 Jan 2020 02:03 —(user deleted)
Book of the Hidden — 6 — 21 Nov 2018 15:29 —(user deleted)
Season's Greetings — 11 — 28 Dec 2016 03:17 —minmin
Prompt Archive — 2 — 22 Apr 2015 04:43 —TroyL
Make Like A Tree — 30 — 05 May 2013 03:20 —Dr Cuddles


Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License