1
0
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:
Jermolene 2014-07-06 16:55:51 +01:00
parent 241d19bef8
commit 21c137a66c
11 changed files with 43 additions and 42 deletions

View File

@ -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
* *

View File

@ -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

View File

@ -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;

View File

@ -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 {

View File

@ -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>>
} }

View File

@ -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 (&#96;) 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"/>

View File

@ -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 "

View 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

View File

@ -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`

View File

@ -0,0 +1,3 @@
title: $:/themes/tiddlywiki/vanilla/settings/
fontfamily: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif

View File

@ -1,4 +0,0 @@
title: $:/themes/tiddlywiki/vanilla/settings
type: application/x-tiddler-dictionary
fontfamily: `"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif`