/otwarchive

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

AO3-5203 giving CSS help documentation consistent spacing #3147

Merged
merged 1 commit into from Nov 25, 2017
Commits
Jump to file or symbol
Failed to load files and symbols.
+82 −64
Split
View
146 public/help/skins-creating.html
@@ -1,76 +1,88 @@
<dl id="help">
<dt>You can create new skins for the Archive using our wizard, or by writing your own CSS (cascading style sheets) code</dt>
- <dd>Note that for security reasons, you can only use a limited set of CSS code: all other declarations and comments will be removed!</dd>
+ <dd>
+ <p>
+ Note that for security reasons, you can only use a limited set of CSS code: all other declarations and comments will be removed!
+ </p>
+ </dd>
<dt>We allow the following properties including all their variations (and shorthand values)</dt>
<dd>
- <code>
- background, border, column, cue, font, layer-background, layout-grid,
- list-style, margin, marker, outline, overflow, padding, page-break, pause,
- scrollbar, text, transform, transition
- </code>
+ <p>
+ <code>
+ background, border, column, cue, font, layer-background, layout-grid,
+ list-style, margin, marker, outline, overflow, padding, page-break, pause,
+ scrollbar, text, transform, transition
+ </code>
+ </p>
</dd>
<dt>We also allow the following specific properties</dt>
<dd>
- <code>
- -replace, -use-link-source, accelerator, alignment-adjust,
- alignment-baseline, appearance, azimuth, baseline-shift, behavior,
- binding, bookmark-label, bookmark-level, bookmark-target, bottom,
- box-align, box-direction, box-flex, box-flex-group, box-lines, box-orient,
- box-pack, box-shadow, box-sizing, caption-side, clear, clip, color,
- color-profile, content, counter-increment, counter-reset, crop, cue,
- cue-after, cue-before, cursor, direction, display, dominant-baseline,
- drop-initial-after-adjust, drop-initial-after-align,
- drop-initial-before-adjust, drop-initial-before-align, drop-initial-size,
- drop-initial-value, elevation, empty-cells, filter, fit, fit-position,
- float, float-offset, font, font-effect, font-emphasize,
- font-emphasize-position, font-emphasize-style, font-family, font-size,
- font-size-adjust, font-smooth, font-stretch, font-style, font-variant,
- font-weight, grid-columns, grid-rows, hanging-punctuation, height,
- hyphenate-after, hyphenate-before, hyphenate-character, hyphenate-lines,
- hyphenate-resource, hyphens, icon, image-orientation, image-resolution,
- ime-mode, include-source, inline-box-align, layout-flow, left,
- letter-spacing, line-break, line-height, line-stacking,
- line-stacking-ruby, line-stacking-shift, line-stacking-strategy, mark,
- mark-after, mark-before, marks, marquee-direction, marquee-play-count,
- marquee-speed, marquee-style, max-height, max-width, min-height,
- min-width, move-to, nav-down, nav-index, nav-left, nav-right, nav-up,
- opacity, orphans, page, page-policy, phonemes, pitch, pitch-range,
- play-during, position, presentation-level, punctuation-trim, quotes,
- rendering-intent, resize, rest, rest-after, rest-before, richness, right,
- rotation, rotation-point, ruby-align, ruby-overhang, ruby-position,
- ruby-span, size, speak, speak-header, speak-numeral, speak-punctuation,
- speech-rate, stress, string-set, tab-side, table-layout, target,
- target-name, target-new, target-position, top, unicode-bibi, unicode-bidi,
- user-select, vertical-align, visibility, voice-balance, voice-duration,
- voice-family, voice-pitch, voice-pitch-range, voice-rate, voice-stress,
- voice-volume, volume, white-space, white-space-collapse, widows, width,
- word-break, word-spacing, word-wrap, writing-mode, z-index
- </code>
+ <p>
+ <code>
+ -replace, -use-link-source, accelerator, alignment-adjust,
+ alignment-baseline, appearance, azimuth, baseline-shift, behavior,
+ binding, bookmark-label, bookmark-level, bookmark-target, bottom,
+ box-align, box-direction, box-flex, box-flex-group, box-lines, box-orient,
+ box-pack, box-shadow, box-sizing, caption-side, clear, clip, color,
+ color-profile, content, counter-increment, counter-reset, crop, cue,
+ cue-after, cue-before, cursor, direction, display, dominant-baseline,
+ drop-initial-after-adjust, drop-initial-after-align,
+ drop-initial-before-adjust, drop-initial-before-align, drop-initial-size,
+ drop-initial-value, elevation, empty-cells, filter, fit, fit-position,
+ float, float-offset, font, font-effect, font-emphasize,
+ font-emphasize-position, font-emphasize-style, font-family, font-size,
+ font-size-adjust, font-smooth, font-stretch, font-style, font-variant,
+ font-weight, grid-columns, grid-rows, hanging-punctuation, height,
+ hyphenate-after, hyphenate-before, hyphenate-character, hyphenate-lines,
+ hyphenate-resource, hyphens, icon, image-orientation, image-resolution,
+ ime-mode, include-source, inline-box-align, layout-flow, left,
+ letter-spacing, line-break, line-height, line-stacking,
+ line-stacking-ruby, line-stacking-shift, line-stacking-strategy, mark,
+ mark-after, mark-before, marks, marquee-direction, marquee-play-count,
+ marquee-speed, marquee-style, max-height, max-width, min-height,
+ min-width, move-to, nav-down, nav-index, nav-left, nav-right, nav-up,
+ opacity, orphans, page, page-policy, phonemes, pitch, pitch-range,
+ play-during, position, presentation-level, punctuation-trim, quotes,
+ rendering-intent, resize, rest, rest-after, rest-before, richness, right,
+ rotation, rotation-point, ruby-align, ruby-overhang, ruby-position,
+ ruby-span, size, speak, speak-header, speak-numeral, speak-punctuation,
+ speech-rate, stress, string-set, tab-side, table-layout, target,
+ target-name, target-new, target-position, top, unicode-bibi, unicode-bidi,
+ user-select, vertical-align, visibility, voice-balance, voice-duration,
+ voice-family, voice-pitch, voice-pitch-range, voice-rate, voice-stress,
+ voice-volume, volume, white-space, white-space-collapse, widows, width,
+ word-break, word-spacing, word-wrap, writing-mode, z-index
+ </code>
+ </p>
</dd>
<dt>Look at other public skins for examples</dt>
<dd>
- <a href="/skins">All approved public skins</a> are visible and you can read their code and copy them to edit for
- your own use.
+ <p>
+ <a href="/skins">All approved public skins</a> are visible and you can read their code and copy them to edit for
+ your own use.
+ </p>
</dd>
<dt>Use only one declaration per property per ruleset</dt>
<dd>
- The CSS parser we use retains only one declaration for each property, meaning that rulesets like<br>
- <code><pre>
- .my-class {
- background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
- background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
- background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
- }
- </pre></code>
- will have all but the last <code>background</code> declaration removed (so your gradient would only show up in WebKit browsers). To avoid losing declarations with repeated properties, split each one into its own ruleset, like so:
- <code><pre>
- .my-class { background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); }
- .my-class { background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); }
- .my-class { background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); }
- </pre></code>
+ <p>
+ The CSS parser we use retains only one declaration for each property, meaning that rulesets like<br>
+ <code><pre>
+ .my-class {
+ background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
+ background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
+ background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
+ }
+ </pre></code>
+ will have all but the last <code>background</code> declaration removed (so your gradient would only show up in WebKit browsers). To avoid losing declarations with repeated properties, split each one into its own ruleset, like so:
+ <code><pre>
+ .my-class { background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); }
+ .my-class { background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); }
+ .my-class { background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); }
+ </pre></code>
+ </p>
</dd>
<dt>Font and Font Family</dt>
@@ -96,13 +108,17 @@
<dt>URLs</dt>
<dd>
- We allow external image URLs (specified as <code>url('http://somesite.com/my_awesome_image.jpg')</code>) in JPG, GIF, and PNG formats.
- Please note, however, that skins using external images will not be approved for public use.
+ <p>
+ We allow external image URLs (specified as <code>url('http://somesite.com/my_awesome_image.jpg')</code>) in JPG, GIF, and PNG formats.
+ Please note, however, that skins using external images will not be approved for public use.
+ </p>
</dd>
<dt>Keywords</dt>
<dd>
- We allow all standard CSS keyword values (e.g., <code>absolute</code>, <code>bottom</code>, <code>center</code>, <code>underline</code>, etc.).
+ <p>
+ We allow all standard CSS keyword values (e.g., <code>absolute</code>, <code>bottom</code>, <code>center</code>, <code>underline</code>, etc.).
+ </p>
</dd>
<dt>Numeric Values</dt>
@@ -119,10 +135,12 @@
<dt>Colors</dt>
<dd>
- You can specify colors using hex values (eg, <code>#000000</code> is black in hex) or with RGB or RGBA values (e.g., <code>rgb(0,0,0)</code> and <code>rgba(0,0,0,0)</code> both give you black).
- This may be safer since not all browsers will necessarily support all color names. However, color names are more
- readable and easier to remember, so we also allow color names. (We suggest you stick to
- <a href="http://www.w3schools.com/css/css_colornames.asp">the set of commonly-supported color names</a>.)
+ <p>
+ You can specify colors using hex values (eg, <code>#000000</code> is black in hex) or with RGB or RGBA values (e.g., <code>rgb(0,0,0)</code> and <code>rgba(0,0,0,0)</code> both give you black).
+ This may be safer since not all browsers will necessarily support all color names. However, color names are more
+ readable and easier to remember, so we also allow color names. (We suggest you stick to
+ <a href="http://www.w3schools.com/css/css_colornames.asp">the set of commonly-supported color names</a>.)
+ </p>
</dd>
<dt>Scale</dt>