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

New Life — 8 — 01 Feb 2024 11:44 —odoubluf
The Hermit — 19 — 14 Oct 2023 22:17 —meltedbee
Angelero — 7 — 04 Sep 2023 07:05 —Din-Bidor
Erit Lux 1: A Deal — 1 — 05 Aug 2023 03:25 —Brift
A Short Written Account of the Various Tea and Refreshments Sections Scattered Across the Library by a Dapper Handsome Creature — 15 — 22 Mar 2023 13:55 —basirskipreader
A World Of Beauty — 4 — 17 Mar 2023 00:04 —Voiiiii
Dr. Avenlee's Archives — 8 — 27 Feb 2023 16:55 —Dr Avenlee
Conquering the Worm — 14 — 27 Jan 2023 05:19 —Din-Bidor
Cyberscum and Blues — 12 — 03 Dec 2022 00:15 —Din-Bidor
Cempasúchil — 16 — 31 Oct 2022 02:27 —Din-Bidor
Selling/Sold — 23 — 21 Oct 2022 16:43 —Snapdragon133
Picturepalooza Contest — 44 — 23 Aug 2022 20:03 —Rounderhouse
Biopunked — 21 — 04 Aug 2022 20:33 —Din-Bidor
The Lion Bleeds Stark Epiphanies — 11 — 16 Jun 2022 05:11 —lzhoudidion
Umbral — 19 — 07 Jun 2022 16:59 —Din-Bidor
Just A Triq — 6 — 27 May 2022 21:02 —MsDirection
Ramblings Of A Retired Tramp — 21 — 19 Mar 2022 04:55 —lzhoudidion
Playing Pretend — 21 — 18 Jan 2022 22:05 —IronShears
Omega Resigns — 13 — 21 Dec 2021 03:03 —Muse Hill
They Are Wrong — 17 — 12 Sep 2021 02:57 —Limeyy

page 1 of 3123next »

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