Fossil SCM
Changes to the CSS for the default skin so that it works better on mobile.
Commit
c565732f78b03407839c237351295357ee5c22a0270de292ae6330abb43b5227
Parent
bd2bf81c352f679…
1 file changed
+37
-6
+37
-6
| --- skins/default/css.txt | ||
| +++ skins/default/css.txt | ||
| @@ -1,8 +1,7 @@ | ||
| 1 | 1 | body { |
| 2 | 2 | margin: 0 auto; |
| 3 | - padding: 0px 20px; | |
| 4 | 3 | background-color: white; |
| 5 | 4 | font-family: sans-serif; |
| 6 | 5 | font-size:14pt; |
| 7 | 6 | -moz-text-size-adjust: none; |
| 8 | 7 | -webkit-text-size-adjust: none; |
| @@ -26,12 +25,10 @@ | ||
| 26 | 25 | } |
| 27 | 26 | |
| 28 | 27 | .title { |
| 29 | 28 | color: #4183C4; |
| 30 | 29 | float:left; |
| 31 | - padding-top: 30px; | |
| 32 | - padding-bottom: 10px; | |
| 33 | 30 | } |
| 34 | 31 | .title h1 { |
| 35 | 32 | display:inline; |
| 36 | 33 | } |
| 37 | 34 | .title h1:after { |
| @@ -75,26 +72,23 @@ | ||
| 75 | 72 | } |
| 76 | 73 | |
| 77 | 74 | .status { |
| 78 | 75 | float:right; |
| 79 | 76 | font-size:.7em; |
| 80 | - padding-top:50px; | |
| 81 | 77 | } |
| 82 | 78 | |
| 83 | 79 | .mainmenu { |
| 84 | 80 | font-size:.8em; |
| 85 | 81 | clear:both; |
| 86 | - padding:10px; | |
| 87 | 82 | background:#eaeaea linear-gradient(#fafafa, #eaeaea) repeat-x; |
| 88 | 83 | border:1px solid #eaeaea; |
| 89 | 84 | border-radius:5px; |
| 90 | 85 | overflow-x: auto; |
| 91 | 86 | white-space: nowrap; |
| 92 | 87 | } |
| 93 | 88 | |
| 94 | 89 | .mainmenu a { |
| 95 | - padding: 10px 20px; | |
| 96 | 90 | text-decoration:none; |
| 97 | 91 | color: #777; |
| 98 | 92 | border-right:1px solid #eaeaea; |
| 99 | 93 | } |
| 100 | 94 | .mainmenu a.active, |
| @@ -210,5 +204,42 @@ | ||
| 210 | 204 | white-space: nowrap; |
| 211 | 205 | } |
| 212 | 206 | div.submenu label { |
| 213 | 207 | white-space: nowrap; |
| 214 | 208 | } |
| 209 | + | |
| 210 | +@media screen and (max-width: 600px) { | |
| 211 | + /* Adjustments for mobile */ | |
| 212 | + body { | |
| 213 | + padding-left: 4px; | |
| 214 | + padding-right: 4px; | |
| 215 | + } | |
| 216 | + .title { | |
| 217 | + padding-top: 0px; | |
| 218 | + padding-bottom: 0px; | |
| 219 | + } | |
| 220 | + .status {padding-top: 0px;} | |
| 221 | + .mainmenu a { | |
| 222 | + padding: 10px 10px; | |
| 223 | + } | |
| 224 | + .mainmenu { | |
| 225 | + padding: 10px; | |
| 226 | + } | |
| 227 | +} | |
| 228 | +@media screen and (min-width: 600px) { | |
| 229 | + /* Spacing for desktop */ | |
| 230 | + body { | |
| 231 | + padding-left: 20px; | |
| 232 | + padding-right: 20px; | |
| 233 | + } | |
| 234 | + .title { | |
| 235 | + padding-top: 30px; | |
| 236 | + padding-bottom: 10px; | |
| 237 | + } | |
| 238 | + .status {padding-top: 50px;} | |
| 239 | + .mainmenu a { | |
| 240 | + padding: 10px 20px; | |
| 241 | + } | |
| 242 | + .mainmenu { | |
| 243 | + padding: 10px; | |
| 244 | + } | |
| 245 | +} | |
| 215 | 246 |
| --- skins/default/css.txt | |
| +++ skins/default/css.txt | |
| @@ -1,8 +1,7 @@ | |
| 1 | body { |
| 2 | margin: 0 auto; |
| 3 | padding: 0px 20px; |
| 4 | background-color: white; |
| 5 | font-family: sans-serif; |
| 6 | font-size:14pt; |
| 7 | -moz-text-size-adjust: none; |
| 8 | -webkit-text-size-adjust: none; |
| @@ -26,12 +25,10 @@ | |
| 26 | } |
| 27 | |
| 28 | .title { |
| 29 | color: #4183C4; |
| 30 | float:left; |
| 31 | padding-top: 30px; |
| 32 | padding-bottom: 10px; |
| 33 | } |
| 34 | .title h1 { |
| 35 | display:inline; |
| 36 | } |
| 37 | .title h1:after { |
| @@ -75,26 +72,23 @@ | |
| 75 | } |
| 76 | |
| 77 | .status { |
| 78 | float:right; |
| 79 | font-size:.7em; |
| 80 | padding-top:50px; |
| 81 | } |
| 82 | |
| 83 | .mainmenu { |
| 84 | font-size:.8em; |
| 85 | clear:both; |
| 86 | padding:10px; |
| 87 | background:#eaeaea linear-gradient(#fafafa, #eaeaea) repeat-x; |
| 88 | border:1px solid #eaeaea; |
| 89 | border-radius:5px; |
| 90 | overflow-x: auto; |
| 91 | white-space: nowrap; |
| 92 | } |
| 93 | |
| 94 | .mainmenu a { |
| 95 | padding: 10px 20px; |
| 96 | text-decoration:none; |
| 97 | color: #777; |
| 98 | border-right:1px solid #eaeaea; |
| 99 | } |
| 100 | .mainmenu a.active, |
| @@ -210,5 +204,42 @@ | |
| 210 | white-space: nowrap; |
| 211 | } |
| 212 | div.submenu label { |
| 213 | white-space: nowrap; |
| 214 | } |
| 215 |
| --- skins/default/css.txt | |
| +++ skins/default/css.txt | |
| @@ -1,8 +1,7 @@ | |
| 1 | body { |
| 2 | margin: 0 auto; |
| 3 | background-color: white; |
| 4 | font-family: sans-serif; |
| 5 | font-size:14pt; |
| 6 | -moz-text-size-adjust: none; |
| 7 | -webkit-text-size-adjust: none; |
| @@ -26,12 +25,10 @@ | |
| 25 | } |
| 26 | |
| 27 | .title { |
| 28 | color: #4183C4; |
| 29 | float:left; |
| 30 | } |
| 31 | .title h1 { |
| 32 | display:inline; |
| 33 | } |
| 34 | .title h1:after { |
| @@ -75,26 +72,23 @@ | |
| 72 | } |
| 73 | |
| 74 | .status { |
| 75 | float:right; |
| 76 | font-size:.7em; |
| 77 | } |
| 78 | |
| 79 | .mainmenu { |
| 80 | font-size:.8em; |
| 81 | clear:both; |
| 82 | background:#eaeaea linear-gradient(#fafafa, #eaeaea) repeat-x; |
| 83 | border:1px solid #eaeaea; |
| 84 | border-radius:5px; |
| 85 | overflow-x: auto; |
| 86 | white-space: nowrap; |
| 87 | } |
| 88 | |
| 89 | .mainmenu a { |
| 90 | text-decoration:none; |
| 91 | color: #777; |
| 92 | border-right:1px solid #eaeaea; |
| 93 | } |
| 94 | .mainmenu a.active, |
| @@ -210,5 +204,42 @@ | |
| 204 | white-space: nowrap; |
| 205 | } |
| 206 | div.submenu label { |
| 207 | white-space: nowrap; |
| 208 | } |
| 209 | |
| 210 | @media screen and (max-width: 600px) { |
| 211 | /* Adjustments for mobile */ |
| 212 | body { |
| 213 | padding-left: 4px; |
| 214 | padding-right: 4px; |
| 215 | } |
| 216 | .title { |
| 217 | padding-top: 0px; |
| 218 | padding-bottom: 0px; |
| 219 | } |
| 220 | .status {padding-top: 0px;} |
| 221 | .mainmenu a { |
| 222 | padding: 10px 10px; |
| 223 | } |
| 224 | .mainmenu { |
| 225 | padding: 10px; |
| 226 | } |
| 227 | } |
| 228 | @media screen and (min-width: 600px) { |
| 229 | /* Spacing for desktop */ |
| 230 | body { |
| 231 | padding-left: 20px; |
| 232 | padding-right: 20px; |
| 233 | } |
| 234 | .title { |
| 235 | padding-top: 30px; |
| 236 | padding-bottom: 10px; |
| 237 | } |
| 238 | .status {padding-top: 50px;} |
| 239 | .mainmenu a { |
| 240 | padding: 10px 20px; |
| 241 | } |
| 242 | .mainmenu { |
| 243 | padding: 10px; |
| 244 | } |
| 245 | } |
| 246 |