From 7f3000aaaece1cec516f066cf518b27e4d2feb47 Mon Sep 17 00:00:00 2001
From: Jeremy Ruston <jeremy@osmosoft.com>
Date: Sun, 15 Sep 2013 11:01:35 +0100
Subject: [PATCH] Update the Snow White theme to use px for dimensions instead
of em
The old behaviour meant that resizing the base font resized every page
element in proportion. The new behaviour makes the text resize within a
fixed layout, so that one can alter the number of characters displayed
on each line of a tiddler. The old behaviour can usually be emulated by
using the browser page zoom tool.
---
themes/tiddlywiki/centralised/styles.tid | 8 +-
themes/tiddlywiki/snowwhite/base.tid | 112 +++++++++++------------
themes/tiddlywiki/snowwhite/metrics.tid | 8 +-
3 files changed, 64 insertions(+), 64 deletions(-)
diff --git a/themes/tiddlywiki/centralised/styles.tid b/themes/tiddlywiki/centralised/styles.tid
index 5f979826e..4ef4ba7c7 100644
--- a/themes/tiddlywiki/centralised/styles.tid
+++ b/themes/tiddlywiki/centralised/styles.tid
@@ -3,7 +3,7 @@ tags: [[$:/tags/stylesheet]]
\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline
-@media (min-width: 55em) {
+@media (min-width: 770px) {
.tw-page-container {
text-align: center;
@@ -11,8 +11,8 @@ tags: [[$:/tags/stylesheet]]
.story-river {
position: relative;
- width: 55em;
- padding: 3em;
+ width: 770px;
+ padding: 42px;
margin: 0 auto;
text-align: left;
}
@@ -21,6 +21,6 @@ tags: [[$:/tags/stylesheet]]
text-align: left;
left: 50%;
right: 0;
- padding-left: 29.5em;
+ padding-left: 413px;
}
}
diff --git a/themes/tiddlywiki/snowwhite/base.tid b/themes/tiddlywiki/snowwhite/base.tid
index 2b6d3211a..3a207146c 100644
--- a/themes/tiddlywiki/snowwhite/base.tid
+++ b/themes/tiddlywiki/snowwhite/base.tid
@@ -94,8 +94,8 @@ code {
pre {
display: block;
- padding: 1em;
- margin: 0 0 1em;
+ padding: 14px;
+ margin: 0 0 14px;
word-break: break-all;
word-wrap: break-word;
white-space: pre;
@@ -112,7 +112,7 @@ table {
}
table th, table td {
- padding: 0 0.5em 0 0.5em;
+ padding: 0 7px 0 7px;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
}
@@ -132,7 +132,7 @@ table tfoot tr td {
embed {
max-width: 100%;
- height: 20em;
+ max-height: 280px;
}
/*
@@ -259,11 +259,11 @@ a.tw-tiddlylink-external {
.tw-tag-list-item {
display: inline-block;
- margin-right: 0.5em;
+ margin-right: 7px;
}
.tw-tags-wrapper {
- margin: 0.25em 0 1em 0;
+ margin: 4px 0 14px 0;
}
.tw-missing-tiddler-label {
@@ -279,9 +279,9 @@ a.tw-tiddlylink-external {
.tw-tag-label {
display: inline-block;
padding: 2px 9px;
- font-size: 11.844px;
+ font-size: 0.9em;
font-weight: 300;
- line-height: 14px;
+ line-height: 1.2em;
color: #fff;
white-space: nowrap;
vertical-align: baseline;
@@ -309,8 +309,8 @@ a.tw-tiddlylink-external {
}
.sidebar-header .tw-sidebar-lists p {
- margin-top: 0.2em;
- margin-bottom: 0.2em;
+ margin-top: 3px;
+ margin-bottom: 3px;
}
.tw-search a svg {
@@ -318,11 +318,11 @@ a.tw-tiddlylink-external {
}
.tw-search-results {
- padding-top: 1em;
+ padding-top: 14px;
}
.tw-page-controls {
- margin-top: 1em;
+ margin-top: 14px;
}
.tw-page-controls a.tw-tiddlylink:hover {
@@ -356,12 +356,12 @@ a.tw-tiddlylink-external {
}
.tw-menu-list-subitem {
- padding-left: 0.5em;
+ padding-left: 7px;
}
@media (max-width: {{$:/themes/tiddlywiki/snowwhite/metrics##storywidth}}) {
.sidebar-header {
- padding: 1em;
+ padding: 14px;
}
.story-river {
@@ -379,8 +379,8 @@ a.tw-tiddlylink-external {
overflow-y: auto;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
- margin: 0 0 0 -3em;
- padding: 6em 0 2em 3em;
+ margin: 0 0 0 -42px;
+ padding: 84px 0 28px 42px;
}
.story-river {
@@ -388,7 +388,7 @@ a.tw-tiddlylink-external {
left: {{$:/themes/tiddlywiki/snowwhite/metrics##storyleft}};
top: {{$:/themes/tiddlywiki/snowwhite/metrics##storytop}};
width: {{$:/themes/tiddlywiki/snowwhite/metrics##storywidth}};
- padding: 3em;
+ padding: 42px;
}
}
@@ -398,7 +398,7 @@ a.tw-tiddlylink-external {
}
.story-river {
- margin-left: 1em;
+ margin-left: 14px;
}
}
@@ -407,13 +407,13 @@ a.tw-tiddlylink-external {
*/
.tw-tiddler-frame {
- margin-bottom: 2em;
+ margin-bottom: 28px;
background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##tiddlerbackground}};
}
.tw-tiddler-info {
overflow: hidden;
- padding: 1em 3em 1em 3em;
+ padding: 14px 42px 14px 42px;
background-color: #f8f8f8;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
@@ -439,30 +439,30 @@ a.tw-tiddlylink-external {
}
}
-@media (max-width: 55em) {
+@media (max-width: 77px) {
.tw-tiddler-frame {
- padding: 1em 1em 1em 1em;
+ padding: 14px 14px 14px 14px;
}
.tw-tiddler-info {
- margin: 0 -1em 0 -1em;
+ margin: 0 -14px 0 -14px;
}
}
-@media (min-width: 55em) {
+@media (min-width: 77px) {
.tw-tiddler-frame {
- padding: 2em 3em 3em 3em;
+ padding: 28px 42px 42px 42px;
}
.tw-tiddler-info {
- margin: 0 -3em 0 -3em;
+ margin: 0 -42px 0 -42px;
}
}
.title {
font-weight: 300;
- font-size: 33px;
- line-height: 40px;
+ font-size: 2.35em;
+ line-height: 1.2em;
color: #182955;
}
@@ -486,7 +486,7 @@ a.tw-tiddlylink-external {
}
.tw-tiddler-controls .tw-button {
- margin: 0 0 0 0.33em;
+ margin: 0 0 0 5px;
vertical-align: baseline;
}
@@ -508,7 +508,7 @@ a.tw-tiddlylink-external {
.tw-tiddler-help { /* Help prompts within tiddler template */
color: #999;
- margin-top: 1em;
+ margin-top: 14px;
}
.tw-tiddler-help a.tw-tiddlylink {
@@ -521,7 +521,7 @@ a.tw-tiddlylink-external {
border: 1px solid #ccc;
line-height: 1.3em;
-webkit-appearance: none;
- margin: 0.25em 0 0.25em 0;
+ margin: 4px 0 4px 0;
}
.tw-tiddler-frame .tw-edit-texteditor input {
@@ -550,12 +550,12 @@ canvas.tw-edit-bitmapeditor {
*/
.tw-edit-tags-list {
- margin: 1em 0 1em 0;
+ margin: 14px 0 14px 0;
}
.tw-tag-editor-label {
display: inline-block;
- margin-right: 0.5em;
+ margin-right: 7px;
}
.tw-remove-tag-button {
@@ -568,20 +568,20 @@ canvas.tw-edit-bitmapeditor {
.tw-tags-autocomplete {
position: absolute;
- min-width: 20em;
+ min-width: 280px;
border: 1px solid {{$:/themes/tiddlywiki/snowwhite/colourmappings##dropdownborder}};
background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##dropdownbackground}};
<<border-radius 4px>>
<<box-shadow "2px 2px 10px rgba(0, 0, 0, 0.5)">>
padding: 0 0 0 0;
- margin: 0.25em 0 0 0;
+ margin: 4px 0 0 0;
white-space: nowrap;
z-index: 1000;
}
.tw-tags-autocomplete a {
display: block;
- padding: 0.25em 1em 0.25em 1em;
+ padding: 4px 14px 4px 14px;
}
.tw-tags-autocomplete a:hover {
@@ -671,19 +671,19 @@ canvas.tw-edit-bitmapeditor {
*/
.tw-drop-down {
- min-width: 20em;
+ min-width: 280px;
border: 1px solid {{$:/themes/tiddlywiki/snowwhite/colourmappings##dropdownborder}};
background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##dropdownbackground}};
<<border-radius 4px>>
<<box-shadow "2px 2px 10px rgba(0, 0, 0, 0.5)">>
- padding: 0.5em 0em 0.5em 0em;
- margin: 0.25em 0 0 0;
+ padding: 7px 0 7px 0;
+ margin: 4px 0 0 0;
white-space: nowrap;
}
.tw-drop-down a {
display: block;
- padding: 0em 1em 0em 1em;
+ padding: 0 14px 0 14px;
}
.tw-drop-down a:hover {
@@ -790,11 +790,11 @@ canvas.tw-edit-bitmapeditor {
.tw-notification {
position: fixed;
- top: 1em;
- right: 1em;
+ top: 14px;
+ right: 14px;
z-index: 1000;
- max-width: 20em;
- padding: 0em 1em 0em 1em;
+ max-width: 280px;
+ padding: 0 14px 0 14px;
background-color: #ffd;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.3);
@@ -824,8 +824,8 @@ canvas.tw-edit-bitmapeditor {
border-top: 1px solid #bbb;
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
- margin-left: 0.25em;
- margin-right: 0.25em;
+ margin-left: 4px;
+ margin-right: 4px;
font-weight: 300;
}
@@ -839,7 +839,7 @@ canvas.tw-edit-bitmapeditor {
}
.tw-tab-content {
- padding-top: 1em;
+ padding-top: 14px;
}
.tw-sidebar-tab-divider.tw-tab-divider {
@@ -852,9 +852,9 @@ canvas.tw-edit-bitmapeditor {
white-space: nowrap;
}
-@media (min-width: 55em) {
+@media (min-width: 770px) {
.tw-more-sidebar.tw-tab-set {
- margin-left: -1em;
+ margin-left: -14px;
}
}
@@ -862,15 +862,15 @@ canvas.tw-edit-bitmapeditor {
display: inline-block;
vertical-align: top;
text-align: right;
- padding-top: 0em;
- padding-left: 0em;
+ padding-top: 0;
+ padding-left: 0;
}
.tw-more-sidebar .tw-tab-content {
display: inline-block;
vertical-align: top;
- padding-top: 0em;
- padding-left: 1em;
+ padding-top: 0;
+ padding-left: 14px;
}
.tw-more-sidebar .tw-tab-buttons button {
@@ -894,14 +894,14 @@ canvas.tw-edit-bitmapeditor {
.tw-alert {
<<border-radius 6px>>
- margin: 0.5em 0.5em 0.5em 0.5em;
- padding: 1em 1em 1em 1em;
+ margin: 7px 7px 7px 7px;
+ padding: 14px 14px 14px 14px;
border: 3px solid #DBB727;
background-color: rgb(250, 210, 50);
}
.tw-static-alert {
- padding: 0em 0.2em 0.2em 3em;
+ padding: 0 2px 2px 42px;
color: #AAA;
}
diff --git a/themes/tiddlywiki/snowwhite/metrics.tid b/themes/tiddlywiki/snowwhite/metrics.tid
index a284e34cf..b4d40cedb 100644
--- a/themes/tiddlywiki/snowwhite/metrics.tid
+++ b/themes/tiddlywiki/snowwhite/metrics.tid
@@ -3,7 +3,7 @@ type: application/x-tiddler-dictionary
fontsize: `14px`
lineheight: `20px`
-storyleft: `0em`
-storytop: `0em`
-storyright: `55em`
-storywidth: `55em`
+storyleft: `0px`
+storytop: `0px`
+storyright: `770px`
+storywidth: `770px`