mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-23 10:07:19 +00:00
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.
This commit is contained in:
Jeremy Ruston
parent
10a635927d
commit
7f3000aaae
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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`
|
||||
|
||||
Loading…
Reference in New Issue
Block a user