Map Sidebar Legibility Upgrades en

Installations 21 Likes 0

Sidebar

Provides a number of improvements to entity and marker text formatting in the side panel of map Explore views:

Text alignment is set to justify by default for a cleaner column look, but can be customized.
Font size is increased slightly to compensate for the font face being different from that used in the rest of Kanka. You can change it as well if you use an altogether different font.
Adds a delimiting line between the marker’s description and the associated entity’s entry, when both are present.

Customization

The following properties can be added to your campaign CSS for easy customization:

#map-body .sidebar {
	--map-sidebar-text-align: justify;
	--map-sidebar-hyphenate: manual; /* Set to 'auto' for automatic hyphenation (Firefox and Safari only; support depends on your language) */
	--map-sidebar-font-size: 15px; /* Ideal for Source Sans Pro */
}

More sidebar goodness

This theme pairs well with Scrollable Map Sidebar for space optimization.

Want to show appreciation for my plugins or request one-on-one CSS help? I accept tips on Ko-fi (no account needed):

Latest version 4 View content

Released 2 years ago

Fixed the separation between marker and entry text to account for the new position of the entity title.

Plugin CSS for 4


/* BEGIN Map Sidebar Legibility Upgrades by Salvatos */
#map-body .sidebar {
	--map-sidebar-text-align: justify;
  	--map-sidebar-hyphenate: manual;
	--map-sidebar-font-size: 15px; /* Ideal for Source Sans Pro */
}
/* Text alignment */
#map-body .sidebar .entity-content :is(p, li) {
	text-align: var(--map-sidebar-text-align);
  	hyphens: var(--map-sidebar-hyphenate);
	font-size: var(--map-sidebar-font-size);
}

/* Separate marker text and entity entry */
#map-body .marker-entry.entity-content + .marker-entry.entity-content {
	border-top: 2px solid #eee;
	padding-top: 10px;
}
/* END Map Sidebar Legibility Upgrades by Salvatos */