1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-01-23 15:36:52 +00:00

Better styling for smartphone sized screens

This commit is contained in:
Jeremy Ruston 2012-07-13 22:20:39 +01:00
parent fa67259d6d
commit 95e48b39d9
2 changed files with 38 additions and 11 deletions

View File

@ -5006,7 +5006,6 @@ Base re-definitions
body { body {
position: relative; position: relative;
padding-top: 40px; padding-top: 40px;
background: #eeeeee;
} }
/* /*
@ -5015,13 +5014,25 @@ Tiddler styles
.tw-story-element { .tw-story-element {
position: relative; position: relative;
padding: 30px 30px 30px 30px; }
margin: 30px 5px 30px 5px;
background-color: #fff; @media (min-width: 480px) {
border: 1px solid #999; .tw-story-element {
-webkit-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4); padding: 30px 30px 30px 30px;
-moz-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4); margin: 30px 5px 30px 5px;
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4); background-color: #fff;
border: 1px solid #999;
-webkit-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
}
body {
background: #eeeeee;
}
}
@media (max-width: 480px) {
} }
.tw-story-element .body { .tw-story-element .body {

View File

@ -42,7 +42,6 @@ Base re-definitions
body { body {
position: relative; // So that height: 100% will fit to the body position: relative; // So that height: 100% will fit to the body
background: @grayLighter; // So that the tiddlers pop out more
padding-top: @navbarHeight; // Allow for the navbar padding-top: @navbarHeight; // Allow for the navbar
} }
@ -52,11 +51,28 @@ Tiddler styles
.tw-story-element { .tw-story-element {
position: relative; position: relative;
margin: 30px 5px 30px 5px; }
@media (min-width: 480px) {
.tw-story-element {
padding: 30px 30px 30px 30px; padding: 30px 30px 30px 30px;
margin: 30px 5px 30px 5px;
border: 1px solid #999; border: 1px solid #999;
background-color: #fff;
.box-shadow(1px 1px 6px rgba(0,0,0,0.4)); .box-shadow(1px 1px 6px rgba(0,0,0,0.4));
background-color: #fff;
}
body {
background: @grayLighter; // So that the tiddlers pop out more
}
}
@media (max-width: 480px) {
} }
.tw-story-element .body { .tw-story-element .body {