Fossil SCM
Moved the page title on mobile from after the project name and the slash separator in the header to just above the content area, styled as a separate "h1" element, same as in an embedded doc with an "h1" inline. This accommodates long page titles better on narrow screens while leaving desktop-class windows alone. Reduced the size of h1 to be closer to h2 as a consequence. Also removed the new logo's top-padding on mobile to fit in better with all this.
Commit
f2ef252ef8053905ba6dcffa5edb278d3ee82d5fa1ec70a955917c0f3b84dd53
Parent
45b055016078ca9…
2 files changed
+19
-7
+5
-1
+19
-7
| --- skins/default/css.txt | ||
| +++ skins/default/css.txt | ||
| @@ -25,22 +25,16 @@ | ||
| 25 | 25 | } |
| 26 | 26 | .title h1 { |
| 27 | 27 | display: inline; |
| 28 | 28 | font-size: 2.20em; |
| 29 | 29 | } |
| 30 | -.title h1:after { | |
| 31 | - content: " / "; | |
| 32 | - color: #777; | |
| 33 | - font-weight: normal; | |
| 34 | -} | |
| 35 | 30 | .status { |
| 36 | 31 | float: right; |
| 37 | 32 | font-size: 0.8em; |
| 38 | 33 | } |
| 39 | 34 | div.logo { |
| 40 | 35 | float: left; |
| 41 | - padding-top: 10px; | |
| 42 | 36 | padding-right: 10px; |
| 43 | 37 | } |
| 44 | 38 | div.logo img { |
| 45 | 39 | max-height: 2em; /* smaller than title to keep it above the baseline */ |
| 46 | 40 | } |
| @@ -113,11 +107,11 @@ | ||
| 113 | 107 | |
| 114 | 108 | .content { |
| 115 | 109 | padding: 1ex; |
| 116 | 110 | color: #444; |
| 117 | 111 | } |
| 118 | -.content h1 { font-size: 1.80em; } | |
| 112 | +.content h1 { font-size: 1.60em; } | |
| 119 | 113 | .content h2 { font-size: 1.45em; } |
| 120 | 114 | .content h3 { font-size: 1.15em; } |
| 121 | 115 | .content h4 { font-size: 1.05em; } |
| 122 | 116 | .content h5 { font-size: 1.00em; } |
| 123 | 117 | |
| @@ -390,10 +384,17 @@ | ||
| 390 | 384 | } |
| 391 | 385 | .title { |
| 392 | 386 | padding-top: 0px; |
| 393 | 387 | padding-bottom: 0px; |
| 394 | 388 | } |
| 389 | + .title > .page-title { | |
| 390 | + display: none; /* use h1 in body area, below menu bar */ | |
| 391 | + } | |
| 392 | + h1.page-title { | |
| 393 | + font-size: 1.60em; /* match content > h1 */ | |
| 394 | + margin-bottom: 0; /* div.content top margin suffices */ | |
| 395 | + } | |
| 395 | 396 | .status {padding-top: 0px;} |
| 396 | 397 | .mainmenu a { |
| 397 | 398 | padding: 8px 10px; |
| 398 | 399 | } |
| 399 | 400 | .mainmenu { |
| @@ -408,10 +409,21 @@ | ||
| 408 | 409 | } |
| 409 | 410 | .title { |
| 410 | 411 | padding-top: 10px; |
| 411 | 412 | padding-bottom: 10px; |
| 412 | 413 | } |
| 414 | + .title h1:after { | |
| 415 | + content: " / "; | |
| 416 | + color: #777; | |
| 417 | + font-weight: normal; | |
| 418 | + } | |
| 419 | + h1.page-title { | |
| 420 | + display: none; /* use h1 in title area, above menu bar */ | |
| 421 | + } | |
| 422 | + div.logo { | |
| 423 | + padding-top: 10px; | |
| 424 | + } | |
| 413 | 425 | .status {padding-top: 30px;} |
| 414 | 426 | .mainmenu a { |
| 415 | 427 | padding: 8px 20px; |
| 416 | 428 | } |
| 417 | 429 | .mainmenu { |
| 418 | 430 |
| --- skins/default/css.txt | |
| +++ skins/default/css.txt | |
| @@ -25,22 +25,16 @@ | |
| 25 | } |
| 26 | .title h1 { |
| 27 | display: inline; |
| 28 | font-size: 2.20em; |
| 29 | } |
| 30 | .title h1:after { |
| 31 | content: " / "; |
| 32 | color: #777; |
| 33 | font-weight: normal; |
| 34 | } |
| 35 | .status { |
| 36 | float: right; |
| 37 | font-size: 0.8em; |
| 38 | } |
| 39 | div.logo { |
| 40 | float: left; |
| 41 | padding-top: 10px; |
| 42 | padding-right: 10px; |
| 43 | } |
| 44 | div.logo img { |
| 45 | max-height: 2em; /* smaller than title to keep it above the baseline */ |
| 46 | } |
| @@ -113,11 +107,11 @@ | |
| 113 | |
| 114 | .content { |
| 115 | padding: 1ex; |
| 116 | color: #444; |
| 117 | } |
| 118 | .content h1 { font-size: 1.80em; } |
| 119 | .content h2 { font-size: 1.45em; } |
| 120 | .content h3 { font-size: 1.15em; } |
| 121 | .content h4 { font-size: 1.05em; } |
| 122 | .content h5 { font-size: 1.00em; } |
| 123 | |
| @@ -390,10 +384,17 @@ | |
| 390 | } |
| 391 | .title { |
| 392 | padding-top: 0px; |
| 393 | padding-bottom: 0px; |
| 394 | } |
| 395 | .status {padding-top: 0px;} |
| 396 | .mainmenu a { |
| 397 | padding: 8px 10px; |
| 398 | } |
| 399 | .mainmenu { |
| @@ -408,10 +409,21 @@ | |
| 408 | } |
| 409 | .title { |
| 410 | padding-top: 10px; |
| 411 | padding-bottom: 10px; |
| 412 | } |
| 413 | .status {padding-top: 30px;} |
| 414 | .mainmenu a { |
| 415 | padding: 8px 20px; |
| 416 | } |
| 417 | .mainmenu { |
| 418 |
| --- skins/default/css.txt | |
| +++ skins/default/css.txt | |
| @@ -25,22 +25,16 @@ | |
| 25 | } |
| 26 | .title h1 { |
| 27 | display: inline; |
| 28 | font-size: 2.20em; |
| 29 | } |
| 30 | .status { |
| 31 | float: right; |
| 32 | font-size: 0.8em; |
| 33 | } |
| 34 | div.logo { |
| 35 | float: left; |
| 36 | padding-right: 10px; |
| 37 | } |
| 38 | div.logo img { |
| 39 | max-height: 2em; /* smaller than title to keep it above the baseline */ |
| 40 | } |
| @@ -113,11 +107,11 @@ | |
| 107 | |
| 108 | .content { |
| 109 | padding: 1ex; |
| 110 | color: #444; |
| 111 | } |
| 112 | .content h1 { font-size: 1.60em; } |
| 113 | .content h2 { font-size: 1.45em; } |
| 114 | .content h3 { font-size: 1.15em; } |
| 115 | .content h4 { font-size: 1.05em; } |
| 116 | .content h5 { font-size: 1.00em; } |
| 117 | |
| @@ -390,10 +384,17 @@ | |
| 384 | } |
| 385 | .title { |
| 386 | padding-top: 0px; |
| 387 | padding-bottom: 0px; |
| 388 | } |
| 389 | .title > .page-title { |
| 390 | display: none; /* use h1 in body area, below menu bar */ |
| 391 | } |
| 392 | h1.page-title { |
| 393 | font-size: 1.60em; /* match content > h1 */ |
| 394 | margin-bottom: 0; /* div.content top margin suffices */ |
| 395 | } |
| 396 | .status {padding-top: 0px;} |
| 397 | .mainmenu a { |
| 398 | padding: 8px 10px; |
| 399 | } |
| 400 | .mainmenu { |
| @@ -408,10 +409,21 @@ | |
| 409 | } |
| 410 | .title { |
| 411 | padding-top: 10px; |
| 412 | padding-bottom: 10px; |
| 413 | } |
| 414 | .title h1:after { |
| 415 | content: " / "; |
| 416 | color: #777; |
| 417 | font-weight: normal; |
| 418 | } |
| 419 | h1.page-title { |
| 420 | display: none; /* use h1 in title area, above menu bar */ |
| 421 | } |
| 422 | div.logo { |
| 423 | padding-top: 10px; |
| 424 | } |
| 425 | .status {padding-top: 30px;} |
| 426 | .mainmenu a { |
| 427 | padding: 8px 20px; |
| 428 | } |
| 429 | .mainmenu { |
| 430 |
+5
-1
| --- skins/default/header.txt | ||
| +++ skins/default/header.txt | ||
| @@ -31,11 +31,14 @@ | ||
| 31 | 31 | </th1> |
| 32 | 32 | <a href="$logourl"> |
| 33 | 33 | <img src="$logo_image_url" border="0" alt="$project_name"> |
| 34 | 34 | </a> |
| 35 | 35 | </div> |
| 36 | - <div class="title"><h1>$<project_name></h1>$<title></div> | |
| 36 | + <div class="title"> | |
| 37 | + <h1>$<project_name></h1> | |
| 38 | + <span class="page-title">$<title></span> | |
| 39 | + </div> | |
| 37 | 40 | <div class="status"><th1> |
| 38 | 41 | if {[info exists login]} { |
| 39 | 42 | html "<a href='$home/login'>$login</a>\n" |
| 40 | 43 | } else { |
| 41 | 44 | html "<a href='$home/login'>Login</a>\n" |
| @@ -56,5 +59,6 @@ | ||
| 56 | 59 | } |
| 57 | 60 | html "<a href='$url' class='$class'>$name</a>\n" |
| 58 | 61 | } |
| 59 | 62 | </th1></div> |
| 60 | 63 | <div id='hbdrop'></div> |
| 64 | +<h1 class="page-title">$<title></h1> | |
| 61 | 65 |
| --- skins/default/header.txt | |
| +++ skins/default/header.txt | |
| @@ -31,11 +31,14 @@ | |
| 31 | </th1> |
| 32 | <a href="$logourl"> |
| 33 | <img src="$logo_image_url" border="0" alt="$project_name"> |
| 34 | </a> |
| 35 | </div> |
| 36 | <div class="title"><h1>$<project_name></h1>$<title></div> |
| 37 | <div class="status"><th1> |
| 38 | if {[info exists login]} { |
| 39 | html "<a href='$home/login'>$login</a>\n" |
| 40 | } else { |
| 41 | html "<a href='$home/login'>Login</a>\n" |
| @@ -56,5 +59,6 @@ | |
| 56 | } |
| 57 | html "<a href='$url' class='$class'>$name</a>\n" |
| 58 | } |
| 59 | </th1></div> |
| 60 | <div id='hbdrop'></div> |
| 61 |
| --- skins/default/header.txt | |
| +++ skins/default/header.txt | |
| @@ -31,11 +31,14 @@ | |
| 31 | </th1> |
| 32 | <a href="$logourl"> |
| 33 | <img src="$logo_image_url" border="0" alt="$project_name"> |
| 34 | </a> |
| 35 | </div> |
| 36 | <div class="title"> |
| 37 | <h1>$<project_name></h1> |
| 38 | <span class="page-title">$<title></span> |
| 39 | </div> |
| 40 | <div class="status"><th1> |
| 41 | if {[info exists login]} { |
| 42 | html "<a href='$home/login'>$login</a>\n" |
| 43 | } else { |
| 44 | html "<a href='$home/login'>Login</a>\n" |
| @@ -56,5 +59,6 @@ | |
| 59 | } |
| 60 | html "<a href='$url' class='$class'>$name</a>\n" |
| 61 | } |
| 62 | </th1></div> |
| 63 | <div id='hbdrop'></div> |
| 64 | <h1 class="page-title">$<title></h1> |
| 65 |