mirror of
				https://github.com/Jermolene/TiddlyWiki5
				synced 2025-10-31 07:32:59 +00:00 
			
		
		
		
	Refactor theme tweaks as individual tiddlers
The trouble with the previous approach of storing several settings in a single data tiddler was that it made it hard to introduce new settings. Users who already have a custom copy of the settings/metrics tiddler wouldn’t get the default settings. The new approach uses individual tiddlers for each setting. This commit also introduces a new theme tweak for the cutoff width for switching between responsive views.
This commit is contained in:
		| @@ -7,6 +7,10 @@ caption: 5.0.14-beta | |||||||
|  |  | ||||||
| //[[See GitHub for detailed change history of this release|https://github.com/Jermolene/TiddlyWiki5/compare/v5.0.13-beta...v5.0.14-beta]]// | //[[See GitHub for detailed change history of this release|https://github.com/Jermolene/TiddlyWiki5/compare/v5.0.13-beta...v5.0.14-beta]]// | ||||||
|  |  | ||||||
|  | !! Incompatible Changes | ||||||
|  |  | ||||||
|  | * Theme tweaks (in [[control panel|$:/ControlPanel]] under the ''Appearance'' tab) will not be upgraded from TiddlyWiki versions prior to 5.0.14-beta. You'll need to re-apply any customisations after upgrading | ||||||
|  |  | ||||||
| !! Accessibility Improvements | !! Accessibility Improvements | ||||||
|  |  | ||||||
| *  | *  | ||||||
|   | |||||||
| @@ -25,7 +25,7 @@ The tiddler dictionary format is an alternative syntax for data tiddlers: | |||||||
| * The ContentType field `type` is set to `application/x-tiddler-dictionary` | * The ContentType field `type` is set to `application/x-tiddler-dictionary` | ||||||
| * The `text` field consists of one or more lines of the form `<name>:<value>` | * The `text` field consists of one or more lines of the form `<name>:<value>` | ||||||
|  |  | ||||||
| For example, the [[metrics of the Vanilla theme|$:/themes/tiddlywiki/vanilla/metrics]] are a tiddler dictionary. | For example, palettes such as the [[default Vanilla palette|$:/palettes/Vanilla]] are tiddler dictionaries. | ||||||
|  |  | ||||||
| ! Accessing data within data tiddlers | ! Accessing data within data tiddlers | ||||||
|  |  | ||||||
|   | |||||||
| @@ -3,7 +3,7 @@ tags: [[$:/tags/stylesheet]] | |||||||
|  |  | ||||||
| \rules only filteredtranscludeinline transcludeinline macrodef macrocallinline | \rules only filteredtranscludeinline transcludeinline macrodef macrocallinline | ||||||
|  |  | ||||||
| @media (min-width: 770px) { | @media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) { | ||||||
|  |  | ||||||
| 	html .tw-page-container { | 	html .tw-page-container { | ||||||
| 		text-align: center; | 		text-align: center; | ||||||
|   | |||||||
| @@ -59,7 +59,7 @@ Rules copied from Snow White | |||||||
| Seamless modifications | Seamless modifications | ||||||
| */ | */ | ||||||
|  |  | ||||||
| @media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics##storywidth}}) { | @media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) { | ||||||
|  |  | ||||||
| 	/* Drop the tiddler frame padding */ | 	/* Drop the tiddler frame padding */ | ||||||
| 	body.tw-body .tw-tiddler-frame { | 	body.tw-body .tw-tiddler-frame { | ||||||
|   | |||||||
| @@ -17,7 +17,7 @@ tags: [[$:/tags/stylesheet]] | |||||||
| 	} | 	} | ||||||
| } | } | ||||||
|  |  | ||||||
| @media (max-width: 770px) { | @media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) { | ||||||
| 	.tw-tiddler-frame { | 	.tw-tiddler-frame { | ||||||
| 		<<box-shadow none>> | 		<<box-shadow none>> | ||||||
| 	} | 	} | ||||||
|   | |||||||
| @@ -4,19 +4,17 @@ caption: Theme Tweaks | |||||||
|  |  | ||||||
| You can tweak certain aspects of the ''Vanilla'' theme. | You can tweak certain aspects of the ''Vanilla'' theme. | ||||||
|  |  | ||||||
| //Take care to preserve any backticks (`) in the settings// |  | ||||||
|  |  | ||||||
| ! Settings | ! Settings | ||||||
|  |  | ||||||
| * Font family: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/settings" index="fontfamily" default="" tag="input"/> | * Font family: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/settings/fontfamily" default="" tag="input"/> | ||||||
|  |  | ||||||
| ! Sizes | ! Sizes | ||||||
|  |  | ||||||
| * Font size: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics" index="fontsize" default="" tag="input"/> | * Font size: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/fontsize" default="" tag="input"/> | ||||||
| * Line height: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics" index="lineheight" default="" tag="input"/> | * Line height: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/lineheight" default="" tag="input"/> | ||||||
| * Story left position //(the distance between the left of the screen and the left margin of the story river or tiddler area)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics" index="storyleft" default="" tag="input"/> | * Story left position //(the distance between the left of the screen and the left margin of the story river or tiddler area)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storyleft" default="" tag="input"/> | ||||||
| * Story top position //(the distance between the top of the screen ad the top margin of the story river or tiddler area)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics" index="storytop" default="" tag="input"/> | * Story top position //(the distance between the top of the screen ad the top margin of the story river or tiddler area)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storytop" default="" tag="input"/> | ||||||
| * Story right //(the distance between the left side of the screen and the left margin of the sidebar area)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics" index="storyright" default="" tag="input"/> | * Story right //(the distance between the left side of the screen and the left margin of the sidebar area)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storyright" default="" tag="input"/> | ||||||
| * Story width //(the width of the story river or tiddler area)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics" index="storywidth" default="" tag="input"/> | * Story width //(the width of the story river or tiddler area)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storywidth" default="" tag="input"/> | ||||||
| * Tiddler width //(the width of individual tiddlers -- used for zoomin storyview)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics" index="tiddlerwidth" default="" tag="input"/> | * Tiddler width //(the width of individual tiddlers -- used for zoomin storyview)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth" default="" tag="input"/> | ||||||
|  | * Sidebar breakpoint //(the minimum width for the sidebar to be displayed above the story river)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint" default="" tag="input"/> | ||||||
|   | |||||||
| @@ -23,7 +23,7 @@ html button { | |||||||
| */ | */ | ||||||
|  |  | ||||||
| html { | html { | ||||||
| 	font-family: {{$:/themes/tiddlywiki/vanilla/settings##fontfamily}}; | 	font-family: {{$:/themes/tiddlywiki/vanilla/settings/fontfamily}}; | ||||||
| 	text-rendering: optimizeLegibility; /* Enables kerning and ligatures etc. */	 | 	text-rendering: optimizeLegibility; /* Enables kerning and ligatures etc. */	 | ||||||
| } | } | ||||||
|  |  | ||||||
| @@ -32,8 +32,8 @@ html:-webkit-full-screen { | |||||||
| } | } | ||||||
|  |  | ||||||
| body.tw-body { | body.tw-body { | ||||||
| 	font-size: {{$:/themes/tiddlywiki/vanilla/metrics##fontsize}}; | 	font-size: {{$:/themes/tiddlywiki/vanilla/metrics/fontsize}}; | ||||||
| 	line-height: {{$:/themes/tiddlywiki/vanilla/metrics##lineheight}}; | 	line-height: {{$:/themes/tiddlywiki/vanilla/metrics/lineheight}}; | ||||||
| 	color: <<colour foreground>>; | 	color: <<colour foreground>>; | ||||||
| 	background-color: <<colour page-background>>; | 	background-color: <<colour page-background>>; | ||||||
| 	word-wrap: break-word; | 	word-wrap: break-word; | ||||||
| @@ -434,7 +434,7 @@ a.tw-tiddlylink-external:hover { | |||||||
| 	min-height: 100%; | 	min-height: 100%; | ||||||
| } | } | ||||||
|  |  | ||||||
| @media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics##storywidth}}) { | @media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) { | ||||||
|  |  | ||||||
| 	.sidebar-header { | 	.sidebar-header { | ||||||
| 		padding: 14px; | 		padding: 14px; | ||||||
| @@ -447,7 +447,7 @@ a.tw-tiddlylink-external:hover { | |||||||
| 	} | 	} | ||||||
| } | } | ||||||
|  |  | ||||||
| @media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics##storywidth}}) { | @media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) { | ||||||
|  |  | ||||||
| 	.tw-message-box { | 	.tw-message-box { | ||||||
| 		margin: 21px -21px 21px -21px; | 		margin: 21px -21px 21px -21px; | ||||||
| @@ -455,8 +455,8 @@ a.tw-tiddlylink-external:hover { | |||||||
|  |  | ||||||
| 	.tw-sidebar-scrollable { | 	.tw-sidebar-scrollable { | ||||||
| 		position: fixed; | 		position: fixed; | ||||||
| 		top: {{$:/themes/tiddlywiki/vanilla/metrics##storytop}}; | 		top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}}; | ||||||
| 		left: {{$:/themes/tiddlywiki/vanilla/metrics##storyright}}; | 		left: {{$:/themes/tiddlywiki/vanilla/metrics/storyright}}; | ||||||
| 		bottom: 0; | 		bottom: 0; | ||||||
| 		right: 0; | 		right: 0; | ||||||
| 		overflow-y: auto; | 		overflow-y: auto; | ||||||
| @@ -468,9 +468,9 @@ a.tw-tiddlylink-external:hover { | |||||||
|  |  | ||||||
| 	.story-river { | 	.story-river { | ||||||
| 		position: relative; | 		position: relative; | ||||||
| 		left: {{$:/themes/tiddlywiki/vanilla/metrics##storyleft}}; | 		left: {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}; | ||||||
| 		top: {{$:/themes/tiddlywiki/vanilla/metrics##storytop}}; | 		top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}}; | ||||||
| 		width: {{$:/themes/tiddlywiki/vanilla/metrics##storywidth}}; | 		width: {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}}; | ||||||
| 		padding: 42px 42px 42px 42px; | 		padding: 42px 42px 42px 42px; | ||||||
| 	} | 	} | ||||||
|  |  | ||||||
| @@ -537,7 +537,7 @@ a.tw-tiddlylink-external:hover { | |||||||
| .tw-view-field-value { | .tw-view-field-value { | ||||||
| } | } | ||||||
|  |  | ||||||
| @media (max-width: 770px) { | @media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) { | ||||||
| 	.tw-tiddler-frame { | 	.tw-tiddler-frame { | ||||||
| 		padding: 14px 14px 14px 14px; | 		padding: 14px 14px 14px 14px; | ||||||
| 	} | 	} | ||||||
| @@ -547,10 +547,10 @@ a.tw-tiddlylink-external:hover { | |||||||
| 	} | 	} | ||||||
| } | } | ||||||
|  |  | ||||||
| @media (min-width: 770px) { | @media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) { | ||||||
| 	.tw-tiddler-frame { | 	.tw-tiddler-frame { | ||||||
| 		padding: 28px 42px 42px 42px; | 		padding: 28px 42px 42px 42px; | ||||||
| 		width: {{$:/themes/tiddlywiki/vanilla/metrics##tiddlerwidth}}; | 		width: {{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}}; | ||||||
| 	} | 	} | ||||||
|  |  | ||||||
| <<if-no-sidebar " | <<if-no-sidebar " | ||||||
|   | |||||||
							
								
								
									
										10
									
								
								themes/tiddlywiki/vanilla/metrics.multids
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										10
									
								
								themes/tiddlywiki/vanilla/metrics.multids
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,10 @@ | |||||||
|  | title: $:/themes/tiddlywiki/vanilla/metrics/ | ||||||
|  |  | ||||||
|  | fontsize: 14px | ||||||
|  | lineheight: 20px | ||||||
|  | storyleft: 0px | ||||||
|  | storytop: 0px | ||||||
|  | storyright: 770px | ||||||
|  | storywidth: 770px | ||||||
|  | tiddlerwidth: 686px | ||||||
|  | sidebarbreakpoint: 960px | ||||||
| @@ -1,10 +0,0 @@ | |||||||
| title: $:/themes/tiddlywiki/vanilla/metrics |  | ||||||
| type: application/x-tiddler-dictionary |  | ||||||
|  |  | ||||||
| fontsize: `14px` |  | ||||||
| lineheight: `20px` |  | ||||||
| storyleft: `0px` |  | ||||||
| storytop: `0px` |  | ||||||
| storyright: `770px` |  | ||||||
| storywidth: `770px` |  | ||||||
| tiddlerwidth: `686px` |  | ||||||
							
								
								
									
										3
									
								
								themes/tiddlywiki/vanilla/settings.multids
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										3
									
								
								themes/tiddlywiki/vanilla/settings.multids
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,3 @@ | |||||||
|  | title: $:/themes/tiddlywiki/vanilla/settings/ | ||||||
|  |  | ||||||
|  | fontfamily: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif | ||||||
| @@ -1,4 +0,0 @@ | |||||||
| title: $:/themes/tiddlywiki/vanilla/settings |  | ||||||
| type: application/x-tiddler-dictionary |  | ||||||
|  |  | ||||||
| fontfamily: `"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif` |  | ||||||
		Reference in New Issue
	
	Block a user
	 Jermolene
					Jermolene