Mercurial > dottes
comparison web/css/dottes.css @ 319:cbe9c10b5a3e
Render tune title, subtitle and composer in Latex/HTML and not in the image.
This way the titles remains a constant size even if the image needs to be scaled.
And we have that text appearance under our control.
I can't find a way of switching off the tune title in abcm2ps, and have worked around
by setting the title format to Y0. Y is not a defined ABC header and is not found in
any Dottes tune.
| author | Jim Hague <jim.hague@acm.org> |
|---|---|
| date | Tue, 16 Jul 2013 16:35:07 +0100 |
| parents | 1e4443d58177 |
| children | 27f29e8aafea |
comparison
equal
deleted
inserted
replaced
| 318:77372a0166fe | 319:cbe9c10b5a3e |
|---|---|
| 9 font-family: 'Oswald', serif; | 9 font-family: 'Oswald', serif; |
| 10 } | 10 } |
| 11 | 11 |
| 12 h1 { | 12 h1 { |
| 13 background: white; | 13 background: white; |
| 14 font-weight: normal; | |
| 15 text-align: center; | 14 text-align: center; |
| 16 font-size: 25px; | 15 font-size: 25px; |
| 17 font-weight: bold; | 16 font-weight: bold; |
| 18 } | 17 } |
| 19 | 18 |
| 119 div.dottes-transpose-tune-types | 118 div.dottes-transpose-tune-types |
| 120 { | 119 { |
| 121 width: 30%; | 120 width: 30%; |
| 122 } | 121 } |
| 123 | 122 |
| 123 div.dottes-tune-display | |
| 124 { | |
| 125 margin: 10px; | |
| 126 } | |
| 127 | |
| 128 div.dottes-tune-header | |
| 129 { | |
| 130 display: table; | |
| 131 width: 100%; | |
| 132 } | |
| 133 | |
| 134 div.dottes-tune-header-row | |
| 135 { | |
| 136 display: table-row; | |
| 137 } | |
| 138 | |
| 139 div.dottes-tune-header-left | |
| 140 { | |
| 141 display: table-cell; | |
| 142 width: 25%; | |
| 143 } | |
| 144 | |
| 145 div.dottes-tune-header-middle | |
| 146 { | |
| 147 display: table-cell; | |
| 148 } | |
| 149 | |
| 150 div.dottes-tune-header-middle h1 | |
| 151 { | |
| 152 font-size: 25px; | |
| 153 font-weight: bold; | |
| 154 text-align: center; | |
| 155 margin: 0px; | |
| 156 } | |
| 157 | |
| 158 div.dottes-tune-header-middle h2 | |
| 159 { | |
| 160 font-size: 15px; | |
| 161 font-weight: normal; | |
| 162 text-align: center; | |
| 163 margin: 0px; | |
| 164 } | |
| 165 | |
| 166 div.dottes-tune-header-right | |
| 167 { | |
| 168 display: table-cell; | |
| 169 text-align: right; | |
| 170 width: 25%; | |
| 171 } | |
| 172 | |
| 124 a.dottes-tune-link | 173 a.dottes-tune-link |
| 125 { | 174 { |
| 126 font-size: 20px; | 175 font-size: 20px; |
| 127 position: relative; | 176 position: relative; |
| 128 top: 12px; | 177 top: 12px; |
| 141 | 190 |
| 142 img.dottes-png | 191 img.dottes-png |
| 143 { | 192 { |
| 144 display: block; | 193 display: block; |
| 145 width: 100%; /* Make image fill width */ | 194 width: 100%; /* Make image fill width */ |
| 146 /* margin-left: auto; /* Centre image */ | 195 margin-top: 10px; |
| 147 /* margin-right: auto; */ | 196 margin-bottom: 10px; |
| 148 } | 197 } |
| 149 | 198 |
| 150 ul.tune-data-list | 199 ul.tune-data-list |
| 151 { | 200 { |
| 152 list-style-type: none; | 201 list-style-type: none; |
| 202 margin: 0px; | |
| 153 } | 203 } |
| 154 | 204 |
| 155 ul.tune-data-list li | 205 ul.tune-data-list li |
| 156 { | 206 { |
| 157 display: inline; | 207 display: inline; |
| 158 margin: 10px; | 208 margin-left: 0; |
| 209 margin-right: 20px; | |
| 159 } | 210 } |
| 160 | 211 |
| 161 div.dottes-tune-list | 212 div.dottes-tune-list |
| 162 { | 213 { |
| 163 display: table; | 214 display: table; |
| 186 display: none; | 237 display: none; |
| 187 } | 238 } |
| 188 | 239 |
| 189 div.dottes-change-yes | 240 div.dottes-change-yes |
| 190 { | 241 { |
| 191 display: block; | |
| 192 margin: 10px; | |
| 193 } | 242 } |
| 194 | 243 |
| 195 div.dottes-change-link | 244 div.dottes-change-link |
| 196 { | 245 { |
| 197 } | 246 } |