mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-09-28 23:10:46 +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:
parent
241d19bef8
commit
21c137a66c
@ -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`
|
|
Loading…
Reference in New Issue
Block a user