From 2d33a1c5aede31cc0e15415bce708950de582675 Mon Sep 17 00:00:00 2001 From: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Tue, 10 Oct 2023 18:55:31 +0530 Subject: [PATCH] Format all code (#153) --- CODE_OF_CONDUCT.md | 5 +- _config.yml | 2 +- alt-style-sheets/default.css | 32 +- alt-style-sheets/fancy.css | 32 +- alt-style-sheets/index.html | 49 +- alt-style-sheets/simple.css | 20 +- .../index-transitions.html | 17 +- .../index-waa.html | 42 +- animation-frames-timing-function/index.html | 17 +- assets/playable.js | 31 +- assets/styles.css | 92 +- backdrop/index.html | 44 +- backdrop/playable.js | 28 +- backdrop/script.js | 87 +- backdrop/style.css | 30 +- backdrop/styles.css | 92 +- box-alignment/flexbox/auto-margins.html | 225 +- box-alignment/flexbox/gap.html | 257 +- box-alignment/overview/flex-align-items.html | 253 +- box-alignment/overview/grid-align-items.html | 263 +- box-alignment/overview/grid-gap.html | 257 +- contain/contain-fix.html | 22 +- contain/contain-style-counter.html | 2 +- contain/contain-style-quotes.html | 2 +- contain/float-interference.html | 20 +- contain/simple-layout.html | 18 +- counter-style-demo/README.md | 3 +- counter-style-demo/css/style.css | 232 +- counter-style-demo/index.html | 252 +- counter-style-demo/js/script.js | 856 ++-- .../breadcrumb-navigation--download.html | 84 +- css-cookbook/breadcrumb-navigation.html | 113 +- css-cookbook/card--download.html | 222 +- css-cookbook/card.html | 342 +- css-cookbook/center--download.html | 72 +- css-cookbook/center.html | 133 +- css-cookbook/columns-flexbox--download.html | 92 +- .../columns-flexbox-wrapping--download.html | 100 +- css-cookbook/columns-flexbox-wrapping.html | 174 +- css-cookbook/columns-flexbox.html | 175 +- css-cookbook/columns-grid--download.html | 91 +- css-cookbook/columns-grid.html | 162 +- css-cookbook/columns-multicol--download.html | 82 +- css-cookbook/columns-multicol.html | 144 +- css-cookbook/cookbook-template--download.html | 44 +- css-cookbook/cookbook-template.html | 33 +- css-cookbook/grid-wrapper--download.html | 147 +- css-cookbook/grid-wrapper.html | 246 +- css-cookbook/list-group-badges--download.html | 121 +- css-cookbook/list-group-badges.html | 152 +- css-cookbook/media-objects--download.html | 225 +- .../media-objects-fallback--download.html | 280 +- css-cookbook/media-objects-fallback.html | 413 +- css-cookbook/media-objects.html | 324 +- css-cookbook/pagination--download.html | 154 +- css-cookbook/pagination.html | 173 +- css-cookbook/playable.js | 28 +- css-cookbook/split-navigation--download.html | 82 +- css-cookbook/split-navigation.html | 95 +- css-cookbook/sticky-footer--download.html | 103 +- .../sticky-footer-flexbox--download.html | 116 +- css-cookbook/sticky-footer-flexbox.html | 252 +- css-cookbook/sticky-footer.html | 178 +- css-cookbook/styles.css | 126 +- css-text/hyphens.html | 21 +- css-text/inline-overflow-hidden.html | 11 +- css-text/inline-overflow.html | 17 +- css-text/min-content.html | 15 +- css-text/overflow-wrap.html | 19 +- css-text/playable.js | 28 +- css-text/styles.css | 92 +- css-text/wbr.html | 19 +- css-text/word-break-checkbox.html | 35 +- css-text/word-break.html | 27 +- cssom/modify-rule.html | 15 +- display/multi-keyword/block-flow-root.html | 252 +- display/multi-keyword/inline-block.html | 206 +- display/multi-keyword/inline-flex.html | 209 +- display/multi-keyword/multi-keyword-flex.html | 273 +- display/multi-keyword/span-flex.html | 195 +- feature-queries/and.html | 74 +- feature-queries/not.html | 73 +- feature-queries/or.html | 73 +- feature-queries/simple.html | 70 +- feature-queries/step1.html | 59 +- feature-queries/step2.html | 69 +- feature-queries/step3.html | 79 +- feature-queries/step4.html | 79 +- flexbox/alignment/align-content-column.html | 261 +- flexbox/alignment/align-content.html | 257 +- flexbox/alignment/align-items.html | 219 +- flexbox/alignment/align-self-column.html | 237 +- flexbox/alignment/align-self.html | 235 +- flexbox/alignment/auto-margins.html | 225 +- flexbox/alignment/intro.html | 237 +- flexbox/alignment/justify-content-column.html | 226 +- .../alignment/justify-content-reverse.html | 224 +- .../justify-content-writing-mode.html | 246 +- flexbox/alignment/justify-content.html | 221 +- flexbox/basics/align-items.html | 239 +- flexbox/basics/flex-direction.html | 228 +- flexbox/basics/flex-flow.html | 214 +- flexbox/basics/flex-properties.html | 240 +- flexbox/basics/flex-shorthands.html | 240 +- flexbox/basics/flex-wrap.html | 216 +- flexbox/basics/justify-content.html | 227 +- flexbox/basics/simple-example-anon.html | 225 +- flexbox/basics/simple-example.html | 241 +- flexbox/basics/the-flex-container.html | 235 +- flexbox/browsers/float.html | 240 +- flexbox/browsers/inline-block.html | 238 +- flexbox/browsers/table-cell.html | 238 +- flexbox/browsers/vertical-align.html | 238 +- flexbox/index.html | 168 +- flexbox/order/flex-direction.html | 254 +- flexbox/order/negative-order.html | 291 +- flexbox/order/order.html | 298 +- flexbox/order/usecase-order.html | 291 +- flexbox/ratios/flex-basis.html | 228 +- flexbox/ratios/flex-grow-ratios.html | 246 +- flexbox/ratios/flex-grow.html | 222 +- flexbox/ratios/flex-shrink-min-content.html | 222 +- flexbox/ratios/flex-shrink-ratios.html | 254 +- flexbox/ratios/flex-shrink.html | 224 +- flexbox/ratios/min-max-content.html | 220 +- flexbox/relationship/display-contents.html | 276 +- flexbox/relationship/flex-layout.html | 292 +- flexbox/relationship/floats.html | 264 +- flexbox/relationship/grid-layout.html | 276 +- flexbox/relationship/writing-modes.html | 252 +- flexbox/use-cases/cards.html | 266 +- flexbox/use-cases/center.html | 237 +- flexbox/use-cases/input-button.html | 249 +- flexbox/use-cases/label-input-button.html | 261 +- flexbox/use-cases/media-flipped.html | 15 +- flexbox/use-cases/media.html | 15 +- flexbox/use-cases/navigation-flex.html | 223 +- flexbox/use-cases/navigation.html | 221 +- flexbox/use-cases/split-navigation.html | 249 +- flexbox/wrapping/column-wrap.html | 259 +- flexbox/wrapping/flex-grid.html | 245 +- flexbox/wrapping/gaps.html | 276 +- flexbox/wrapping/grid-example.html | 254 +- flexbox/wrapping/row-reverse-wrap.html | 240 +- flexbox/wrapping/row-wrap.html | 238 +- flexbox/wrapping/visibility-collapse.html | 261 +- .../wrapping/wrapped-visibility-collapse.html | 293 +- flow/block-inline/change-formatting.html | 215 +- flow/block-inline/flex.html | 216 +- flow/block-inline/inline.html | 201 +- flow/block-inline/line-box.html | 217 +- flow/block-inline/normal-flow-collapsing.html | 211 +- .../block-inline/normal-flow-margin-zero.html | 212 +- flow/block-inline/normal-flow-width.html | 211 +- flow/block-inline/normal-flow.html | 209 +- flow/formatting-contexts/bfc-flow-root.html | 239 +- flow/formatting-contexts/bfc-overflow.html | 239 +- flow/formatting-contexts/float.html | 237 +- flow/formatting-contexts/inline.html | 222 +- flow/in-flow/abspos.html | 255 +- flow/in-flow/float.html | 229 +- flow/in-flow/in-flow.html | 245 +- flow/in-flow/relative.html | 255 +- flow/overflow/auto.html | 220 +- flow/overflow/hidden.html | 220 +- flow/overflow/overflow-y.html | 220 +- flow/overflow/overflow.html | 218 +- flow/overflow/scroll.html | 220 +- flow/overflow/text-overflow.html | 251 +- flow/writing-modes/block-change-mode.html | 253 +- flow/writing-modes/creative-use.html | 208 +- flow/writing-modes/horizontal-tb.html | 209 +- flow/writing-modes/inline-change-mode.html | 213 +- flow/writing-modes/inline-size.html | 223 +- flow/writing-modes/replaced.html | 227 +- flow/writing-modes/vertical-lr.html | 209 +- flow/writing-modes/vertical-rl.html | 209 +- flow/writing-modes/width.html | 223 +- font-features/font-kerning.html | 431 +- font-features/font-variant-alternates.html | 491 +- font-features/font-variant-caps.html | 462 +- font-features/font-variant-east-asian.html | 426 +- font-features/font-variant-ligatures.html | 432 +- .../font-variant-numeric-example.html | 46 +- font-features/font-variant-numeric-frac.html | 453 +- font-features/font-variant-numeric.html | 452 +- font-features/font-variant-position.html | 462 +- font-features/font-variant.html | 424 +- .../IPA_Font_License_Agreement_v1.0.txt | 12 +- font-features/playable.js | 28 +- font-features/styles.css | 92 +- grid/docs/autoplacement.html | 69 +- grid/masonry/align-tracks.html | 40 +- grid/masonry/block-axis.html | 39 +- grid/masonry/inline-axis.html | 38 +- grid/masonry/justify-tracks.html | 38 +- grid/masonry/masonry-auto-flow.html | 42 +- grid/masonry/positioned.html | 40 +- grid/masonry/spanners.html | 44 +- grid/playable.js | 28 +- grid/styles.css | 92 +- grid/subgrid/adding-line-names.html | 13 +- grid/subgrid/both.html | 13 +- grid/subgrid/columns.html | 13 +- grid/subgrid/gap.html | 15 +- grid/subgrid/implicit.html | 13 +- grid/subgrid/line-names.html | 13 +- grid/subgrid/no-implicit.html | 13 +- grid/subgrid/rows.html | 13 +- houdini/css_painting_api/boxbg.js | 53 +- houdini/css_painting_api/example-boxbg.html | 99 +- howto/box-shadow-button.html | 75 +- howto/center.html | 60 +- howto/highlight_first_line.html | 57 +- howto/highlight_first_line2.html | 57 +- howto/highlight_first_para.html | 57 +- howto/highlight_h1_plus_para.html | 61 +- howto/object-fit.html | 105 +- howto/opacity.html | 104 +- howto/playable.js | 28 +- howto/styles.css | 126 +- howto/text-shadow.html | 70 +- howto/transition-button.html | 96 +- images/image-set-type.html | 60 +- images/image-set.html | 62 +- images/playable.js | 28 +- images/styles.css | 92 +- inline-formatting/align.html | 25 +- inline-formatting/break.html | 23 +- inline-formatting/inline.html | 29 +- inline-formatting/mbp.html | 21 +- inline-formatting/text-align.html | 29 +- is-where/index.html | 107 +- layout/normal-flow.html | 225 +- .../background-blend-mode.html | 30 +- .../backgrounds-borders/background-image.html | 17 +- learn/backgrounds-borders/background.html | 42 +- learn/backgrounds-borders/borders.html | 17 +- learn/backgrounds-borders/color.html | 19 +- learn/backgrounds-borders/corners.html | 18 +- learn/backgrounds-borders/gradients.html | 29 +- learn/backgrounds-borders/mix-blend-mode.html | 38 +- .../multiple-background-image.html | 17 +- learn/backgrounds-borders/position.html | 16 +- learn/backgrounds-borders/repeat.html | 16 +- learn/backgrounds-borders/size.html | 16 +- learn/backgrounds-borders/task.html | 23 +- learn/box-model/block.html | 16 +- learn/box-model/border.html | 21 +- learn/box-model/box-models.html | 17 +- learn/box-model/inline-block-nav.html | 38 +- learn/box-model/inline-block.html | 26 +- learn/box-model/inline-box-model.html | 26 +- learn/box-model/inline.html | 37 +- learn/box-model/margin-collapse.html | 21 +- learn/box-model/margin.html | 19 +- learn/box-model/padding.html | 19 +- learn/cascade/all.html | 79 +- learn/cascade/cascade-layers.html | 98 +- learn/cascade/cascade-simple.html | 57 +- learn/cascade/important.html | 81 +- learn/cascade/inheritance-simple.html | 55 +- learn/cascade/inheritance.html | 136 +- learn/cascade/keywords.html | 93 +- learn/cascade/mixing-rules.html | 81 +- learn/cascade/specificity-boxes.html | 181 +- learn/cascade/specificity-simple.html | 59 +- learn/cascade/task.html | 53 +- learn/getting-started--download.html | 31 +- learn/getting-started/biog-download.html | 28 +- learn/getting-started/biog.html | 125 +- learn/getting-started/experiment-sandbox.html | 40 +- learn/getting-started/started1.html | 70 +- learn/getting-started/started2.html | 70 +- learn/getting-started/started3.html | 76 +- learn/images/filter-text.html | 21 +- learn/images/filter.html | 23 +- learn/images/form.html | 31 +- learn/images/layout.html | 18 +- learn/images/object-fit.html | 23 +- learn/images/shapes.html | 30 +- learn/images/size.html | 20 +- learn/inspecting/inspecting.html | 118 +- learn/layers/basic-cascade.html | 45 +- learn/layers/layer-order.html | 84 +- learn/layers/layer-precedence.html | 125 +- learn/layers/media-order.html | 93 +- learn/media-queries/and.html | 30 +- learn/media-queries/grid.html | 11 +- learn/media-queries/hover.html | 34 +- learn/media-queries/max-width.html | 30 +- learn/media-queries/not.html | 34 +- learn/media-queries/or.html | 33 +- learn/media-queries/orientation.html | 34 +- learn/media-queries/step1.html | 8 +- learn/media-queries/step2.html | 8 +- learn/media-queries/step3.html | 8 +- learn/media-queries/width.html | 32 +- learn/overflow/auto.html | 24 +- learn/overflow/block-overflow.html | 24 +- learn/overflow/hidden.html | 24 +- learn/overflow/inline-overflow.html | 18 +- learn/overflow/scroll-x.html | 17 +- learn/overflow/scroll-y.html | 24 +- learn/overflow/scroll.html | 24 +- learn/playable.js | 31 +- learn/rwd/fixed-width.html | 40 +- learn/rwd/flex-based-rwd.html | 40 +- learn/rwd/float-based-rwd.html | 40 +- learn/rwd/grid-based-rwd.html | 40 +- learn/rwd/liquid-width.html | 40 +- learn/rwd/type-rwd.html | 40 +- learn/rwd/type-vw.html | 40 +- learn/selectors/adjacent.html | 75 +- learn/selectors/after-icon.html | 42 +- learn/selectors/attribute-case.html | 67 +- learn/selectors/attribute-links.html | 89 +- learn/selectors/attribute-substring.html | 77 +- learn/selectors/attribute.html | 71 +- learn/selectors/before-styled.html | 54 +- learn/selectors/before.html | 42 +- learn/selectors/child.html | 71 +- learn/selectors/class-many.html | 77 +- learn/selectors/class-type.html | 67 +- learn/selectors/class.html | 60 +- learn/selectors/descendant.html | 45 +- learn/selectors/first-child.html | 64 +- learn/selectors/first-child2.html | 67 +- learn/selectors/first-line.html | 67 +- learn/selectors/general.html | 63 +- learn/selectors/hover.html | 56 +- learn/selectors/id.html | 66 +- learn/selectors/nesting.html | 90 +- learn/selectors/selector-list.html | 80 +- learn/selectors/type.html | 80 +- learn/selectors/universal.html | 63 +- learn/sizing/height.html | 19 +- learn/sizing/intrinsic-image.html | 17 +- learn/sizing/intrinsic-text.html | 18 +- learn/sizing/max-width.html | 23 +- learn/sizing/min-height.html | 20 +- learn/sizing/percent-mp.html | 18 +- learn/sizing/percent-width.html | 18 +- learn/sizing/vw-vh.html | 18 +- learn/solutions.md | 6 +- learn/styles.css | 92 +- .../backgrounds/backgrounds1-download.html | 15 +- learn/tasks/backgrounds/backgrounds1.html | 23 +- .../backgrounds/backgrounds2-download.html | 13 +- learn/tasks/backgrounds/backgrounds2.html | 23 +- .../tasks/box-model/box-models-download.html | 18 +- learn/tasks/box-model/box-models.html | 17 +- .../box-model/inline-block-download.html | 29 +- learn/tasks/box-model/inline-block.html | 34 +- learn/tasks/box-model/mbp-download.html | 19 +- learn/tasks/box-model/mbp.html | 19 +- learn/tasks/cascade/cascade-download.html | 8 +- learn/tasks/cascade/cascade.html | 25 +- .../tasks/cascade/cascadelayer-download.html | 2 +- learn/tasks/cascade/cascadelayer.html | 43 +- learn/tasks/cascade/marking.md | 4 +- learn/tasks/flexbox/flexbox1-download.html | 73 +- learn/tasks/flexbox/flexbox1.html | 70 +- learn/tasks/flexbox/flexbox2-download.html | 83 +- learn/tasks/flexbox/flexbox2.html | 77 +- learn/tasks/flexbox/flexbox3-download.html | 73 +- learn/tasks/flexbox/flexbox3.html | 68 +- learn/tasks/flexbox/flexbox4-download.html | 95 +- learn/tasks/flexbox/flexbox4.html | 73 +- learn/tasks/float/float1-download.html | 20 +- learn/tasks/float/float1.html | 18 +- learn/tasks/float/float2-download.html | 20 +- learn/tasks/float/float2.html | 18 +- learn/tasks/float/float3-download.html | 20 +- learn/tasks/float/float3.html | 20 +- learn/tasks/float/marking.md | 2 +- learn/tasks/grid/grid1-download.html | 22 +- learn/tasks/grid/grid1.html | 53 +- learn/tasks/grid/grid2-download.html | 29 +- learn/tasks/grid/grid2.html | 88 +- learn/tasks/grid/grid3-download.html | 25 +- learn/tasks/grid/grid3.html | 57 +- learn/tasks/grid/grid4-download.html | 24 +- learn/tasks/grid/grid4.html | 102 +- learn/tasks/grid/marking.md | 4 + learn/tasks/images/form-download.html | 23 +- learn/tasks/images/form.html | 47 +- learn/tasks/images/marking.md | 2 +- learn/tasks/images/object-fit-download.html | 19 +- learn/tasks/images/object-fit.html | 37 +- learn/tasks/multicol/multicol1-download.html | 40 +- learn/tasks/multicol/multicol1.html | 42 +- learn/tasks/multicol/multicol2-download.html | 40 +- learn/tasks/multicol/multicol2.html | 42 +- learn/tasks/multicol/multicol3-download.html | 38 +- learn/tasks/multicol/multicol3.html | 62 +- .../overflow/overflow-hidden-download.html | 19 +- learn/tasks/overflow/overflow-hidden.html | 21 +- .../overflow/overflow-scroll-download.html | 28 +- learn/tasks/overflow/overflow-scroll.html | 30 +- learn/tasks/playable.js | 28 +- learn/tasks/position/marking.md | 2 +- learn/tasks/position/position1-download.html | 29 +- learn/tasks/position/position1.html | 31 +- learn/tasks/position/position2-download.html | 59 +- learn/tasks/position/position2.html | 49 +- learn/tasks/rwd/rwd-download.html | 60 +- .../selectors/attribute-links-download.html | 14 +- learn/tasks/selectors/attribute-links.html | 89 +- learn/tasks/selectors/class-id-download.html | 32 +- learn/tasks/selectors/class-id.html | 32 +- .../tasks/selectors/combinators-download.html | 21 +- learn/tasks/selectors/combinators.html | 54 +- learn/tasks/selectors/marking.md | 9 +- learn/tasks/selectors/pseudo-download.html | 29 +- learn/tasks/selectors/pseudo.html | 35 +- learn/tasks/selectors/type-download.html | 34 +- learn/tasks/selectors/type.html | 38 +- .../sizing/height-min-height-download.html | 8 +- learn/tasks/sizing/height-min-height.html | 46 +- learn/tasks/sizing/max-width-download.html | 42 +- learn/tasks/sizing/max-width.html | 32 +- learn/tasks/sizing/percentages-download.html | 16 +- learn/tasks/sizing/percentages.html | 39 +- learn/tasks/styles.css | 92 +- learn/tasks/tables/table-download.html | 13 +- learn/tasks/tables/table.html | 159 +- learn/tasks/values/color-download.html | 25 +- learn/tasks/values/color.html | 49 +- learn/tasks/values/length-download.html | 37 +- learn/tasks/values/length.html | 35 +- learn/tasks/values/marking.md | 2 +- learn/tasks/values/position-download.html | 16 +- learn/tasks/values/position.html | 28 +- .../writing-modes/logical-mbp-download.html | 17 +- learn/tasks/writing-modes/logical-mbp.html | 16 +- .../logical-width-height-download.html | 17 +- .../writing-modes/logical-width-height.html | 16 +- .../writing-modes/writing-mode-download.html | 15 +- learn/tasks/writing-modes/writing-mode.html | 13 +- learn/values-units/calc.html | 16 +- learn/values-units/color-hex.html | 13 +- learn/values-units/color-hsl.html | 13 +- learn/values-units/color-hsla.html | 9 +- learn/values-units/color-keywords.html | 13 +- learn/values-units/color-rgb.html | 9 +- learn/values-units/color-rgba.html | 9 +- learn/values-units/em-rem.html | 16 +- learn/values-units/image.html | 13 +- learn/values-units/length.html | 13 +- learn/values-units/opacity.html | 13 +- learn/values-units/percentage-fonts.html | 15 +- learn/values-units/percentage.html | 13 +- learn/values-units/position.html | 13 +- learn/values-units/strings-idents.html | 60 +- learn/writing-modes/block-inline.html | 16 +- learn/writing-modes/float.html | 26 +- learn/writing-modes/inline-size.html | 17 +- learn/writing-modes/logical-mbp.html | 14 +- learn/writing-modes/simple-vertical.html | 15 +- learn/writing-modes/width.html | 17 +- logical/border-longhands.html | 143 +- logical/float.html | 116 +- logical/intro-feature-queries.html | 111 +- logical/intro-grid-example.html | 101 +- logical/margin-longhands.html | 176 +- logical/padding-longhands.html | 158 +- logical/positioning-inset.html | 130 +- logical/size-inline-block.html | 104 +- logical/size-max.html | 100 +- logical/size-min.html | 108 +- logical/size-resize.html | 112 +- logical/text-align.html | 97 +- masking/mask-border.html | 247 +- masking/mask-clip.html | 236 +- masking/mask-composite.html | 231 +- masking/mask-image.html | 220 +- masking/mask-mode.html | 234 +- masking/mask-origin.html | 235 +- masking/mask-position.html | 239 +- masking/mask-repeat.html | 237 +- masking/mask-size.html | 229 +- min-max-clamp/index.html | 29 +- modules/animation.html | 15 +- modules/backgrounds.html | 10 +- modules/basicUI.html | 11 +- modules/colors.html | 13 +- modules/compositing.html | 2 +- modules/filters.html | 10 +- modules/generated_content.html | 139 +- modules/multicol.html | 2 +- modules/overflow.html | 8 +- modules/scroll_snap.html | 19 +- moz-context-properties/index.html | 51 +- multicol/balancing/auto.html | 238 +- multicol/balancing/balance.html | 241 +- multicol/basics/column-count-width.html | 236 +- multicol/basics/column-count.html | 234 +- multicol/basics/column-width.html | 234 +- multicol/fragmentation/break-before.html | 274 +- multicol/fragmentation/break-inside.html | 255 +- multicol/fragmentation/orphans.html | 267 +- multicol/overflow/image-max-width.html | 248 +- multicol/overflow/image.html | 242 +- multicol/overflow/min-height.html | 224 +- multicol/overflow/overflow-inline.html | 236 +- multicol/spanning/h2-span.html | 247 +- multicol/spanning/mpb-span.html | 258 +- multicol/spanning/nested-h2-span.html | 251 +- multicol/styling/column-gap.html | 236 +- multicol/styling/column-rule-wide.html | 238 +- multicol/styling/column-rule.html | 240 +- object-fit-basics/index.html | 130 +- object-fit-basics/style.css | 59 +- object-fit-gallery/index.html | 38 +- object-fit-gallery/main.js | 46 +- object-fit-gallery/style.css | 20 +- overscroll-behavior/index.html | 30 +- overscroll-behavior/main.js | 28 +- .../overscroll-behavior-x.html | 80 +- overscroll-behavior/style.css | 9 +- path/offset-path.html | 282 +- scroll-snap/align.html | 185 +- scroll-snap/mandatory-proximity.html | 166 +- scroll-snap/mandatory-y-old-spec.html | 144 +- scroll-snap/mandatory-y.html | 132 +- scroll-snap/scroll-margin.html | 136 +- scroll-snap/scroll-padding-sticky.html | 170 +- scroll-snap/scroll-padding.html | 136 +- shapes/basic-shape/circle-generated.html | 213 +- shapes/basic-shape/circle.html | 202 +- shapes/basic-shape/ellipse-keywords.html | 214 +- shapes/basic-shape/ellipse.html | 214 +- shapes/basic-shape/inset-box.html | 220 +- shapes/basic-shape/inset.html | 220 +- shapes/basic-shape/polygon.html | 220 +- shapes/box/border-box.html | 205 +- shapes/box/bottom-margin-box.html | 230 +- shapes/box/content-box.html | 205 +- shapes/box/margin-box.html | 205 +- shapes/box/padding-box.html | 205 +- shapes/image/generated-content.html | 216 +- shapes/image/gradient.html | 230 +- shapes/image/margin.html | 204 +- shapes/image/radial-gradient.html | 230 +- shapes/image/simple-example.html | 202 +- shapes/image/threshold.html | 206 +- shapes/index.html | 31 +- shapes/overview/box.html | 204 +- shapes/overview/circle.html | 202 +- shapes/overview/clip-path.html | 204 +- shapes/overview/generated-content.html | 200 +- shapes/overview/image.html | 202 +- shapes/overview/shape-margin.html | 202 +- shapes/overview/threshold.html | 220 +- target-text/index.html | 296 +- time/current.html | 44 +- time/future.html | 47 +- time/past.html | 45 +- time/styles.css | 92 +- time/subtitles.vtt | 10 +- tools/border-image-generator/index.html | 279 +- tools/border-image-generator/script.js | 2590 +++++----- tools/border-image-generator/styles.css | 973 ++-- tools/border-radius-generator/index.html | 244 +- tools/border-radius-generator/script.js | 1493 +++--- tools/border-radius-generator/styles.css | 689 +-- tools/box-shadow-generator/index.html | 620 ++- tools/box-shadow-generator/script.js | 3305 +++++++------ tools/box-shadow-generator/styles.css | 1007 ++-- tools/color-picker/index.html | 50 +- tools/color-picker/script.js | 4291 +++++++++-------- tools/color-picker/styles.css | 1038 ++-- transitions/js-transitions.html | 81 +- types/filterfunctions.html | 4 +- variable-fonts/font-stretch.html | 186 +- variable-fonts/font-weight.html | 158 +- variable-fonts/grade.html | 400 +- variable-fonts/italic.html | 466 +- variable-fonts/oblique.html | 151 +- variable-fonts/optical-sizing.html | 531 +- variable-fonts/sample-page.html | 547 ++- variable-fonts/slant.html | 476 +- variable-fonts/weight.html | 467 +- variable-fonts/width.html | 471 +- visual-formatting/anonymous-block.html | 25 +- visual-formatting/anonymous-flex.html | 25 +- visual-formatting/line-boxes.html | 27 +- web-fonts/basic-web-font.html | 30 +- 589 files changed, 42550 insertions(+), 40675 deletions(-) diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 498baa3f..0d424fd8 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -1,10 +1,11 @@ # Community Participation Guidelines -This repository is governed by Mozilla's code of conduct and etiquette guidelines. +This repository is governed by Mozilla's code of conduct and etiquette guidelines. For more details, please read the -[Mozilla Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/). +[Mozilla Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/). ## How to Report + For more information on how to report violations of the Community Participation Guidelines, please read our '[How to Report](https://www.mozilla.org/about/governance/policies/participation/reporting/)' page. - +
-
- +} - +
- -
- + + + - \ No newline at end of file + diff --git a/backdrop/playable.js b/backdrop/playable.js index ddebe2d8..d9353ed2 100644 --- a/backdrop/playable.js +++ b/backdrop/playable.js @@ -1,22 +1,22 @@ -var section = document.querySelector('section'); -var editable = document.querySelector('.editable'); -var textareaHTML = document.querySelector('.playable-html'); -var textareaCSS = document.querySelector('.playable-css'); -var reset = document.getElementById('reset'); +var section = document.querySelector("section"); +var editable = document.querySelector(".editable"); +var textareaHTML = document.querySelector(".playable-html"); +var textareaCSS = document.querySelector(".playable-css"); +var reset = document.getElementById("reset"); var htmlCode = textareaHTML.value; var cssCode = textareaCSS.value; function fillCode() { - editable.innerHTML = textareaCSS.value; - section.innerHTML = textareaHTML.value; + editable.innerHTML = textareaCSS.value; + section.innerHTML = textareaHTML.value; } -reset.addEventListener('click', function () { - textareaHTML.value = htmlCode; - textareaCSS.value = cssCode; - fillCode(); +reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); }); -textareaHTML.addEventListener('input', fillCode); -textareaCSS.addEventListener('input', fillCode); -window.addEventListener('load', fillCode); \ No newline at end of file +textareaHTML.addEventListener("input", fillCode); +textareaCSS.addEventListener("input", fillCode); +window.addEventListener("load", fillCode); diff --git a/backdrop/script.js b/backdrop/script.js index 41eee340..404a2958 100644 --- a/backdrop/script.js +++ b/backdrop/script.js @@ -1,37 +1,50 @@ -// Any copyright is dedicated to the Public Domain. -// http://creativecommons.org/publicdomain/zero/1.0/ - -window.addEventListener("load", doStartup, false); - -function doStartup(event) { - document.fullscreenElement = document.fullscreenElement || document.mozFullscreenElement - || document.msFullscreenElement || document.webkitFullscreenDocument; - document.exitFullscreen = document.exitFullscreen || document.mozExitFullscreen - || document.msExitFullscreen || document.webkitExitFullscreen; - - document.addEventListener("keypress", handleKeypress, false); -} - -function handleKeypress(event) { - if (event.keyCode === 13) { - toggleFullscreen(); - } -} - - -function toggleFullscreen() { - let elem = document.querySelector("video"); - - elem.requestFullscreen = elem.requestFullscreen || elem.mozRequestFullscreen - || elem.msRequestFullscreen || elem.webkitRequestFullscreen; - - if (!document.fullscreenElement) { - elem.requestFullscreen().then({}).catch(err => { - alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`); - }); - } else { - if (document.exitFullscreen) { - document.exitFullscreen(); - } - } -} \ No newline at end of file +// Any copyright is dedicated to the Public Domain. +// http://creativecommons.org/publicdomain/zero/1.0/ + +window.addEventListener("load", doStartup, false); + +function doStartup(event) { + document.fullscreenElement = + document.fullscreenElement || + document.mozFullscreenElement || + document.msFullscreenElement || + document.webkitFullscreenDocument; + document.exitFullscreen = + document.exitFullscreen || + document.mozExitFullscreen || + document.msExitFullscreen || + document.webkitExitFullscreen; + + document.addEventListener("keypress", handleKeypress, false); +} + +function handleKeypress(event) { + if (event.keyCode === 13) { + toggleFullscreen(); + } +} + +function toggleFullscreen() { + let elem = document.querySelector("video"); + + elem.requestFullscreen = + elem.requestFullscreen || + elem.mozRequestFullscreen || + elem.msRequestFullscreen || + elem.webkitRequestFullscreen; + + if (!document.fullscreenElement) { + elem + .requestFullscreen() + .then({}) + .catch((err) => { + alert( + `Error attempting to enable full-screen mode: ${err.message} (${err.name})`, + ); + }); + } else { + if (document.exitFullscreen) { + document.exitFullscreen(); + } + } +} diff --git a/backdrop/style.css b/backdrop/style.css index f5435967..4b0b9b8c 100644 --- a/backdrop/style.css +++ b/backdrop/style.css @@ -1,15 +1,15 @@ -/* CSS files add styling rules to your content */ - -body { - font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif; - margin: 2em; - } - - h1 { - font-style: italic; - color: #373fff; - } - - video::backdrop { - background-color: #448; - } \ No newline at end of file +/* CSS files add styling rules to your content */ + +body { + font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif; + margin: 2em; +} + +h1 { + font-style: italic; + color: #373fff; +} + +video::backdrop { + background-color: #448; +} diff --git a/backdrop/styles.css b/backdrop/styles.css index b733e436..11945fee 100644 --- a/backdrop/styles.css +++ b/backdrop/styles.css @@ -1,61 +1,65 @@ /* Some default styling for cookbook examples */ -/* +/* rgb(53,43,34) rgb(75,70,74) rgb(95,97,110) rgb(137,151,188) rgb(160,178,226) */ -body { - background-color: #fff; - color: #333; - font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif; - padding: 0; - margin: 0; +body { + background-color: #fff; + color: #333; + font: + 1.2em / 1.5 Helvetica Neue, + Helvetica, + Arial, + sans-serif; + padding: 0; + margin: 0; } /* styles for the editor */ .playable { - font-family: monospace; - display: block; - margin-bottom: 10px; - background-color: #F4F7F8; - border: none; - border-left: 6px solid #558ABB; - color: #4D4E53; - width: 90%; - max-width: 700px; - padding: 10px 10px 0px; - font-size: 90%; - } + font-family: monospace; + display: block; + margin-bottom: 10px; + background-color: #f4f7f8; + border: none; + border-left: 6px solid #558abb; + color: #4d4e53; + width: 90%; + max-width: 700px; + padding: 10px 10px 0px; + font-size: 90%; +} - .playable-css { - height: 80px; - } +.playable-css { + height: 80px; +} - .playable-html { - height: 160px; - } +.playable-html { + height: 160px; +} - .playable-buttons { - text-align: right; - width: 90%; - max-width: 700px; - padding: 5px 10px 5px 26px; - font-size: 100%; - } +.playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; +} - .preview { - width: 90%; - max-width: 700px; - border: 1px solid #4D4E53; - border-radius: 2px; - padding: 10px 14px 10px 10px; - margin-bottom: 10px; - } +.preview { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; +} - .preview input { - display: block; - margin: 5px; - } +.preview input { + display: block; + margin: 5px; +} diff --git a/box-alignment/flexbox/auto-margins.html b/box-alignment/flexbox/auto-margins.html index 859a975e..b1d9394a 100644 --- a/box-alignment/flexbox/auto-margins.html +++ b/box-alignment/flexbox/auto-margins.html @@ -1,138 +1,139 @@ - + - - - - Flexbox Alignment: alignment with auto margins + + + + Flexbox Alignment: alignment with auto margins - - + - - - -
-
-
One
-
Two
-
Three
-
Four
-
Five
-
+ } + + -
- - + -
- -
- - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/box-alignment/flexbox/gap.html b/box-alignment/flexbox/gap.html index c07d4324..92521b3c 100644 --- a/box-alignment/flexbox/gap.html +++ b/box-alignment/flexbox/gap.html @@ -1,100 +1,102 @@ - + - - - - Flexbox Alignment: gaps - - - - - - -
-
-
One
-
Two
-
Three
-
Four
-
Five
-
Six
-
- -
- - + -
- -
- - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/box-alignment/overview/flex-align-items.html b/box-alignment/overview/flex-align-items.html index 300d0086..35b17061 100644 --- a/box-alignment/overview/flex-align-items.html +++ b/box-alignment/overview/flex-align-items.html @@ -1,100 +1,98 @@ - + - - - - Flexbox Alignment: simple example - - - - - - -
-
-
One
-
Two
-
Three -
has -
extra -
text + + + + Flexbox Alignment: simple example + + + + + + +
+
+
One
+
Two
+
Three
has
extra
text
-
- -
- - + -
- -
- - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/box-alignment/overview/grid-align-items.html b/box-alignment/overview/grid-align-items.html index 33832528..5f8c0481 100644 --- a/box-alignment/overview/grid-align-items.html +++ b/box-alignment/overview/grid-align-items.html @@ -1,105 +1,103 @@ - + - - - - Grid Alignment: simple example - - - - - - -
-
-
One
-
Two
-
Three -
has -
extra -
text + + + + Grid Alignment: simple example + + + + + + +
+
+
One
+
Two
+
Three
has
extra
text
+
Four
+
Five
+
Six
-
Four
-
Five
-
Six
-
- -
- - + -
- -
- - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/box-alignment/overview/grid-gap.html b/box-alignment/overview/grid-gap.html index beaba4d7..4bfd1fa7 100644 --- a/box-alignment/overview/grid-gap.html +++ b/box-alignment/overview/grid-gap.html @@ -1,99 +1,101 @@ - + - - - - Grid Alignment: simple example - - - - - - -
-
-
One
-
Two
-
Three
-
Four
-
Five
-
Six
-
- -
- - + -
- -
- - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/contain/contain-fix.html b/contain/contain-fix.html index 4de07edb..51e8de46 100644 --- a/contain/contain-fix.html +++ b/contain/contain-fix.html @@ -1,19 +1,19 @@ - + Float interference @@ -21,11 +21,11 @@

My blog

Heading of a nice article

Content here.

- I just showed up + I just showed up

Another heading of another article

- placeholder + placeholder

More content here.

diff --git a/contain/contain-style-counter.html b/contain/contain-style-counter.html index 840c47b2..74dd6d9d 100644 --- a/contain/contain-style-counter.html +++ b/contain/contain-style-counter.html @@ -1,4 +1,4 @@ - + diff --git a/contain/contain-style-quotes.html b/contain/contain-style-quotes.html index 98fd248c..024208a8 100644 --- a/contain/contain-style-quotes.html +++ b/contain/contain-style-quotes.html @@ -1,4 +1,4 @@ - + diff --git a/contain/float-interference.html b/contain/float-interference.html index d87f7547..61cb9ad3 100644 --- a/contain/float-interference.html +++ b/contain/float-interference.html @@ -1,18 +1,18 @@ - + Float interference @@ -20,11 +20,11 @@

My blog

Heading of a nice article

Content here.

- I just showed up + I just showed up

Another heading of another article

- placeholder + placeholder

More content here.

diff --git a/contain/simple-layout.html b/contain/simple-layout.html index 46962399..479d4349 100644 --- a/contain/simple-layout.html +++ b/contain/simple-layout.html @@ -1,18 +1,18 @@ - + Simple layout @@ -23,7 +23,7 @@

Heading of a nice article

Another heading of another article

- placeholder + placeholder

More content here.

diff --git a/counter-style-demo/README.md b/counter-style-demo/README.md index 13fa5481..ed403a25 100644 --- a/counter-style-demo/README.md +++ b/counter-style-demo/README.md @@ -1,5 +1,4 @@ -CSS @counter-style Demo -======================= +# CSS @counter-style Demo Demo for the [@counter-style documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style) on Mozilla Developer Network. diff --git a/counter-style-demo/css/style.css b/counter-style-demo/css/style.css index 50072236..e2a45d57 100644 --- a/counter-style-demo/css/style.css +++ b/counter-style-demo/css/style.css @@ -1,338 +1,350 @@ body { - background: #EEEEEE; - margin: 0; - padding: 0; + background: #eeeeee; + margin: 0; + padding: 0; } .list-container { - float: left; - width: 40%; - margin-left: 20px; + float: left; + width: 40%; + margin-left: 20px; } .list-controls { - width: 40%; - margin-left: 10px; - border: 1px solid #4D4E53; - float: left; - padding: 10px; - background: white; + width: 40%; + margin-left: 10px; + border: 1px solid #4d4e53; + float: left; + padding: 10px; + background: white; } .code { - border-left: 6px solid #558ABB; - background: url("https://developer.cdn.mozilla.net/media/redesign/img/blueprint-dark.png"); - padding: 12px; + border-left: 6px solid #558abb; + background: url("https://developer.cdn.mozilla.net/media/redesign/img/blueprint-dark.png"); + padding: 12px; } .header h1 { - margin: 0; - padding: 0; - font-family: Ubuntu, Arial, Tahoma, 'Sans Serif'; + margin: 0; + padding: 0; + font-family: Ubuntu, Arial, Tahoma, "Sans Serif"; } .header { - background: #27547E; - margin: 0 0 10px 0; - padding: 5px; - color: white; + background: #27547e; + margin: 0 0 10px 0; + padding: 5px; + color: white; } .notes-section { - margin: 10px; - color: #4D4E53; - font-family: Ubuntu, Arial, Tahoma, 'Sans Serif'; - float: left; + margin: 10px; + color: #4d4e53; + font-family: Ubuntu, Arial, Tahoma, "Sans Serif"; + float: left; } /* Demo styles */ @counter-style demo-cyclic { - system: cyclic; - symbols: ◆ ◇; - suffix: " "; + system: cyclic; + symbols: ◆ ◇; + suffix: " "; } .demo-cyclic { - list-style: demo-cyclic; + list-style: demo-cyclic; } @counter-style cs-fixed { - system: fixed; - symbols: 😀 👻 👽 👾 🤖 🎃 😹 👋 👀 💋; - suffix: " "; + system: fixed; + symbols: 😀 👻 👽 👾 🤖 🎃 😹 👋 👀 💋; + suffix: " "; } .demo-fixed { - list-style: cs-fixed; + list-style: cs-fixed; } @counter-style cs-symbolic { - system: symbolic; - symbols: '*' ⁑ † ‡; - range: 1 15; - suffix: " "; + system: symbolic; + symbols: "*" ⁑ † ‡; + range: 1 15; + suffix: " "; } .demo-symbolic { - list-style: cs-symbolic; + list-style: cs-symbolic; } @counter-style cs-alphabetic { - system: alphabetic; - symbols: A B C D E; - suffix: " "; + system: alphabetic; + symbols: A B C D E; + suffix: " "; } .demo-alphabetic { - list-style: cs-alphabetic; + list-style: cs-alphabetic; } @counter-style cs-numeric { - system: numeric; - symbols: A B C D E; - suffix: " "; + system: numeric; + symbols: A B C D E; + suffix: " "; } .demo-numeric { - list-style: cs-numeric; + list-style: cs-numeric; } @counter-style cs-additive-roman { - system: additive; - range: 1 100; - additive-symbols: 1000 M, 900 CM, 500 D, 400 CD, 100 C, 90 XC, 50 L, 40 XL, 10 X, 9 IX, 5 V, 4 IV, 1 I; + system: additive; + range: 1 100; + additive-symbols: + 1000 M, + 900 CM, + 500 D, + 400 CD, + 100 C, + 90 XC, + 50 L, + 40 XL, + 10 X, + 9 IX, + 5 V, + 4 IV, + 1 I; } .demo-additive { - list-style: cs-additive-roman; + list-style: cs-additive-roman; } @counter-style cs-extends { - system: extends decimal; - prefix: '('; - suffix: ') '; + system: extends decimal; + prefix: "("; + suffix: ") "; } .demo-extends { - list-style: cs-extends; + list-style: cs-extends; } - /* Predefined styles */ .demo-decimal { - list-style: decimal; + list-style: decimal; } .demo-decimal-leading-zero { - list-style: decimal-leading-zero; + list-style: decimal-leading-zero; } .demo-arabic-indic { - list-style: arabic-indic; + list-style: arabic-indic; } .demo-armenian { - list-style: armenian; + list-style: armenian; } .demo-upper-armenian { - list-style: upper-armenian; + list-style: upper-armenian; } .demo-lower-armenian { - list-style: lower-armenian; + list-style: lower-armenian; } .demo-bengali { - list-style: bengali; + list-style: bengali; } .demo-cambodian { - list-style: cambodian; + list-style: cambodian; } .demo-khmer { - list-style: khmer; + list-style: khmer; } .demo-cjk-decimal { - list-style: cjk-decimal; + list-style: cjk-decimal; } .demo-devanagari { - list-style: devanagari; + list-style: devanagari; } .demo-georgian { - list-style: georgian; + list-style: georgian; } .demo-gujarati { - list-style: gujarati; + list-style: gujarati; } .demo-gurmukhi { - list-style: gurmukhi; + list-style: gurmukhi; } .demo-hebrew { - list-style: hebrew; + list-style: hebrew; } .demo-kannada { - list-style: kannada; + list-style: kannada; } .demo-lao { - list-style: lao; + list-style: lao; } .demo-malayalam { - list-style: malayalam; + list-style: malayalam; } .demo-mongolian { - list-style: mongolian; + list-style: mongolian; } .demo-myanmar { - list-style: myanmar; + list-style: myanmar; } .demo-oriya { - list-style: oriya; + list-style: oriya; } .demo-persian { - list-style: persian; + list-style: persian; } .demo-lower-roman { - list-style: lower-roman; + list-style: lower-roman; } .demo-upper-roman { - list-style: upper-roman; + list-style: upper-roman; } .demo-telugu { - list-style: telugu; + list-style: telugu; } .demo-thai { - list-style: thai; + list-style: thai; } .demo-tibetan { - list-style: tibetan; + list-style: tibetan; } .demo-lower-alpha { - list-style: lower-alpha; + list-style: lower-alpha; } .demo-lower-latin { - list-style: lower-latin; + list-style: lower-latin; } .demo-upper-alpha { - list-style: upper-alpha; + list-style: upper-alpha; } .demo-upper-latin { - list-style: upper-latin; + list-style: upper-latin; } .demo-cjk-earthly-branch { - list-style: cjk-earthly-branch; + list-style: cjk-earthly-branch; } .demo-cjk-heavenly-stem { - list-style: cjk-heavenly-stem; + list-style: cjk-heavenly-stem; } .demo-lower-greek { - list-style: lower-greek; + list-style: lower-greek; } .demo-hiragana { - list-style: hiragana; + list-style: hiragana; } .demo-hiragana-iroha { - list-style: hiragana-iroha; + list-style: hiragana-iroha; } .demo-katakana { - list-style: katakana; + list-style: katakana; } .demo-katakana-iroha { - list-style: katakana-iroha; + list-style: katakana-iroha; } .demo-disc { - list-style: disc; + list-style: disc; } .demo-circle { - list-style: circle; + list-style: circle; } .demo-square { - list-style: square; + list-style: square; } .demo-disclosure-open { - list-style: disclosure-open; + list-style: disclosure-open; } .demo-disclosure-closed { - list-style: disclosure-closed; + list-style: disclosure-closed; } .demo-japanese-informal { - list-style: japanese-informal; + list-style: japanese-informal; } .demo-japanese-formal { - list-style: japanese-formal; + list-style: japanese-formal; } .demo-korean-hangul-formal { - list-style: korean-hangul-formal; + list-style: korean-hangul-formal; } .demo-korean-hanja-informal { - list-style: korean-hanja-informal; + list-style: korean-hanja-informal; } .demo-korean-hanja-formal { - list-style: korean-hanja-formal; + list-style: korean-hanja-formal; } .demo-simp-chinese-informal { - list-style: simp-chinese-informal; + list-style: simp-chinese-informal; } .demo-simp-chinese-formal { - list-style: simp-chinese-formal; + list-style: simp-chinese-formal; } .demo-trad-chinese-informal { - list-style: trad-chinese-informal; + list-style: trad-chinese-informal; } .demo-trad-chinese-formal { - list-style: trad-chinese-formal; + list-style: trad-chinese-formal; } .demo-cjk-ideographic { - list-style: cjk-ideographic; + list-style: cjk-ideographic; } .demo-ethiopic-numeric { - list-style: ethiopic-numeric; + list-style: ethiopic-numeric; } diff --git a/counter-style-demo/index.html b/counter-style-demo/index.html index 7f1b277d..973db771 100644 --- a/counter-style-demo/index.html +++ b/counter-style-demo/index.html @@ -1,128 +1,127 @@ - + - + CSS @counter-style Demo - - - -
-

CSS @counter-style Demo

- -
+ + + +
+

CSS @counter-style Demo

+
- +
-

Select a counter style from the list

- +

Select a counter style from the list

+ - 
+      
 @counter-style blacknwhite {
   system: cyclic;
   symbols: ◆ ◇;
@@ -131,15 +130,18 @@ 
Select a counter style from the list

 
 ul {
   list-style: blacknwhite;
-}

-
+}
+
+
+ Read more about @counter-style on + Mozilla Developer Network
-
- - Read more about @counter-style on - Mozilla Developer Network - -
- + diff --git a/counter-style-demo/js/script.js b/counter-style-demo/js/script.js index 1e9e98b5..285a032e 100644 --- a/counter-style-demo/js/script.js +++ b/counter-style-demo/js/script.js @@ -1,538 +1,322 @@ (function () { - var $styleSelect = document.querySelector('#style-select'), - $demoList = document.querySelector('#demo-list'), - $codeContainer = document.querySelector('#code'); - var examples = { - 'cyclic': { - code: [ - '@counter-style blacknwhite {\n', - ' system: cyclic;\n', - ' symbols: ◆ ◇;\n', - ' suffix: " ";\n', - '}\n\n', - 'ul {\n', - ' list-style: blacknwhite;\n', - '}' - ].join('') - }, - - 'fixed': { - code: [ - '@counter-style circled-digits {\n', - ' system: fixed;\n', - ' symbols: 😀 👻 👽 👾 🤖 🎃 😹 👋 👀 💋;\n', - ' suffix: " ";\n', - '}\n\n', - 'ul {\n', - ' list-style: circled-digits;\n', - '}' - ].join('') - }, - - 'symbolic': { - code: [ - '@counter-style cs-symbolic {\n', - ' system: symbolic;\n', - " symbols: '*' ⁑ † ‡;\n", - ' range: 1 15;\n', - ' suffix: " ";\n', - '}\n\n', - 'ul {\n', - ' list-style: cs-symbolic;\n', - '}' - ].join('') - }, - - 'alphabetic': { - code: [ - '@counter-style cs-alphabetic {\n', - ' system: alphabetic;\n', - " symbols: A B C D E;\n", - ' suffix: " ";\n', - '}\n\n', - 'ul {\n', - ' list-style: cs-alphabetic;\n', - '}' - ].join('') - }, - - 'numeric': { - code: [ - '@counter-style cs-numeric {\n', - ' system: numeric;\n', - " symbols: A B C D E;\n", - ' suffix: " ";\n', - '}\n\n', - 'ul {\n', - ' list-style: cs-numeric;\n', - '}' - ].join('') - }, - - 'additive': { - code: [ - '@counter-style cs-additive-roman {\n', - ' system: additive;\n', - " range: 1 100;\n", - ' additive-symbols: 1000 M, 900 CM, 500 D, 400 CD, 100 C, 90 XC, 50 L, 40 XL, 10 X, 9 IX, 5 V, 4 IV, 1 I;\n', - '}\n\n', - 'ul {\n', - ' list-style: cs-additive-roman;\n', - '}' - ].join('') - }, - - 'extends': { - code: [ - '@counter-style cs-extends {\n', - ' system: extends decimal;\n', - " prefix: '(';\n", - " suffix: ') ';\n", - '}\n\n', - 'ul {\n', - ' list-style: cs-extends;\n', - '}' - ].join('') - }, - - 'decimal': { - code: [ - 'ul {\n', - ' list-style: decimal;\n', - '}', - ].join('') - }, - - 'decimal-leading-zero': { - code: [ - 'ul {\n', - ' list-style: decimal-leading-zero;\n', - '}', - ].join('') - }, - - 'arabic-indic': { - code: [ - 'ul {\n', - ' list-style: arabic-indic;\n', - '}', - ].join('') - }, - - 'armenian': { - code: [ - 'ul {\n', - ' list-style: armenian;\n', - '}', - ].join('') - }, - - 'upper-armenian': { - code: [ - 'ul {\n', - ' list-style: upper-armenian;\n', - '}', - ].join('') - }, - - 'lower-armenian': { - code: [ - 'ul {\n', - ' list-style: lower-armenian;\n', - '}', - ].join('') - }, - - 'bengali': { - code: [ - 'ul {\n', - ' list-style: bengali;\n', - '}', - ].join('') - }, - - 'cambodian': { - code: [ - 'ul {\n', - ' list-style: cambodian;\n', - '}', - ].join('') - }, - - 'khmer': { - code: [ - 'ul {\n', - ' list-style: khmer;\n', - '}', - ].join('') - }, - - 'cjk-decimal': { - code: [ - 'ul {\n', - ' list-style: cjk-decimal;\n', - '}', - ].join('') - }, - - 'devanagari': { - code: [ - 'ul {\n', - ' list-style: devanagari;\n', - '}', - ].join('') - }, - - 'georgian': { - code: [ - 'ul {\n', - ' list-style: georgian;\n', - '}', - ].join('') - }, - - 'gujarati': { - code: [ - 'ul {\n', - ' list-style: gujarati;\n', - '}', - ].join('') - }, - - 'gurmukhi': { - code: [ - 'ul {\n', - ' list-style: gurmukhi;\n', - '}', - ].join('') - }, - - 'hebrew': { - code: [ - 'ul {\n', - ' list-style: hebrew;\n', - '}', - ].join('') - }, - - 'kannada': { - code: [ - 'ul {\n', - ' list-style: kannada;\n', - '}', - ].join('') - }, - - 'lao': { - code: [ - 'ul {\n', - ' list-style: lao;\n', - '}', - ].join('') - }, - - 'malayalam': { - code: [ - 'ul {\n', - ' list-style: malayalam;\n', - '}', - ].join('') - }, - - 'mongolian': { - code: [ - 'ul {\n', - ' list-style: mongolian;\n', - '}', - ].join('') - }, - - 'myanmar': { - code: [ - 'ul {\n', - ' list-style: myanmar;\n', - '}', - ].join('') - }, - - 'oriya': { - code: [ - 'ul {\n', - ' list-style: oriya;\n', - '}', - ].join('') - }, - - 'persian': { - code: [ - 'ul {\n', - ' list-style: persian;\n', - '}', - ].join('') - }, - - 'lower-roman': { - code: [ - 'ul {\n', - ' list-style: lower-roman;\n', - '}', - ].join('') - }, - - 'upper-roman': { - code: [ - 'ul {\n', - ' list-style: upper-roman;\n', - '}', - ].join('') - }, - - 'telugu': { - code: [ - 'ul {\n', - ' list-style: telugu;\n', - '}', - ].join('') - }, - - 'thai': { - code: [ - 'ul {\n', - ' list-style: thai;\n', - '}', - ].join('') - }, - - 'tibetan': { - code: [ - 'ul {\n', - ' list-style: tibetan;\n', - '}', - ].join('') - }, - - 'lower-alpha': { - code: [ - 'ul {\n', - ' list-style: lower-alpha;\n', - '}', - ].join('') - }, - - 'lower-latin': { - code: [ - 'ul {\n', - ' list-style: lower-latin;\n', - '}', - ].join('') - }, - - 'upper-alpha': { - code: [ - 'ul {\n', - ' list-style: upper-alpha;\n', - '}', - ].join('') - }, - - 'upper-latin': { - code: [ - 'ul {\n', - ' list-style: upper-latin;\n', - '}', - ].join('') - }, - - 'cjk-earthly-branch': { - code: [ - 'ul {\n', - ' list-style: cjk-earthly-branch;\n', - '}', - ].join('') - }, - - 'cjk-heavenly-stem': { - code: [ - 'ul {\n', - ' list-style: cjk-heavenly-stem;\n', - '}', - ].join('') - }, - - 'lower-greek': { - code: [ - 'ul {\n', - ' list-style: lower-greek;\n', - '}', - ].join('') - }, - - 'hiragana': { - code: [ - 'ul {\n', - ' list-style: hiragana;\n', - '}', - ].join('') - }, - - 'hiragana-iroha': { - code: [ - 'ul {\n', - ' list-style: hiragana-iroha;\n', - '}', - ].join('') - }, - - 'katakana': { - code: [ - 'ul {\n', - ' list-style: katakana;\n', - '}', - ].join('') - }, - - 'katakana-iroha': { - code: [ - 'ul {\n', - ' list-style: katakana-iroha;\n', - '}', - ].join('') - }, - - 'disc': { - code: [ - 'ul {\n', - ' list-style: disc;\n', - '}', - ].join('') - }, - - 'circle': { - code: [ - 'ul {\n', - ' list-style: circle;\n', - '}', - ].join('') - }, - - 'square': { - code: [ - 'ul {\n', - ' list-style: square;\n', - '}', - ].join('') - }, - - 'disclosure-open': { - code: [ - 'ul {\n', - ' list-style: disclosure-open;\n', - '}', - ].join('') - }, - - 'disclosure-closed': { - code: [ - 'ul {\n', - ' list-style: disclosure-closed;\n', - '}', - ].join('') - }, - - 'japanese-informal': { - code: [ - 'ul {\n', - ' list-style: japanese-informal;\n', - '}', - ].join('') - }, - - 'japanese-formal': { - code: [ - 'ul {\n', - ' list-style: japanese-formal;\n', - '}', - ].join('') - }, - - 'korean-hangul-formal': { - code: [ - 'ul {\n', - ' list-style: korean-hangul-formal;\n', - '}', - ].join('') - }, - - 'korean-hanja-informal': { - code: [ - 'ul {\n', - ' list-style: korean-hanja-informal;\n', - '}', - ].join('') - }, - - 'korean-hanja-formal': { - code: [ - 'ul {\n', - ' list-style: korean-hanja-formal;\n', - '}', - ].join('') - }, - - 'simp-chinese-informal': { - code: [ - 'ul {\n', - ' list-style: simp-chinese-informal;\n', - '}', - ].join('') - }, - - 'simp-chinese-formal': { - code: [ - 'ul {\n', - ' list-style: simp-chinese-formal;\n', - '}', - ].join('') - }, - - 'trad-chinese-informal': { - code: [ - 'ul {\n', - ' list-style: trad-chinese-informal;\n', - '}', - ].join('') - }, - - 'trad-chinese-formal': { - code: [ - 'ul {\n', - ' list-style: trad-chinese-formal;\n', - '}', - ].join('') - }, - - 'cjk-ideographic': { - code: [ - 'ul {\n', - ' list-style: cjk-ideographic;\n', - '}', - ].join('') - }, - - 'ethiopic-numeric': { - code: [ - 'ul {\n', - ' list-style: ethiopic-numeric;\n', - '}', - ].join('') - } - }; - - $styleSelect.value = 'cyclic'; - - $styleSelect.addEventListener('change', function (e) { - var selectedKey = $styleSelect.value; - $codeContainer.innerHTML = examples[selectedKey].code; - $demoList.className = 'demo-' + selectedKey; - }); + var $styleSelect = document.querySelector("#style-select"), + $demoList = document.querySelector("#demo-list"), + $codeContainer = document.querySelector("#code"); + var examples = { + cyclic: { + code: [ + "@counter-style blacknwhite {\n", + " system: cyclic;\n", + " symbols: ◆ ◇;\n", + ' suffix: " ";\n', + "}\n\n", + "ul {\n", + " list-style: blacknwhite;\n", + "}", + ].join(""), + }, + + fixed: { + code: [ + "@counter-style circled-digits {\n", + " system: fixed;\n", + " symbols: 😀 👻 👽 👾 🤖 🎃 😹 👋 👀 💋;\n", + ' suffix: " ";\n', + "}\n\n", + "ul {\n", + " list-style: circled-digits;\n", + "}", + ].join(""), + }, + + symbolic: { + code: [ + "@counter-style cs-symbolic {\n", + " system: symbolic;\n", + " symbols: '*' ⁑ † ‡;\n", + " range: 1 15;\n", + ' suffix: " ";\n', + "}\n\n", + "ul {\n", + " list-style: cs-symbolic;\n", + "}", + ].join(""), + }, + + alphabetic: { + code: [ + "@counter-style cs-alphabetic {\n", + " system: alphabetic;\n", + " symbols: A B C D E;\n", + ' suffix: " ";\n', + "}\n\n", + "ul {\n", + " list-style: cs-alphabetic;\n", + "}", + ].join(""), + }, + + numeric: { + code: [ + "@counter-style cs-numeric {\n", + " system: numeric;\n", + " symbols: A B C D E;\n", + ' suffix: " ";\n', + "}\n\n", + "ul {\n", + " list-style: cs-numeric;\n", + "}", + ].join(""), + }, + + additive: { + code: [ + "@counter-style cs-additive-roman {\n", + " system: additive;\n", + " range: 1 100;\n", + " additive-symbols: 1000 M, 900 CM, 500 D, 400 CD, 100 C, 90 XC, 50 L, 40 XL, 10 X, 9 IX, 5 V, 4 IV, 1 I;\n", + "}\n\n", + "ul {\n", + " list-style: cs-additive-roman;\n", + "}", + ].join(""), + }, + + extends: { + code: [ + "@counter-style cs-extends {\n", + " system: extends decimal;\n", + " prefix: '(';\n", + " suffix: ') ';\n", + "}\n\n", + "ul {\n", + " list-style: cs-extends;\n", + "}", + ].join(""), + }, + + decimal: { + code: ["ul {\n", " list-style: decimal;\n", "}"].join(""), + }, + + "decimal-leading-zero": { + code: ["ul {\n", " list-style: decimal-leading-zero;\n", "}"].join(""), + }, + + "arabic-indic": { + code: ["ul {\n", " list-style: arabic-indic;\n", "}"].join(""), + }, + + armenian: { + code: ["ul {\n", " list-style: armenian;\n", "}"].join(""), + }, + + "upper-armenian": { + code: ["ul {\n", " list-style: upper-armenian;\n", "}"].join(""), + }, + + "lower-armenian": { + code: ["ul {\n", " list-style: lower-armenian;\n", "}"].join(""), + }, + + bengali: { + code: ["ul {\n", " list-style: bengali;\n", "}"].join(""), + }, + + cambodian: { + code: ["ul {\n", " list-style: cambodian;\n", "}"].join(""), + }, + + khmer: { + code: ["ul {\n", " list-style: khmer;\n", "}"].join(""), + }, + + "cjk-decimal": { + code: ["ul {\n", " list-style: cjk-decimal;\n", "}"].join(""), + }, + + devanagari: { + code: ["ul {\n", " list-style: devanagari;\n", "}"].join(""), + }, + + georgian: { + code: ["ul {\n", " list-style: georgian;\n", "}"].join(""), + }, + + gujarati: { + code: ["ul {\n", " list-style: gujarati;\n", "}"].join(""), + }, + + gurmukhi: { + code: ["ul {\n", " list-style: gurmukhi;\n", "}"].join(""), + }, + + hebrew: { + code: ["ul {\n", " list-style: hebrew;\n", "}"].join(""), + }, + + kannada: { + code: ["ul {\n", " list-style: kannada;\n", "}"].join(""), + }, + + lao: { + code: ["ul {\n", " list-style: lao;\n", "}"].join(""), + }, + + malayalam: { + code: ["ul {\n", " list-style: malayalam;\n", "}"].join(""), + }, + + mongolian: { + code: ["ul {\n", " list-style: mongolian;\n", "}"].join(""), + }, + + myanmar: { + code: ["ul {\n", " list-style: myanmar;\n", "}"].join(""), + }, + + oriya: { + code: ["ul {\n", " list-style: oriya;\n", "}"].join(""), + }, + + persian: { + code: ["ul {\n", " list-style: persian;\n", "}"].join(""), + }, + + "lower-roman": { + code: ["ul {\n", " list-style: lower-roman;\n", "}"].join(""), + }, + + "upper-roman": { + code: ["ul {\n", " list-style: upper-roman;\n", "}"].join(""), + }, + + telugu: { + code: ["ul {\n", " list-style: telugu;\n", "}"].join(""), + }, + + thai: { + code: ["ul {\n", " list-style: thai;\n", "}"].join(""), + }, + + tibetan: { + code: ["ul {\n", " list-style: tibetan;\n", "}"].join(""), + }, + + "lower-alpha": { + code: ["ul {\n", " list-style: lower-alpha;\n", "}"].join(""), + }, + + "lower-latin": { + code: ["ul {\n", " list-style: lower-latin;\n", "}"].join(""), + }, + + "upper-alpha": { + code: ["ul {\n", " list-style: upper-alpha;\n", "}"].join(""), + }, + + "upper-latin": { + code: ["ul {\n", " list-style: upper-latin;\n", "}"].join(""), + }, + + "cjk-earthly-branch": { + code: ["ul {\n", " list-style: cjk-earthly-branch;\n", "}"].join(""), + }, + + "cjk-heavenly-stem": { + code: ["ul {\n", " list-style: cjk-heavenly-stem;\n", "}"].join(""), + }, + + "lower-greek": { + code: ["ul {\n", " list-style: lower-greek;\n", "}"].join(""), + }, + + hiragana: { + code: ["ul {\n", " list-style: hiragana;\n", "}"].join(""), + }, + + "hiragana-iroha": { + code: ["ul {\n", " list-style: hiragana-iroha;\n", "}"].join(""), + }, + + katakana: { + code: ["ul {\n", " list-style: katakana;\n", "}"].join(""), + }, + + "katakana-iroha": { + code: ["ul {\n", " list-style: katakana-iroha;\n", "}"].join(""), + }, + + disc: { + code: ["ul {\n", " list-style: disc;\n", "}"].join(""), + }, + + circle: { + code: ["ul {\n", " list-style: circle;\n", "}"].join(""), + }, + + square: { + code: ["ul {\n", " list-style: square;\n", "}"].join(""), + }, + + "disclosure-open": { + code: ["ul {\n", " list-style: disclosure-open;\n", "}"].join(""), + }, + + "disclosure-closed": { + code: ["ul {\n", " list-style: disclosure-closed;\n", "}"].join(""), + }, + + "japanese-informal": { + code: ["ul {\n", " list-style: japanese-informal;\n", "}"].join(""), + }, + + "japanese-formal": { + code: ["ul {\n", " list-style: japanese-formal;\n", "}"].join(""), + }, + + "korean-hangul-formal": { + code: ["ul {\n", " list-style: korean-hangul-formal;\n", "}"].join(""), + }, + + "korean-hanja-informal": { + code: ["ul {\n", " list-style: korean-hanja-informal;\n", "}"].join(""), + }, + + "korean-hanja-formal": { + code: ["ul {\n", " list-style: korean-hanja-formal;\n", "}"].join(""), + }, + + "simp-chinese-informal": { + code: ["ul {\n", " list-style: simp-chinese-informal;\n", "}"].join(""), + }, + + "simp-chinese-formal": { + code: ["ul {\n", " list-style: simp-chinese-formal;\n", "}"].join(""), + }, + + "trad-chinese-informal": { + code: ["ul {\n", " list-style: trad-chinese-informal;\n", "}"].join(""), + }, + + "trad-chinese-formal": { + code: ["ul {\n", " list-style: trad-chinese-formal;\n", "}"].join(""), + }, + + "cjk-ideographic": { + code: ["ul {\n", " list-style: cjk-ideographic;\n", "}"].join(""), + }, + + "ethiopic-numeric": { + code: ["ul {\n", " list-style: ethiopic-numeric;\n", "}"].join(""), + }, + }; + + $styleSelect.value = "cyclic"; + + $styleSelect.addEventListener("change", function (e) { + var selectedKey = $styleSelect.value; + $codeContainer.innerHTML = examples[selectedKey].code; + $demoList.className = "demo-" + selectedKey; + }); })(); diff --git a/css-cookbook/breadcrumb-navigation--download.html b/css-cookbook/breadcrumb-navigation--download.html index 35823e9c..e3806713 100644 --- a/css-cookbook/breadcrumb-navigation--download.html +++ b/css-cookbook/breadcrumb-navigation--download.html @@ -1,52 +1,52 @@ - + - + CSS Cookbook: Breadcrumb Navigation + - - - - + - - - - \ No newline at end of file + + diff --git a/css-cookbook/breadcrumb-navigation.html b/css-cookbook/breadcrumb-navigation.html index b30bf879..1df1fdbd 100644 --- a/css-cookbook/breadcrumb-navigation.html +++ b/css-cookbook/breadcrumb-navigation.html @@ -1,80 +1,79 @@ - + - + CSS Cookbook: Breadcrumb Navigation - + - + - +
- +
- + display: inline-block; + margin: 0 .25rem; + content: "→"; +} - + +
- +
- - - - \ No newline at end of file + + + diff --git a/css-cookbook/card--download.html b/css-cookbook/card--download.html index 235d31b6..24abbdc1 100644 --- a/css-cookbook/card--download.html +++ b/css-cookbook/card--download.html @@ -1,123 +1,123 @@ - + - - + CSS Cookbook: card component - + - - - - - - +
-
-
-

A short heading

-
- - Hot air balloons -
-

The idea of reaching the North Pole by means of balloons appears to have been entertained many - years ago.

-
- -
- -
-
-

A short heading

-
- - Hot air balloons -
-

Short content.

-
-
I have a footer!
-
- -
-
-

A longer heading in this card

-
- - Hot air balloons -
-

In a curious work, published in Paris in 1863 by Delaville Dedreux, there is a - suggestion for reaching the North Pole by an aerostat.

-
-
I have a footer!
-
-
-
-

A short heading

-
- - Hot air balloons -
-

The idea of reaching the North Pole by means of balloons appears to have been entertained many - years ago.

-
- -
+
+
+

A short heading

+
+ + Hot air balloons +
+

+ The idea of reaching the North Pole by means of balloons appears to + have been entertained many years ago. +

+
+
+ +
+
+

A short heading

+
+ + Hot air balloons +
+

Short content.

+
+
I have a footer!
+
+ +
+
+

A longer heading in this card

+
+ + Hot air balloons +
+

+ In a curious work, published in Paris in 1863 by Delaville Dedreux, + there is a suggestion for reaching the North Pole by an aerostat. +

+
+
I have a footer!
+
+
+
+

A short heading

+
+ + Hot air balloons +
+

+ The idea of reaching the North Pole by means of balloons appears to + have been entertained many years ago. +

+
+
- - - - \ No newline at end of file + + diff --git a/css-cookbook/card.html b/css-cookbook/card.html index ebbcfc09..fb189632 100644 --- a/css-cookbook/card.html +++ b/css-cookbook/card.html @@ -1,197 +1,199 @@ - + - + CSS Cookbook: card component - + - + - +
-
-
-
-

A short heading

-
- - Hot air balloons -
-

The idea of reaching the North Pole by means of balloons appears to have been entertained many - years ago.

-
- -
- -
-
-

A short heading

-
- - Hot air balloons -
-

Short content.

-
-
I have a footer!
-
- -
-
-

A longer heading in this card

-
- - Hot air balloons -
-

In a curious work, published in Paris in 1863 by Delaville Dedreux, there is a - suggestion for reaching the North Pole by an aerostat.

-
-
I have a footer!
-
-
-
-

A short heading

-
- - Hot air balloons -
-

The idea of reaching the North Pole by means of balloons appears to have been entertained many - years ago.

-
- -
-
+
+
+
+

A short heading

+
+ + Hot air balloons +
+

+ The idea of reaching the North Pole by means of balloons appears + to have been entertained many years ago. +

+
+
+ +
+
+

A short heading

+
+ Hot air balloons +
+

Short content.

+
+
I have a footer!
+
+ +
+
+

A longer heading in this card

+
+ + Hot air balloons +
+

+ In a curious work, published in Paris in 1863 by Delaville + Dedreux, there is a suggestion for reaching the North Pole by an + aerostat. +

+
+
I have a footer!
+
+
+
+

A short heading

+
+ + Hot air balloons +
+

+ The idea of reaching the North Pole by means of balloons appears + to have been entertained many years ago. +

+
+
+
- + object-fit: cover; + width: 100%; + height: 100%; +} - +
+
+

A short heading

+
+ Hot air balloons +
+

The idea of reaching the North Pole by means of balloons appears to have been entertained many years ago.

+
+ +
+ +
+
+

A short heading

+
+ Hot air balloons +
+

Short content.

+
+ +
+ +
+
+

A longer heading in this card

+
+ Hot air balloons +
+

In a curious work, published in Paris in 1863 by Delaville Dedreux, there is a + suggestion for reaching the North Pole by an aerostat.

+
+ +
+
+
+

A short heading

+
+ Hot air balloons +
+

The idea of reaching the North Pole by means of balloons appears to have been entertained many + years ago.

+
+ +
+
- +
- - - - \ No newline at end of file + + + diff --git a/css-cookbook/center--download.html b/css-cookbook/center--download.html index 05f279b8..cf6480df 100644 --- a/css-cookbook/center--download.html +++ b/css-cookbook/center--download.html @@ -1,50 +1,46 @@ - + - - + CSS Cookbook: center an element - + - - - - - - +
-
I am centered!
+
I am centered!
- - - - \ No newline at end of file + + diff --git a/css-cookbook/center.html b/css-cookbook/center.html index 5ca09cfd..4404204f 100644 --- a/css-cookbook/center.html +++ b/css-cookbook/center.html @@ -1,67 +1,66 @@ - - - - - - CSS Cookbook: center an element - - - - - - - -
-
-
I am centered!
-
-
- - - - - -
- -
- - - - \ No newline at end of file + + + + + + CSS Cookbook: center an element + + + + + + + +
+
+
I am centered!
+
+
+ + + + + +
+ +
+ + + diff --git a/css-cookbook/columns-flexbox--download.html b/css-cookbook/columns-flexbox--download.html index 2114955a..c41cfac0 100644 --- a/css-cookbook/columns-flexbox--download.html +++ b/css-cookbook/columns-flexbox--download.html @@ -1,57 +1,61 @@ - + - - + CSS Cookbook: columns with flexbox + - - - +
-

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi - tomatillo - melon azuki bean garlic.

- -

Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean - collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

- -

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach - avocado - daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish - spinach - carrot soko. -

- +

+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

+ +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

+ +

+ Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach carrot soko. +

- + diff --git a/css-cookbook/columns-flexbox-wrapping--download.html b/css-cookbook/columns-flexbox-wrapping--download.html index 771354ad..9ab5d88a 100644 --- a/css-cookbook/columns-flexbox-wrapping--download.html +++ b/css-cookbook/columns-flexbox-wrapping--download.html @@ -1,61 +1,63 @@ - + - - + CSS Cookbook: columns with flexbox, wrapping + - - - - +
-

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi - tomatillo - melon azuki bean garlic.

- -

Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean - collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

- -

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach - avocado - daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish - spinach - carrot soko. -

+

+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

+ +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

+ +

+ Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach carrot soko. +

- - - - \ No newline at end of file + + diff --git a/css-cookbook/columns-flexbox-wrapping.html b/css-cookbook/columns-flexbox-wrapping.html index 8d782ac5..acec9cec 100644 --- a/css-cookbook/columns-flexbox-wrapping.html +++ b/css-cookbook/columns-flexbox-wrapping.html @@ -1,85 +1,89 @@ - - - - - - - - - CSS Cookbook: columns with flexbox, wrapping - - - - - - - - - - -
-
-

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

- -

Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

- -

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado - daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach - carrot soko. -

-
-
- - - - - -
- -
- - - - + + + + + + + + CSS Cookbook: columns with flexbox, wrapping + + + + + + + + + +
+
+

+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

+ +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

+ +

+ Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach carrot soko. +

+
+
+ + + + + +
+ +
+ + + diff --git a/css-cookbook/columns-flexbox.html b/css-cookbook/columns-flexbox.html index 0d9e47c6..cbcd6c5a 100644 --- a/css-cookbook/columns-flexbox.html +++ b/css-cookbook/columns-flexbox.html @@ -1,86 +1,89 @@ - - - - - - - - - CSS Cookbook: columns with flexbox - - - - - - - - - - -
-
-

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

- -

Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

- -

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado - daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach - carrot soko. -

- -
-
- - - - - -
- -
- - - - + + + + + + + + CSS Cookbook: columns with flexbox + + + + + + + + + +
+
+

+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

+ +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

+ +

+ Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach carrot soko. +

+
+
+ + + + + +
+ +
+ + + diff --git a/css-cookbook/columns-grid--download.html b/css-cookbook/columns-grid--download.html index 95d6fabf..91349f2d 100644 --- a/css-cookbook/columns-grid--download.html +++ b/css-cookbook/columns-grid--download.html @@ -1,54 +1,61 @@ - + - - + CSS Cookbook: columns with grid + - - - - +
-

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi.

- -

Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean - collard greens.

- -

Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts - black-eyed pea prairie turnip leek lentil turnip greens parsnip. .

+

+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi. +

+ +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens. +

+ +

+ Nori grape silver beet broccoli kombu beet greens fava bean potato + quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil + turnip greens parsnip. . +

- - - - \ No newline at end of file + + diff --git a/css-cookbook/columns-grid.html b/css-cookbook/columns-grid.html index 7c7032d9..ffbc7af1 100644 --- a/css-cookbook/columns-grid.html +++ b/css-cookbook/columns-grid.html @@ -1,79 +1,83 @@ - - - - - - - - - CSS Cookbook: columns with grid - - - - - - - - - - -
-
-

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi.

- -

Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean - collard greens.

- -

Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts - black-eyed pea prairie turnip leek lentil turnip greens parsnip. .

-
-
- - - - - -
- -
- - - - - + + + + + + + + CSS Cookbook: columns with grid + + + + + + + + + +
+
+

+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi. +

+ +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens. +

+ +

+ Nori grape silver beet broccoli kombu beet greens fava bean potato + quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil + turnip greens parsnip. . +

+
+
+ + + + + +
+ +
+ + + + diff --git a/css-cookbook/columns-multicol--download.html b/css-cookbook/columns-multicol--download.html index 10c3db31..6b29dbe7 100644 --- a/css-cookbook/columns-multicol--download.html +++ b/css-cookbook/columns-multicol--download.html @@ -1,54 +1,56 @@ - + - - + CSS Cookbook: columns with multicol - + + - - - - +
-

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi - tomatillo - melon azuki bean garlic.

- -

Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean - collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

- -

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach - avocado - daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish - spinach -

- +

+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

+ +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

+ +

+ Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach +

- - - + diff --git a/css-cookbook/columns-multicol.html b/css-cookbook/columns-multicol.html index 13618bea..e8bea1af 100644 --- a/css-cookbook/columns-multicol.html +++ b/css-cookbook/columns-multicol.html @@ -1,70 +1,74 @@ - - - - - - - - - CSS Cookbook: columns with multicol - - - - - - - - - - -
-
-

Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

- -

Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

- -

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado - daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach -

- -
-
- - - - - -
- -
- - - - + + + + + + + + CSS Cookbook: columns with multicol + + + + + + + + + +
+
+

+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

+ +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

+ +

+ Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach +

+
+
+ + + + + +
+ +
+ + + diff --git a/css-cookbook/cookbook-template--download.html b/css-cookbook/cookbook-template--download.html index 4e6aa5f5..1ecd2822 100644 --- a/css-cookbook/cookbook-template--download.html +++ b/css-cookbook/cookbook-template--download.html @@ -1,35 +1,31 @@ - + - - + CSS Cookbook: download template - + - - - - - - + - - - - \ No newline at end of file + + diff --git a/css-cookbook/cookbook-template.html b/css-cookbook/cookbook-template.html index ab64d767..a989fb55 100644 --- a/css-cookbook/cookbook-template.html +++ b/css-cookbook/cookbook-template.html @@ -1,37 +1,36 @@ - + - + CSS Cookbook: template - + - + - +
- +
- - +
- +
- - - - \ No newline at end of file + + + diff --git a/css-cookbook/grid-wrapper--download.html b/css-cookbook/grid-wrapper--download.html index d62a7bb3..7c5706a0 100644 --- a/css-cookbook/grid-wrapper--download.html +++ b/css-cookbook/grid-wrapper--download.html @@ -1,74 +1,79 @@ - + - - - - - - CSS Cookbook: Grid Wrapper - - - - - - - - - - -
-
-

This item aligns to a central “wrapper” – columns that have a maximum width.

-
-
-

This item aligns to the edge of the grid container.

+ + + + + CSS Cookbook: Grid Wrapper + + + + + +
+
+

+ This item aligns to a central “wrapper” – columns that have a maximum + width. +

+
+
+

This item aligns to the edge of the grid container.

+
+
+

+ This item aligns to the left edge of the grid container and the right + edge of the wrapper. +

+
+
+

This item aligns to the right edge of the “wrapper” columns.

+
-
-

This item aligns to the left edge of the grid container and the right edge of the wrapper.

-
-
-

This item aligns to the right edge of the “wrapper” columns.

-
-
- - - - \ No newline at end of file + + diff --git a/css-cookbook/grid-wrapper.html b/css-cookbook/grid-wrapper.html index 2a696a83..166418bb 100644 --- a/css-cookbook/grid-wrapper.html +++ b/css-cookbook/grid-wrapper.html @@ -1,136 +1,146 @@ - + - - - - - CSS Cookbook: Grid Wrapper - - - - - - -
-
-
-

This item aligns to a central “wrapper” – columns that have a maximum width.

-
-
-

This item aligns to the edge of the grid container.

-
-
-

This item aligns to the left edge of the grid container and the right edge of the wrapper.

-
-
-

This item aligns to the right edge of the “wrapper” columns.

+ + + + +
+
+
+

+ This item aligns to a central “wrapper” – columns that have a + maximum width. +

+
+
+

This item aligns to the edge of the grid container.

+
+
+

+ This item aligns to the left edge of the grid container and the + right edge of the wrapper. +

+
+
+

This item aligns to the right edge of the “wrapper” columns.

+
-
-
- - +.wrapper { + grid-column: 2 / -2; +} - -
-

This item aligns to the edge of the grid container.

-
+ - -
- +
+

This item aligns to the right edge of the “wrapper” columns.

- - +
+ + +
+ +
+ + diff --git a/css-cookbook/list-group-badges--download.html b/css-cookbook/list-group-badges--download.html index 429ad503..38833583 100644 --- a/css-cookbook/list-group-badges--download.html +++ b/css-cookbook/list-group-badges--download.html @@ -1,74 +1,75 @@ - + - + CSS Cookbook: List Group with Badges - + - - - - - - + - - - - \ No newline at end of file + + diff --git a/css-cookbook/list-group-badges.html b/css-cookbook/list-group-badges.html index 9a78bd62..88bc6dae 100644 --- a/css-cookbook/list-group-badges.html +++ b/css-cookbook/list-group-badges.html @@ -1,97 +1,99 @@ - + - + CSS Cookbook: List Group with Badges - + - + - +
- +
- + display: flex; + justify-content: space-between; + align-items: center; +} - +
  • Item One + 2 +
    • +
  • Item Two + 10 +
    • +
  • Item Three + 9 +
    • +
  • Item Four + 0 +
    • +
    - +
    - - - - \ No newline at end of file + + + diff --git a/css-cookbook/media-objects--download.html b/css-cookbook/media-objects--download.html index 8ad729a0..1dd5b69d 100644 --- a/css-cookbook/media-objects--download.html +++ b/css-cookbook/media-objects--download.html @@ -1,150 +1,149 @@ - + - - + CSS Cookbook: media objects + - - - - +
    - -
    - Balloons -
    - -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    -
    - An optional footer goes here. -
    +
    + Balloons +
    + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula + vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor + elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. + Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id + dolor venenatis condimentum. +

    +
    +
    An optional footer goes here.
    - -
    - Account -
    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    -
    +
    + Account +
    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula + vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor + elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. + Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id + dolor venenatis condimentum. +

    +
    +
    - -
    - Balloons -
    - -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    -
    - An optional footer goes here. -
    +
    + Balloons +
    + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula + vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor + elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. + Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id + dolor venenatis condimentum. +

    +
    +
    An optional footer goes here.
    - + + Balloons + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula + vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor + elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. + Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id + dolor venenatis condimentum. +

    +
    + +
    + +
    - Balloons + Balloons
    - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis + vehicula vitae ligula sit amet maximus. +

    - -
    - - - Balloons - - -
    - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus.

    -
    - -
    - -
    - +
    - - - + diff --git a/css-cookbook/media-objects-fallback--download.html b/css-cookbook/media-objects-fallback--download.html index 62af147b..b1d1d8e3 100644 --- a/css-cookbook/media-objects-fallback--download.html +++ b/css-cookbook/media-objects-fallback--download.html @@ -1,179 +1,177 @@ - + - - + CSS Cookbook: media objects - + .media-flip .img { + float: right; + margin: 0 0 0 20px; + } - + .content { + grid-area: content; + } -
    + .footer { + grid-area: footer; + } -
    - Balloons -
    + @supports (display: grid) { + .media:after { + content: none; + } -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    -
    - An optional footer goes here. -
    -
    + .img, + .media-flip .img { + max-width: 100%; + margin: 0; + } + } + } + + +
    +
    + Balloons +
    + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula + vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor + elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. + Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id + dolor venenatis condimentum. +

    +
    +
    An optional footer goes here.
    +
    -
    - Account -
    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    -
    +
    +
    + Account +
    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula + vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor + elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. + Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id + dolor venenatis condimentum. +

    +
    +
    - -
    - Balloons -
    - -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    -
    - An optional footer goes here. -
    +
    + Balloons +
    + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula + vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor + elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. + Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id + dolor venenatis condimentum. +

    +
    +
    An optional footer goes here.
    - + + Balloons + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula + vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor + elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. + Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id + dolor venenatis condimentum. +

    +
    + +
    + +
    - Balloons + Balloons
    - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis + vehicula vitae ligula sit amet maximus. +

    - -
    - - - Balloons - - -
    - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus.

    -
    - -
    - -
    - +
    - - - + diff --git a/css-cookbook/media-objects-fallback.html b/css-cookbook/media-objects-fallback.html index 347896ba..c8d4021e 100644 --- a/css-cookbook/media-objects-fallback.html +++ b/css-cookbook/media-objects-fallback.html @@ -1,254 +1,250 @@ - + - - + CSS Cookbook: media objects - + - - - - -
    -
    - -
    - Balloons -
    - -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    -
    - An optional footer goes here. -
    -
    + @media (min-width: 500px) { + /* clearfix*/ + .media:after { + content: ""; + display: table; + clear: both; + } -
    + .media { + display: grid; + grid-template-columns: fit-content(200px) 1fr; + grid-template-rows: 1fr auto; + grid-template-areas: + "image content" + "image footer"; + grid-gap: 20px; + margin-bottom: 4em; + } -
    - Account -
    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    -
    -
    + .media-flip { + grid-template-columns: 1fr fit-content(200px); + grid-template-areas: + "content image" + "footer image"; + } -
    - -
    - Balloons -
    - -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    -
    - An optional footer goes here. -
    -
    + .img { + float: left; + margin-right: 20px; + max-width: 200px; + grid-area: image; + } -
    + .media-flip .img { + float: right; + margin: 0 0 0 20px; + } - - Balloons - + .content { + grid-area: content; + } -
    + .footer { + grid-area: footer; + } -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    + @supports (display: grid) { + .media:after { + content: none; + } -
    + .img, + .media-flip .img { + max-width: 100%; + margin: 0; + } + } + } + + -
    + +
    +
    +
    + Balloons +
    - - Balloons - +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis + vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac + porttitor elit lobortis ac. Vivamus ultrices sodales tellus et + aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent + quis risus id dolor venenatis condimentum. +

    +
    +
    An optional footer goes here.
    +
    -
    +
    +
    + Account +
    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis + vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac + porttitor elit lobortis ac. Vivamus ultrices sodales tellus et + aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent + quis risus id dolor venenatis condimentum. +

    +
    +
    +
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus.

    -
    +
    +
    + Balloons +
    -
    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis + vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac + porttitor elit lobortis ac. Vivamus ultrices sodales tellus et + aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent + quis risus id dolor venenatis condimentum. +

    +
    +
    An optional footer goes here.
    +
    + +
    + + Balloons + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis + vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac + porttitor elit lobortis ac. Vivamus ultrices sodales tellus et + aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent + quis risus id dolor venenatis condimentum. +

    +
    -
    +
    +
    + + Balloons + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis + vehicula vitae ligula sit amet maximus. +

    +
    + +
    +
    - + } +} +
    - +
    - - - - \ No newline at end of file + + + diff --git a/css-cookbook/media-objects.html b/css-cookbook/media-objects.html index 7d4f4d7f..2b1568d7 100644 --- a/css-cookbook/media-objects.html +++ b/css-cookbook/media-objects.html @@ -1,201 +1,198 @@ - + - + CSS Cookbook: media objects - + + @media (min-width: 500px) { + .media { + display: grid; + grid-template-columns: fit-content(200px) 1fr; + grid-template-rows: 1fr auto; + grid-template-areas: + "image content" + "image footer"; + grid-gap: 20px; + margin-bottom: 4em; + } - + .media-flip { + grid-template-columns: 1fr fit-content(250px); + grid-template-areas: + "content image" + "footer image"; + } - -
    -
    + .img { + grid-area: image; + } -
    - Balloons -
    - -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    -
    - An optional footer goes here. -
    -
    + .content { + grid-area: content; + } -
    + .footer { + grid-area: footer; + } + } + + -
    - Account -
    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    -
    + +
    +
    +
    + Balloons
    -
    - -
    - Balloons -
    - -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    -
    - An optional footer goes here. -
    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis + vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac + porttitor elit lobortis ac. Vivamus ultrices sodales tellus et + aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent + quis risus id dolor venenatis condimentum. +

    +
    An optional footer goes here.
    +
    -
    - - - Balloons - - -
    - -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et - aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis - condimentum.

    -
    - -
    - -
    - - - Balloons - - -
    +
    +
    + Account +
    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis + vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac + porttitor elit lobortis ac. Vivamus ultrices sodales tellus et + aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent + quis risus id dolor venenatis condimentum. +

    +
    +
    +
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet - maximus.

    -
    +
    +
    + Balloons +
    -
    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis + vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac + porttitor elit lobortis ac. Vivamus ultrices sodales tellus et + aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent + quis risus id dolor venenatis condimentum. +

    +
    +
    An optional footer goes here.
    +
    + +
    + + Balloons + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis + vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac + porttitor elit lobortis ac. Vivamus ultrices sodales tellus et + aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent + quis risus id dolor venenatis condimentum. +

    +
    -
    +
    +
    + + Balloons + + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis + vehicula vitae ligula sit amet maximus. +

    +
    + +
    +
    - - + + +
    - +
    - - - + + diff --git a/css-cookbook/pagination--download.html b/css-cookbook/pagination--download.html index 527d4efa..45d21320 100644 --- a/css-cookbook/pagination--download.html +++ b/css-cookbook/pagination--download.html @@ -1,86 +1,104 @@ - + - + CSS Cookbook: Pagination + - - - - - - + - - - - \ No newline at end of file + + diff --git a/css-cookbook/pagination.html b/css-cookbook/pagination.html index 78c19cc1..f2f820e8 100644 --- a/css-cookbook/pagination.html +++ b/css-cookbook/pagination.html @@ -1,113 +1,130 @@ - + - + CSS Cookbook: Pagination - + - + - +
    - +
    - + margin: 0 1px; +} - + +
    - +
    - - - - \ No newline at end of file + + + diff --git a/css-cookbook/playable.js b/css-cookbook/playable.js index ddebe2d8..d9353ed2 100644 --- a/css-cookbook/playable.js +++ b/css-cookbook/playable.js @@ -1,22 +1,22 @@ -var section = document.querySelector('section'); -var editable = document.querySelector('.editable'); -var textareaHTML = document.querySelector('.playable-html'); -var textareaCSS = document.querySelector('.playable-css'); -var reset = document.getElementById('reset'); +var section = document.querySelector("section"); +var editable = document.querySelector(".editable"); +var textareaHTML = document.querySelector(".playable-html"); +var textareaCSS = document.querySelector(".playable-css"); +var reset = document.getElementById("reset"); var htmlCode = textareaHTML.value; var cssCode = textareaCSS.value; function fillCode() { - editable.innerHTML = textareaCSS.value; - section.innerHTML = textareaHTML.value; + editable.innerHTML = textareaCSS.value; + section.innerHTML = textareaHTML.value; } -reset.addEventListener('click', function () { - textareaHTML.value = htmlCode; - textareaCSS.value = cssCode; - fillCode(); +reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); }); -textareaHTML.addEventListener('input', fillCode); -textareaCSS.addEventListener('input', fillCode); -window.addEventListener('load', fillCode); \ No newline at end of file +textareaHTML.addEventListener("input", fillCode); +textareaCSS.addEventListener("input", fillCode); +window.addEventListener("load", fillCode); diff --git a/css-cookbook/split-navigation--download.html b/css-cookbook/split-navigation--download.html index 6970de41..130f760d 100644 --- a/css-cookbook/split-navigation--download.html +++ b/css-cookbook/split-navigation--download.html @@ -1,55 +1,51 @@ - + - - + CSS Cookbook: Split Navigation - + - - - - - - + - - - - \ No newline at end of file + + diff --git a/css-cookbook/split-navigation.html b/css-cookbook/split-navigation.html index e5310f8b..9313ae8a 100644 --- a/css-cookbook/split-navigation.html +++ b/css-cookbook/split-navigation.html @@ -1,71 +1,70 @@ - + - + CSS Cookbook: Split Navigation - + - + - +
    - +
    - + margin-left: auto; +} - + +
    - +
    - - - - \ No newline at end of file + + + diff --git a/css-cookbook/sticky-footer--download.html b/css-cookbook/sticky-footer--download.html index 4fefa0eb..0ec88b6a 100644 --- a/css-cookbook/sticky-footer--download.html +++ b/css-cookbook/sticky-footer--download.html @@ -1,71 +1,72 @@ - + - - + CSS Cookbook: sticky footer - + + - - - - - +
    -
    -
    This is the header
    -
    -

    Main page content here, add more if you want to see the footer push down.

    -
    -
    Sticky footer
    -
    +
    +
    This is the header
    +
    +

    + Main page content here, add more if you want to see the footer push + down. +

    +
    +
    Sticky footer
    +
    - + diff --git a/css-cookbook/sticky-footer-flexbox--download.html b/css-cookbook/sticky-footer-flexbox--download.html index 563db944..60b1c7bc 100644 --- a/css-cookbook/sticky-footer-flexbox--download.html +++ b/css-cookbook/sticky-footer-flexbox--download.html @@ -1,72 +1,70 @@ - + - - + CSS Cookbook: sticky footer with flexbox - - + - - - - - - +
    -
    This is the header
    -
    -

    Main page content here, add more if you want to see the footer push down.

    -
    -
    Sticky footer
    +
    This is the header
    +
    +

    + Main page content here, add more if you want to see the footer push + down. +

    +
    +
    Sticky footer
    - - - + diff --git a/css-cookbook/sticky-footer-flexbox.html b/css-cookbook/sticky-footer-flexbox.html index 695d837d..7d764a60 100644 --- a/css-cookbook/sticky-footer-flexbox.html +++ b/css-cookbook/sticky-footer-flexbox.html @@ -1,125 +1,127 @@ - - - - - - - - - CSS Cookbook: sticky footer with flexbox - - - - - - - - - - -
    -
    -
    This is the header
    -
    -

    Main page content here, add more if you want to see the footer push down.

    -
    -
    Sticky footer
    -
    -
    - - - - - -
    - -
    - - - - + + + + + + + + CSS Cookbook: sticky footer with flexbox + + + + + + + + + +
    +
    +
    This is the header
    +
    +

    + Main page content here, add more if you want to see the footer push + down. +

    +
    +
    Sticky footer
    +
    +
    + + + + + +
    + +
    + + + diff --git a/css-cookbook/sticky-footer.html b/css-cookbook/sticky-footer.html index d6ce605d..2f238620 100644 --- a/css-cookbook/sticky-footer.html +++ b/css-cookbook/sticky-footer.html @@ -1,89 +1,89 @@ - - - - - - - - - CSS Cookbook: sticky footer - - - - - - - - - - -
    -
    -
    This is the header
    -
    -

    Main page content here, add more if you want to see the footer push down.

    -
    -
    Sticky footer
    -
    -
    - - - - - -
    - -
    - - - - + + + + + + + + CSS Cookbook: sticky footer + + + + + + + + + +
    +
    +
    This is the header
    +
    +

    + Main page content here, add more if you want to see the footer push + down. +

    +
    +
    Sticky footer
    +
    +
    + + + + + +
    + +
    + + + diff --git a/css-cookbook/styles.css b/css-cookbook/styles.css index 030678b3..11945fee 100644 --- a/css-cookbook/styles.css +++ b/css-cookbook/styles.css @@ -1,61 +1,65 @@ -/* Some default styling for cookbook examples */ -/* -rgb(53,43,34) -rgb(75,70,74) -rgb(95,97,110) -rgb(137,151,188) -rgb(160,178,226) -*/ -body { - background-color: #fff; - color: #333; - font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif; - padding: 0; - margin: 0; -} - -/* styles for the editor */ - -.playable { - font-family: monospace; - display: block; - margin-bottom: 10px; - background-color: #F4F7F8; - border: none; - border-left: 6px solid #558ABB; - color: #4D4E53; - width: 90%; - max-width: 700px; - padding: 10px 10px 0px; - font-size: 90%; - } - - .playable-css { - height: 80px; - } - - .playable-html { - height: 160px; - } - - .playable-buttons { - text-align: right; - width: 90%; - max-width: 700px; - padding: 5px 10px 5px 26px; - font-size: 100%; - } - - .preview { - width: 90%; - max-width: 700px; - border: 1px solid #4D4E53; - border-radius: 2px; - padding: 10px 14px 10px 10px; - margin-bottom: 10px; - } - - .preview input { - display: block; - margin: 5px; - } +/* Some default styling for cookbook examples */ +/* +rgb(53,43,34) +rgb(75,70,74) +rgb(95,97,110) +rgb(137,151,188) +rgb(160,178,226) +*/ +body { + background-color: #fff; + color: #333; + font: + 1.2em / 1.5 Helvetica Neue, + Helvetica, + Arial, + sans-serif; + padding: 0; + margin: 0; +} + +/* styles for the editor */ + +.playable { + font-family: monospace; + display: block; + margin-bottom: 10px; + background-color: #f4f7f8; + border: none; + border-left: 6px solid #558abb; + color: #4d4e53; + width: 90%; + max-width: 700px; + padding: 10px 10px 0px; + font-size: 90%; +} + +.playable-css { + height: 80px; +} + +.playable-html { + height: 160px; +} + +.playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; +} + +.preview { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; +} + +.preview input { + display: block; + margin: 5px; +} diff --git a/css-text/hyphens.html b/css-text/hyphens.html index 5afd1c9a..b858fd00 100644 --- a/css-text/hyphens.html +++ b/css-text/hyphens.html @@ -1,4 +1,4 @@ - + @@ -19,7 +19,7 @@ @@ -32,19 +32,18 @@
    - + inline-size: 150px; + overflow-wrap: break-word; + hyphens: manual; +} - +
    diff --git a/css-text/inline-overflow-hidden.html b/css-text/inline-overflow-hidden.html index 89c0de78..749520c4 100644 --- a/css-text/inline-overflow-hidden.html +++ b/css-text/inline-overflow-hidden.html @@ -1,4 +1,4 @@ - + @@ -18,7 +18,7 @@ @@ -31,12 +31,11 @@
    - +} + inline-size: 150px; +} - +
    diff --git a/css-text/min-content.html b/css-text/min-content.html index d9738f95..e709479c 100644 --- a/css-text/min-content.html +++ b/css-text/min-content.html @@ -1,4 +1,4 @@ - + @@ -18,7 +18,7 @@ @@ -30,17 +30,16 @@
    - +} - +
    diff --git a/css-text/overflow-wrap.html b/css-text/overflow-wrap.html index 13acd61c..6e024833 100644 --- a/css-text/overflow-wrap.html +++ b/css-text/overflow-wrap.html @@ -1,4 +1,4 @@ - + @@ -19,7 +19,7 @@ @@ -31,18 +31,17 @@
    - + inline-size: 150px; + overflow-wrap: break-word; +} - +
    diff --git a/css-text/playable.js b/css-text/playable.js index ddebe2d8..d9353ed2 100644 --- a/css-text/playable.js +++ b/css-text/playable.js @@ -1,22 +1,22 @@ -var section = document.querySelector('section'); -var editable = document.querySelector('.editable'); -var textareaHTML = document.querySelector('.playable-html'); -var textareaCSS = document.querySelector('.playable-css'); -var reset = document.getElementById('reset'); +var section = document.querySelector("section"); +var editable = document.querySelector(".editable"); +var textareaHTML = document.querySelector(".playable-html"); +var textareaCSS = document.querySelector(".playable-css"); +var reset = document.getElementById("reset"); var htmlCode = textareaHTML.value; var cssCode = textareaCSS.value; function fillCode() { - editable.innerHTML = textareaCSS.value; - section.innerHTML = textareaHTML.value; + editable.innerHTML = textareaCSS.value; + section.innerHTML = textareaHTML.value; } -reset.addEventListener('click', function () { - textareaHTML.value = htmlCode; - textareaCSS.value = cssCode; - fillCode(); +reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); }); -textareaHTML.addEventListener('input', fillCode); -textareaCSS.addEventListener('input', fillCode); -window.addEventListener('load', fillCode); \ No newline at end of file +textareaHTML.addEventListener("input", fillCode); +textareaCSS.addEventListener("input", fillCode); +window.addEventListener("load", fillCode); diff --git a/css-text/styles.css b/css-text/styles.css index b733e436..11945fee 100644 --- a/css-text/styles.css +++ b/css-text/styles.css @@ -1,61 +1,65 @@ /* Some default styling for cookbook examples */ -/* +/* rgb(53,43,34) rgb(75,70,74) rgb(95,97,110) rgb(137,151,188) rgb(160,178,226) */ -body { - background-color: #fff; - color: #333; - font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif; - padding: 0; - margin: 0; +body { + background-color: #fff; + color: #333; + font: + 1.2em / 1.5 Helvetica Neue, + Helvetica, + Arial, + sans-serif; + padding: 0; + margin: 0; } /* styles for the editor */ .playable { - font-family: monospace; - display: block; - margin-bottom: 10px; - background-color: #F4F7F8; - border: none; - border-left: 6px solid #558ABB; - color: #4D4E53; - width: 90%; - max-width: 700px; - padding: 10px 10px 0px; - font-size: 90%; - } + font-family: monospace; + display: block; + margin-bottom: 10px; + background-color: #f4f7f8; + border: none; + border-left: 6px solid #558abb; + color: #4d4e53; + width: 90%; + max-width: 700px; + padding: 10px 10px 0px; + font-size: 90%; +} - .playable-css { - height: 80px; - } +.playable-css { + height: 80px; +} - .playable-html { - height: 160px; - } +.playable-html { + height: 160px; +} - .playable-buttons { - text-align: right; - width: 90%; - max-width: 700px; - padding: 5px 10px 5px 26px; - font-size: 100%; - } +.playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; +} - .preview { - width: 90%; - max-width: 700px; - border: 1px solid #4D4E53; - border-radius: 2px; - padding: 10px 14px 10px 10px; - margin-bottom: 10px; - } +.preview { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; +} - .preview input { - display: block; - margin: 5px; - } +.preview input { + display: block; + margin: 5px; +} diff --git a/css-text/wbr.html b/css-text/wbr.html index 2db388a5..4d4e07e1 100644 --- a/css-text/wbr.html +++ b/css-text/wbr.html @@ -1,4 +1,4 @@ - + @@ -18,7 +18,7 @@ @@ -26,21 +26,20 @@
    - Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch + Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
    - + inline-size: 150px; +} - +
    diff --git a/css-text/word-break-checkbox.html b/css-text/word-break-checkbox.html index 549ec58e..a8d1d8f6 100644 --- a/css-text/word-break-checkbox.html +++ b/css-text/word-break-checkbox.html @@ -1,4 +1,4 @@ - + @@ -10,20 +10,20 @@ } .preview input[type="checkbox"] { - display: inline; + display: inline; } .field { - inline-size: 150px; - border: 1px solid #ccc; - margin-block-end: 1em; - padding: 10px; + inline-size: 150px; + border: 1px solid #ccc; + margin-block-end: 1em; + padding: 10px; } @@ -31,29 +31,32 @@
    - +
    - +
    - + word-break: break-all; +} - +
    diff --git a/css-text/word-break.html b/css-text/word-break.html index b7879f7e..83bb7d92 100644 --- a/css-text/word-break.html +++ b/css-text/word-break.html @@ -1,4 +1,4 @@ - + @@ -20,45 +20,40 @@
    -
    - A Very LongWordThatHasNoBreakingPossibilities -
    +
    A Very LongWordThatHasNoBreakingPossibilities
    -
    - A Very LongWordThatHasNoBreakingPossibilities -
    +
    A Very LongWordThatHasNoBreakingPossibilities
    - + overflow-wrap: break-word; +} - +
    diff --git a/cssom/modify-rule.html b/cssom/modify-rule.html index c053dd80..1e02df47 100644 --- a/cssom/modify-rule.html +++ b/cssom/modify-rule.html @@ -2,16 +2,19 @@ Modifying a stylesheet rule with CSSOM -

    The stylesheet declaration for the body's background color is modified via JavaScript.

    +

    + The stylesheet declaration for the body's background color is modified via + JavaScript. +

    diff --git a/display/multi-keyword/block-flow-root.html b/display/multi-keyword/block-flow-root.html index f0240470..ff9a813e 100644 --- a/display/multi-keyword/block-flow-root.html +++ b/display/multi-keyword/block-flow-root.html @@ -1,99 +1,99 @@ - + - - - - Multi-Keyword Values of Display: display: flow-root - - - - - - -
    -
    -
    Floated
    -

    Text following the float.

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/display/multi-keyword/inline-block.html b/display/multi-keyword/inline-block.html index 15cdc28a..1f22b167 100644 --- a/display/multi-keyword/inline-block.html +++ b/display/multi-keyword/inline-block.html @@ -1,121 +1,125 @@ - + - - - - Multi-Keyword Values of Display: display: inline-block + + + + Multi-Keyword Values of Display: display: inline-block - - - + p { + width: 300px; + } + + + - -
    -

    This paragraph has a span with padding it is an inline-block so the padding is contained and pushes the other line boxes away.

    - -
    - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/display/multi-keyword/inline-flex.html b/display/multi-keyword/inline-flex.html index 9d6a0ff5..702395ae 100644 --- a/display/multi-keyword/inline-flex.html +++ b/display/multi-keyword/inline-flex.html @@ -1,126 +1,125 @@ - + - - - - Multi-Keyword Values of Display: an inline flex container + + + + Multi-Keyword Values of Display: an inline flex container - + + - - - - - - -
    -
    -
    One
    -
    Two
    -
    - Text following the flex container. - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/display/multi-keyword/multi-keyword-flex.html b/display/multi-keyword/multi-keyword-flex.html index 2fcec2d8..a7c4f126 100644 --- a/display/multi-keyword/multi-keyword-flex.html +++ b/display/multi-keyword/multi-keyword-flex.html @@ -1,109 +1,106 @@ - + - - - - Multi-Keyword Values of Display: two value syntax - - - - - - -
    -

    Multiple values for display

    - -
    -
    Item One
    -
    Item Two
    -
    Item Three
    -
    - -

    The first example is a block element with flex children.

    - -
    -
    Item One
    -
    Item Two
    -
    Item Three
    -
    . - -The second example is an inline element with flex children. - -
    - - + -
    - -
    - - +The second example is an inline element with flex children. +
    + +
    + + diff --git a/display/multi-keyword/span-flex.html b/display/multi-keyword/span-flex.html index f75c8e7e..b4b18bf2 100644 --- a/display/multi-keyword/span-flex.html +++ b/display/multi-keyword/span-flex.html @@ -1,118 +1,115 @@ - + - - - - Multi-Keyword Values of Display: a span as a flex container + + + + Multi-Keyword Values of Display: a span as a flex container - - - + section { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; + } - -
    - - Some text emphasized text - + section input { + display: block; + margin: 5px; + } + + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/feature-queries/and.html b/feature-queries/and.html index 6ae7a860..c77848dd 100644 --- a/feature-queries/and.html +++ b/feature-queries/and.html @@ -1,58 +1,56 @@ - + - + Feature Queries: and - - + + - + - +
    -
    - If your browser supports display: grid and shape-outside: circle(), the text and border will be red. -
    +
    + If your browser supports display: grid and shape-outside: circle(), the + text and border will be red. +
    - + .box { + border: 4px solid red; + color: red; + } +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/feature-queries/not.html b/feature-queries/not.html index 4ccfb5df..dc5eda8b 100644 --- a/feature-queries/not.html +++ b/feature-queries/not.html @@ -1,58 +1,55 @@ - + - + Feature Queries: not - - + + - + - +
    -
    - If your browser does not support row-gap, the text and border will be red. -
    +
    + If your browser does not support row-gap, the text and border will be + red. +
    - + .box { + border: 4px solid red; + color: red; + } +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/feature-queries/or.html b/feature-queries/or.html index adbfbcb5..a221b2e0 100644 --- a/feature-queries/or.html +++ b/feature-queries/or.html @@ -1,58 +1,55 @@ - + - + Feature Queries: or - - + + - + - +
    -
    - If your browser supports display: grid or display: -ms-grid, the text and border will be red. -
    +
    + If your browser supports display: grid or display: -ms-grid, the text + and border will be red. +
    - + .box { + border: 4px solid red; + color: red; + } +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/feature-queries/simple.html b/feature-queries/simple.html index ea062a91..c56f40ab 100644 --- a/feature-queries/simple.html +++ b/feature-queries/simple.html @@ -1,58 +1,54 @@ - + - + Feature Queries - - + + - + - +
    -
    +
    If your browser supports row-gap, the text and border will be red. -
    +
    - + .box { + border: 4px solid red; + color: red; + } +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/feature-queries/step1.html b/feature-queries/step1.html index 4d15a82d..bb56c48c 100644 --- a/feature-queries/step1.html +++ b/feature-queries/step1.html @@ -1,13 +1,13 @@ - + - + Feature Queries: step 1 - + - + - +
    - Box 1 -
    Has more content -
    than the other boxes. -
    -
    - Box 2 -
    -
    - Box 3 + Box 1 +
    Has more content
    than the other boxes.
    +
    Box 2
    +
    Box 3
    - +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/feature-queries/step2.html b/feature-queries/step2.html index b576ebfa..0646afe3 100644 --- a/feature-queries/step2.html +++ b/feature-queries/step2.html @@ -1,13 +1,13 @@ - + - + Feature Queries: step 2 - + - + - +
    - Box 1 -
    Has more content -
    than the other boxes. -
    -
    - Box 2 -
    -
    - Box 3 + Box 1 +
    Has more content
    than the other boxes.
    +
    Box 2
    +
    Box 3
    - +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/feature-queries/step3.html b/feature-queries/step3.html index 5077d65d..716a8845 100644 --- a/feature-queries/step3.html +++ b/feature-queries/step3.html @@ -1,13 +1,13 @@ - + - + Feature Queries: step 3 - + - + - +
    - Box 1 -
    Has more content -
    than the other boxes. -
    -
    - Box 2 -
    -
    - Box 3 + Box 1 +
    Has more content
    than the other boxes.
    +
    Box 2
    +
    Box 3
    - +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/feature-queries/step4.html b/feature-queries/step4.html index 1c0c45e2..ac979ff0 100644 --- a/feature-queries/step4.html +++ b/feature-queries/step4.html @@ -1,13 +1,13 @@ - + - + Feature Queries: step 4 - + - + - +
    - Box 1 -
    Has more content -
    than the other boxes. -
    -
    - Box 2 -
    -
    - Box 3 + Box 1 +
    Has more content
    than the other boxes.
    +
    Box 2
    +
    Box 3
    - +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/flexbox/alignment/align-content-column.html b/flexbox/alignment/align-content-column.html index c102f021..76b7b039 100644 --- a/flexbox/alignment/align-content-column.html +++ b/flexbox/alignment/align-content-column.html @@ -1,102 +1,104 @@ - + - - - - Flexbox Alignment: aligning content on the cross axis, direction column - - - - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    Five
    -
    Six
    -
    Seven
    -
    Eight
    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/alignment/align-content.html b/flexbox/alignment/align-content.html index 745c586b..01d44a27 100644 --- a/flexbox/alignment/align-content.html +++ b/flexbox/alignment/align-content.html @@ -1,109 +1,109 @@ - + - - - - Flexbox Alignment: aligning content on the cross axis - - - - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    Five
    -
    Six
    -
    Seven
    -
    Eight
    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/alignment/align-items.html b/flexbox/alignment/align-items.html index b6046a78..64bfb2ba 100644 --- a/flexbox/alignment/align-items.html +++ b/flexbox/alignment/align-items.html @@ -1,101 +1,99 @@ - + - - - - Flexbox Alignment: aligning items on the cross axis + + + + Flexbox Alignment: aligning items on the cross axis - - - + .box > * { + padding: 20px; + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + } + + + - -
    -
    -
    One
    -
    Two
    -
    Three -
    has -
    extra -
    text + +
    +
    +
    One
    +
    Two
    +
    Three
    has
    extra
    text
    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/alignment/align-self-column.html b/flexbox/alignment/align-self-column.html index e779e4fd..ed51545d 100644 --- a/flexbox/alignment/align-self-column.html +++ b/flexbox/alignment/align-self-column.html @@ -1,100 +1,104 @@ - + - - - - Flexbox Alignment: aligning individual items on the cross axis + + + + + Flexbox Alignment: aligning individual items on the cross axis + - - + - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/alignment/align-self.html b/flexbox/alignment/align-self.html index 43135d9e..8242c1af 100644 --- a/flexbox/alignment/align-self.html +++ b/flexbox/alignment/align-self.html @@ -1,146 +1,149 @@ - + - - - - Flexbox Alignment: aligning individual items on the cross axis + + + + + Flexbox Alignment: aligning individual items on the cross axis + - - + - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/alignment/auto-margins.html b/flexbox/alignment/auto-margins.html index 859a975e..b1d9394a 100644 --- a/flexbox/alignment/auto-margins.html +++ b/flexbox/alignment/auto-margins.html @@ -1,138 +1,139 @@ - + - - - - Flexbox Alignment: alignment with auto margins + + + + Flexbox Alignment: alignment with auto margins - - + - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    Five
    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/alignment/intro.html b/flexbox/alignment/intro.html index b2639c38..daf59e71 100644 --- a/flexbox/alignment/intro.html +++ b/flexbox/alignment/intro.html @@ -1,90 +1,92 @@ - + - - - - Flexbox Alignment: centering a box - - - - - - -
    -
    -
    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/alignment/justify-content-column.html b/flexbox/alignment/justify-content-column.html index a1a8a91e..77a58baa 100644 --- a/flexbox/alignment/justify-content-column.html +++ b/flexbox/alignment/justify-content-column.html @@ -1,136 +1,140 @@ - + - - - - Flexbox Alignment: alignment on the main axis with justify-content, direction column + + + + + Flexbox Alignment: alignment on the main axis with justify-content, + direction column + - - - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    + .box > * { + padding: 20px; + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + } + + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/alignment/justify-content-reverse.html b/flexbox/alignment/justify-content-reverse.html index e1298b52..0dfbca02 100644 --- a/flexbox/alignment/justify-content-reverse.html +++ b/flexbox/alignment/justify-content-reverse.html @@ -1,134 +1,138 @@ - + - - - - Flexbox Alignment: alignment on the main axis with justify-content and row-reverse + + + + + Flexbox Alignment: alignment on the main axis with justify-content and + row-reverse + - - - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    + .box > * { + padding: 20px; + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + } + + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/alignment/justify-content-writing-mode.html b/flexbox/alignment/justify-content-writing-mode.html index 38f8e3ac..0641bf04 100644 --- a/flexbox/alignment/justify-content-writing-mode.html +++ b/flexbox/alignment/justify-content-writing-mode.html @@ -1,135 +1,137 @@ - + - - - - Flexbox Alignment: alignment on the main axis with justify-content, RTL - - - - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/alignment/justify-content.html b/flexbox/alignment/justify-content.html index 8b7e5a1b..d91fe21c 100644 --- a/flexbox/alignment/justify-content.html +++ b/flexbox/alignment/justify-content.html @@ -1,132 +1,135 @@ - + - - - - Flexbox Alignment: alignment on the main axis with justify-content + + + + + Flexbox Alignment: alignment on the main axis with justify-content + - - - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    + .box > * { + padding: 20px; + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + } + + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/basics/align-items.html b/flexbox/basics/align-items.html index 1ad58a77..ea069b37 100644 --- a/flexbox/basics/align-items.html +++ b/flexbox/basics/align-items.html @@ -1,138 +1,135 @@ - + - - - - Flexbox Basics: aligning items on the cross axis + + + + Flexbox Basics: aligning items on the cross axis - - - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + } + + + - -
    -
    -
    One
    -
    Two
    -
    Three -
    has -
    extra -
    text + +
    +
    +
    One
    +
    Two
    +
    Three
    has
    extra
    text
    -
    - -
    - - -
    - + + + +
    + +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/basics/flex-direction.html b/flexbox/basics/flex-direction.html index 08c2bf84..32f201ae 100644 --- a/flexbox/basics/flex-direction.html +++ b/flexbox/basics/flex-direction.html @@ -1,129 +1,131 @@ - + - - - - Flexbox Basics: The flex-direction property + + + + Flexbox Basics: The flex-direction property - - - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + } - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    -
    + .box { + width: 500px; + border: 2px dotted rgb(96, 139, 168); + } + + + - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/basics/flex-flow.html b/flexbox/basics/flex-flow.html index 7c8786f6..68d9eb4a 100644 --- a/flexbox/basics/flex-flow.html +++ b/flexbox/basics/flex-flow.html @@ -1,129 +1,131 @@ - + - - - - Flexbox Basics: flex-flow + + + + Flexbox Basics: flex-flow - - - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + width: 200px; + } - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    -
    - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/basics/flex-properties.html b/flexbox/basics/flex-properties.html index 807bf973..d6a4776f 100644 --- a/flexbox/basics/flex-properties.html +++ b/flexbox/basics/flex-properties.html @@ -1,138 +1,138 @@ - + - - - - Flexbox Basics: flex properties - - + section { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; + } - - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + } - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    -
    - - -
    - -
    - - + + + +
    + +
    + + diff --git a/flexbox/basics/flex-shorthands.html b/flexbox/basics/flex-shorthands.html index 6be91e88..62e1899c 100644 --- a/flexbox/basics/flex-shorthands.html +++ b/flexbox/basics/flex-shorthands.html @@ -1,138 +1,138 @@ - + - - - - Flexbox Basics: flex shorthands - - + section { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; + } - - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + } - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    -
    - - -
    - -
    - - + + + +
    + +
    + + diff --git a/flexbox/basics/flex-wrap.html b/flexbox/basics/flex-wrap.html index a301ea0a..46f9c041 100644 --- a/flexbox/basics/flex-wrap.html +++ b/flexbox/basics/flex-wrap.html @@ -1,130 +1,132 @@ - + - - - - Flexbox Basics: The flex-wrap property + + + + Flexbox Basics: The flex-wrap property - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + width: 200px; + } - - + .box { + width: 500px; + border: 2px dotted rgb(96, 139, 168); + } + - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    -
    - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/basics/justify-content.html b/flexbox/basics/justify-content.html index d8980553..1d09ba04 100644 --- a/flexbox/basics/justify-content.html +++ b/flexbox/basics/justify-content.html @@ -1,129 +1,130 @@ - + - - - - Flexbox Basics: justify content on the main axis + + + + Flexbox Basics: justify content on the main axis - - - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + } + + + - -
    -
    -
    One
    -
    Two
    -
    Three
    + +
    +
    +
    One
    +
    Two
    +
    Three
    +
    +
    + + +
    +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/basics/simple-example-anon.html b/flexbox/basics/simple-example-anon.html index 71555967..c20959cd 100644 --- a/flexbox/basics/simple-example-anon.html +++ b/flexbox/basics/simple-example-anon.html @@ -1,130 +1,131 @@ - + - - - - A simple example of Flexbox with an anonymous item + + + + A simple example of Flexbox with an anonymous item - - - - - -
    -
    -

    One

    -
    Two
    - Three is an unwrapped string -
    + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + padding: 10px; + margin: 0; + } + + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/basics/simple-example.html b/flexbox/basics/simple-example.html index d0c8e61b..9b4eb8b8 100644 --- a/flexbox/basics/simple-example.html +++ b/flexbox/basics/simple-example.html @@ -1,139 +1,136 @@ - + - - - - A simple example of Flexbox + + + + A simple example of Flexbox - - - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + padding: 10px; + } + + + - -
    -
    -
    One
    -
    Two
    -
    Three -
    has -
    extra -
    text + +
    +
    +
    One
    +
    Two
    +
    Three
    has
    extra
    text
    -
    - -
    - - -
    - +
    + + +
    + +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/basics/the-flex-container.html b/flexbox/basics/the-flex-container.html index 0a59205e..851c4441 100644 --- a/flexbox/basics/the-flex-container.html +++ b/flexbox/basics/the-flex-container.html @@ -1,136 +1,133 @@ - + - - - - Flexbox Basics: The Flex Container + + + + Flexbox Basics: The Flex Container - - - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + } + + + - -
    -
    -
    One
    -
    Two
    -
    Three -
    has -
    extra -
    text + +
    +
    +
    One
    +
    Two
    +
    Three
    has
    extra
    text
    -
    - -
    - - -
    - + + + +
    + +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/browsers/float.html b/flexbox/browsers/float.html index 547775f8..bb0b608f 100644 --- a/flexbox/browsers/float.html +++ b/flexbox/browsers/float.html @@ -1,100 +1,105 @@ - + - - - - Fallbacks: floated items - - - + - + } + + - -
    -
    + +
    +
    Item 1
    -
    Item 2 has more text in it and therefore will be taller than item one. In the flex version both should stretch to the same height.
    +
    + Item 2 has more text in it and therefore will be taller than item one. + In the flex version both should stretch to the same height. +
    - -
    - - + -
    - -
    - - +
    +
    + +
    + + diff --git a/flexbox/browsers/inline-block.html b/flexbox/browsers/inline-block.html index 01f3d6f6..7ba8aa85 100644 --- a/flexbox/browsers/inline-block.html +++ b/flexbox/browsers/inline-block.html @@ -1,96 +1,99 @@ - + - - - - Fallbacks: inline-block items - - - + - + } + + - -
    -
    + +
    +
    Item 1
    -
    Item 2 has more text in it and therefore will be taller than item one. In the flex version both should stretch to the same height.
    +
    + Item 2 has more text in it and therefore will be taller than item one. + In the flex version both should stretch to the same height. +
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/browsers/table-cell.html b/flexbox/browsers/table-cell.html index 345bc419..48053b09 100644 --- a/flexbox/browsers/table-cell.html +++ b/flexbox/browsers/table-cell.html @@ -1,96 +1,99 @@ - + - - - - Fallbacks: table-cell items - - - + - + } + + - -
    -
    + +
    +
    Item 1
    -
    Item 2 has more text in it and therefore will be taller than item one. In the flex version both should stretch to the same height.
    +
    + Item 2 has more text in it and therefore will be taller than item one. + In the flex version both should stretch to the same height. +
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/browsers/vertical-align.html b/flexbox/browsers/vertical-align.html index 706e0ad3..3fd94397 100644 --- a/flexbox/browsers/vertical-align.html +++ b/flexbox/browsers/vertical-align.html @@ -1,97 +1,100 @@ - + - - - - Fallbacks: inline-block items - - - + - + } + + - -
    -
    + +
    +
    Item 1
    -
    Item 2 has more text in it and therefore will be taller than item one. In the flex version both should stretch to the same height.
    +
    + Item 2 has more text in it and therefore will be taller than item one. + In the flex version both should stretch to the same height. +
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/index.html b/flexbox/index.html index a50a5409..329c63a9 100644 --- a/flexbox/index.html +++ b/flexbox/index.html @@ -1,10 +1,10 @@ - + Flexbox Examples - +

    Flexbox Examples

    @@ -14,7 +14,9 @@

    Basic concepts of flexbox

    1. The flex container
      2. -
    2. The flex-direction property
      3. +
    3. + The flex-direction property +
    4. Multi-line flex containers
    5. The flex-flow shorthand
    6. The flex properties
      7. @@ -24,74 +26,166 @@

      Basic concepts of flexbox

    Relationship to other layout methods

    - -
      -
    1. Writing Modes
      2. -
    2. Floated layout
      3. -
    3. Simple flex layout
      4. -
    4. Simple grid layout
      5. -
    5. Demo of display: contents
      6. -
    + +
      +
    1. Writing Modes
      2. +
    2. Floated layout
      3. +
    3. Simple flex layout
      4. +
    4. Simple grid layout
      5. +
    5. + Demo of display: contents +
      6. +

    Alignment

    1. Centering a box
      2. -
    2. Alignment on the cross axis with align-items
      3. -
    3. Aligning individual items with align-self
      4. -
    4. Changing the main axis to column and aligning items
      5. -
    5. Aligning content on the cross axis
      6. -
    6. Changing the main axis to column
      7. -
    7. Main axis alignment with justify-content
      8. -
    8. Main axis alignment with flex-direction column
      9. -
    9. Main axis alignment in RTL writing mode
      10. -
    10. Main axis alignment with reversed row
      11. -
    11. Alignment with auto margins
      12. +
    12. + Alignment on the cross axis with align-items +
      13. +
    13. + Aligning individual items with align-self +
      14. +
    14. + Changing the main axis to column and aligning items +
      15. +
    15. + Aligning content on the cross axis +
      16. +
    16. + Changing the main axis to column +
      17. +
    17. + Main axis alignment with justify-content +
      18. +
    18. + Main axis alignment with flex-direction column +
      19. +
    19. + Main axis alignment in RTL writing mode +
      20. +
    20. + Main axis alignment with reversed row +
      21. +
    21. + Alignment with auto margins +

    Order

      -
    1. The flex-direction property
      2. +
    2. + The flex-direction property +
    3. The order property
      4. -
    4. Using negative values for order
      5. -
    5. A usecase for the order property
      6. +
    6. + Using negative values for order +
      7. +
    7. + A usecase for the order property +

    Ratios on the main axis

      -
    1. Concepts of min and max-content
      2. +
    2. + Concepts of min and max-content +
    3. The flex-basis property
    4. The flex-grow property
      5. -
    5. Ratios and the flex-grow property
      6. +
    6. + Ratios and the flex-grow property +
    7. The flex-shrink property
      8. -
    8. min-content sizing and the flex-shrink property
      9. -
    9. Ratios and the flex-shrink property
      10. +
    10. + min-content sizing and the flex-shrink property +
      11. +
    11. + Ratios and the flex-shrink property +

    Mastering wrapping of flex items

      -
    1. Wrapping when flex-direction is row
      2. -
    2. Wrapping when flex-direction is column
      3. -
    3. Wrapping when flex-direction is row-reverse
      4. +
    4. + Wrapping when flex-direction is row +
      5. +
    5. + Wrapping when flex-direction is column +
      6. +
    6. + Wrapping when flex-direction is row-reverse +
    7. Grid and two-dimensions
    8. A flexbox grid
    9. Gaps between flex items
      10. -
    10. Setting an item to visibility: collapse
      11. -
    11. Wrapped items with visibility: collapse
      12. +
    12. + Setting an item to visibility: collapse +
      13. +
    13. + Wrapped items with visibility: collapse +

    Common Use Cases of Flexbox

    1. Navigation
      2. -
    2. Navigation distributing space to items
      3. +
    3. + Navigation distributing space to items +
    4. Split navigation
    5. Centering an item
    6. Card layout
    7. Media object
    8. Flipped media object
      9. -
    9. Input element and button
      10. -
    10. Adding a label to the input and button
      11. +
    11. + Input element and button +
      12. +
    12. + Adding a label to the input and button +
    - \ No newline at end of file + diff --git a/flexbox/order/flex-direction.html b/flexbox/order/flex-direction.html index cd56943b..0d1227b8 100644 --- a/flexbox/order/flex-direction.html +++ b/flexbox/order/flex-direction.html @@ -1,137 +1,137 @@ - + - - - - Order: The flex-direction property - - - - - - -
    -
    - - - -
    -
    - - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/order/negative-order.html b/flexbox/order/negative-order.html index 678aab9e..990d1f55 100644 --- a/flexbox/order/negative-order.html +++ b/flexbox/order/negative-order.html @@ -1,152 +1,155 @@ - + - - - - Order: Using negative values for order - - - + - - - -
    -
    - - -
    3
    - - + } + + + + +
    +
    + + +
    3
    + + +
    +
    + + + +
    +
    -
    - - - -
    - -
    - - + + diff --git a/flexbox/order/order.html b/flexbox/order/order.html index 01c5f9f8..f47d070c 100644 --- a/flexbox/order/order.html +++ b/flexbox/order/order.html @@ -1,151 +1,161 @@ - + - - - - Order: The order property - - - - - - -
    -
    - - - - - + } + + .box { + width: 500px; + border: 2px dotted rgb(96, 139, 168); + } + + + + + +
    +
    + + + + + +
    +
    + + + +
    +
    -
    - - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/order/usecase-order.html b/flexbox/order/usecase-order.html index 558fd848..09b81a37 100644 --- a/flexbox/order/usecase-order.html +++ b/flexbox/order/usecase-order.html @@ -1,159 +1,158 @@ - + - - - - Order: a usecase for the order property - - - - - - - -
    -
    -
    + } + + .card { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + padding: 10px; + } + + + + + +
    +
    +

    News item title

    1 Nov 2017

    This is the content of my news item. Very newsworthy.

    -
    -
    -

    Another title

    -
    6 Nov 2017
    -

    This is the content of my news item. Very newsworthy.

    -
    -
    -
    - - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/ratios/flex-basis.html b/flexbox/ratios/flex-basis.html index 41449edb..b640ead3 100644 --- a/flexbox/ratios/flex-basis.html +++ b/flexbox/ratios/flex-basis.html @@ -1,100 +1,78 @@ - + - - - - Flexbox Ratios on the main axis: flex-basis - - + .playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; + } - - - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    -
    - - -
    - -
    - - +
    + + +
    + +
    + + diff --git a/flexbox/ratios/flex-grow-ratios.html b/flexbox/ratios/flex-grow-ratios.html index 85185ea8..2a9806b2 100644 --- a/flexbox/ratios/flex-grow-ratios.html +++ b/flexbox/ratios/flex-grow-ratios.html @@ -1,152 +1,154 @@ - + - - - - Flexbox Ratios on the main axis: flex-grow ratios - - + .playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; + } - - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    -
    - - -
    - -
    - - +
    + + +
    + +
    + + diff --git a/flexbox/ratios/flex-grow.html b/flexbox/ratios/flex-grow.html index 17d6ab89..ed49c954 100644 --- a/flexbox/ratios/flex-grow.html +++ b/flexbox/ratios/flex-grow.html @@ -1,96 +1,78 @@ - + - - - - Flexbox Ratios on the main axis: flex-grow - - + section { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; + } - - - - - -
    -
    -
    One
    -
    Two
    -
    Three has more content
    -
    -
    - - -
    - -
    - - +
    + + +
    + +
    + + diff --git a/flexbox/ratios/flex-shrink-min-content.html b/flexbox/ratios/flex-shrink-min-content.html index 6a9a5756..3bcf056d 100644 --- a/flexbox/ratios/flex-shrink-min-content.html +++ b/flexbox/ratios/flex-shrink-min-content.html @@ -1,96 +1,77 @@ - + - - - - Flexbox Ratios on the main axis: flex-shrink - - + section { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; + } - - - - - -
    -
    -
    Item One
    -
    Item Two
    -
    Item Three has more content and so has a larger size
    -
    -
    - - -
    - -
    - - +
    + + +
    + +
    + + diff --git a/flexbox/ratios/flex-shrink-ratios.html b/flexbox/ratios/flex-shrink-ratios.html index 22ee4f24..f66ec25c 100644 --- a/flexbox/ratios/flex-shrink-ratios.html +++ b/flexbox/ratios/flex-shrink-ratios.html @@ -1,108 +1,78 @@ - + - - - - Flexbox Ratios on the main axis: flex-shrink ratios - - + textarea { + font-family: monospace; + display: block; + margin-bottom: 10px; + background-color: #f4f7f8; + border: none; + border-left: 6px solid #558abb; + color: #4d4e53; + width: 90%; + max-width: 700px; + padding: 10px 10px 0px; + font-size: 90%; + } - - + .box { + display: flex; + width: 500px; + border: 2px dotted rgb(96, 139, 168); + } + - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    -
    - - -
    - -
    - - +
    + + +
    + +
    + + diff --git a/flexbox/ratios/flex-shrink.html b/flexbox/ratios/flex-shrink.html index 1a4f8eb1..17d4d03b 100644 --- a/flexbox/ratios/flex-shrink.html +++ b/flexbox/ratios/flex-shrink.html @@ -1,97 +1,78 @@ - + - - - - Flexbox Ratios on the main axis: flex-shrink - - + section { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; + } - - - - - -
    -
    -
    One
    -
    Two
    -
    Three has more content
    -
    -
    - - -
    - -
    - - + + + +
    + +
    + + diff --git a/flexbox/ratios/min-max-content.html b/flexbox/ratios/min-max-content.html index 31f7de0d..758f1dcf 100644 --- a/flexbox/ratios/min-max-content.html +++ b/flexbox/ratios/min-max-content.html @@ -1,67 +1,66 @@ - + - - - - Flexbox Ratios on the main axis: min-content and max-content - - + section input { + display: block; + margin: 5px; + } + - + + + +
    +

    + I am sized with min-content and so I will take all of the soft-wrapping + opportunities. +

    +

    + I am sized with max-content and so I will take none of the soft-wrapping + opportunities. +

    +
    + + +
    + +
    + + - + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/relationship/display-contents.html b/flexbox/relationship/display-contents.html index da2f705a..cfb2d94f 100644 --- a/flexbox/relationship/display-contents.html +++ b/flexbox/relationship/display-contents.html @@ -1,152 +1,150 @@ - + - - - - Flexbox and other specs: display: contents + + + + Flexbox and other specs: display: contents - - + - - - -
    -
    -
    One
    -
    Two
    -
    + } + + + + +
    +
    +
    One
    +
    Two
    +
    Sub-item 1
    Sub-item 2
    -
    -
    -
    - - - -
    - +
    +
    + + + +
    + +
    + + diff --git a/flexbox/relationship/flex-layout.html b/flexbox/relationship/flex-layout.html index 9bcb2063..884c7cf1 100644 --- a/flexbox/relationship/flex-layout.html +++ b/flexbox/relationship/flex-layout.html @@ -1,154 +1,152 @@ - + - - - - Flexbox and other specs: a simple flex layout + + + + Flexbox and other specs: a simple flex layout - - + - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    Five
    -
    Six
    -
    Seven
    + } + + + + +
    +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    Five
    +
    Six
    +
    Seven
    +
    +
    + + + +
    +
    -
    - - - -
    - -
    - - + + diff --git a/flexbox/relationship/floats.html b/flexbox/relationship/floats.html index 40620bbb..b00a5ac1 100644 --- a/flexbox/relationship/floats.html +++ b/flexbox/relationship/floats.html @@ -1,143 +1,143 @@ - + - - - - Flexbox and other specs: overwriting a float - - - + + + + +
    +
    +
    One
    +
    Two
    +
    Three
    +
    +
    + + + +
    + +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/relationship/grid-layout.html b/flexbox/relationship/grid-layout.html index 8f240042..dba7808a 100644 --- a/flexbox/relationship/grid-layout.html +++ b/flexbox/relationship/grid-layout.html @@ -1,146 +1,144 @@ - + - - - - Flexbox and other specs: a simple grid layout + + + + Flexbox and other specs: a simple grid layout - - - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    Five
    -
    Six
    -
    Seven
    + } + + body { + font: + 1.2em Helvetica, + Arial, + sans-serif; + margin: 20px; + padding: 0; + } + + textarea { + font-family: monospace; + display: block; + margin-bottom: 10px; + background-color: #f4f7f8; + border: none; + border-left: 6px solid #558abb; + color: #4d4e53; + width: 90%; + max-width: 700px; + padding: 10px 10px 0px; + font-size: 90%; + } + + textarea:nth-of-type(1) { + height: 100px; + } + + textarea:nth-of-type(2) { + height: 160px; + } + + .playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; + } + + section { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; + } + + section input { + display: block; + margin: 5px; + } + + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + padding: 20px; + } + + .box { + padding: 20px; + border: 2px dotted rgb(96, 139, 168); + } + + + + + +
    +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    Five
    +
    Six
    +
    Seven
    +
    +
    + + + +
    +
    -
    - - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/relationship/writing-modes.html b/flexbox/relationship/writing-modes.html index fb99cacc..fbc7fe7a 100644 --- a/flexbox/relationship/writing-modes.html +++ b/flexbox/relationship/writing-modes.html @@ -1,131 +1,131 @@ - + - - - - Flexbox and other specs: writing modes - - - - - - -
    -
    -
    One
    -
    Two
    -
    Three
    + + + + Flexbox and other specs: writing modes + + + + + + +
    +
    +
    One
    +
    Two
    +
    Three
    +
    +
    + + + +
    +
    -
    - - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/use-cases/cards.html b/flexbox/use-cases/cards.html index 31595cad..4e4de262 100644 --- a/flexbox/use-cases/cards.html +++ b/flexbox/use-cases/cards.html @@ -1,113 +1,119 @@ - + - - - - Use cases: laying out a card - - - + - + } + + - -
    -
    + +
    +
    -
    -

    This card doesn't have much content.

    -
    -
    Card footer
    +
    +

    This card doesn't have much content.

    +
    +
    Card footer
    -
    -

    This card has a lot more content which means that it defines the height of the container the cards are in. I've laid the cards out using grid layout, so the cards themselves will stretch to the same height.

    -
    -
    Card footer
    +
    +

    + This card has a lot more content which means that it defines the + height of the container the cards are in. I've laid the cards out + using grid layout, so the cards themselves will stretch to the + same height. +

    +
    +
    Card footer
    -
    - -
    - - + -
    - -
    - - +
    +
    + +
    + + diff --git a/flexbox/use-cases/center.html b/flexbox/use-cases/center.html index b9a46a9a..2e1a99ba 100644 --- a/flexbox/use-cases/center.html +++ b/flexbox/use-cases/center.html @@ -1,90 +1,92 @@ - + - - - - Use cases: centering a box - - - - - - -
    -
    -
    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/use-cases/input-button.html b/flexbox/use-cases/input-button.html index b48513c6..21019198 100644 --- a/flexbox/use-cases/input-button.html +++ b/flexbox/use-cases/input-button.html @@ -1,147 +1,150 @@ - + - - - - Use cases: input element and button - - - - - - -
    -
    -
    -
    -
    - - + -
    - -
    - - + +
    + +
    + + diff --git a/flexbox/use-cases/label-input-button.html b/flexbox/use-cases/label-input-button.html index cee95821..73cb8166 100644 --- a/flexbox/use-cases/label-input-button.html +++ b/flexbox/use-cases/label-input-button.html @@ -1,110 +1,116 @@ - + - - - - Use cases: label, input element and button - - - - - - -
    -
    -
    -
    -
    - - + -
    - -
    - - + +
    + +
    + + diff --git a/flexbox/use-cases/media-flipped.html b/flexbox/use-cases/media-flipped.html index 7f3d3a31..06bb0efa 100644 --- a/flexbox/use-cases/media-flipped.html +++ b/flexbox/use-cases/media-flipped.html @@ -1,4 +1,4 @@ - + @@ -7,7 +7,10 @@ - + - + + - -
    -
    - - - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/use-cases/navigation.html b/flexbox/use-cases/navigation.html index 81ebd324..2f18ae10 100644 --- a/flexbox/use-cases/navigation.html +++ b/flexbox/use-cases/navigation.html @@ -1,110 +1,110 @@ - + - - - - Use cases: Navigation - - - + - + + - -
    -
    - - - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/use-cases/split-navigation.html b/flexbox/use-cases/split-navigation.html index 55a9c90c..d18985b3 100644 --- a/flexbox/use-cases/split-navigation.html +++ b/flexbox/use-cases/split-navigation.html @@ -1,107 +1,107 @@ - + - - - - Use cases: Split Navigation - - - - - - -
    -
    + + +
    + +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/wrapping/grid-example.html b/flexbox/wrapping/grid-example.html index 6e40b69d..d2887560 100644 --- a/flexbox/wrapping/grid-example.html +++ b/flexbox/wrapping/grid-example.html @@ -1,105 +1,86 @@ - + - - - - Flexbox wrapping: Grid and two dimensions - - - - - - - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    Five
    -
    Six
    -
    Seven
    -
    Eight
    -
    Nine
    -
    Ten
    -
    -
    - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/wrapping/row-reverse-wrap.html b/flexbox/wrapping/row-reverse-wrap.html index 4e25aee2..106deb64 100644 --- a/flexbox/wrapping/row-reverse-wrap.html +++ b/flexbox/wrapping/row-reverse-wrap.html @@ -1,111 +1,90 @@ - + - - - - Flexbox wrapping: Wrapping when flex-direction is row-reverse + + + + Flexbox wrapping: Wrapping when flex-direction is row-reverse - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + } - - + .box { + width: 500px; + border: 2px dotted rgb(96, 139, 168); + } + - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    Five
    -
    Six
    -
    Seven
    -
    Eight
    -
    Nine
    -
    Ten
    -
    -
    - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/wrapping/row-wrap.html b/flexbox/wrapping/row-wrap.html index 647657af..3d7912ea 100644 --- a/flexbox/wrapping/row-wrap.html +++ b/flexbox/wrapping/row-wrap.html @@ -1,109 +1,89 @@ - + - - - - Flexbox wrapping: Wrapping when flex-direction is row + + + + Flexbox wrapping: Wrapping when flex-direction is row - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + } - - + .box { + width: 500px; + border: 2px dotted rgb(96, 139, 168); + } + - -
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    Five
    -
    Six
    -
    Seven
    -
    Eight
    -
    Nine
    -
    Ten
    -
    -
    - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/wrapping/visibility-collapse.html b/flexbox/wrapping/visibility-collapse.html index 8ce3ee68..3922494f 100644 --- a/flexbox/wrapping/visibility-collapse.html +++ b/flexbox/wrapping/visibility-collapse.html @@ -1,149 +1,146 @@ - + - - - - Flexbox Wrapping: Setting an item to visibility: collapse + + + + Flexbox Wrapping: Setting an item to visibility: collapse - - - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + padding: 10px; + } + + + - -
    -
    -
    One
    -
    Two
    -
    Three -
    has -
    extra -
    text + +
    +
    +
    One
    +
    Two
    +
    Three
    has
    extra
    text
    -
    - -
    - - -
    - + + + +
    + +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flexbox/wrapping/wrapped-visibility-collapse.html b/flexbox/wrapping/wrapped-visibility-collapse.html index f9352402..02ce04af 100644 --- a/flexbox/wrapping/wrapped-visibility-collapse.html +++ b/flexbox/wrapping/wrapped-visibility-collapse.html @@ -1,165 +1,162 @@ - + - - - - Flexbox Wrapping: Wrapped items with visibility: collapse + + + + Flexbox Wrapping: Wrapped items with visibility: collapse - - - + .box > * { + border: 2px solid rgb(96, 139, 168); + border-radius: 5px; + background-color: rgba(96, 139, 168, 0.2); + padding: 10px; + } + + + - -
    -
    -
    One
    -
    Add more text to this box to make it grow
    -
    Three -
    has -
    extra -
    text + +
    +
    +
    One
    +
    Add more text to this box to make it grow
    +
    Three
    has
    extra
    text
    +
    Four
    +
    Five
    +
    Six
    +
    Seven
    +
    Eight
    +
    Nine
    +
    Ten
    -
    Four
    -
    Five
    -
    Six
    -
    Seven
    -
    Eight
    -
    Nine
    -
    Ten
    -
    - -
    - - -
    - + + + +
    + +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/block-inline/change-formatting.html b/flow/block-inline/change-formatting.html index 36719b40..f79cb94a 100644 --- a/flow/block-inline/change-formatting.html +++ b/flow/block-inline/change-formatting.html @@ -1,114 +1,115 @@ - + - - - - CSS Normal Flow: Inline - - + + + + CSS Normal Flow: Inline + + - - - - -
    - -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    - - -
    - - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/block-inline/flex.html b/flow/block-inline/flex.html index 4bc24ae3..e17d1953 100644 --- a/flow/block-inline/flex.html +++ b/flow/block-inline/flex.html @@ -1,133 +1,133 @@ - + - - - - CSS Normal Flow: inner and outer display types + + + + CSS Normal Flow: inner and outer display types - - + - + } + + - -
    -
    -
    FLex Item
    -
    Flex Item
    -
    + +
    +
    +
    FLex Item
    +
    Flex Item
    +
    Children
    are in
    normal flow
    +
    -
    - -
    - - + -
    - +
    Flex Item
    +
    Flex Item
    +
    +
    Children
    +
    are in
    +
    normal flow
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/block-inline/inline.html b/flow/block-inline/inline.html index 9c52523d..ee12ea22 100644 --- a/flow/block-inline/inline.html +++ b/flow/block-inline/inline.html @@ -1,105 +1,106 @@ - + - - - - CSS Normal Flow: Inline - - + + + +
    +

    + Before that night—a memorable night, as it was to + prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration + from the fact.” +

    +
    + + +
    + +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/block-inline/line-box.html b/flow/block-inline/line-box.html index 46b5b408..ae5f83ae 100644 --- a/flow/block-inline/line-box.html +++ b/flow/block-inline/line-box.html @@ -1,115 +1,116 @@ - + - - - - CSS Normal Flow: Inline - - + + + + CSS Normal Flow: Inline + + - - - - -
    - -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    - - -
    - - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/block-inline/normal-flow-collapsing.html b/flow/block-inline/normal-flow-collapsing.html index 56b19e64..6fd2ae0c 100644 --- a/flow/block-inline/normal-flow-collapsing.html +++ b/flow/block-inline/normal-flow-collapsing.html @@ -1,117 +1,128 @@ - + - - - - CSS Normal Flow: Margin Collapsing + + + + CSS Normal Flow: Margin Collapsing - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/block-inline/normal-flow-margin-zero.html b/flow/block-inline/normal-flow-margin-zero.html index fc03eecf..17b025cc 100644 --- a/flow/block-inline/normal-flow-margin-zero.html +++ b/flow/block-inline/normal-flow-margin-zero.html @@ -1,118 +1,128 @@ - + - - - - CSS Normal Flow + + + + CSS Normal Flow - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/block-inline/normal-flow-width.html b/flow/block-inline/normal-flow-width.html index a6f8461a..45526161 100644 --- a/flow/block-inline/normal-flow-width.html +++ b/flow/block-inline/normal-flow-width.html @@ -1,117 +1,128 @@ - + - - - - CSS Normal Flow + + + + CSS Normal Flow - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/block-inline/normal-flow.html b/flow/block-inline/normal-flow.html index 88d8227c..db6452d0 100644 --- a/flow/block-inline/normal-flow.html +++ b/flow/block-inline/normal-flow.html @@ -1,115 +1,126 @@ - + - - - - CSS Normal Flow + + + + CSS Normal Flow - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/formatting-contexts/bfc-flow-root.html b/flow/formatting-contexts/bfc-flow-root.html index 2ecb382d..9f071012 100644 --- a/flow/formatting-contexts/bfc-flow-root.html +++ b/flow/formatting-contexts/bfc-flow-root.html @@ -1,137 +1,138 @@ - + - - - - CSS Formatting Contexts: create a BFC with display: flow-root - - - + - - - -
    -
    -
    I am a floated box!
    -

    I am content inside the container.

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/formatting-contexts/bfc-overflow.html b/flow/formatting-contexts/bfc-overflow.html index dd310c66..6e986f9e 100644 --- a/flow/formatting-contexts/bfc-overflow.html +++ b/flow/formatting-contexts/bfc-overflow.html @@ -1,137 +1,138 @@ - + - - - - CSS Formatting Contexts: create a BFC with overflow - - - + - - - -
    -
    -
    I am a floated box!
    -

    I am content inside the container.

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/formatting-contexts/float.html b/flow/formatting-contexts/float.html index 7e373cae..911ef824 100644 --- a/flow/formatting-contexts/float.html +++ b/flow/formatting-contexts/float.html @@ -1,135 +1,136 @@ - + - - - - CSS Formatting Contexts - - - + - - - -
    -
    -
    I am a floated box!
    -

    I am content inside the container.

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/formatting-contexts/inline.html b/flow/formatting-contexts/inline.html index e39c0c77..def6fbe7 100644 --- a/flow/formatting-contexts/inline.html +++ b/flow/formatting-contexts/inline.html @@ -1,121 +1,121 @@ - + - - - - CSS Normal Flow: Inline - - + + + + CSS Normal Flow: Inline + + - - - - - - -
    - -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    - - -
    - - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/in-flow/abspos.html b/flow/in-flow/abspos.html index b430bc91..f86a1bf9 100644 --- a/flow/in-flow/abspos.html +++ b/flow/in-flow/abspos.html @@ -1,139 +1,152 @@ - + - - - - CSS Flow: Items with position absolute - - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.

    -

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/in-flow/float.html b/flow/in-flow/float.html index 6ce82b5d..7473d83d 100644 --- a/flow/in-flow/float.html +++ b/flow/in-flow/float.html @@ -1,133 +1,144 @@ - + - - - - CSS Flow: float + + + + CSS Flow: float - - + - - - -
    -
    -
    I am a floated box!
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/in-flow/in-flow.html b/flow/in-flow/in-flow.html index b2b97dd7..83df1c98 100644 --- a/flow/in-flow/in-flow.html +++ b/flow/in-flow/in-flow.html @@ -1,133 +1,144 @@ - + - - - - CSS Flow: in-flow elements + + + + CSS Flow: in-flow elements - - - + section input { + display: block; + margin: 5px; + } + ul { + display: flex; + justify-content: space-around; + list-style: none; + margin: 0; + } + + + - -
    -
    -

    A heading

    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.

    + +
    +
    +

    A heading

    +

    + One November night in the year 1782, so the story runs, two brothers + sat over their winter fire in the little French town of Annonay, + watching the grey smoke-wreaths from the hearth curl up the wide + chimney. +

    -
      -
    • One
      • -
    • Two
      • -
    • Three
      • -
    -

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -
    -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/in-flow/relative.html b/flow/in-flow/relative.html index e12a5da2..4728f288 100644 --- a/flow/in-flow/relative.html +++ b/flow/in-flow/relative.html @@ -1,139 +1,152 @@ - + - - - - CSS Flow: Items with position relative - - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.

    -

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/overflow/auto.html b/flow/overflow/auto.html index 63b0397d..1e0cb426 100644 --- a/flow/overflow/auto.html +++ b/flow/overflow/auto.html @@ -1,127 +1,139 @@ - + - - - - CSS Overflow auto + + + + CSS Overflow auto - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.

    - -
    -

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/overflow/hidden.html b/flow/overflow/hidden.html index a1c26914..bd1536e5 100644 --- a/flow/overflow/hidden.html +++ b/flow/overflow/hidden.html @@ -1,127 +1,139 @@ - + - - - - CSS Overflow hidden + + + + CSS Overflow hidden - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.

    - -
    -

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/overflow/overflow-y.html b/flow/overflow/overflow-y.html index abec161b..bb0bec52 100644 --- a/flow/overflow/overflow-y.html +++ b/flow/overflow/overflow-y.html @@ -1,127 +1,139 @@ - + - - - - CSS Overflow clip + + + + CSS Overflow clip - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.

    - -
    -

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/overflow/overflow.html b/flow/overflow/overflow.html index b18b217e..183e8547 100644 --- a/flow/overflow/overflow.html +++ b/flow/overflow/overflow.html @@ -1,125 +1,137 @@ - + - - - - CSS Overflow + + + + CSS Overflow - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.

    - -
    -

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/overflow/scroll.html b/flow/overflow/scroll.html index 53848471..c0f8c35b 100644 --- a/flow/overflow/scroll.html +++ b/flow/overflow/scroll.html @@ -1,127 +1,139 @@ - + - - - - CSS Overflow scroll + + + + CSS Overflow scroll - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.

    - -
    -

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/overflow/text-overflow.html b/flow/overflow/text-overflow.html index 217d0157..958bafd8 100644 --- a/flow/overflow/text-overflow.html +++ b/flow/overflow/text-overflow.html @@ -1,136 +1,147 @@ - + - - - - CSS Overflow clip - - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.

    - -
    -

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/writing-modes/block-change-mode.html b/flow/writing-modes/block-change-mode.html index b0abfa91..112d9c07 100644 --- a/flow/writing-modes/block-change-mode.html +++ b/flow/writing-modes/block-change-mode.html @@ -1,149 +1,158 @@ - + - - - - Changing the writing mode of an block box - - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.

    - -
    -
    This box should establish a new BFC. -
    - -

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    - -
    + } + + -
    - - + -
    - +
    +
    This box should establish a new BFC.
    - - +

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    + +
    +
    + +
    + + diff --git a/flow/writing-modes/creative-use.html b/flow/writing-modes/creative-use.html index 11e0206c..28711b45 100644 --- a/flow/writing-modes/creative-use.html +++ b/flow/writing-modes/creative-use.html @@ -1,119 +1,125 @@ - + - - - - Flow and Writing Modes + + + + Flow and Writing Modes - - + - - - -
    -
    -

    A heading

    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    - -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/writing-modes/horizontal-tb.html b/flow/writing-modes/horizontal-tb.html index 34149023..25122442 100644 --- a/flow/writing-modes/horizontal-tb.html +++ b/flow/writing-modes/horizontal-tb.html @@ -1,115 +1,126 @@ - + - - - - horizontal-tb + + + + horizontal-tb - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/writing-modes/inline-change-mode.html b/flow/writing-modes/inline-change-mode.html index 7ab2e90a..04e61ed4 100644 --- a/flow/writing-modes/inline-change-mode.html +++ b/flow/writing-modes/inline-change-mode.html @@ -1,125 +1,132 @@ - + - - - - Changing the writing mode of an inline box + + + + Changing the writing mode of an inline box - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    - -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/writing-modes/inline-size.html b/flow/writing-modes/inline-size.html index 49d55863..56d75a7e 100644 --- a/flow/writing-modes/inline-size.html +++ b/flow/writing-modes/inline-size.html @@ -1,140 +1,135 @@ - + - - - - Setting the inline-size on boxes + + + + Setting the inline-size on boxes - - + - + } + + - -
    -
    - Box 1 -
    -
    - Box 2 -
    - -
    - - + -
    - +
    + Box 1
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/writing-modes/replaced.html b/flow/writing-modes/replaced.html index 887a55b8..f3df1026 100644 --- a/flow/writing-modes/replaced.html +++ b/flow/writing-modes/replaced.html @@ -1,124 +1,131 @@ - + - - - - Changing the writing mode of an block box - - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.

    - - placeholder - -

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    - -
    + } + + -
    - - + -
    - -
    - - +

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.

    + + placeholder + +

    Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    + +
    +
    + +
    + + diff --git a/flow/writing-modes/vertical-lr.html b/flow/writing-modes/vertical-lr.html index 2ffe75f5..7f70a8bf 100644 --- a/flow/writing-modes/vertical-lr.html +++ b/flow/writing-modes/vertical-lr.html @@ -1,115 +1,126 @@ - + - - - - vertical-lr + + + + vertical-lr - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/writing-modes/vertical-rl.html b/flow/writing-modes/vertical-rl.html index 520b8fb9..0a0bbc70 100644 --- a/flow/writing-modes/vertical-rl.html +++ b/flow/writing-modes/vertical-rl.html @@ -1,115 +1,126 @@ - + - - - - vertical-rl + + + + vertical-rl - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    -
    + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/flow/writing-modes/width.html b/flow/writing-modes/width.html index f268648e..1f58cf5e 100644 --- a/flow/writing-modes/width.html +++ b/flow/writing-modes/width.html @@ -1,140 +1,135 @@ - + - - - - Setting the width on boxes + + + + Setting the width on boxes - - + - + } + + - -
    -
    - Box 1 -
    -
    - Box 2 -
    - -
    - - + -
    - +
    + Box 1
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/font-features/font-kerning.html b/font-features/font-kerning.html index bcfd1520..478f0b89 100644 --- a/font-features/font-kerning.html +++ b/font-features/font-kerning.html @@ -1,234 +1,249 @@ - + - - - - Font feature example - kerning - - - - - - - -
    -
    -
    -
    + .container * { + font-size: 4rem; + margin: 1.5rem 0; + } + + + + + + +
    +
    +
    +

    Puffy Pangolins

    -
    -
    - - - -
    -
    -
    -
    +
    +
    + + + + +
    +
    +
    +

    Puffy Pangolins

    -
    -
    - - - +
    +
    + + + + +
    -
    -
    - -
    - - +
    + +
    + + diff --git a/font-features/font-variant-alternates.html b/font-features/font-variant-alternates.html index 2911a6cb..0845d52b 100644 --- a/font-features/font-variant-alternates.html +++ b/font-features/font-variant-alternates.html @@ -1,268 +1,293 @@ - + - - - - Font feature example - alternates + + + + Font feature example - alternates - - - - + .container * { + font-size: 4rem; + margin: 1.5rem 0; + } + + + + - -
    -
    -
    -
    + +
    +
    +
    +

    My Perfidious pangram

    -
    -
    - - - -
    -
    -
    -
    +
    +
    + + + + +
    +
    +
    +

    My Perfidious pangram

    -
    -
    - - - +
    +
    + + + + +
    -
    -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML1.value = htmlCode1; + textareaCSS1.value = cssCode1; + textareaHTML2.value = htmlCode2; + textareaCSS2.value = cssCode2; + demo1_active.checked = true; + demo1_active.parentNode.classList.remove("inactive"); + demo2_active.checked = true; + demo2_active.parentNode.classList.remove("inactive"); + fillCode(); + }); + textareaHTML1.addEventListener("input", fillCode); + textareaCSS1.addEventListener("input", fillCode); + textareaHTML2.addEventListener("input", fillCode); + textareaCSS2.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/font-features/font-variant-caps.html b/font-features/font-variant-caps.html index 0156cc92..42c664d9 100644 --- a/font-features/font-variant-caps.html +++ b/font-features/font-variant-caps.html @@ -1,246 +1,272 @@ - + - - - - Font feature example - caps - - + + + - - - - - - -
    -
    -
    -
    -

    Small Caps and All Small Caps

    -
    -
    - - - + +
    +
    +
    +
    +

    + Small Caps and + All Small Caps +

    +
    +
    + + + + +
    +
    +
    +
    +

    + Small Caps and + All Small Caps +

    +
    +
    + + + + +
    -
    -
    -
    -

    Small Caps and All Small Caps

    -
    -
    - - - +
    +
    -
    -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML1.value = htmlCode1; + textareaCSS1.value = cssCode1; + textareaHTML2.value = htmlCode2; + textareaCSS2.value = cssCode2; + demo1_active.checked = true; + demo1_active.parentNode.classList.remove("inactive"); + demo2_active.checked = true; + demo2_active.parentNode.classList.remove("inactive"); + fillCode(); + }); + + textareaHTML1.addEventListener("input", fillCode); + textareaCSS1.addEventListener("input", fillCode); + textareaHTML2.addEventListener("input", fillCode); + textareaCSS2.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/font-features/font-variant-east-asian.html b/font-features/font-variant-east-asian.html index 9061afb1..5e909bb6 100644 --- a/font-features/font-variant-east-asian.html +++ b/font-features/font-variant-east-asian.html @@ -1,229 +1,241 @@ - + - - - - Font feature example - East Asian - - - - - - - -
    -
    -
    -
    + .section input { + display: block; + margin: 5px; + } + + .container * { + font-size: 4rem; + margin: 1.5rem 0; + } + + + + + + +
    +
    +
    +

    唖 芦 溢 茨 鰯 嘘 欝 厩 噂

    -
    -
    - - - -
    -
    -
    -
    +
    +
    + + + + +
    +
    +
    +

    唖 芦 溢 茨 鰯 嘘 欝 厩 噂

    -
    -
    - - - +
    +
    + + + + +
    -
    -
    - -
    - - +
    + +
    + + diff --git a/font-features/font-variant-ligatures.html b/font-features/font-variant-ligatures.html index b6649c95..7f8e5a20 100644 --- a/font-features/font-variant-ligatures.html +++ b/font-features/font-variant-ligatures.html @@ -1,232 +1,252 @@ - + - - - - Font feature example - ligatures - - - - - - - -
    -
    -
    -
    + .container * { + font-size: 4rem; + margin: 1.5rem 0; + } + + + + + + +
    +
    +
    +

    Puffy Perfect -^ <->

    -
    -
    - - - -
    -
    -
    -
    +
    +
    + + + + +
    +
    +
    +

    Puffy Perfect -^ <->

    -
    -
    - - - +
    +
    + + + + +
    -
    -
    - -
    - - +
    + +
    + + diff --git a/font-features/font-variant-numeric-example.html b/font-features/font-variant-numeric-example.html index ec109907..65bcc9f2 100644 --- a/font-features/font-variant-numeric-example.html +++ b/font-features/font-variant-numeric-example.html @@ -1,4 +1,4 @@ - + @@ -6,18 +6,17 @@ @@ -30,7 +29,7 @@
    - +} - + -

    This example uses the Source Sans Pro OpenType font, developed by Adobe +

    + This example uses the Source Sans Pro OpenType font, developed by Adobe and used here under the terms of the SIL Open Font License, Version 1.1: - http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web

    + http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web +

    diff --git a/font-features/font-variant-numeric-frac.html b/font-features/font-variant-numeric-frac.html index 9af8fd81..dcc5998b 100644 --- a/font-features/font-variant-numeric-frac.html +++ b/font-features/font-variant-numeric-frac.html @@ -1,171 +1,193 @@ - + - - - - Font feature example - numeric fractions, ordinals, and slashed zero - - + + + - - - - - - -
    -
    -
    -
    -

    3/16, or 1st of 0

    -
    -
    - - - -
    -
    -
    -
    -

    3/16 or 1st of 0

    -
    -
    - + + + +
    +
    +
    +
    +

    + 3/16 or + 1st of 0 +

    +
    +
    + - + - + + + +
    -
    -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML1.value = htmlCode1; + textareaCSS1.value = cssCode1; + textareaHTML2.value = htmlCode2; + textareaCSS2.value = cssCode2; + demo1_active.checked = true; + demo1_active.parentNode.classList.remove("inactive"); + demo2_active.checked = true; + demo2_active.parentNode.classList.remove("inactive"); + fillCode(); + }); + textareaHTML1.addEventListener("input", fillCode); + textareaCSS1.addEventListener("input", fillCode); + textareaHTML2.addEventListener("input", fillCode); + textareaCSS2.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/font-features/font-variant-numeric.html b/font-features/font-variant-numeric.html index 3c78cf57..6951caca 100644 --- a/font-features/font-variant-numeric.html +++ b/font-features/font-variant-numeric.html @@ -1,242 +1,266 @@ - + - - - - Font feature example - numeric - - + + + - - - - - - -
    -
    -
    -
    -

    6,142 or 6,142

    -
    -
    - - - + +
    +
    +
    +
    +

    + 6,142 or + 6,142 +

    +
    +
    + + + + +
    +
    +
    +
    +

    + 6,142 or + 6,142 +

    +
    +
    + + + + +
    -
    -
    -
    -

    6,142 or 6,142

    -
    -
    - - - +
    +
    -
    -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML1.value = htmlCode1; + textareaCSS1.value = cssCode1; + textareaHTML2.value = htmlCode2; + textareaCSS2.value = cssCode2; + demo1_active.checked = true; + demo1_active.parentNode.classList.remove("inactive"); + demo2_active.checked = true; + demo2_active.parentNode.classList.remove("inactive"); + fillCode(); + }); + + textareaHTML1.addEventListener("input", fillCode); + textareaCSS1.addEventListener("input", fillCode); + textareaHTML2.addEventListener("input", fillCode); + textareaCSS2.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/font-features/font-variant-position.html b/font-features/font-variant-position.html index 0cb3c2bf..0cac0e16 100644 --- a/font-features/font-variant-position.html +++ b/font-features/font-variant-position.html @@ -1,246 +1,272 @@ - + - - - - Font feature example - position - - + + + - - - - - - -
    -
    -
    -
    -

    Ups1 and downs2

    -
    -
    - - - + +
    +
    +
    +
    +

    + Ups1 and downs2 +

    +
    +
    + + + + +
    +
    +
    +
    +

    + Ups1 and downs2 +

    +
    +
    + + + + +
    -
    -
    -
    -

    Ups1 and downs2

    -
    -
    - - - +
    +
    -
    -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML1.value = htmlCode1; + textareaCSS1.value = cssCode1; + textareaHTML2.value = htmlCode2; + textareaCSS2.value = cssCode2; + demo1_active.checked = true; + demo1_active.parentNode.classList.remove("inactive"); + demo2_active.checked = true; + demo2_active.parentNode.classList.remove("inactive"); + fillCode(); + }); + + textareaHTML1.addEventListener("input", fillCode); + textareaCSS1.addEventListener("input", fillCode); + textareaHTML2.addEventListener("input", fillCode); + textareaCSS2.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/font-features/font-variant.html b/font-features/font-variant.html index a104e1fa..da690ed2 100644 --- a/font-features/font-variant.html +++ b/font-features/font-variant.html @@ -1,230 +1,252 @@ - + - - - - Font feature example - variant shorthand - - - - - - - -
    -
    -
    -
    + .container * { + font-size: 4rem; + margin: 1.5rem 0; + } + + + + + + +
    +
    +
    +

    Spiffy Plastic -> 3/4 time

    -
    -
    - - - -
    -
    -
    -
    +
    +
    + + + + +
    +
    +
    +

    Spiffy Plastic -> 3/4 time

    -
    -
    - - + - + + + +
    -
    -
    - -
    - - +
    + +
    + + diff --git a/font-features/fonts/kokoro/IPA_Font_License_Agreement_v1.0.txt b/font-features/fonts/kokoro/IPA_Font_License_Agreement_v1.0.txt index 272d5f63..7e8e2706 100755 --- a/font-features/fonts/kokoro/IPA_Font_License_Agreement_v1.0.txt +++ b/font-features/fonts/kokoro/IPA_Font_License_Agreement_v1.0.txt @@ -66,12 +66,12 @@ IPAフォントライセンスv1.0 IPA Font License Agreement v1.0 -The Licensor provides the Licensed Program (as defined in Article 1 below) under the terms of this license agreement (“Agreement”). Any use, reproduction or distribution of the Licensed Program, or any exercise of rights under this Agreement by a Recipient (as defined in Article 1 below) constitutes the Recipient's acceptance of this Agreement. +The Licensor provides the Licensed Program (as defined in Article 1 below) under the terms of this license agreement (“Agreement”). Any use, reproduction or distribution of the Licensed Program, or any exercise of rights under this Agreement by a Recipient (as defined in Article 1 below) constitutes the Recipient's acceptance of this Agreement. Article 1 (Definitions) 1.“Digital Font Program” shall mean a computer program containing, or used to render or display fonts. 2.“Licensed Program” shall mean a Digital Font Program licensed by the Licensor under this Agreement. -3.“Derived Program” shall mean a Digital Font Program created as a result of a modification, addition, deletion, replacement or any other adaptation to or of a part or all of the Licensed Program, and includes a case where a Digital Font Program newly created by retrieving font information from a part or all of the Licensed Program or Embedded Fonts from a Digital Document File with or without modification of the retrieved font information. +3.“Derived Program” shall mean a Digital Font Program created as a result of a modification, addition, deletion, replacement or any other adaptation to or of a part or all of the Licensed Program, and includes a case where a Digital Font Program newly created by retrieving font information from a part or all of the Licensed Program or Embedded Fonts from a Digital Document File with or without modification of the retrieved font information. 4.“Digital Content” shall mean products provided to end users in the form of digital data, including video content, motion and/or still pictures, TV programs or other broadcasting content and products consisting of character text, pictures, photographic images, graphic symbols and/or the like. 5.“Digital Document File” shall mean a PDF file or other Digital Content created by various software programs in which a part or all of the Licensed Program becomes embedded or contained in the file for the display of the font (“Embedded Fonts”). Embedded Fonts are used only in the display of characters in the particular Digital Document File within which they are embedded, and shall be distinguished from those in any Digital Font Program, which may be used for display of characters outside that particular Digital Document File. 6.“Computer” shall include a server in this Agreement. @@ -87,7 +87,7 @@ The Licensor grants to the Recipient a license to use the Licensed Program in an 4.If any Recipient extracts Embedded Fonts from a Digital Document File to create a Derived Program, such Derived Program shall be subject to the terms of this agreement. 5.If any Recipient performs Reproduction or Other Exploitation of a Digital Document File in which Embedded Fonts of the Licensed Program are used only for rendering the Digital Content within such Digital Document File then such Recipient shall have no further obligations under this Agreement in relation to such actions. 6.The Recipient may reproduce the Licensed Program as is without modification and transfer such copies, publicly transmit or otherwise redistribute the Licensed Program to a third party for commercial or non-commercial purposes (“Redistribute”), in accordance with the provisions set forth in Article 3 Paragraph 2. -7.The Recipient may create, use, reproduce and/or Redistribute a Derived Program under the terms stated above for the Licensed Program: provided, that the Recipient shall follow the provisions set forth in Article 3 Paragraph 1 when Redistributing the Derived Program. +7.The Recipient may create, use, reproduce and/or Redistribute a Derived Program under the terms stated above for the Licensed Program: provided, that the Recipient shall follow the provisions set forth in Article 3 Paragraph 1 when Redistributing the Derived Program. Article 3 (Restriction) The license granted in the preceding Article shall be subject to the following restrictions: @@ -95,10 +95,10 @@ The license granted in the preceding Article shall be subject to the following r 1.If a Derived Program is Redistributed pursuant to Paragraph 4 and 7 of the preceding Article, the following conditions must be met : 　(1)The following must be also Redistributed together with the Derived Program, or be made available online or by means of mailing mechanisms in exchange for a cost which does not exceed the total costs of postage, storage medium and handling fees: 　　(a)a copy of the Derived Program; and -　　(b)any additional file created by the font developing program in the course of creating the Derived Program that can be used for further modification of the Derived Program, if any. -　(2)It is required to also Redistribute means to enable recipients of the Derived Program to replace the Derived Program with the Licensed Program first released under this License (the “Original Program”). Such means may be to provide a difference file from the Original Program, or instructions setting out a method to replace the Derived Program with the Original Program. +　　(b)any additional file created by the font developing program in the course of creating the Derived Program that can be used for further modification of the Derived Program, if any. +　(2)It is required to also Redistribute means to enable recipients of the Derived Program to replace the Derived Program with the Licensed Program first released under this License (the “Original Program”). Such means may be to provide a difference file from the Original Program, or instructions setting out a method to replace the Derived Program with the Original Program. 　(3)The Recipient must license the Derived Program under the terms and conditions of this Agreement. -　(4)No one may use or include the name of the Licensed Program as a program name, font name or file name of the Derived Program. +　(4)No one may use or include the name of the Licensed Program as a program name, font name or file name of the Derived Program. 　(5)Any material to be made available online or by means of mailing a medium to satisfy the requirements of this paragraph may be provided, verbatim, by any party wishing to do so. 2.If the Recipient Redistributes the Licensed Program pursuant to Paragraph 6 of the preceding Article, the Recipient shall meet all of the following conditions: 　(1)The Recipient may not change the name of the Licensed Program. diff --git a/font-features/playable.js b/font-features/playable.js index ddebe2d8..d9353ed2 100644 --- a/font-features/playable.js +++ b/font-features/playable.js @@ -1,22 +1,22 @@ -var section = document.querySelector('section'); -var editable = document.querySelector('.editable'); -var textareaHTML = document.querySelector('.playable-html'); -var textareaCSS = document.querySelector('.playable-css'); -var reset = document.getElementById('reset'); +var section = document.querySelector("section"); +var editable = document.querySelector(".editable"); +var textareaHTML = document.querySelector(".playable-html"); +var textareaCSS = document.querySelector(".playable-css"); +var reset = document.getElementById("reset"); var htmlCode = textareaHTML.value; var cssCode = textareaCSS.value; function fillCode() { - editable.innerHTML = textareaCSS.value; - section.innerHTML = textareaHTML.value; + editable.innerHTML = textareaCSS.value; + section.innerHTML = textareaHTML.value; } -reset.addEventListener('click', function () { - textareaHTML.value = htmlCode; - textareaCSS.value = cssCode; - fillCode(); +reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); }); -textareaHTML.addEventListener('input', fillCode); -textareaCSS.addEventListener('input', fillCode); -window.addEventListener('load', fillCode); \ No newline at end of file +textareaHTML.addEventListener("input", fillCode); +textareaCSS.addEventListener("input", fillCode); +window.addEventListener("load", fillCode); diff --git a/font-features/styles.css b/font-features/styles.css index b733e436..11945fee 100644 --- a/font-features/styles.css +++ b/font-features/styles.css @@ -1,61 +1,65 @@ /* Some default styling for cookbook examples */ -/* +/* rgb(53,43,34) rgb(75,70,74) rgb(95,97,110) rgb(137,151,188) rgb(160,178,226) */ -body { - background-color: #fff; - color: #333; - font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif; - padding: 0; - margin: 0; +body { + background-color: #fff; + color: #333; + font: + 1.2em / 1.5 Helvetica Neue, + Helvetica, + Arial, + sans-serif; + padding: 0; + margin: 0; } /* styles for the editor */ .playable { - font-family: monospace; - display: block; - margin-bottom: 10px; - background-color: #F4F7F8; - border: none; - border-left: 6px solid #558ABB; - color: #4D4E53; - width: 90%; - max-width: 700px; - padding: 10px 10px 0px; - font-size: 90%; - } + font-family: monospace; + display: block; + margin-bottom: 10px; + background-color: #f4f7f8; + border: none; + border-left: 6px solid #558abb; + color: #4d4e53; + width: 90%; + max-width: 700px; + padding: 10px 10px 0px; + font-size: 90%; +} - .playable-css { - height: 80px; - } +.playable-css { + height: 80px; +} - .playable-html { - height: 160px; - } +.playable-html { + height: 160px; +} - .playable-buttons { - text-align: right; - width: 90%; - max-width: 700px; - padding: 5px 10px 5px 26px; - font-size: 100%; - } +.playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; +} - .preview { - width: 90%; - max-width: 700px; - border: 1px solid #4D4E53; - border-radius: 2px; - padding: 10px 14px 10px 10px; - margin-bottom: 10px; - } +.preview { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; +} - .preview input { - display: block; - margin: 5px; - } +.preview input { + display: block; + margin: 5px; +} diff --git a/grid/docs/autoplacement.html b/grid/docs/autoplacement.html index f080e21b..8ae6ee09 100644 --- a/grid/docs/autoplacement.html +++ b/grid/docs/autoplacement.html @@ -1,4 +1,4 @@ - + @@ -15,16 +15,16 @@ padding: 0; max-width: 800px; } - .wrapper li { - border: 1px solid #ccc; - } - - .wrapper li img { - display: block; - object-fit: cover; - width: 100%; - height: 100%; - } + .wrapper li { + border: 1px solid #ccc; + } + + .wrapper li img { + display: block; + object-fit: cover; + width: 100%; + height: 100%; + }
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    - +} - +
    diff --git a/grid/masonry/block-axis.html b/grid/masonry/block-axis.html index fbd48311..2a3c404d 100644 --- a/grid/masonry/block-axis.html +++ b/grid/masonry/block-axis.html @@ -1,4 +1,4 @@ - + @@ -31,36 +31,35 @@ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-template-rows: masonry; } -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    - +} - +
    diff --git a/grid/masonry/inline-axis.html b/grid/masonry/inline-axis.html index 30280d88..5025b40d 100644 --- a/grid/masonry/inline-axis.html +++ b/grid/masonry/inline-axis.html @@ -1,4 +1,4 @@ - + @@ -31,36 +31,34 @@ grid-template-columns: masonry; grid-template-rows: repeat(3, 100px); } -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    - +} - +
    diff --git a/grid/masonry/justify-tracks.html b/grid/masonry/justify-tracks.html index 50a2c830..6715254e 100644 --- a/grid/masonry/justify-tracks.html +++ b/grid/masonry/justify-tracks.html @@ -1,4 +1,4 @@ - + @@ -32,37 +32,35 @@ grid-template-rows: repeat(3, 100px); justify-tracks: end, center, space-around; } -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    - +} - +
    diff --git a/grid/masonry/masonry-auto-flow.html b/grid/masonry/masonry-auto-flow.html index 8c955e1d..ccfe7635 100644 --- a/grid/masonry/masonry-auto-flow.html +++ b/grid/masonry/masonry-auto-flow.html @@ -1,4 +1,4 @@ - + @@ -31,29 +31,28 @@ gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-template-rows: masonry; - masonry-auto-flow: next ; + masonry-auto-flow: next; } -
    -
    -
    -
    -
    -
    -
    positioned.
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    positioned.
    +
    +
    +
    +
    +
    +
    - + grid-column: 2 / 4; +} - +
    diff --git a/grid/masonry/positioned.html b/grid/masonry/positioned.html index 7c932e06..3149209c 100644 --- a/grid/masonry/positioned.html +++ b/grid/masonry/positioned.html @@ -1,4 +1,4 @@ - + @@ -32,27 +32,26 @@ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-template-rows: masonry; } -
    -
    -
    -
    -
    -
    -
    positioned.
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    positioned.
    +
    +
    +
    +
    +
    +
    - + grid-column: 2 / 4; +} - +
    diff --git a/grid/masonry/spanners.html b/grid/masonry/spanners.html index b91e465d..627d9083 100644 --- a/grid/masonry/spanners.html +++ b/grid/masonry/spanners.html @@ -1,4 +1,4 @@ - + @@ -31,36 +31,40 @@ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-template-rows: masonry; } -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    - +} - +
    diff --git a/grid/playable.js b/grid/playable.js index ddebe2d8..d9353ed2 100644 --- a/grid/playable.js +++ b/grid/playable.js @@ -1,22 +1,22 @@ -var section = document.querySelector('section'); -var editable = document.querySelector('.editable'); -var textareaHTML = document.querySelector('.playable-html'); -var textareaCSS = document.querySelector('.playable-css'); -var reset = document.getElementById('reset'); +var section = document.querySelector("section"); +var editable = document.querySelector(".editable"); +var textareaHTML = document.querySelector(".playable-html"); +var textareaCSS = document.querySelector(".playable-css"); +var reset = document.getElementById("reset"); var htmlCode = textareaHTML.value; var cssCode = textareaCSS.value; function fillCode() { - editable.innerHTML = textareaCSS.value; - section.innerHTML = textareaHTML.value; + editable.innerHTML = textareaCSS.value; + section.innerHTML = textareaHTML.value; } -reset.addEventListener('click', function () { - textareaHTML.value = htmlCode; - textareaCSS.value = cssCode; - fillCode(); +reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); }); -textareaHTML.addEventListener('input', fillCode); -textareaCSS.addEventListener('input', fillCode); -window.addEventListener('load', fillCode); \ No newline at end of file +textareaHTML.addEventListener("input", fillCode); +textareaCSS.addEventListener("input", fillCode); +window.addEventListener("load", fillCode); diff --git a/grid/styles.css b/grid/styles.css index b733e436..11945fee 100644 --- a/grid/styles.css +++ b/grid/styles.css @@ -1,61 +1,65 @@ /* Some default styling for cookbook examples */ -/* +/* rgb(53,43,34) rgb(75,70,74) rgb(95,97,110) rgb(137,151,188) rgb(160,178,226) */ -body { - background-color: #fff; - color: #333; - font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif; - padding: 0; - margin: 0; +body { + background-color: #fff; + color: #333; + font: + 1.2em / 1.5 Helvetica Neue, + Helvetica, + Arial, + sans-serif; + padding: 0; + margin: 0; } /* styles for the editor */ .playable { - font-family: monospace; - display: block; - margin-bottom: 10px; - background-color: #F4F7F8; - border: none; - border-left: 6px solid #558ABB; - color: #4D4E53; - width: 90%; - max-width: 700px; - padding: 10px 10px 0px; - font-size: 90%; - } + font-family: monospace; + display: block; + margin-bottom: 10px; + background-color: #f4f7f8; + border: none; + border-left: 6px solid #558abb; + color: #4d4e53; + width: 90%; + max-width: 700px; + padding: 10px 10px 0px; + font-size: 90%; +} - .playable-css { - height: 80px; - } +.playable-css { + height: 80px; +} - .playable-html { - height: 160px; - } +.playable-html { + height: 160px; +} - .playable-buttons { - text-align: right; - width: 90%; - max-width: 700px; - padding: 5px 10px 5px 26px; - font-size: 100%; - } +.playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; +} - .preview { - width: 90%; - max-width: 700px; - border: 1px solid #4D4E53; - border-radius: 2px; - padding: 10px 14px 10px 10px; - margin-bottom: 10px; - } +.preview { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; +} - .preview input { - display: block; - margin: 5px; - } +.preview input { + display: block; + margin: 5px; +} diff --git a/grid/subgrid/adding-line-names.html b/grid/subgrid/adding-line-names.html index ef94a4c0..cb6b4e86 100644 --- a/grid/subgrid/adding-line-names.html +++ b/grid/subgrid/adding-line-names.html @@ -1,4 +1,4 @@ - + @@ -66,7 +66,7 @@
    - +} - +
    diff --git a/grid/subgrid/both.html b/grid/subgrid/both.html index 6b6e07c0..bb8bd1f1 100644 --- a/grid/subgrid/both.html +++ b/grid/subgrid/both.html @@ -1,4 +1,4 @@ - + @@ -58,7 +58,7 @@
    - +} - +
    diff --git a/grid/subgrid/columns.html b/grid/subgrid/columns.html index 64ef5b52..ef75d5f8 100644 --- a/grid/subgrid/columns.html +++ b/grid/subgrid/columns.html @@ -1,4 +1,4 @@ - + @@ -58,7 +58,7 @@
    - +} - +
    diff --git a/grid/subgrid/gap.html b/grid/subgrid/gap.html index 899ca954..ce229fc5 100644 --- a/grid/subgrid/gap.html +++ b/grid/subgrid/gap.html @@ -1,4 +1,4 @@ - + @@ -49,7 +49,7 @@ } .subitem2 { - background-color: rgba(0,0,0,.5); + background-color: rgba(0, 0, 0, 0.5); grid-column: 2; grid-row: 1; } @@ -66,7 +66,7 @@
    - +} - +
    diff --git a/grid/subgrid/implicit.html b/grid/subgrid/implicit.html index fdad43a4..8b8034f7 100644 --- a/grid/subgrid/implicit.html +++ b/grid/subgrid/implicit.html @@ -1,4 +1,4 @@ - + @@ -65,7 +65,7 @@
    - +} - +
    diff --git a/grid/subgrid/line-names.html b/grid/subgrid/line-names.html index a0abb790..b61b5c33 100644 --- a/grid/subgrid/line-names.html +++ b/grid/subgrid/line-names.html @@ -1,4 +1,4 @@ - + @@ -59,7 +59,7 @@
    - +} - +
    diff --git a/grid/subgrid/no-implicit.html b/grid/subgrid/no-implicit.html index 3aa3a04b..d4010d13 100644 --- a/grid/subgrid/no-implicit.html +++ b/grid/subgrid/no-implicit.html @@ -1,4 +1,4 @@ - + @@ -65,7 +65,7 @@
    - +} - +
    diff --git a/grid/subgrid/rows.html b/grid/subgrid/rows.html index f2a118b4..f75f67d8 100644 --- a/grid/subgrid/rows.html +++ b/grid/subgrid/rows.html @@ -1,4 +1,4 @@ - + @@ -58,7 +58,7 @@
    - +} - +
    diff --git a/houdini/css_painting_api/boxbg.js b/houdini/css_painting_api/boxbg.js index f8aec7a3..e1951305 100644 --- a/houdini/css_painting_api/boxbg.js +++ b/houdini/css_painting_api/boxbg.js @@ -1,21 +1,32 @@ -registerPaint('boxbg', class { - - static get contextOptions() { return {alpha: true}; } - - /* - use this function to retrieve any custom properties (or regular properties, such as 'height') - defined for the element, return them in the specified array - */ - static get inputProperties() { return ['--boxColor', '--widthSubtractor']; } - - paint(ctx, size, props) { - /* - ctx -> drawing context - size -> paintSize: width and height - props -> properties: get() method - */ - - ctx.fillStyle = props.get('--boxColor'); - ctx.fillRect(0, size.height/3, size.width*0.4 - props.get('--widthSubtractor'), size.height*0.6); - } - }); \ No newline at end of file +registerPaint( + "boxbg", + class { + static get contextOptions() { + return { alpha: true }; + } + + /* + use this function to retrieve any custom properties (or regular properties, such as 'height') + defined for the element, return them in the specified array + */ + static get inputProperties() { + return ["--boxColor", "--widthSubtractor"]; + } + + paint(ctx, size, props) { + /* + ctx -> drawing context + size -> paintSize: width and height + props -> properties: get() method + */ + + ctx.fillStyle = props.get("--boxColor"); + ctx.fillRect( + 0, + size.height / 3, + size.width * 0.4 - props.get("--widthSubtractor"), + size.height * 0.6, + ); + } + }, +); diff --git a/houdini/css_painting_api/example-boxbg.html b/houdini/css_painting_api/example-boxbg.html index 46f05f71..1adefa9f 100644 --- a/houdini/css_painting_api/example-boxbg.html +++ b/houdini/css_painting_api/example-boxbg.html @@ -1,50 +1,49 @@ - - - - - - CSS Painting API example - - - - - - - - + + + + + + CSS Painting API example + + + + + + + diff --git a/howto/box-shadow-button.html b/howto/box-shadow-button.html index f56f18a4..eba3a83d 100644 --- a/howto/box-shadow-button.html +++ b/howto/box-shadow-button.html @@ -1,61 +1,58 @@ - + - + CSS Solutions: How to add a shadow to an element - + - + - +
    -
    - -
    +
    + +
    - + box-shadow: 5px 5px 10px 2px rgba(0,0,0,.8); +} - +
    - +
    - - - + + diff --git a/howto/center.html b/howto/center.html index 1a4d943c..02fc45b3 100644 --- a/howto/center.html +++ b/howto/center.html @@ -1,57 +1,55 @@ - + - + CSS Solutions: How to center an element - + - + - +
    -
    -
    center me!
    -
    +
    +
    center me!
    +
    - +} - +
    - +
    - - - + + diff --git a/howto/highlight_first_line.html b/howto/highlight_first_line.html index da2e94a6..fc21c776 100644 --- a/howto/highlight_first_line.html +++ b/howto/highlight_first_line.html @@ -1,51 +1,54 @@ - + - + CSS Solutions: How to highlight the first line of a paragraph - - + + - + - +
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    -
    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +
    - +} - +
    - +
    - - - + + diff --git a/howto/highlight_first_line2.html b/howto/highlight_first_line2.html index 3a75d803..e6297e70 100644 --- a/howto/highlight_first_line2.html +++ b/howto/highlight_first_line2.html @@ -1,51 +1,54 @@ - + - + CSS Solutions: How to highlight the first line of a paragraph - - + + - + - +
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    -
    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +
    - +} - +
    - +
    - - - + + diff --git a/howto/highlight_first_para.html b/howto/highlight_first_para.html index 59fab90e..f3a9e71f 100644 --- a/howto/highlight_first_para.html +++ b/howto/highlight_first_para.html @@ -1,51 +1,54 @@ - + - + CSS Solutions: How to highlight the first paragraph - - + + - + - +
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    -
    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +
    - +} - +
    - +
    - - - + + diff --git a/howto/highlight_h1_plus_para.html b/howto/highlight_h1_plus_para.html index 52d070ad..97db557d 100644 --- a/howto/highlight_h1_plus_para.html +++ b/howto/highlight_h1_plus_para.html @@ -1,55 +1,58 @@ - + - + CSS Solutions: How to highlight a paragraph right after an h1 - - + + - + - +
    -
    -

    A heading

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +
    +

    A heading

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    -
    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +
    - +} - +
    - +
    - - - + + diff --git a/howto/object-fit.html b/howto/object-fit.html index 7e9a4b99..7a3edc87 100644 --- a/howto/object-fit.html +++ b/howto/object-fit.html @@ -1,85 +1,84 @@ - + - + - CSS Solutions: How to fill a box with an image without distorting it - + + CSS Solutions: How to fill a box with an image without distorting it + + - + - +
    -
    -
    a balloon
    -
    a balloon
    -
    a balloon
    -
    +
    +
    a balloon
    +
    a balloon
    +
    a balloon
    +
    - + object-fit: fill; +} - +
    a balloon
    +
    a balloon
    +
    a balloon
    +
    - +
    - - - + + diff --git a/howto/opacity.html b/howto/opacity.html index 8482b099..c56e5a3b 100644 --- a/howto/opacity.html +++ b/howto/opacity.html @@ -1,77 +1,79 @@ - + - + - CSS Solutions: How to make a background color semi-transparent - + + CSS Solutions: How to make a background color semi-transparent + + - + - +
    -
    -
    This box uses opacity
    -
    This box has a background color with an alpha channel
    +
    +
    This box uses opacity
    +
    + This box has a background color with an alpha channel
    +
    - + background-color: rgba(0,0,0,.5); + color: #fff; +} - +
    This box uses opacity
    +
    This box has a background color with an alpha channel
    +
    - +
    - - - + + diff --git a/howto/playable.js b/howto/playable.js index 41e83473..d9353ed2 100644 --- a/howto/playable.js +++ b/howto/playable.js @@ -1,22 +1,22 @@ -var section = document.querySelector('section'); -var editable = document.querySelector('.editable'); -var textareaHTML = document.querySelector('.playable-html'); -var textareaCSS = document.querySelector('.playable-css'); -var reset = document.getElementById('reset'); +var section = document.querySelector("section"); +var editable = document.querySelector(".editable"); +var textareaHTML = document.querySelector(".playable-html"); +var textareaCSS = document.querySelector(".playable-css"); +var reset = document.getElementById("reset"); var htmlCode = textareaHTML.value; var cssCode = textareaCSS.value; function fillCode() { - editable.innerHTML = textareaCSS.value; - section.innerHTML = textareaHTML.value; + editable.innerHTML = textareaCSS.value; + section.innerHTML = textareaHTML.value; } -reset.addEventListener('click', function () { - textareaHTML.value = htmlCode; - textareaCSS.value = cssCode; - fillCode(); +reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); }); -textareaHTML.addEventListener('input', fillCode); -textareaCSS.addEventListener('input', fillCode); -window.addEventListener('load', fillCode); +textareaHTML.addEventListener("input", fillCode); +textareaCSS.addEventListener("input", fillCode); +window.addEventListener("load", fillCode); diff --git a/howto/styles.css b/howto/styles.css index 030678b3..11945fee 100644 --- a/howto/styles.css +++ b/howto/styles.css @@ -1,61 +1,65 @@ -/* Some default styling for cookbook examples */ -/* -rgb(53,43,34) -rgb(75,70,74) -rgb(95,97,110) -rgb(137,151,188) -rgb(160,178,226) -*/ -body { - background-color: #fff; - color: #333; - font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif; - padding: 0; - margin: 0; -} - -/* styles for the editor */ - -.playable { - font-family: monospace; - display: block; - margin-bottom: 10px; - background-color: #F4F7F8; - border: none; - border-left: 6px solid #558ABB; - color: #4D4E53; - width: 90%; - max-width: 700px; - padding: 10px 10px 0px; - font-size: 90%; - } - - .playable-css { - height: 80px; - } - - .playable-html { - height: 160px; - } - - .playable-buttons { - text-align: right; - width: 90%; - max-width: 700px; - padding: 5px 10px 5px 26px; - font-size: 100%; - } - - .preview { - width: 90%; - max-width: 700px; - border: 1px solid #4D4E53; - border-radius: 2px; - padding: 10px 14px 10px 10px; - margin-bottom: 10px; - } - - .preview input { - display: block; - margin: 5px; - } +/* Some default styling for cookbook examples */ +/* +rgb(53,43,34) +rgb(75,70,74) +rgb(95,97,110) +rgb(137,151,188) +rgb(160,178,226) +*/ +body { + background-color: #fff; + color: #333; + font: + 1.2em / 1.5 Helvetica Neue, + Helvetica, + Arial, + sans-serif; + padding: 0; + margin: 0; +} + +/* styles for the editor */ + +.playable { + font-family: monospace; + display: block; + margin-bottom: 10px; + background-color: #f4f7f8; + border: none; + border-left: 6px solid #558abb; + color: #4d4e53; + width: 90%; + max-width: 700px; + padding: 10px 10px 0px; + font-size: 90%; +} + +.playable-css { + height: 80px; +} + +.playable-html { + height: 160px; +} + +.playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; +} + +.preview { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; +} + +.preview input { + display: block; + margin: 5px; +} diff --git a/howto/text-shadow.html b/howto/text-shadow.html index 0925430a..f41b61a6 100644 --- a/howto/text-shadow.html +++ b/howto/text-shadow.html @@ -1,57 +1,55 @@ - + - + CSS Solutions: How to add a shadow to text - + - + - +
    -
    -

    Adding a shadow to text

    -
    +
    +

    Adding a shadow to text

    +
    - + color: royalblue; + text-shadow: 2px 4px 4px rgba(46,91,173,0.6); +} - +

    Adding a shadow to text

    +
    - +
    - - - + + diff --git a/howto/transition-button.html b/howto/transition-button.html index 9fd1341c..929d3978 100644 --- a/howto/transition-button.html +++ b/howto/transition-button.html @@ -1,60 +1,60 @@ - + - + CSS Solutions: How to transition a button - + - + - +
    -
    - -
    +
    + +
    - +} - +
    - +
    - - - + + diff --git a/images/image-set-type.html b/images/image-set-type.html index ad8d35e6..452a6706 100644 --- a/images/image-set-type.html +++ b/images/image-set-type.html @@ -1,37 +1,39 @@ - + - + image-set() type() - + - + - +
    -
    +
    - +} - +
    - +
    - - - + + diff --git a/images/image-set.html b/images/image-set.html index f7246dde..3488e144 100644 --- a/images/image-set.html +++ b/images/image-set.html @@ -1,37 +1,39 @@ - + - + image-set() - + - + - +
    -
    +
    - +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/images/playable.js b/images/playable.js index ddebe2d8..d9353ed2 100644 --- a/images/playable.js +++ b/images/playable.js @@ -1,22 +1,22 @@ -var section = document.querySelector('section'); -var editable = document.querySelector('.editable'); -var textareaHTML = document.querySelector('.playable-html'); -var textareaCSS = document.querySelector('.playable-css'); -var reset = document.getElementById('reset'); +var section = document.querySelector("section"); +var editable = document.querySelector(".editable"); +var textareaHTML = document.querySelector(".playable-html"); +var textareaCSS = document.querySelector(".playable-css"); +var reset = document.getElementById("reset"); var htmlCode = textareaHTML.value; var cssCode = textareaCSS.value; function fillCode() { - editable.innerHTML = textareaCSS.value; - section.innerHTML = textareaHTML.value; + editable.innerHTML = textareaCSS.value; + section.innerHTML = textareaHTML.value; } -reset.addEventListener('click', function () { - textareaHTML.value = htmlCode; - textareaCSS.value = cssCode; - fillCode(); +reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); }); -textareaHTML.addEventListener('input', fillCode); -textareaCSS.addEventListener('input', fillCode); -window.addEventListener('load', fillCode); \ No newline at end of file +textareaHTML.addEventListener("input", fillCode); +textareaCSS.addEventListener("input", fillCode); +window.addEventListener("load", fillCode); diff --git a/images/styles.css b/images/styles.css index b733e436..11945fee 100644 --- a/images/styles.css +++ b/images/styles.css @@ -1,61 +1,65 @@ /* Some default styling for cookbook examples */ -/* +/* rgb(53,43,34) rgb(75,70,74) rgb(95,97,110) rgb(137,151,188) rgb(160,178,226) */ -body { - background-color: #fff; - color: #333; - font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif; - padding: 0; - margin: 0; +body { + background-color: #fff; + color: #333; + font: + 1.2em / 1.5 Helvetica Neue, + Helvetica, + Arial, + sans-serif; + padding: 0; + margin: 0; } /* styles for the editor */ .playable { - font-family: monospace; - display: block; - margin-bottom: 10px; - background-color: #F4F7F8; - border: none; - border-left: 6px solid #558ABB; - color: #4D4E53; - width: 90%; - max-width: 700px; - padding: 10px 10px 0px; - font-size: 90%; - } + font-family: monospace; + display: block; + margin-bottom: 10px; + background-color: #f4f7f8; + border: none; + border-left: 6px solid #558abb; + color: #4d4e53; + width: 90%; + max-width: 700px; + padding: 10px 10px 0px; + font-size: 90%; +} - .playable-css { - height: 80px; - } +.playable-css { + height: 80px; +} - .playable-html { - height: 160px; - } +.playable-html { + height: 160px; +} - .playable-buttons { - text-align: right; - width: 90%; - max-width: 700px; - padding: 5px 10px 5px 26px; - font-size: 100%; - } +.playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; +} - .preview { - width: 90%; - max-width: 700px; - border: 1px solid #4D4E53; - border-radius: 2px; - padding: 10px 14px 10px 10px; - margin-bottom: 10px; - } +.preview { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; +} - .preview input { - display: block; - margin: 5px; - } +.preview input { + display: block; + margin: 5px; +} diff --git a/inline-formatting/align.html b/inline-formatting/align.html index 52d717da..34e81140 100644 --- a/inline-formatting/align.html +++ b/inline-formatting/align.html @@ -1,4 +1,4 @@ - + @@ -7,7 +7,10 @@ -
    -

    :is()-styled links

    -
    -

    Here is my main content. This contains a link. -

    - - - - -
    - -
    -

    :where()-styled links

    -
    -

    Here is my main content. This contains a link. -

    - - - - -
    +
    +

    :is()-styled links

    +
    +

    + Here is my main content. This + contains a link. +

    +
    - + + + +
    +
    +

    :where()-styled links

    +
    +

    + Here is my main content. This + contains a link. +

    +
    + + + + +
    + diff --git a/layout/normal-flow.html b/layout/normal-flow.html index 0d5d0003..0bb89b67 100644 --- a/layout/normal-flow.html +++ b/layout/normal-flow.html @@ -1,125 +1,134 @@ - + - - - - CSS Normal Flow + + + + CSS Normal Flow - - + - - - -
    -
    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in - the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their - names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful - minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths - of their fires without drawing any special inspiration from the fact.”

    -
    + span { + background-color: lightblue; + } + + -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); - \ No newline at end of file + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + + diff --git a/learn/backgrounds-borders/background-blend-mode.html b/learn/backgrounds-borders/background-blend-mode.html index d49351f2..71f47bb1 100644 --- a/learn/backgrounds-borders/background-blend-mode.html +++ b/learn/backgrounds-borders/background-blend-mode.html @@ -1,4 +1,4 @@ - + @@ -15,24 +15,25 @@
    -
    +
    - +} - +
    diff --git a/learn/backgrounds-borders/background-image.html b/learn/backgrounds-borders/background-image.html index 6f14b263..f3a42c41 100644 --- a/learn/backgrounds-borders/background-image.html +++ b/learn/backgrounds-borders/background-image.html @@ -1,4 +1,4 @@ - + @@ -16,7 +16,7 @@ .box { width: 200px; height: 100px; - padding: .5em; + padding: 0.5em; border: 1px solid #ccc; margin: 20px; } @@ -30,7 +30,6 @@ .b { background-image: url(star.png); } - @@ -40,25 +39,23 @@
    - - +} - +
    diff --git a/learn/backgrounds-borders/background.html b/learn/backgrounds-borders/background.html index 3e09f745..2ca28a3d 100644 --- a/learn/backgrounds-borders/background.html +++ b/learn/backgrounds-borders/background.html @@ -1,4 +1,4 @@ - + @@ -11,38 +11,42 @@ .box { width: 500px; height: 300px; - padding: .5em; + padding: 0.5em; }
    -
    - + background: + linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, +url(big-star.png) center no-repeat, + rebeccapurple; +} - +
    diff --git a/learn/backgrounds-borders/borders.html b/learn/backgrounds-borders/borders.html index 264a9fac..d62301a1 100644 --- a/learn/backgrounds-borders/borders.html +++ b/learn/backgrounds-borders/borders.html @@ -1,4 +1,4 @@ - + @@ -10,7 +10,7 @@ } .box { width: 500px; - padding: .5em; + padding: 0.5em; } @@ -35,10 +35,9 @@

    Borders

    Try changing the borders.

    - - +} - +
    diff --git a/learn/backgrounds-borders/color.html b/learn/backgrounds-borders/color.html index 6fafe7aa..ae24b177 100644 --- a/learn/backgrounds-borders/color.html +++ b/learn/backgrounds-borders/color.html @@ -1,4 +1,4 @@ - + @@ -10,7 +10,7 @@ } .box { width: 500px; - padding: .5em; + padding: 0.5em; } @@ -25,7 +25,7 @@ } span { - background-color: rgba(255,255,255,.5); + background-color: rgba(255, 255, 255, 0.5); } @@ -36,10 +36,9 @@

    Background Colors

    Try changing the background colors.

    - - +} - +
    diff --git a/learn/backgrounds-borders/corners.html b/learn/backgrounds-borders/corners.html index 94686e83..a448dd8f 100644 --- a/learn/backgrounds-borders/corners.html +++ b/learn/backgrounds-borders/corners.html @@ -1,4 +1,4 @@ - + @@ -10,7 +10,7 @@ } .box { width: 500px; - padding: .5em; + padding: 0.5em; } @@ -20,8 +20,6 @@ border-radius: 1em; border-top-right-radius: 10% 30%; } - - @@ -31,23 +29,21 @@

    Borders

    Try changing the borders.

    - - +} - +
    diff --git a/learn/backgrounds-borders/gradients.html b/learn/backgrounds-borders/gradients.html index b5be9fb8..2d1957d0 100644 --- a/learn/backgrounds-borders/gradients.html +++ b/learn/backgrounds-borders/gradients.html @@ -1,4 +1,4 @@ - + @@ -16,7 +16,7 @@ .box { width: 200px; height: 100px; - padding: .5em; + padding: 0.5em; border: 1px solid #ccc; margin: 20px; } @@ -24,14 +24,21 @@ @@ -41,10 +48,9 @@
    - - +} - +
    diff --git a/learn/backgrounds-borders/mix-blend-mode.html b/learn/backgrounds-borders/mix-blend-mode.html index 098d7da0..1883c8a2 100644 --- a/learn/backgrounds-borders/mix-blend-mode.html +++ b/learn/backgrounds-borders/mix-blend-mode.html @@ -1,4 +1,4 @@ - + @@ -35,18 +35,19 @@ @@ -57,15 +58,15 @@
    - +
    Multiply mix
    -
    + - +} - +
    diff --git a/learn/backgrounds-borders/multiple-background-image.html b/learn/backgrounds-borders/multiple-background-image.html index ebfda8de..ca44fc14 100644 --- a/learn/backgrounds-borders/multiple-background-image.html +++ b/learn/backgrounds-borders/multiple-background-image.html @@ -1,4 +1,4 @@ - + @@ -16,7 +16,7 @@ .box { width: 300px; height: 100px; - padding: .5em; + padding: 0.5em; border: 1px solid #ccc; margin: 20px; } @@ -26,7 +26,6 @@ .box { background-image: url(star.png), url(big-star.png); } - @@ -35,20 +34,18 @@
    - - +} - +
    diff --git a/learn/backgrounds-borders/position.html b/learn/backgrounds-borders/position.html index df5cb6d4..ff728cc8 100644 --- a/learn/backgrounds-borders/position.html +++ b/learn/backgrounds-borders/position.html @@ -1,4 +1,4 @@ - + @@ -12,7 +12,7 @@ .box { width: 300px; height: 100px; - padding: .5em; + padding: 0.5em; border: 1px solid #ccc; margin: 20px; } @@ -24,7 +24,6 @@ background-repeat: no-repeat; background-position: 120px 1em; } - @@ -33,17 +32,16 @@
    - +} - +
    diff --git a/learn/backgrounds-borders/repeat.html b/learn/backgrounds-borders/repeat.html index a861c8d4..53064119 100644 --- a/learn/backgrounds-borders/repeat.html +++ b/learn/backgrounds-borders/repeat.html @@ -1,4 +1,4 @@ - + @@ -12,7 +12,7 @@ .box { width: 300px; height: 100px; - padding: .5em; + padding: 0.5em; border: 1px solid #ccc; margin: 20px; } @@ -23,7 +23,6 @@ background-image: url(star.png); background-repeat: no-repeat; } - @@ -32,16 +31,15 @@
    - +} - +
    diff --git a/learn/backgrounds-borders/size.html b/learn/backgrounds-borders/size.html index 7b2094f6..942c0603 100644 --- a/learn/backgrounds-borders/size.html +++ b/learn/backgrounds-borders/size.html @@ -1,4 +1,4 @@ - + @@ -12,7 +12,7 @@ .box { width: 500px; height: 300px; - padding: .5em; + padding: 0.5em; border: 1px solid #ccc; margin: 20px; } @@ -24,7 +24,6 @@ background-repeat: no-repeat; background-size: 100px 10em; } - @@ -33,17 +32,16 @@
    - +} - +
    diff --git a/learn/backgrounds-borders/task.html b/learn/backgrounds-borders/task.html index 04643081..5ca50b82 100644 --- a/learn/backgrounds-borders/task.html +++ b/learn/backgrounds-borders/task.html @@ -1,4 +1,4 @@ - + @@ -10,17 +10,15 @@ } .box { width: 500px; - padding: .5em; + padding: 0.5em; } @@ -30,24 +28,23 @@

    Backgrounds & Borders

    - - - + + +
    diff --git a/learn/box-model/block.html b/learn/box-model/block.html index 1d5642d1..890fda37 100644 --- a/learn/box-model/block.html +++ b/learn/box-model/block.html @@ -1,4 +1,4 @@ - + @@ -45,8 +45,8 @@

    - +} - +

    I am another paragraph. Some of the words have been wrapped in a span element.

    diff --git a/learn/box-model/border.html b/learn/box-model/border.html index 0f4e6f8b..a33b6ba5 100644 --- a/learn/box-model/border.html +++ b/learn/box-model/border.html @@ -1,4 +1,4 @@ - + @@ -20,7 +20,7 @@ .container { border-top: 5px dotted green; border-right: 1px solid black; - border-bottom: 20px double rgb(23,45,145); + border-bottom: 20px double rgb(23, 45, 145); } .box { @@ -34,12 +34,12 @@
    -
    -
    Change my borders.
    -
    +
    +
    Change my borders.
    +
    - +} - +
    diff --git a/learn/box-model/box-models.html b/learn/box-model/box-models.html index f3509042..4ccf23ef 100644 --- a/learn/box-model/box-models.html +++ b/learn/box-model/box-models.html @@ -1,4 +1,4 @@ - + @@ -24,11 +24,11 @@
    -
    I use the standard box model.
    -
    I use the alternate box model.
    +
    I use the standard box model.
    +
    I use the alternate box model.
    - +} - +
    I use the alternate box model.
    diff --git a/learn/box-model/inline-block-nav.html b/learn/box-model/inline-block-nav.html index 6de6a2a2..aa4b3c56 100644 --- a/learn/box-model/inline-block-nav.html +++ b/learn/box-model/inline-block-nav.html @@ -1,26 +1,26 @@ - + Box Model: Inline block for navigation items @@ -41,10 +40,10 @@
  • Link two
  • Link three
    • - + - +} - +
    diff --git a/learn/box-model/inline-block.html b/learn/box-model/inline-block.html index f0bb6f50..37b5748d 100644 --- a/learn/box-model/inline-block.html +++ b/learn/box-model/inline-block.html @@ -1,18 +1,17 @@ - + Box Model: Inline boxes

    - I am a paragraph and this is a span inside that paragraph. A span is an inline element and so does not respect width and height. -

    + I am a paragraph and this is a span inside that paragraph. + A span is an inline element and so does not respect width and height. +

    - +} - + I am a paragraph and this is a span inside that paragraph. A span is an inline element and so does not respect width and height. +

    diff --git a/learn/box-model/inline-box-model.html b/learn/box-model/inline-box-model.html index 3430efcd..d300c398 100644 --- a/learn/box-model/inline-box-model.html +++ b/learn/box-model/inline-box-model.html @@ -1,18 +1,17 @@ - + Box Model: Inline boxes

    - I am a paragraph and this is a span inside that paragraph. A span is an inline element and so does not respect width and height. -

    + I am a paragraph and this is a span inside that paragraph. + A span is an inline element and so does not respect width and height. +

    - +} - + I am a paragraph and this is a span inside that paragraph. A span is an inline element and so does not respect width and height. +

    diff --git a/learn/box-model/inline.html b/learn/box-model/inline.html index c11d731b..249a428e 100644 --- a/learn/box-model/inline.html +++ b/learn/box-model/inline.html @@ -1,4 +1,4 @@ - + @@ -7,7 +7,7 @@

    - I am a paragraph. Some of the - words have been wrapped in a - span element. -

    + I am a paragraph. Some of the + words have been wrapped in a span element. +

    • Item One
    • Item Two
      • @@ -45,8 +44,8 @@

      I am another paragraph. Also a short one.

    - +} - +

    I am another paragraph. Also a short one.

    diff --git a/learn/box-model/margin-collapse.html b/learn/box-model/margin-collapse.html index e496f1eb..04383b50 100644 --- a/learn/box-model/margin-collapse.html +++ b/learn/box-model/margin-collapse.html @@ -1,4 +1,4 @@ - + @@ -30,28 +30,27 @@
    -
    -

    I am paragraph one.

    -

    I am paragraph two.

    -
    +
    +

    I am paragraph one.

    +

    I am paragraph two.

    +
    - +} - +
    diff --git a/learn/box-model/margin.html b/learn/box-model/margin.html index 9b34247b..e34a3936 100644 --- a/learn/box-model/margin.html +++ b/learn/box-model/margin.html @@ -1,4 +1,4 @@ - + @@ -30,25 +30,24 @@
    -
    -
    Change my margin.
    -
    +
    +
    Change my margin.
    +
    - +} - +
    diff --git a/learn/box-model/padding.html b/learn/box-model/padding.html index 45341a4b..7b6de4ec 100644 --- a/learn/box-model/padding.html +++ b/learn/box-model/padding.html @@ -1,4 +1,4 @@ - + @@ -32,12 +32,12 @@
    -
    -
    Change my padding.
    -
    +
    +
    Change my padding.
    +
    - +} - +
    diff --git a/learn/cascade/all.html b/learn/cascade/all.html index 49c60149..b0ba70d6 100644 --- a/learn/cascade/all.html +++ b/learn/cascade/all.html @@ -1,62 +1,59 @@ - + - + all - - + + - + - +
    -
    -

    This blockquote is styled

    -
    +
    +

    This blockquote is styled

    +
    -
    -

    This blockquote is not styled

    -
    +
    +

    This blockquote is not styled

    +
    - + all: unset; +} - +
    +

    This blockquote is not styled

    +
    - +
    - - - + + diff --git a/learn/cascade/cascade-layers.html b/learn/cascade/cascade-layers.html index c3729224..414dae68 100644 --- a/learn/cascade/cascade-layers.html +++ b/learn/cascade/cascade-layers.html @@ -1,56 +1,55 @@ - + - + cascade layers demo - - + + - + - -
    -

    - A paragraph with a border and background -

    -
    + +
    +

    A paragraph with a border and background

    +
    - +} - +

    - +
    - - - + + diff --git a/learn/cascade/cascade-simple.html b/learn/cascade/cascade-simple.html index 24c30742..81be7678 100644 --- a/learn/cascade/cascade-simple.html +++ b/learn/cascade/cascade-simple.html @@ -1,46 +1,43 @@ - + - + The Cascade: simple example - - + + - + - +
    -

    This is my heading.

    +

    This is my heading.

    - +h1 { + color: blue; +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/cascade/important.html b/learn/cascade/important.html index bb670011..44138d7f 100644 --- a/learn/cascade/important.html +++ b/learn/cascade/important.html @@ -1,15 +1,39 @@ - + - + !important - - + + + + + +
    +

    This is a paragraph.

    +

    One selector to rule them all!

    +
    + + - -
    -

    This is a paragraph.

    -

    One selector to rule them all!

    -
    - - - - +

    One selector to rule them all!

    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/cascade/inheritance-simple.html b/learn/cascade/inheritance-simple.html index f0f9f9a4..b4f2934f 100644 --- a/learn/cascade/inheritance-simple.html +++ b/learn/cascade/inheritance-simple.html @@ -1,50 +1,53 @@ - + - + Inheritance: simple example - - + + - + - +
    -

    As the body has been set to have a color of blue this is inherited through the descendants.

    -

    We can change the color by targeting the element with a selector, such as this span.

    +

    + As the body has been set to have a color of blue this is inherited + through the descendants. +

    +

    + We can change the color by targeting the element with a selector, such + as this span. +

    - + color: black; +} - +

    We can change the color by targeting the element with a selector, such as this span.

    - +
    - - - + + diff --git a/learn/cascade/inheritance.html b/learn/cascade/inheritance.html index 8f9d7596..5164235b 100644 --- a/learn/cascade/inheritance.html +++ b/learn/cascade/inheritance.html @@ -1,92 +1,92 @@ - + - + Inheritance - - + + - + - +
    -
      -
    • Item One
      • -
    • Item Two -
        -
      • 2.1
        • -
      • 2.2
        • -
      -
      • -
    • Item Three -
        -
      • 3.1 -
          -
        • 3.1.1
          • -
        • 3.1.2
          • -
        -
        • -
      • 3.2
        • -
      +
        +
      • Item One
        • +
      • + Item Two +
          +
        • 2.1
          • +
        • 2.2
          • +
        +
        • +
      • + Item Three +
          +
        • + 3.1 +
            +
          • 3.1.1
            • +
          • 3.1.2
            • +
          • -
        +
      • 3.2
        • +
      +
      • +
    - + color: black; + font-weight: bold; +} - + +
  • 3.2
    • + + +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/cascade/keywords.html b/learn/cascade/keywords.html index 71b9746d..2c625524 100644 --- a/learn/cascade/keywords.html +++ b/learn/cascade/keywords.html @@ -1,74 +1,71 @@ - + - + Keyword values - - + + - + - +
    -
      -
    • Default link color
      • -
    • Inherit the link color
      • -
    • Reset the link color
      • -
    • Unset the link color
      • -
    +
      +
    • Default link color
      • +
    • Inherit the link color
      • +
    • Reset the link color
      • +
    • Unset the link color
      • +
    - + color: unset; +} - +
  • Default link color
    • +
  • Inherit the link color
    • +
  • Reset the link color
    • +
  • Unset the link color
    • +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/cascade/mixing-rules.html b/learn/cascade/mixing-rules.html index 4d3de8f7..7deed4ae 100644 --- a/learn/cascade/mixing-rules.html +++ b/learn/cascade/mixing-rules.html @@ -1,64 +1,61 @@ - + - + mixing rules - - + + - + - +
    -

    Heading with no class

    -

    Heading with class of small

    -

    Heading with class of bright

    +

    Heading with no class

    +

    Heading with class of small

    +

    Heading with class of bright

    - + color: rebeccapurple; +} - +

    Heading with class of bright

    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/cascade/specificity-boxes.html b/learn/cascade/specificity-boxes.html index 705f2132..1de74fa2 100644 --- a/learn/cascade/specificity-boxes.html +++ b/learn/cascade/specificity-boxes.html @@ -1,15 +1,82 @@ - + - + specificity demo - - + + + + + +
    +
    +
    + +
    +
    +
    + + -/* 4. specificity: 1-1-3 */ -#outer div ul .nav a { - color: white; -} - -/* 5. specificity: 0-2-4 */ -div div li:nth-child(2) a:hover { - border: 10px solid black; -} - -/* 6. specificity: 0-2-3 */ -div li:nth-child(2) a:hover { - border: 10px dashed black; -} - -/* 7. specificity: 0-3-3 */ -div div .nav:nth-child(2) a:hover { - border: 10px double black; -} - -a { - display: inline-block; - line-height: 40px; - font-size: 20px; - text-decoration: none; - text-align: center; - width: 200px; - margin-bottom: 10px; -} - -ul { - padding: 0; -} - -li { - list-style-type: none; -} - - - +
    + +
    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/cascade/specificity-simple.html b/learn/cascade/specificity-simple.html index edbb02f6..14b21de4 100644 --- a/learn/cascade/specificity-simple.html +++ b/learn/cascade/specificity-simple.html @@ -1,48 +1,45 @@ - + - + Specificity: simple example - - + + - + - +
    -

    This is my heading.

    +

    This is my heading.

    - - +h1 { + color: blue; +} + +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/cascade/task.html b/learn/cascade/task.html index 91868ba0..9cb5e943 100644 --- a/learn/cascade/task.html +++ b/learn/cascade/task.html @@ -1,29 +1,27 @@ - + - + The Cascade Task - - + + - + - +
    @@ -35,7 +33,7 @@
    - +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/getting-started--download.html b/learn/getting-started--download.html index ca443d80..239ec281 100644 --- a/learn/getting-started--download.html +++ b/learn/getting-started--download.html @@ -1,25 +1,28 @@ - + - + Getting started with CSS - - - + +

    I am a level one heading

    -

    This is a paragraph of text. In the text is a span element and also a link.

    +

    + This is a paragraph of text. In the text is a + span element and also a + link. +

    -

    This is the second paragraph. It contains an emphasized element.

    +

    + This is the second paragraph. It contains an emphasized element. +

      -
    • Item one
      • -
    • Item two
      • -
    • Item three
      • +
    • Item one
      • +
    • Item two
      • +
    • Item three
    - - - - \ No newline at end of file + + diff --git a/learn/getting-started/biog-download.html b/learn/getting-started/biog-download.html index 42b46a93..6c13f6be 100644 --- a/learn/getting-started/biog-download.html +++ b/learn/getting-started/biog-download.html @@ -1,6 +1,5 @@ - + - @@ -17,7 +16,7 @@ h1 { color: #375e97; font-size: 2em; - font-family: Georgia, 'Times New Roman', Times, serif; + font-family: Georgia, "Times New Roman", Times, serif; border-bottom: 1px solid #375e97; } @@ -42,25 +41,32 @@ -

    Jane Doe

    Web Developer
    -

    Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

    +

    + Far far away, behind the word mountains, far from the countries Vokalia + and Consonantia, there live the blind texts. Separated they live in + Bookmarksgrove right at the coast of the Semantics, a large language + ocean. +

    -

    A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. +

    + A small river named Duden flows by their place and supplies it with the + necessary regelialia. It is a paradisematic country, in which roasted + parts of sentences fly into your mouth.

    Contact information

    - - - \ No newline at end of file + diff --git a/learn/getting-started/biog.html b/learn/getting-started/biog.html index 12bfc927..b66e88ee 100644 --- a/learn/getting-started/biog.html +++ b/learn/getting-started/biog.html @@ -1,92 +1,100 @@ - + - + Formatting a biography - - + + - + - +
    -

    Jane Doe

    -
    Web Developer
    -

    Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

    - -

    A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

    - -

    Contact information

    - +

    Jane Doe

    +
    Web Developer
    +

    + Far far away, behind the word mountains, far from the countries Vokalia + and Consonantia, there live the blind texts. Separated they live in + Bookmarksgrove right at the coast of the Semantics, a large language + ocean. +

    + +

    + A small river named Duden flows by their place and supplies it with the + necessary regelialia. It is a paradisematic country, in which roasted + parts of sentences fly into your mouth. +

    + +

    Contact information

    +
    - + text-decoration: none; +} - +
  • Email: jane@example.com
    • +
  • Web: http://example.com
    • +
  • Tel: 123 45678
    • +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/getting-started/experiment-sandbox.html b/learn/getting-started/experiment-sandbox.html index 16b851c6..09a83286 100644 --- a/learn/getting-started/experiment-sandbox.html +++ b/learn/getting-started/experiment-sandbox.html @@ -1,42 +1,40 @@ - + - + Unstyled example - - + - + - +
    -

    Create your test HTML here

    +

    Create your test HTML here

    - +} - +
    - +
    - - - + + diff --git a/learn/getting-started/started1.html b/learn/getting-started/started1.html index 37b43c71..4fecd6fa 100644 --- a/learn/getting-started/started1.html +++ b/learn/getting-started/started1.html @@ -1,68 +1,70 @@ - + - + Unstyled example - - + - + - +
    -

    I am a level one heading

    +

    I am a level one heading

    -

    This is a paragraph of text. In the text is a span element -and also a link.

    +

    + This is a paragraph of text. In the text is a + span element and also a + link. +

    -

    This is the second paragraph. It contains an emphasized element.

    +

    + This is the second paragraph. It contains an + emphasized element. +

    -
      +
      • Item one
      • Item two
      • Item three
        • -
      +
    - - + + +
  • Item one
    • +
  • Item two
    • +
  • Item three
    • +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/getting-started/started2.html b/learn/getting-started/started2.html index 3a13cb7f..10134dd1 100644 --- a/learn/getting-started/started2.html +++ b/learn/getting-started/started2.html @@ -1,68 +1,72 @@ - + - + Styling based on location - - + - + - +
    -

    I am a level one heading

    +

    I am a level one heading

    -

    This is a paragraph of text. In the text is a span element -and also a link.

    +

    + This is a paragraph of text. In the text is a + span element and also a + link. +

    -

    This is the second paragraph. It contains an emphasized element.

    +

    + This is the second paragraph. It contains an + emphasized element. +

    -
      +
      • Item one
      • Item two
      • Item three
        • -
      +
    - + font-size: 200%; +} - +
  • Item one
    • +
  • Item two
    • +
  • Item three
    • +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/getting-started/started3.html b/learn/getting-started/started3.html index a44130d4..b4602ed7 100644 --- a/learn/getting-started/started3.html +++ b/learn/getting-started/started3.html @@ -1,76 +1,80 @@ - + - + Styling based on state - - + - + - +
    -

    I am a level one heading

    +

    I am a level one heading

    -

    This is a paragraph of text. In the text is a span element -and also a link.

    +

    + This is a paragraph of text. In the text is a + span element and also a + link. +

    -

    This is the second paragraph. It contains an emphasized element.

    +

    + This is the second paragraph. It contains an + emphasized element. +

    -
      +
      • Item one
      • Item two
      • Item three
        • -
      +
    - + text-decoration: none; +} - +
  • Item one
    • +
  • Item two
    • +
  • Item three
    • +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/images/filter-text.html b/learn/images/filter-text.html index 6eb5fb52..98b0c9bb 100644 --- a/learn/images/filter-text.html +++ b/learn/images/filter-text.html @@ -1,4 +1,4 @@ - + @@ -13,7 +13,7 @@ padding: 20px; width: 100px; display: inline-block; - } + } @@ -36,23 +36,24 @@

    Box shadow

    - +} - +

    Box shadow

    diff --git a/learn/images/filter.html b/learn/images/filter.html index 6c8690f8..c4eddb0a 100644 --- a/learn/images/filter.html +++ b/learn/images/filter.html @@ -1,4 +1,4 @@ - + @@ -22,7 +22,6 @@ .box { border: 5px solid darkblue; } - @@ -45,16 +45,18 @@
    -
    -
    -
    -
    +
    + +
    +
    + +
    -
    +
    - +} - +
    diff --git a/learn/images/layout.html b/learn/images/layout.html index ae45ef9c..7d21d56e 100644 --- a/learn/images/layout.html +++ b/learn/images/layout.html @@ -1,4 +1,4 @@ - + @@ -8,7 +8,6 @@ * { box-sizing: border-box; } - @@ -29,14 +28,14 @@
    - star + star
    - +} - +
    diff --git a/learn/images/object-fit.html b/learn/images/object-fit.html index 38c2bd1f..032d7163 100644 --- a/learn/images/object-fit.html +++ b/learn/images/object-fit.html @@ -1,4 +1,4 @@ - + @@ -21,7 +21,6 @@ .box { border: 5px solid darkblue; } - @@ -38,27 +36,27 @@
    -
    star
    -
    balloons
    +
    star
    +
    balloons
    - +} - +
    diff --git a/learn/inspecting/inspecting.html b/learn/inspecting/inspecting.html index 745e4bf1..832ce265 100644 --- a/learn/inspecting/inspecting.html +++ b/learn/inspecting/inspecting.html @@ -1,76 +1,80 @@ - + - + Inspecting CSS + - - - +
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi - tomatillo - melon azuki bean garlic.

    -
    - -
    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean - collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    -
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    +
    -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach - avocado - daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish - spinach - carrot soko. +

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +
    +

    + Turnip greens yarrow ricebean rutabaga endive + cauliflower sea lettuce kohlrabi amaranth water spinach avocado + daikon napa cabbage asparagus winter purslane kale. Celery potato + scallion desert raisin horseradish spinach carrot soko. +

    - + diff --git a/learn/layers/basic-cascade.html b/learn/layers/basic-cascade.html index 563575b7..3ae9019f 100644 --- a/learn/layers/basic-cascade.html +++ b/learn/layers/basic-cascade.html @@ -1,44 +1,41 @@ - + - + Cascade Layers: basic cascade origin - - + + - + - +

    User agent styles

    Author styles

    - + - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/layers/layer-order.html b/learn/layers/layer-order.html index d4df7e95..6509d23e 100644 --- a/learn/layers/layer-order.html +++ b/learn/layers/layer-order.html @@ -1,65 +1,61 @@ - + - + Cascade Layers: layer order - - + + - + - +

    Is this heading underlined?

    - +/* this does nothing */ +@layer site, page; - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/layers/layer-precedence.html b/learn/layers/layer-precedence.html index 7de89338..96d3ae0d 100644 --- a/learn/layers/layer-precedence.html +++ b/learn/layers/layer-precedence.html @@ -1,36 +1,77 @@ - + - + Cascade Layers: layer precedence - - + + + + + +
    +
    +

    + Inline styles +

    +
    +
    + + - -
    + - - +

    Inline styles

    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/layers/media-order.html b/learn/layers/media-order.html index bb60b181..4f61deb6 100644 --- a/learn/layers/media-order.html +++ b/learn/layers/media-order.html @@ -1,69 +1,64 @@ - + - + Cascade Layers: layer order - - + + - + - +

    Site layer is first on wide screens

    - +@layer page { + h1 { + text-decoration: overline; + color: red; + } +} + +@layer site { + h1 { + text-decoration: underline; + color: green; + } +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/media-queries/and.html b/learn/media-queries/and.html index 6353fe5f..940db9a4 100644 --- a/learn/media-queries/and.html +++ b/learn/media-queries/and.html @@ -1,6 +1,6 @@ - + - + Media Queries: and @@ -15,15 +15,21 @@ } } - - - - - -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    - - - + + +

    + One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    + diff --git a/learn/media-queries/grid.html b/learn/media-queries/grid.html index 63be26af..954d6ec1 100644 --- a/learn/media-queries/grid.html +++ b/learn/media-queries/grid.html @@ -1,9 +1,11 @@ - + - Media Queries: a simple mobile first design, adding a grid component + + Media Queries: a simple mobile first design, adding a grid component + - + - - - -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    - - - - - \ No newline at end of file + +

    + One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    + + diff --git a/learn/media-queries/max-width.html b/learn/media-queries/max-width.html index f267e2d1..193a3e97 100644 --- a/learn/media-queries/max-width.html +++ b/learn/media-queries/max-width.html @@ -1,6 +1,6 @@ - + - + Media Queries: max-width @@ -15,15 +15,21 @@ } } - - - - - -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    - - - + + +

    + One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    + diff --git a/learn/media-queries/not.html b/learn/media-queries/not.html index cc34b88f..fbc78fe2 100644 --- a/learn/media-queries/not.html +++ b/learn/media-queries/not.html @@ -1,6 +1,6 @@ - + - + Media Queries: not @@ -12,18 +12,24 @@ @media not all and (orientation: landscape) { body { color: blue; - } + } } - + - - - -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    - - - - - \ No newline at end of file + +

    + One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    + + diff --git a/learn/media-queries/or.html b/learn/media-queries/or.html index 3c8f8c2b..610fda4c 100644 --- a/learn/media-queries/or.html +++ b/learn/media-queries/or.html @@ -1,6 +1,6 @@ - + - + Media Queries: or @@ -9,21 +9,28 @@ font-size: 1em; } - @media screen and (min-width: 600px), screen and (orientation: landscape) { + @media screen and (min-width: 600px), + screen and (orientation: landscape) { body { color: blue; } } - - - - - -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    - - - + + +

    + One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    + diff --git a/learn/media-queries/orientation.html b/learn/media-queries/orientation.html index 5fd0e476..093dd828 100644 --- a/learn/media-queries/orientation.html +++ b/learn/media-queries/orientation.html @@ -1,6 +1,6 @@ - + - + Media Queries: orientation @@ -9,21 +9,27 @@ font-size: 1em; } - @media(orientation: landscape) { + @media (orientation: landscape) { body { color: rebeccapurple; } } - + - - - -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    - - - - - \ No newline at end of file + +

    + One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    + + diff --git a/learn/media-queries/step1.html b/learn/media-queries/step1.html index dc8fbf55..36f5e01f 100644 --- a/learn/media-queries/step1.html +++ b/learn/media-queries/step1.html @@ -1,4 +1,4 @@ - + @@ -12,7 +12,10 @@ body { width: 90%; margin: 2em auto; - font: 1em/1.3 Arial, Helvetica, sans-serif; + font: + 1em/1.3 Arial, + Helvetica, + sans-serif; } a:link, @@ -55,7 +58,6 @@ article { margin-bottom: 1em; } - diff --git a/learn/media-queries/step2.html b/learn/media-queries/step2.html index 0c12f91f..e99bc752 100644 --- a/learn/media-queries/step2.html +++ b/learn/media-queries/step2.html @@ -1,4 +1,4 @@ - + @@ -12,7 +12,10 @@ body { width: 90%; margin: 2em auto; - font: 1em/1.3 Arial, Helvetica, sans-serif; + font: + 1em/1.3 Arial, + Helvetica, + sans-serif; } a:link, @@ -71,7 +74,6 @@ flex: 1; } } - diff --git a/learn/media-queries/step3.html b/learn/media-queries/step3.html index 426efcf1..12765abe 100644 --- a/learn/media-queries/step3.html +++ b/learn/media-queries/step3.html @@ -1,4 +1,4 @@ - + @@ -12,7 +12,10 @@ body { width: 90%; margin: 2em auto; - font: 1em/1.3 Arial, Helvetica, sans-serif; + font: + 1em/1.3 Arial, + Helvetica, + sans-serif; } a:link, @@ -88,7 +91,6 @@ margin-top: 2em; } } - diff --git a/learn/media-queries/width.html b/learn/media-queries/width.html index 1d223b0d..6a212df4 100644 --- a/learn/media-queries/width.html +++ b/learn/media-queries/width.html @@ -1,6 +1,6 @@ - + - + Media Queries: width @@ -15,15 +15,21 @@ } } - + - - - -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    - - - - - \ No newline at end of file + +

    + One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    + + diff --git a/learn/overflow/auto.html b/learn/overflow/auto.html index 12feff2e..0133ba70 100644 --- a/learn/overflow/auto.html +++ b/learn/overflow/auto.html @@ -1,12 +1,10 @@ - + Overflow: auto - + + + + + + + - - - + +
    -

    This layout is fixed width. See what happens if you make the browser window narrow.

    +

    + This layout is fixed width. See what happens if you make the browser + window narrow. +

    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    +

    + One November night in the year 1782, so the story runs, two brothers + sat over their winter fire in the little French town of Annonay, + watching the grey smoke-wreaths from the hearth curl up the wide + chimney. Their names were Stephen and Joseph Montgolfier, they were + papermakers by trade, and were noted as possessing thoughtful minds + and a deep interest in all scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    -
    - - - \ No newline at end of file + + diff --git a/learn/rwd/flex-based-rwd.html b/learn/rwd/flex-based-rwd.html index 232f5802..639c9da2 100644 --- a/learn/rwd/flex-based-rwd.html +++ b/learn/rwd/flex-based-rwd.html @@ -1,12 +1,15 @@ - + - + A simple flexbox-based responsive design - - - + +
    -

    This layout is responsive. See what happens if you make the browser window wider or narrow.

    +

    + This layout is responsive. See what happens if you make the browser + window wider or narrow. +

    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    +

    + One November night in the year 1782, so the story runs, two brothers + sat over their winter fire in the little French town of Annonay, + watching the grey smoke-wreaths from the hearth curl up the wide + chimney. Their names were Stephen and Joseph Montgolfier, they were + papermakers by trade, and were noted as possessing thoughtful minds + and a deep interest in all scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    -
    - - - \ No newline at end of file + + diff --git a/learn/rwd/float-based-rwd.html b/learn/rwd/float-based-rwd.html index ecdd20ca..0dc8bd70 100644 --- a/learn/rwd/float-based-rwd.html +++ b/learn/rwd/float-based-rwd.html @@ -1,12 +1,15 @@ - + - + A simple float-based responsive design - - - + +
    -

    This layout is responsive. See what happens if you make the browser window wider or narrow.

    +

    + This layout is responsive. See what happens if you make the browser + window wider or narrow. +

    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    +

    + One November night in the year 1782, so the story runs, two brothers + sat over their winter fire in the little French town of Annonay, + watching the grey smoke-wreaths from the hearth curl up the wide + chimney. Their names were Stephen and Joseph Montgolfier, they were + papermakers by trade, and were noted as possessing thoughtful minds + and a deep interest in all scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    -
    - - - \ No newline at end of file + + diff --git a/learn/rwd/grid-based-rwd.html b/learn/rwd/grid-based-rwd.html index 0e863365..2ba9d88c 100644 --- a/learn/rwd/grid-based-rwd.html +++ b/learn/rwd/grid-based-rwd.html @@ -1,12 +1,15 @@ - + - + A simple grid-based responsive design - - - + +
    -

    This layout is responsive. See what happens if you make the browser window wider or narrow.

    +

    + This layout is responsive. See what happens if you make the browser + window wider or narrow. +

    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    +

    + One November night in the year 1782, so the story runs, two brothers + sat over their winter fire in the little French town of Annonay, + watching the grey smoke-wreaths from the hearth curl up the wide + chimney. Their names were Stephen and Joseph Montgolfier, they were + papermakers by trade, and were noted as possessing thoughtful minds + and a deep interest in all scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    -
    - - - \ No newline at end of file + + diff --git a/learn/rwd/liquid-width.html b/learn/rwd/liquid-width.html index ba27765a..f47b1b13 100644 --- a/learn/rwd/liquid-width.html +++ b/learn/rwd/liquid-width.html @@ -1,12 +1,15 @@ - + - + A liquid layout - - - + +
    -

    This layout is liquid. See what happens if you make the browser window wider or narrow.

    +

    + This layout is liquid. See what happens if you make the browser window + wider or narrow. +

    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    +

    + One November night in the year 1782, so the story runs, two brothers + sat over their winter fire in the little French town of Annonay, + watching the grey smoke-wreaths from the hearth curl up the wide + chimney. Their names were Stephen and Joseph Montgolfier, they were + papermakers by trade, and were noted as possessing thoughtful minds + and a deep interest in all scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    -
    - - - \ No newline at end of file + + diff --git a/learn/rwd/type-rwd.html b/learn/rwd/type-rwd.html index 962f6a85..676f6552 100644 --- a/learn/rwd/type-rwd.html +++ b/learn/rwd/type-rwd.html @@ -1,6 +1,6 @@ - + - + Demonstration of responsive typography @@ -10,7 +10,10 @@ } body { - font: 1.2em Helvetica, Arial, sans-serif; + font: + 1.2em Helvetica, + Arial, + sans-serif; margin: 20px; padding: 0; background-color: #eee; @@ -42,21 +45,32 @@ } } - - - + +

    Watch my size!

    -

    This layout is responsive. See what happens if you make the browser window wider or narrow.

    +

    + This layout is responsive. See what happens if you make the browser + window wider or narrow. +

    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    +

    + One November night in the year 1782, so the story runs, two brothers + sat over their winter fire in the little French town of Annonay, + watching the grey smoke-wreaths from the hearth curl up the wide + chimney. Their names were Stephen and Joseph Montgolfier, they were + papermakers by trade, and were noted as possessing thoughtful minds + and a deep interest in all scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    -
    - - - \ No newline at end of file + + diff --git a/learn/rwd/type-vw.html b/learn/rwd/type-vw.html index efe54604..c18d6a1e 100644 --- a/learn/rwd/type-vw.html +++ b/learn/rwd/type-vw.html @@ -1,6 +1,6 @@ - + - + Demonstration of responsive typography with vw @@ -10,7 +10,10 @@ } body { - font: 1.2em Helvetica, Arial, sans-serif; + font: + 1.2em Helvetica, + Arial, + sans-serif; margin: 20px; padding: 0; background-color: #eee; @@ -38,21 +41,32 @@ } } - - - + +

    Watch my size!

    -

    This layout is responsive. See what happens if you make the browser window wider or narrow.

    +

    + This layout is responsive. See what happens if you make the browser + window wider or narrow. +

    -

    One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.

    -

    Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

    +

    + One November night in the year 1782, so the story runs, two brothers + sat over their winter fire in the little French town of Annonay, + watching the grey smoke-wreaths from the hearth curl up the wide + chimney. Their names were Stephen and Joseph Montgolfier, they were + papermakers by trade, and were noted as possessing thoughtful minds + and a deep interest in all scientific knowledge and new discovery. +

    +

    + Before that night—a memorable night, as it was to prove—hundreds of + millions of people had watched the rising smoke-wreaths of their fires + without drawing any special inspiration from the fact.” +

    -
    - - - \ No newline at end of file + + diff --git a/learn/selectors/adjacent.html b/learn/selectors/adjacent.html index 7cbd4702..1e339b70 100644 --- a/learn/selectors/adjacent.html +++ b/learn/selectors/adjacent.html @@ -1,61 +1,62 @@ - + - + - Selectors: Adjacent Combinator - - + Selectors: Adjacent Combinator + + - + - +
    -
    +

    A heading

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    -
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +
    - - - + + +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/after-icon.html b/learn/selectors/after-icon.html index c035eca2..e52cd67c 100644 --- a/learn/selectors/after-icon.html +++ b/learn/selectors/after-icon.html @@ -1,41 +1,37 @@ - + - + Selectors: ::after - - + + - + - +
    -

    Content in the box in my HTML page.

    +

    Content in the box in my HTML page.

    - + content: " ➥"; +} - +
    - +
    - - - + + diff --git a/learn/selectors/attribute-case.html b/learn/selectors/attribute-case.html index 38b5cf45..b6f7d946 100644 --- a/learn/selectors/attribute-case.html +++ b/learn/selectors/attribute-case.html @@ -1,60 +1,55 @@ - + - + Selectors: case-insensitivity - - + + - + - +
    -

    Case-insensitivity

    -
      -
    • Item 1
      • -
    • Item 2
      • -
    • Item 3
      • -
    - +

    Case-insensitivity

    +
      +
    • Item 1
      • +
    • Item 2
      • +
    • Item 3
      • +
    - + color: red; +} - +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/attribute-links.html b/learn/selectors/attribute-links.html index b76c094f..3af2286b 100644 --- a/learn/selectors/attribute-links.html +++ b/learn/selectors/attribute-links.html @@ -1,65 +1,64 @@ - + - + Selectors: attribute selectors - + - - + - +
    - - - +
    - + border: 5px solid grey; +} - +
  • Link 1
    • +
  • Link 2
    • +
  • Link 3
    • +
  • Link 4
    • +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/attribute-substring.html b/learn/selectors/attribute-substring.html index d639d6cb..d62542bf 100644 --- a/learn/selectors/attribute-substring.html +++ b/learn/selectors/attribute-substring.html @@ -1,70 +1,65 @@ - + - + Selectors: substring matching selectors - - + + - + - +
    -

    Attribute substring matching selectors

    -
      -
    • Item 1
      • -
    • Item 2
      • -
    • Item 3
      • -
    • Item 4
      • -
    - +

    Attribute substring matching selectors

    +
      +
    • Item 1
      • +
    • Item 2
      • +
    • Item 3
      • +
    • Item 4
      • +
    - + color: red; +} - +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
  • Item 4
    • +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/attribute.html b/learn/selectors/attribute.html index dae3be17..613500d6 100644 --- a/learn/selectors/attribute.html +++ b/learn/selectors/attribute.html @@ -1,70 +1,65 @@ - + - + Selectors: attribute presence and value selectors - - + + - + - +
    -

    Attribute presence and value selectors

    -
      -
    • Item 1
      • -
    • Item 2
      • -
    • Item 3
      • -
    • Item 4
      • -
    - +

    Attribute presence and value selectors

    +
      +
    • Item 1
      • +
    • Item 2
      • +
    • Item 3
      • +
    • Item 4
      • +
    - + color: red; +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/before-styled.html b/learn/selectors/before-styled.html index 016c6c9d..896e4739 100644 --- a/learn/selectors/before-styled.html +++ b/learn/selectors/before-styled.html @@ -1,51 +1,47 @@ - + - + Selectors: ::before - - + + - + - +
    -

    Content in the box in my HTML page.

    +

    Content in the box in my HTML page.

    - + content: ""; + display: block; + width: 100px; + height: 100px; + background-color: rebeccapurple; + border: 1px solid black; +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/before.html b/learn/selectors/before.html index 25fe3c28..65b45d80 100644 --- a/learn/selectors/before.html +++ b/learn/selectors/before.html @@ -1,41 +1,37 @@ - + - + Selectors: ::before - - + + - + - +
    -

    Content in the box in my HTML page.

    +

    Content in the box in my HTML page.

    - + content: "This should show before the other content. "; +} - +
    - +
    - - - + + diff --git a/learn/selectors/child.html b/learn/selectors/child.html index 72f893d2..8df17a71 100644 --- a/learn/selectors/child.html +++ b/learn/selectors/child.html @@ -1,57 +1,54 @@ - + - + Selectors: Child combinator - - + + - + - +
    -
      +
      • Unordered item
        • -
      • Unordered item -
          -
        1. Item 1
          2. -
        2. Item 2
          3. -
        +
      • + Unordered item +
          +
        1. Item 1
          2. +
        2. Item 2
          3. +
        • -
      +
    - + border-top: 5px solid red; +} - +
  • Unordered item
    • +
  • Unordered item +
      +
    1. Item 1
      2. +
    2. Item 2
      3. +
    +
    • +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/class-many.html b/learn/selectors/class-many.html index 459d879e..89ae5303 100644 --- a/learn/selectors/class-many.html +++ b/learn/selectors/class-many.html @@ -1,55 +1,48 @@ - + - + Selectors: class - + - + - +
    -
    - This is an informational note. -
    +
    This is an informational note.
    -
    - This note shows a warning. -
    +
    This note shows a warning.
    -
    - This note shows danger! -
    +
    This note shows danger!
    - This won't get styled — it also needs to have the notebox class. + This won't get styled — it also needs to have the notebox class.
    - +} - +
    - +
    - - - + + diff --git a/learn/selectors/class-type.html b/learn/selectors/class-type.html index 7c8154ef..c4643e6e 100644 --- a/learn/selectors/class-type.html +++ b/learn/selectors/class-type.html @@ -1,59 +1,62 @@ - + - + Selectors: class - - + + - + - +
    -

    Class selectors

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    Class selectors

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth + tatsoi tomatillo melon azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley + shallot courgette tatsoi pea sprouts fava bean collard greens dandelion + okra wakame tomato. Dandelion cucumber earthnut pea peanut soko + zucchini. +

    - + background-color: pink; +} - + greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/class.html b/learn/selectors/class.html index 96e928c7..487009fc 100644 --- a/learn/selectors/class.html +++ b/learn/selectors/class.html @@ -1,51 +1,53 @@ - + - + Selectors: class - - + + - + - +
    -

    Class selectors

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    Class selectors

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth + tatsoi tomatillo melon azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley + shallot courgette tatsoi pea sprouts fava bean collard greens dandelion + okra wakame tomato. Dandelion cucumber earthnut pea peanut soko + zucchini. +

    - + background-color: yellow; +} - + greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/descendant.html b/learn/selectors/descendant.html index 99303e6c..7e929372 100644 --- a/learn/selectors/descendant.html +++ b/learn/selectors/descendant.html @@ -1,43 +1,38 @@ - + - + Selectors: Descendant combinator - - + + - + - +
    -

    Text in .box

    -

    Text not in .box

    +

    Text in .box

    +

    Text not in .box

    - + color: red; +} - +

    Text not in .box

    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/first-child.html b/learn/selectors/first-child.html index 533bcac1..fdb5c64b 100644 --- a/learn/selectors/first-child.html +++ b/learn/selectors/first-child.html @@ -1,55 +1,55 @@ - + - + Selectors: :first-child example using a class - - + + - + - +
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    -
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +
    - + font-size: 120%; + font-weight: bold; +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/first-child2.html b/learn/selectors/first-child2.html index ac2be963..4103e40d 100644 --- a/learn/selectors/first-child2.html +++ b/learn/selectors/first-child2.html @@ -1,55 +1,56 @@ - + - + - Selectors: :first-child - - + Selectors: :first-child + + - + - +
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    -
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +
    - + font-size: 120%; + font-weight: bold; +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/first-line.html b/learn/selectors/first-line.html index dc91294c..81532d47 100644 --- a/learn/selectors/first-line.html +++ b/learn/selectors/first-line.html @@ -1,55 +1,56 @@ - + - + - Selectors: ::first-line - - + Selectors: ::first-line + + - + - +
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    -
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +
    - + font-size: 120%; + font-weight: bold; +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/general.html b/learn/selectors/general.html index 6d9386c7..2bbb454d 100644 --- a/learn/selectors/general.html +++ b/learn/selectors/general.html @@ -1,56 +1,53 @@ - + - + - Selectors: General Sibling Combinator - - + Selectors: General Sibling Combinator + + - + - +
    -
    +

    A heading

    I am a paragraph.

    I am a div

    I am another paragraph.

    -
    +
    - + font-weight: bold; + background-color: #333; + color: #fff; + padding: .5em; +} - +

    A heading

    +

    I am a paragraph.

    +
    I am a div
    +

    I am another paragraph.

    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/hover.html b/learn/selectors/hover.html index 96055280..3b0a2e78 100644 --- a/learn/selectors/hover.html +++ b/learn/selectors/hover.html @@ -1,53 +1,49 @@ - + - + Selectors: :hover - - + + - + - +
    -

    Hover over me

    +

    Hover over me

    - + color:hotpink; +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/id.html b/learn/selectors/id.html index 593def4b..e9159e30 100644 --- a/learn/selectors/id.html +++ b/learn/selectors/id.html @@ -1,59 +1,61 @@ - + - + Selectors: id - - + + - + - +
    -

    ID selector

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    ID selector

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley + shallot courgette tatsoi pea sprouts fava bean collard greens dandelion + okra wakame tomato. Dandelion cucumber earthnut pea peanut soko + zucchini. +

    - + color: rebeccapurple; +} - + greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/nesting.html b/learn/selectors/nesting.html index f37e842d..b43672c3 100644 --- a/learn/selectors/nesting.html +++ b/learn/selectors/nesting.html @@ -1,56 +1,56 @@ - + - - - - Selectors: General Sibling Combinator - - - + + + + Selectors: General Sibling Combinator + + + - -
    -
    -

    A heading

    -

    I am a paragraph.

    -
    I am a div
    -

    I am another paragraph.

    -
    -
    + +
    +
    +

    A heading

    +

    I am a paragraph.

    +
    I am a div
    +

    I am another paragraph.

    +
    +
    - + & ~ p { /* this is parsed by the browser as h1 ~ p */ + font-weight: bold; + background-color: #333; + color: #fff; + padding: .5em; + } +} - - -
    - -
    - - + +
    + +
    + + diff --git a/learn/selectors/selector-list.html b/learn/selectors/selector-list.html index 2e75ef2b..b22b6c03 100644 --- a/learn/selectors/selector-list.html +++ b/learn/selectors/selector-list.html @@ -1,59 +1,66 @@ - + - + Selectors: selector list - - + + - + - +
    -

    Type selectors

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

    +

    Type selectors

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon + azuki bean garlic. +

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley + shallot courgette tatsoi pea sprouts fava bean collard greens dandelion + okra wakame tomato. Dandelion cucumber earthnut pea peanut soko + zucchini. +

    -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado - daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach -

    +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea + lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage + asparagus winter purslane kale. Celery potato scallion desert raisin + horseradish spinach +

    - + color: rebeccapurple; +} - +

    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/type.html b/learn/selectors/type.html index 35faf160..e3b65a1e 100644 --- a/learn/selectors/type.html +++ b/learn/selectors/type.html @@ -1,59 +1,66 @@ - + - + Selectors: type - - + + - + - +
    -

    Type selectors

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

    +

    Type selectors

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon + azuki bean garlic. +

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley + shallot courgette tatsoi pea sprouts fava bean collard greens dandelion + okra wakame tomato. Dandelion cucumber earthnut pea peanut soko + zucchini. +

    -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado - daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach -

    +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea + lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage + asparagus winter purslane kale. Celery potato scallion desert raisin + horseradish spinach +

    - + color: rebeccapurple; +} - +

    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/selectors/universal.html b/learn/selectors/universal.html index 667c6f6a..84b4a498 100644 --- a/learn/selectors/universal.html +++ b/learn/selectors/universal.html @@ -1,52 +1,53 @@ - + - + Selectors: universal - - + + - + - +
    -

    Universal selector

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo - melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard - greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - - +

    Universal selector

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon + azuki bean garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley + shallot courgette tatsoi pea sprouts fava bean collard greens dandelion + okra wakame tomato. Dandelion cucumber earthnut pea peanut soko + zucchini. +

    - + margin: 0; +} - + greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/sizing/height.html b/learn/sizing/height.html index 7dcdd06f..33c23d19 100644 --- a/learn/sizing/height.html +++ b/learn/sizing/height.html @@ -1,4 +1,4 @@ - + @@ -16,7 +16,6 @@ .wrapper > * { margin: 20px; } - @@ -30,24 +28,23 @@

    Backgrounds & Borders

    - - - + + +
    diff --git a/learn/tasks/backgrounds/backgrounds2-download.html b/learn/tasks/backgrounds/backgrounds2-download.html index 355e93db..2ad291ba 100644 --- a/learn/tasks/backgrounds/backgrounds2-download.html +++ b/learn/tasks/backgrounds/backgrounds2-download.html @@ -1,13 +1,17 @@ - + - + Backgrounds and Borders: Task 2 @@ -30,24 +28,23 @@

    Backgrounds & Borders

    - - - + + +
    diff --git a/learn/tasks/box-model/box-models-download.html b/learn/tasks/box-model/box-models-download.html index a5ab897c..fba59979 100644 --- a/learn/tasks/box-model/box-models-download.html +++ b/learn/tasks/box-model/box-models-download.html @@ -1,19 +1,23 @@ - + - + Box Model Task 1: Standard and Alternate Box Models - +
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    -
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean + garlic. +

    + +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +
    - +} - +
    diff --git a/learn/tasks/box-model/mbp-download.html b/learn/tasks/box-model/mbp-download.html index 88463f63..50ea72f3 100644 --- a/learn/tasks/box-model/mbp-download.html +++ b/learn/tasks/box-model/mbp-download.html @@ -1,27 +1,28 @@ - + - + Box Model Task 2: Margin, Border, and Padding - + -
    I use the standard box model.
    - - - \ No newline at end of file + diff --git a/learn/tasks/box-model/mbp.html b/learn/tasks/box-model/mbp.html index 3fa6e93e..f76ca3dc 100644 --- a/learn/tasks/box-model/mbp.html +++ b/learn/tasks/box-model/mbp.html @@ -1,4 +1,4 @@ - + @@ -8,26 +8,23 @@
    -
    I use the standard box model.
    +
    I use the standard box model.
    - - +} + +
    diff --git a/learn/tasks/cascade/cascade-download.html b/learn/tasks/cascade/cascade-download.html index a902ac38..b5abf5aa 100644 --- a/learn/tasks/cascade/cascade-download.html +++ b/learn/tasks/cascade/cascade-download.html @@ -1,4 +1,4 @@ - + @@ -8,7 +8,11 @@ body { background-color: #fff; color: #333; - font: 1.2em / 1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; + font: + 1.2em / 1.5 "Helvetica Neue", + Helvetica, + Arial, + sans-serif; padding: 1em; margin: 0; } diff --git a/learn/tasks/cascade/cascade.html b/learn/tasks/cascade/cascade.html index c18da76e..52030012 100644 --- a/learn/tasks/cascade/cascade.html +++ b/learn/tasks/cascade/cascade.html @@ -1,4 +1,4 @@ - + @@ -31,17 +31,16 @@
    +
    diff --git a/learn/tasks/cascade/cascadelayer-download.html b/learn/tasks/cascade/cascadelayer-download.html index b2628e4c..69edabd4 100644 --- a/learn/tasks/cascade/cascadelayer-download.html +++ b/learn/tasks/cascade/cascadelayer-download.html @@ -1,4 +1,4 @@ - + diff --git a/learn/tasks/cascade/cascadelayer.html b/learn/tasks/cascade/cascadelayer.html index 099e189c..d75ca330 100644 --- a/learn/tasks/cascade/cascadelayer.html +++ b/learn/tasks/cascade/cascadelayer.html @@ -1,4 +1,4 @@ - + @@ -41,26 +41,25 @@
    +@layer yellow { + #outer div ul .nav a { + padding: 5px; + display: inline-block; + margin-bottom: 10px; + } +} +@layer purple { + div div li a { + color: rebeccapurple; + } +} +@layer green { + a { + color: lightgreen; + } +} +
    diff --git a/learn/tasks/cascade/marking.md b/learn/tasks/cascade/marking.md index dab510fd..c8590d03 100644 --- a/learn/tasks/cascade/marking.md +++ b/learn/tasks/cascade/marking.md @@ -10,7 +10,7 @@ One possible solution is as follows: } ``` -There are two things the student needs to do in this task. First, write a selector for the `a` element which is more specific than the selector used to turn the background powderblue. In this solution, this is achieved by using the `id` selector, which has very high specificity. +There are two things the student needs to do in this task. First, write a selector for the `a` element which is more specific than the selector used to turn the background powderblue. In this solution, this is achieved by using the `id` selector, which has very high specificity. Then the student needs to remember there are special keyword values for all properties. In this case, using `inherit` sets the background color back to be the same as its parent element. @@ -24,4 +24,4 @@ One possible solution is as follows: There is one thing the student needs to do in this task: change the order of precedence so the declaration for the desired color is in the last declared layer, which is what his solution shows. -The student needs to remember that unlayered normal styles take precedence over layered normal styles. But, if all styles are within layers — as in the case of this task — styles in later declared layers take precedence over styles declared in earlier layers. Moving the purple layer to the end means it has precedence over the green and yellow layers. \ No newline at end of file +The student needs to remember that unlayered normal styles take precedence over layered normal styles. But, if all styles are within layers — as in the case of this task — styles in later declared layers take precedence over styles declared in earlier layers. Moving the purple layer to the end means it has precedence over the green and yellow layers. diff --git a/learn/tasks/flexbox/flexbox1-download.html b/learn/tasks/flexbox/flexbox1-download.html index 00e78f6e..8a603e5d 100644 --- a/learn/tasks/flexbox/flexbox1-download.html +++ b/learn/tasks/flexbox/flexbox1-download.html @@ -1,45 +1,44 @@ - + - + Flexbox: Task 1 - + - - - - - - + - - - - \ No newline at end of file + + diff --git a/learn/tasks/flexbox/flexbox1.html b/learn/tasks/flexbox/flexbox1.html index 6942d9a2..608a7f16 100644 --- a/learn/tasks/flexbox/flexbox1.html +++ b/learn/tasks/flexbox/flexbox1.html @@ -1,44 +1,41 @@ - + - - + Flexbox: task 1 - + + - - - +
    - - + + +
    - +
    - - - + + diff --git a/learn/tasks/flexbox/flexbox2-download.html b/learn/tasks/flexbox/flexbox2-download.html index 2cd56054..1bae6f76 100644 --- a/learn/tasks/flexbox/flexbox2-download.html +++ b/learn/tasks/flexbox/flexbox2-download.html @@ -1,48 +1,49 @@ - + - + Flexbox: Task 2 - - - - - - - - -
      -
    • I am small
      • -
    • I have more content than the very small item.
      • -
    • I have lots of content. So much content that I don't know where it is all going to go. I'm glad that CSS is pretty good at dealing with situations where we end up with more words than expected!
      • -
    - - - - \ No newline at end of file + + + +
      +
    • I am small
      • +
    • I have more content than the very small item.
      • +
    • + I have lots of content. So much content that I don't know where it is + all going to go. I'm glad that CSS is pretty good at dealing with + situations where we end up with more words than expected! +
      • +
    + + diff --git a/learn/tasks/flexbox/flexbox2.html b/learn/tasks/flexbox/flexbox2.html index 5ec3b0d9..c749d2e7 100644 --- a/learn/tasks/flexbox/flexbox2.html +++ b/learn/tasks/flexbox/flexbox2.html @@ -1,75 +1,74 @@ - + - - + Flexbox: task 2 - + + - - - +
    • I am small
    • I have more content than the very small item.
      • -
    • I have lots of content. So much content that I don't know where it is all going to go. I'm glad that CSS is pretty good at dealing with situations where we end up with more words than expected!
      • +
    • + I have lots of content. So much content that I don't know where it is + all going to go. I'm glad that CSS is pretty good at dealing with + situations where we end up with more words than expected! +
    - +} - +
    - +
    - - - + + diff --git a/learn/tasks/flexbox/flexbox3-download.html b/learn/tasks/flexbox/flexbox3-download.html index 9aa7aaec..fe349430 100644 --- a/learn/tasks/flexbox/flexbox3-download.html +++ b/learn/tasks/flexbox/flexbox3-download.html @@ -1,45 +1,42 @@ - + - + Flexbox: Task 3 - - - - - - - - -
    -
    Center me.
    -
    - - - - \ No newline at end of file + + + +
    +
    Center me.
    +
    + + diff --git a/learn/tasks/flexbox/flexbox3.html b/learn/tasks/flexbox/flexbox3.html index 3f1496fb..1811ab51 100644 --- a/learn/tasks/flexbox/flexbox3.html +++ b/learn/tasks/flexbox/flexbox3.html @@ -1,70 +1,66 @@ - + - - + Flexbox: task 3 - + + - - - +
    Center me.
    - + - +
    - +
    - - - + + diff --git a/learn/tasks/flexbox/flexbox4-download.html b/learn/tasks/flexbox/flexbox4-download.html index b9c804eb..669f12d3 100644 --- a/learn/tasks/flexbox/flexbox4-download.html +++ b/learn/tasks/flexbox/flexbox4-download.html @@ -1,56 +1,53 @@ - + - + Flexbox: Task 4 - - - - - - - - -
      -
    • Turnip
      • -
    • greens
      • -
    • yarrow
      • -
    • ricebean
      • -
    • rutabaga
      • -
    • endive
      • -
    • cauliflower
      • -
    • sea lettuce
      • -
    • kohlrabi
      • -
    • amaranth
      • -
    - - - - \ No newline at end of file + + + +
      +
    • Turnip
      • +
    • greens
      • +
    • yarrow
      • +
    • ricebean
      • +
    • rutabaga
      • +
    • endive
      • +
    • cauliflower
      • +
    • sea lettuce
      • +
    • kohlrabi
      • +
    • amaranth
      • +
    + + diff --git a/learn/tasks/flexbox/flexbox4.html b/learn/tasks/flexbox/flexbox4.html index 56adc57a..a6338e17 100644 --- a/learn/tasks/flexbox/flexbox4.html +++ b/learn/tasks/flexbox/flexbox4.html @@ -1,46 +1,42 @@ - + - - + Flexbox: task 4 - + + - - - +
    • Turnip
      • @@ -56,17 +52,17 @@
    - +} - +
    - +
    - - - + + diff --git a/learn/tasks/float/float1-download.html b/learn/tasks/float/float1-download.html index b8987774..cbafc3c1 100644 --- a/learn/tasks/float/float1-download.html +++ b/learn/tasks/float/float1-download.html @@ -1,13 +1,17 @@ - + - + Float: Task 1 - -
    One
    Two

    The two boxes should float to either side of this text.

    - - - \ No newline at end of file + diff --git a/learn/tasks/float/float1.html b/learn/tasks/float/float1.html index 708dff0a..59a3d465 100644 --- a/learn/tasks/float/float1.html +++ b/learn/tasks/float/float1.html @@ -1,4 +1,4 @@ - + @@ -10,7 +10,7 @@ } .box { width: 500px; - padding: .5em; + padding: 0.5em; } .float { margin: 15px; @@ -25,11 +25,9 @@ @@ -41,26 +39,24 @@
    Two

    The two boxes should float to either side of this text.

    - - +} - +
    diff --git a/learn/tasks/float/float2-download.html b/learn/tasks/float/float2-download.html index 6bc6f696..a3b8c0ff 100644 --- a/learn/tasks/float/float2-download.html +++ b/learn/tasks/float/float2-download.html @@ -1,13 +1,17 @@ - + - + Float: Task 2 - -
    Float

    This sentence appears next to the float.

    Cause this sentence to appear below the float.

    - - - \ No newline at end of file + diff --git a/learn/tasks/float/float2.html b/learn/tasks/float/float2.html index af391967..34c3e6fc 100644 --- a/learn/tasks/float/float2.html +++ b/learn/tasks/float/float2.html @@ -1,4 +1,4 @@ - + @@ -10,7 +10,7 @@ } .box { width: 500px; - padding: .5em; + padding: 0.5em; } .float { margin: 15px; @@ -25,11 +25,9 @@ @@ -41,26 +39,24 @@

    This sentence appears next to the float.

    Cause this sentence to appear below the float.

    - - +} - +
    diff --git a/learn/tasks/float/float3-download.html b/learn/tasks/float/float3-download.html index 16518d12..d66c43b2 100644 --- a/learn/tasks/float/float3-download.html +++ b/learn/tasks/float/float3-download.html @@ -1,14 +1,18 @@ - + - + Float: Task 3 - + - -
    Float

    This sentence appears next to the float.

    - - - \ No newline at end of file + diff --git a/learn/tasks/float/float3.html b/learn/tasks/float/float3.html index da6bfd68..22d2dca1 100644 --- a/learn/tasks/float/float3.html +++ b/learn/tasks/float/float3.html @@ -1,4 +1,4 @@ - + @@ -13,14 +13,14 @@ } .box { width: 500px; - padding: .5em; + padding: 0.5em; } .float { margin: 15px; width: 150px; height: 150px; border-radius: 5px; - background-color: rgb(207,232,220); + background-color: rgb(207, 232, 220); padding: 1em; } @@ -33,7 +33,6 @@ - -
    One
    Two
    Three
    Four
    - - - \ No newline at end of file + diff --git a/learn/tasks/grid/grid1.html b/learn/tasks/grid/grid1.html index 3ff96403..d70aa778 100644 --- a/learn/tasks/grid/grid1.html +++ b/learn/tasks/grid/grid1.html @@ -1,36 +1,31 @@ - + - - + Grid: task 1 - + + - - - +
    One
    @@ -40,25 +35,25 @@
    - + - +
    - +
    - - - + + diff --git a/learn/tasks/grid/grid2-download.html b/learn/tasks/grid/grid2-download.html index 51972a28..66340843 100644 --- a/learn/tasks/grid/grid2-download.html +++ b/learn/tasks/grid/grid2-download.html @@ -1,28 +1,31 @@ - + - Grid: task 2 - + - -
    One
    Two
    - - - \ No newline at end of file + diff --git a/learn/tasks/grid/grid2.html b/learn/tasks/grid/grid2.html index 14041b95..8e65f62f 100644 --- a/learn/tasks/grid/grid2.html +++ b/learn/tasks/grid/grid2.html @@ -1,55 +1,49 @@ - + - - + Grid: task 2 - + + - - - +
    One
    @@ -57,7 +51,7 @@
    - + - +
    - +
    - - - + + diff --git a/learn/tasks/grid/grid3-download.html b/learn/tasks/grid/grid3-download.html index f2c4e84a..07ab4cd5 100644 --- a/learn/tasks/grid/grid3-download.html +++ b/learn/tasks/grid/grid3-download.html @@ -1,30 +1,33 @@ - + - Grid: task 3 - + - -
    One
    Two
    Three
    Four
    - - - \ No newline at end of file + diff --git a/learn/tasks/grid/grid3.html b/learn/tasks/grid/grid3.html index 18c9257b..8cc3d308 100644 --- a/learn/tasks/grid/grid3.html +++ b/learn/tasks/grid/grid3.html @@ -1,38 +1,34 @@ - + - - + Grid: task 3 - + + - - - +
    One
    @@ -42,27 +38,26 @@
    - +} - +
    - +
    - - - + + diff --git a/learn/tasks/grid/grid4-download.html b/learn/tasks/grid/grid4-download.html index 54ee901d..74c4a704 100644 --- a/learn/tasks/grid/grid4-download.html +++ b/learn/tasks/grid/grid4-download.html @@ -1,7 +1,6 @@ - + - @@ -9,11 +8,14 @@ Grid and Flex: task 4 - -
    - a single red balloon + a single red balloon
    • balloon
    • red
      • @@ -61,7 +61,7 @@
    - balloons over some houses + balloons over some houses
    • balloons
    • houses
      • @@ -70,7 +70,7 @@
    - close-up of balloons inflating + close-up of balloons inflating
    • balloons
    • inflating
      • @@ -79,7 +79,7 @@
    - a balloon in the sun + a balloon in the sun
    • balloon
    • sun
      • @@ -89,7 +89,5 @@
    - - - \ No newline at end of file + diff --git a/learn/tasks/grid/grid4.html b/learn/tasks/grid/grid4.html index bd244660..9979de26 100644 --- a/learn/tasks/grid/grid4.html +++ b/learn/tasks/grid/grid4.html @@ -1,63 +1,56 @@ - + - - + Grid and Flex: task 4 - + + - - - +
    - a single red balloon + a single red balloon
    • balloon
    • red
      • @@ -67,7 +60,7 @@
    - balloons over some houses + balloons over some houses
    • balloons
    • houses
      • @@ -76,7 +69,7 @@
    - close-up of balloons inflating + close-up of balloons inflating
    • balloons
    • inflating
      • @@ -85,7 +78,7 @@
    - a balloon in the sun + a balloon in the sun
    • balloon
    • sun
      • @@ -97,17 +90,17 @@
    - +} - +
    - +
    - - - + + diff --git a/learn/tasks/grid/marking.md b/learn/tasks/grid/marking.md index 1b918793..b4b229de 100644 --- a/learn/tasks/grid/marking.md +++ b/learn/tasks/grid/marking.md @@ -29,15 +29,19 @@ I have used the shorthands below, however it would be correct for the student to grid-row: 2 / 4; } ``` + ### Additional question This extra question requires a little bit of research. One way of achieving this would be to use `order`, which we've encountered in the flexbox tutorial. + ``` .item1 { order: 1; } ``` + Another valid solution is to use `z-index`: + ``` .item1 { z-index: 1; diff --git a/learn/tasks/images/form-download.html b/learn/tasks/images/form-download.html index 721615d4..cc80175d 100644 --- a/learn/tasks/images/form-download.html +++ b/learn/tasks/images/form-download.html @@ -1,15 +1,18 @@ - + - + Images and forms 2: styling form fields - +
    -
    -
    - -
    +
    + + + +
    - +} - +
    + + + +
    +
    diff --git a/learn/tasks/images/marking.md b/learn/tasks/images/marking.md index 76915cd2..6fdeb461 100644 --- a/learn/tasks/images/marking.md +++ b/learn/tasks/images/marking.md @@ -40,5 +40,5 @@ The student has been asked to perform various tasks to style a form field and su color: white; border: 0; border-radius: 5px; -} +} ``` diff --git a/learn/tasks/images/object-fit-download.html b/learn/tasks/images/object-fit-download.html index ac10aba7..5ad0c76c 100644 --- a/learn/tasks/images/object-fit-download.html +++ b/learn/tasks/images/object-fit-download.html @@ -1,13 +1,17 @@ - + - + Images and forms 1: covering the box with an image -
    - balloons + balloons
    - - - \ No newline at end of file + diff --git a/learn/tasks/images/object-fit.html b/learn/tasks/images/object-fit.html index 5d9d9bc1..12142980 100644 --- a/learn/tasks/images/object-fit.html +++ b/learn/tasks/images/object-fit.html @@ -1,48 +1,45 @@ - + Images and forms 1: covering the box with an image
    -
    - balloons + balloons
    - - + + +
    diff --git a/learn/tasks/multicol/multicol1-download.html b/learn/tasks/multicol/multicol1-download.html index e07d6353..c1192c44 100644 --- a/learn/tasks/multicol/multicol1-download.html +++ b/learn/tasks/multicol/multicol1-download.html @@ -1,14 +1,18 @@ - + - + Multiple-column Layout: Task 1 - + - -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo + shoot green bean swiss chard seakale pumpkin onion chickpea gram corn + pea. +

    - - - \ No newline at end of file + diff --git a/learn/tasks/multicol/multicol1.html b/learn/tasks/multicol/multicol1.html index 48a1d326..80986c86 100644 --- a/learn/tasks/multicol/multicol1.html +++ b/learn/tasks/multicol/multicol1.html @@ -1,4 +1,4 @@ - + @@ -12,40 +12,50 @@
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.

    +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach carrot soko. Lotus root water spinach fennel kombu maize + bamboo shoot green bean swiss chard seakale pumpkin onion chickpea + gram corn pea. +

    -
    - +} - +
    diff --git a/learn/tasks/multicol/multicol2-download.html b/learn/tasks/multicol/multicol2-download.html index 87882db6..ca64f9c0 100644 --- a/learn/tasks/multicol/multicol2-download.html +++ b/learn/tasks/multicol/multicol2-download.html @@ -1,14 +1,18 @@ - + - + Multiple-column Layout: Task 2 - + - -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo + shoot green bean swiss chard seakale pumpkin onion chickpea gram corn + pea. +

    - - - \ No newline at end of file + diff --git a/learn/tasks/multicol/multicol2.html b/learn/tasks/multicol/multicol2.html index fc64f879..549c65c3 100644 --- a/learn/tasks/multicol/multicol2.html +++ b/learn/tasks/multicol/multicol2.html @@ -1,4 +1,4 @@ - + @@ -12,40 +12,50 @@
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.

    +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach carrot soko. Lotus root water spinach fennel kombu maize + bamboo shoot green bean swiss chard seakale pumpkin onion chickpea + gram corn pea. +

    -
    - +} - +
    diff --git a/learn/tasks/multicol/multicol3-download.html b/learn/tasks/multicol/multicol3-download.html index da756b86..02af6ab9 100644 --- a/learn/tasks/multicol/multicol3-download.html +++ b/learn/tasks/multicol/multicol3-download.html @@ -1,14 +1,18 @@ - + - + Multiple-column Layout: Task 3 - + - -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    I am a level 2 heading

    Lotus root water spinach fennel
    -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo + shoot green bean swiss chard seakale pumpkin onion chickpea gram corn + pea.

    -
    - - - \ No newline at end of file + diff --git a/learn/tasks/multicol/multicol3.html b/learn/tasks/multicol/multicol3.html index 66154b07..479094f8 100644 --- a/learn/tasks/multicol/multicol3.html +++ b/learn/tasks/multicol/multicol3.html @@ -1,4 +1,4 @@ - + @@ -18,58 +18,68 @@ margin: 0; display: grid; grid-template-columns: 1fr auto 1fr; - column-gap: .5em; + column-gap: 0.5em; align-items: center; } .box h2::before { content: ""; - border-bottom:5px dotted #ccc; + border-bottom: 5px dotted #ccc; } .box h2::after { content: ""; - border-bottom:5px dotted #ccc; + border-bottom: 5px dotted #ccc; } .subhead { - font-style: italic; + font-style: italic; }
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    I am a level 2 heading

    Lotus root water spinach fennel
    -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.

    +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach carrot soko. Lotus root water spinach fennel kombu maize + bamboo shoot green bean swiss chard seakale pumpkin onion chickpea + gram corn pea. +

    -
    - +} - +

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.

    + +
    diff --git a/learn/tasks/overflow/overflow-hidden-download.html b/learn/tasks/overflow/overflow-hidden-download.html index 2e7ee1c6..bc04af61 100644 --- a/learn/tasks/overflow/overflow-hidden-download.html +++ b/learn/tasks/overflow/overflow-hidden-download.html @@ -1,14 +1,18 @@ - + - + Overflow Task 2: Hiding overflow - + - -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    Target
    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    - - - \ No newline at end of file + diff --git a/learn/tasks/position/position1.html b/learn/tasks/position/position1.html index 92de773c..cee9fba9 100644 --- a/learn/tasks/position/position1.html +++ b/learn/tasks/position/position1.html @@ -1,4 +1,4 @@ - + @@ -10,25 +10,23 @@ } .container { width: 500px; - padding: .5em; + padding: 0.5em; border: 5px solid #ccc; } .target { width: 150px; height: 150px; border-radius: 5px; - background-color: rgb(207,232,220); + background-color: rgb(207, 232, 220); padding: 1em; } @@ -36,30 +34,35 @@
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    Target
    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    -
    - +} - +
    diff --git a/learn/tasks/position/position2-download.html b/learn/tasks/position/position2-download.html index 85d9a5aa..2a41455f 100644 --- a/learn/tasks/position/position2-download.html +++ b/learn/tasks/position/position2-download.html @@ -1,13 +1,17 @@ - + Position: Task 2 - - - -
    -
    -

    This is the sidebar. It should remain in position as the content scrolls.

    -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.

    -
    -
    - +
    +
    +

    + This is the sidebar. It should remain in position as the content + scrolls. +

    +
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. Celery potato scallion desert raisin horseradish + spinach carrot soko. Lotus root water spinach fennel kombu maize + bamboo shoot green bean swiss chard seakale pumpkin onion chickpea + gram corn pea. Brussels sprout coriander water chestnut gourd swiss + chard wakame kohlrabi beetroot carrot watercress. Corn amaranth + salsify bunya nuts nori azuki bean chickweed potato bell pepper + artichoke. +

    +
    +
    - diff --git a/learn/tasks/position/position2.html b/learn/tasks/position/position2.html index 3d45299a..991650dd 100644 --- a/learn/tasks/position/position2.html +++ b/learn/tasks/position/position2.html @@ -1,4 +1,4 @@ - + @@ -11,12 +11,12 @@ .container { width: 550px; height: 400px; - padding: .5em; + padding: 0.5em; border: 5px solid #ccc; overflow: auto; } .sidebar { - background-color: rgb(207,232,220); + background-color: rgb(207, 232, 220); padding: 1em; float: left; width: 150px; @@ -29,11 +29,9 @@ @@ -42,28 +40,47 @@
    -

    This is the sidebar. It should remain in position as the content scrolls.

    +

    + This is the sidebar. It should remain in position as the content + scrolls. +

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi + welsh onion daikon amaranth tatsoi tomatillo melon azuki bean + garlic. +

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea + lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage + asparagus winter purslane kale. Celery potato scallion desert raisin + horseradish spinach carrot soko. Lotus root water spinach fennel + kombu maize bamboo shoot green bean swiss chard seakale pumpkin + onion chickpea gram corn pea. Brussels sprout coriander water + chestnut gourd swiss chard wakame kohlrabi beetroot carrot + watercress. Corn amaranth salsify bunya nuts nori azuki bean + chickweed potato bell pepper artichoke. +

    -
    - +} - +
    diff --git a/learn/tasks/rwd/rwd-download.html b/learn/tasks/rwd/rwd-download.html index a04836fe..cfb449bf 100644 --- a/learn/tasks/rwd/rwd-download.html +++ b/learn/tasks/rwd/rwd-download.html @@ -1,17 +1,20 @@ - + - + Responsive Web Design Task: Task - + - - + - +
    - - - +
    - + border: 5px solid grey; +} - +
  • Link 1
    • +
  • Link 2
    • +
  • Link 3
    • +
  • Link 4
    • +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/tasks/selectors/class-id-download.html b/learn/tasks/selectors/class-id-download.html index 9128d668..8e1722da 100644 --- a/learn/tasks/selectors/class-id-download.html +++ b/learn/tasks/selectors/class-id-download.html @@ -1,14 +1,18 @@ - + - + Selectors: Class and ID Selectors - + - -

    This is a heading

    -

    Veggies es - bonus vobis, proinde vos postulo +

    + Veggies es bonus vobis, proinde vos postulo essum magis - kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    + kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean + garlic. +

    A level 2 heading

    Gumbo beet greens corn soko endive gumbo gourd.

    Another level 2 heading

    Parsley shallot - courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    - - + + diff --git a/learn/tasks/selectors/class-id.html b/learn/tasks/selectors/class-id.html index 656621d6..06079b3d 100644 --- a/learn/tasks/selectors/class-id.html +++ b/learn/tasks/selectors/class-id.html @@ -1,4 +1,4 @@ - + @@ -10,40 +10,42 @@ } - +

    This is a heading

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +

    + Veggies es bonus vobis, proinde vos postulo + essum magis kohlrabi welsh onion + daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    A level 2 heading

    Gumbo beet greens corn soko endive gumbo gourd.

    Another level 2 heading

    -

    Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Parsley shallot courgette tatsoi pea + sprouts fava bean collard greens dandelion okra wakame tomato. + Dandelion cucumber earthnut pea peanut soko zucchini. +

    -
    - + - +
    diff --git a/learn/tasks/selectors/combinators-download.html b/learn/tasks/selectors/combinators-download.html index bcc2a93d..c9127548 100644 --- a/learn/tasks/selectors/combinators-download.html +++ b/learn/tasks/selectors/combinators-download.html @@ -1,14 +1,18 @@ - + - + Selectors: Combinators - + - + @@ -31,7 +28,8 @@

    Another heading

    - - + - +

    Another heading

    +

    This paragraph comes after the heading.

    + +
    diff --git a/learn/tasks/selectors/marking.md b/learn/tasks/selectors/marking.md index f785f5a7..cbd2bfc2 100644 --- a/learn/tasks/selectors/marking.md +++ b/learn/tasks/selectors/marking.md @@ -26,7 +26,7 @@ span { This tests that the student understands he different between these and also how to target multiple classes on an item. ``` -#special { +#special { background-color: yellow; } @@ -105,11 +105,11 @@ a[title] { Target the element with an href attribute which contains the word contact anywhere in its value and make the border orange (border-color: orange). -There are two things we want to match here, the href value "/contact" and also "../contact". So we need to match the string "contact" anywhere in the value using *=. This will select the third and fourth links. +There are two things we want to match here, the href value "/contact" and also "../contact". So we need to match the string "contact" anywhere in the value using \*=. This will select the third and fourth links. ``` a[href*="contact"] { - border-color: orange; + border-color: orange; } ``` @@ -118,8 +118,7 @@ Target the element with an href value starting with https and give it a gree Here we can look for an href value which starts with "https" and so use ^=, this will only select the first link. ``` -a[href^="https"] { +a[href^="https"] { border-color: green; } ``` - diff --git a/learn/tasks/selectors/pseudo-download.html b/learn/tasks/selectors/pseudo-download.html index 64f23d4d..e560eb38 100644 --- a/learn/tasks/selectors/pseudo-download.html +++ b/learn/tasks/selectors/pseudo-download.html @@ -1,14 +1,18 @@ - + - + Selectors: Pseudo-class and Pseudo-element Selectors - + - -
    -

    Veggies es - bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Veggies es bonus vobis, proinde vos + postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi + tomatillo melon azuki bean garlic. +

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    @@ -63,7 +72,5 @@
    Fruits
    - - diff --git a/learn/tasks/selectors/pseudo.html b/learn/tasks/selectors/pseudo.html index 037d5557..9b650e7b 100644 --- a/learn/tasks/selectors/pseudo.html +++ b/learn/tasks/selectors/pseudo.html @@ -1,4 +1,4 @@ - + @@ -14,23 +14,29 @@ width: 300px; } - td, th { - padding: .2em; + td, + th { + padding: 0.2em; text-align: left; } - +
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Veggies es bonus vobis, proinde vos + postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi + tomatillo melon azuki bean garlic. +

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    @@ -61,14 +67,11 @@
    -
    - + - +
    diff --git a/learn/tasks/selectors/type-download.html b/learn/tasks/selectors/type-download.html index 3cfced8c..c679a290 100644 --- a/learn/tasks/selectors/type-download.html +++ b/learn/tasks/selectors/type-download.html @@ -1,14 +1,18 @@ - + - + Selectors: Type Selectors - + - -

    This is a heading

    -

    Veggies es - bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean + garlic. +

    A level 2 heading

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    - - - \ No newline at end of file + diff --git a/learn/tasks/selectors/type.html b/learn/tasks/selectors/type.html index 949555ca..b5178ada 100644 --- a/learn/tasks/selectors/type.html +++ b/learn/tasks/selectors/type.html @@ -1,4 +1,4 @@ - + @@ -10,36 +10,38 @@ } - +

    This is a heading

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean + garlic. +

    A level 2 heading

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    -
    - + - +
    diff --git a/learn/tasks/sizing/height-min-height-download.html b/learn/tasks/sizing/height-min-height-download.html index 599bab0e..070525d1 100644 --- a/learn/tasks/sizing/height-min-height-download.html +++ b/learn/tasks/sizing/height-min-height-download.html @@ -1,4 +1,4 @@ - + @@ -8,7 +8,11 @@ body { background-color: #fff; color: #333; - font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif; + font: + 1.2em / 1.5 Helvetica Neue, + Helvetica, + Arial, + sans-serif; padding: 1em; margin: 0; } diff --git a/learn/tasks/sizing/height-min-height.html b/learn/tasks/sizing/height-min-height.html index 2fc9bb29..33d947fb 100644 --- a/learn/tasks/sizing/height-min-height.html +++ b/learn/tasks/sizing/height-min-height.html @@ -1,63 +1,67 @@ - + Sizing Task 1: height and min-height
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo + beet greens corn soko endive gumbo gourd. +

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo + beet greens corn soko endive gumbo gourd. +

    - +} - +
    diff --git a/learn/tasks/sizing/max-width-download.html b/learn/tasks/sizing/max-width-download.html index f496c75c..26a7573f 100644 --- a/learn/tasks/sizing/max-width-download.html +++ b/learn/tasks/sizing/max-width-download.html @@ -1,39 +1,39 @@ - + Sizing Task 3: maximum width and images -
    - star + star
    - balloons + balloons
    - diff --git a/learn/tasks/sizing/max-width.html b/learn/tasks/sizing/max-width.html index 77eac83f..3ea41f49 100644 --- a/learn/tasks/sizing/max-width.html +++ b/learn/tasks/sizing/max-width.html @@ -1,51 +1,49 @@ - + Sizing Task 3: maximum width and images
    - star + star
    - balloons + balloons
    - - + + +
    diff --git a/learn/tasks/sizing/percentages-download.html b/learn/tasks/sizing/percentages-download.html index 6c1d8f0f..626650c4 100644 --- a/learn/tasks/sizing/percentages-download.html +++ b/learn/tasks/sizing/percentages-download.html @@ -1,11 +1,10 @@ - + - + Sizing Task 2: Percentages -
    Make me 60% of my parent's width.
    - - diff --git a/learn/tasks/sizing/percentages.html b/learn/tasks/sizing/percentages.html index 59af5502..368710f3 100644 --- a/learn/tasks/sizing/percentages.html +++ b/learn/tasks/sizing/percentages.html @@ -1,21 +1,21 @@ - + Sizing Task 2: Percentages @@ -37,20 +35,19 @@
    - - + + +
    diff --git a/learn/tasks/styles.css b/learn/tasks/styles.css index b733e436..11945fee 100644 --- a/learn/tasks/styles.css +++ b/learn/tasks/styles.css @@ -1,61 +1,65 @@ /* Some default styling for cookbook examples */ -/* +/* rgb(53,43,34) rgb(75,70,74) rgb(95,97,110) rgb(137,151,188) rgb(160,178,226) */ -body { - background-color: #fff; - color: #333; - font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif; - padding: 0; - margin: 0; +body { + background-color: #fff; + color: #333; + font: + 1.2em / 1.5 Helvetica Neue, + Helvetica, + Arial, + sans-serif; + padding: 0; + margin: 0; } /* styles for the editor */ .playable { - font-family: monospace; - display: block; - margin-bottom: 10px; - background-color: #F4F7F8; - border: none; - border-left: 6px solid #558ABB; - color: #4D4E53; - width: 90%; - max-width: 700px; - padding: 10px 10px 0px; - font-size: 90%; - } + font-family: monospace; + display: block; + margin-bottom: 10px; + background-color: #f4f7f8; + border: none; + border-left: 6px solid #558abb; + color: #4d4e53; + width: 90%; + max-width: 700px; + padding: 10px 10px 0px; + font-size: 90%; +} - .playable-css { - height: 80px; - } +.playable-css { + height: 80px; +} - .playable-html { - height: 160px; - } +.playable-html { + height: 160px; +} - .playable-buttons { - text-align: right; - width: 90%; - max-width: 700px; - padding: 5px 10px 5px 26px; - font-size: 100%; - } +.playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; +} - .preview { - width: 90%; - max-width: 700px; - border: 1px solid #4D4E53; - border-radius: 2px; - padding: 10px 14px 10px 10px; - margin-bottom: 10px; - } +.preview { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; +} - .preview input { - display: block; - margin: 5px; - } +.preview input { + display: block; + margin: 5px; +} diff --git a/learn/tasks/tables/table-download.html b/learn/tasks/tables/table-download.html index 5e22bb8e..0915e66d 100644 --- a/learn/tasks/tables/table-download.html +++ b/learn/tasks/tables/table-download.html @@ -1,7 +1,7 @@ - + - + Tables Task - - + @@ -80,7 +81,5 @@
    A summary of the UK's most famous punk bands + A summary of the UK's most famous punk bands +
    Band
    - - - \ No newline at end of file + diff --git a/learn/tasks/tables/table.html b/learn/tasks/tables/table.html index 1f684d72..04dd7e35 100644 --- a/learn/tasks/tables/table.html +++ b/learn/tasks/tables/table.html @@ -1,97 +1,94 @@ - + Tables Task - +
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    A summary of the UK's most famous punk bands
    BandYear formedNo. of AlbumsMost famous song
    Buzzcocks19769Ever fallen in love (with someone you shouldn't've)
    The Clash19766London Calling
    The Damned197610Smash it up
    Sex Pistols19751Anarchy in the UK
    Sham 69197613If the kids are united
    Siouxsie and the Banshees197611Hong Kong Garden
    Stiff Little Fingers197710Suspect Device
    The Stranglers197417No More Heroes
    Total albums77
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + A summary of the UK's most famous punk bands +
    BandYear formedNo. of AlbumsMost famous song
    Buzzcocks19769Ever fallen in love (with someone you shouldn't've)
    The Clash19766London Calling
    The Damned197610Smash it up
    Sex Pistols19751Anarchy in the UK
    Sham 69197613If the kids are united
    Siouxsie and the Banshees197611Hong Kong Garden
    Stiff Little Fingers197710Suspect Device
    The Stranglers197417No More Heroes
    Total albums77
    - + - +
    diff --git a/learn/tasks/values/color-download.html b/learn/tasks/values/color-download.html index 8f7107f9..b2aa4347 100644 --- a/learn/tasks/values/color-download.html +++ b/learn/tasks/values/color-download.html @@ -1,14 +1,18 @@ - + - + Values and Units Task 1: color values - - - - \ No newline at end of file + diff --git a/learn/tasks/values/color.html b/learn/tasks/values/color.html index 912b22a6..582c6678 100644 --- a/learn/tasks/values/color.html +++ b/learn/tasks/values/color.html @@ -1,53 +1,49 @@ - + Values and Units Task 1: color values
    -
      -
    • hex color
      • -
    • RGB color
      • -
    • HSL color
      • -
    • Alpha value 0.6
      • -
    +
      +
    • hex color
      • +
    • RGB color
      • +
    • HSL color
      • +
    • Alpha value 0.6
      • +
    - +} - +
    diff --git a/learn/tasks/values/length-download.html b/learn/tasks/values/length-download.html index 78379145..44e7a81a 100644 --- a/learn/tasks/values/length-download.html +++ b/learn/tasks/values/length-download.html @@ -1,39 +1,46 @@ - + - + Values and Units Task 1: length values -

    Level 1 heading

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    Level 2 heading

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette + tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. + Dandelion cucumber earthnut pea peanut soko zucchini. +

    - - \ No newline at end of file + diff --git a/learn/tasks/values/length.html b/learn/tasks/values/length.html index 616c26ae..71b2cb3f 100644 --- a/learn/tasks/values/length.html +++ b/learn/tasks/values/length.html @@ -1,28 +1,22 @@ - + Values and Units Task 1: length values - + @@ -30,12 +24,19 @@

    Level 1 heading

    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    Level 2 heading

    -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    +

    + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot + courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

    - +} - +

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    diff --git a/learn/tasks/values/marking.md b/learn/tasks/values/marking.md index 147c95de..331b09fc 100644 --- a/learn/tasks/values/marking.md +++ b/learn/tasks/values/marking.md @@ -43,7 +43,7 @@ p { h1+p { font-size: 120%; -} +} ``` ## Task 3 position diff --git a/learn/tasks/values/position-download.html b/learn/tasks/values/position-download.html index e5640307..d18847ae 100644 --- a/learn/tasks/values/position-download.html +++ b/learn/tasks/values/position-download.html @@ -1,14 +1,18 @@ - + - + Values and Units Task 3: position values - -
    - - - \ No newline at end of file + diff --git a/learn/tasks/values/position.html b/learn/tasks/values/position.html index f6ddaf58..87fef11e 100644 --- a/learn/tasks/values/position.html +++ b/learn/tasks/values/position.html @@ -1,15 +1,15 @@ - + Values and Units Task 3: position values
    -
    - -
    +
    - +} - +
    diff --git a/learn/tasks/writing-modes/logical-mbp-download.html b/learn/tasks/writing-modes/logical-mbp-download.html index 8d405934..505d2051 100644 --- a/learn/tasks/writing-modes/logical-mbp-download.html +++ b/learn/tasks/writing-modes/logical-mbp-download.html @@ -1,14 +1,18 @@ - + - + Writing Modes Task 3: Logical Margin, Border, Padding - + @@ -21,7 +21,6 @@ padding-top: 40px; margin-bottom: 30px; } - @@ -31,7 +30,7 @@
    Vertical.
    - +} - +
    Vertical.
    diff --git a/learn/tasks/writing-modes/logical-width-height-download.html b/learn/tasks/writing-modes/logical-width-height-download.html index 8b66cbdf..381f3897 100644 --- a/learn/tasks/writing-modes/logical-width-height-download.html +++ b/learn/tasks/writing-modes/logical-width-height-download.html @@ -1,14 +1,18 @@ - + - + Writing Modes Task 2: Logical width and height - + @@ -19,7 +19,6 @@ width: 200px; height: 100px; } - @@ -29,7 +28,7 @@
    Vertical.
    - +} - +
    Vertical.
    diff --git a/learn/tasks/writing-modes/writing-mode-download.html b/learn/tasks/writing-modes/writing-mode-download.html index 03e544ff..6ef614d8 100644 --- a/learn/tasks/writing-modes/writing-mode-download.html +++ b/learn/tasks/writing-modes/writing-mode-download.html @@ -1,14 +1,18 @@ - + - + Writing Modes Task 1: The writing-mode property - + - + - +
    -
    +
    - +} - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/learn/writing-modes/block-inline.html b/learn/writing-modes/block-inline.html index dc4a9189..fd5d8829 100644 --- a/learn/writing-modes/block-inline.html +++ b/learn/writing-modes/block-inline.html @@ -1,4 +1,4 @@ - + @@ -15,7 +15,7 @@ .box { border: 1px solid #ccc; - padding: .5em; + padding: 0.5em; margin: 10px; } @@ -28,7 +28,6 @@ .vertical { writing-mode: vertical-rl; } - @@ -46,17 +45,16 @@

    Heading

    - +} - +
    diff --git a/learn/writing-modes/float.html b/learn/writing-modes/float.html index 61046fbd..568d8fb6 100644 --- a/learn/writing-modes/float.html +++ b/learn/writing-modes/float.html @@ -1,4 +1,4 @@ - + @@ -15,7 +15,7 @@ .box { margin: 10px; - padding: .5em; + padding: 0.5em; border: 1px solid #ccc; } @@ -26,12 +26,11 @@ writing-mode: horizontal-tb; } - img{ + img { float: inline-start; margin-inline-end: 10px; margin-block-end: 10px; } - @@ -39,13 +38,16 @@
    - star -

    This box uses logical properties. The star image has been floated inline-start, it also has a margin on the inline-end and block-end.

    + star +

    + This box uses logical properties. The star image has been floated + inline-start, it also has a margin on the inline-end and block-end. +

    - +} - +
    diff --git a/learn/writing-modes/inline-size.html b/learn/writing-modes/inline-size.html index c51a3f4f..f7452935 100644 --- a/learn/writing-modes/inline-size.html +++ b/learn/writing-modes/inline-size.html @@ -1,4 +1,4 @@ - + @@ -15,7 +15,7 @@ .box { border: 1px solid #ccc; - padding: .5em; + padding: 0.5em; margin: 10px; } @@ -32,8 +32,6 @@ .vertical { writing-mode: vertical-rl; } - - @@ -53,7 +51,7 @@

    Heading

    - +} - +
    diff --git a/learn/writing-modes/logical-mbp.html b/learn/writing-modes/logical-mbp.html index cf750e4e..828e960c 100644 --- a/learn/writing-modes/logical-mbp.html +++ b/learn/writing-modes/logical-mbp.html @@ -1,4 +1,4 @@ - + @@ -65,7 +65,7 @@

    Logical Properties

    - +} - +
    diff --git a/learn/writing-modes/simple-vertical.html b/learn/writing-modes/simple-vertical.html index 28e53703..2ea4a52f 100644 --- a/learn/writing-modes/simple-vertical.html +++ b/learn/writing-modes/simple-vertical.html @@ -1,4 +1,4 @@ - + @@ -20,7 +20,6 @@ h1 { writing-mode: vertical-rl; } - @@ -29,15 +28,15 @@

    Play with writing modes

    - +} - +
    diff --git a/learn/writing-modes/width.html b/learn/writing-modes/width.html index 44e05b37..662c6517 100644 --- a/learn/writing-modes/width.html +++ b/learn/writing-modes/width.html @@ -1,4 +1,4 @@ - + @@ -15,7 +15,7 @@ .box { border: 1px solid #ccc; - padding: .5em; + padding: 0.5em; margin: 10px; } @@ -32,8 +32,6 @@ .vertical { writing-mode: vertical-rl; } - - @@ -53,7 +51,7 @@

    Heading

    - +} - +
    diff --git a/logical/border-longhands.html b/logical/border-longhands.html index 0dd9da64..f2f77aaa 100644 --- a/logical/border-longhands.html +++ b/logical/border-longhands.html @@ -1,105 +1,98 @@ - + - + Border Properties - + - + - +
    -
    -
    - Borders use physical properties. -
    +
    +
    Borders use physical properties.
    -
    - Borders use logical properties. -
    -
    +
    Borders use logical properties.
    +
    - + border-block-start: 2px solid hotpink; + border-inline-end-style: dotted; + border-inline-end-color: goldenrod; + border-inline-end-width: 5px; + border-block-end: 4px double black; + border-inline-start: none; +} - +
    +
    + Borders use logical properties. +
    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/logical/float.html b/logical/float.html index fa9eefd8..b8327c1b 100644 --- a/logical/float.html +++ b/logical/float.html @@ -1,91 +1,89 @@ - + - + logical values for float - + - + - +
    -
    -
    -
    - Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach - avocado daikon napa cabbage asparagus winter purslane kale. -
    -
    - Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water - spinach - avocado daikon napa cabbage asparagus winter purslane kale. -
    -
    +
    +
    +
    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus + winter purslane kale. +
    +
    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea + lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage + asparagus winter purslane kale. +
    +
    +
    - + float: inline-start; +} - - +
    - +
    - - - - \ No newline at end of file + + + diff --git a/logical/intro-feature-queries.html b/logical/intro-feature-queries.html index b548b73d..6143d132 100644 --- a/logical/intro-feature-queries.html +++ b/logical/intro-feature-queries.html @@ -1,64 +1,64 @@ - + - + Feature Queries - + - + - +
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    - +} - - +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/logical/intro-grid-example.html b/logical/intro-grid-example.html index dfc0ff98..a7d7ecdb 100644 --- a/logical/intro-grid-example.html +++ b/logical/intro-grid-example.html @@ -1,74 +1,71 @@ - + - + Grid and writing modes example - + - + - +
    -
    -
    One
    -
    Two
    -
    Three
    -
    Four
    -
    +
    +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    - + writing-mode: vertical-rl; + inline-size: 400px; +} - - +
    One
    +
    Two
    +
    Three
    +
    Four
    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/logical/margin-longhands.html b/logical/margin-longhands.html index 4c01f857..99dea384 100644 --- a/logical/margin-longhands.html +++ b/logical/margin-longhands.html @@ -1,120 +1,116 @@ - + - + Margin Longhands - + - + - +
    -
    -
    -
    - margin-top: 5px
    - margin-right: 0
    - margin-bottom: 2em
    - margin-left: 50px -
    -
    -
    -
    - margin-block-start: 5px
    - margin-inline-end: 0
    - margin-block-end: 2em
    - margin-inline-start: 50px -
    -
    +
    +
    +
    + margin-top: 5px
    + margin-right: 0
    + margin-bottom: 2em
    + margin-left: 50px +
    +
    +
    + margin-block-start: 5px
    + margin-inline-end: 0
    + margin-block-end: 2em
    + margin-inline-start: 50px +
    +
    +
    - + margin-block-start: 5px; + margin-inline-end: 0; + margin-block-end: 2em; + margin-inline-start: 50px; +} - - + +
    - +
    - - - - \ No newline at end of file + + + diff --git a/logical/padding-longhands.html b/logical/padding-longhands.html index c2809ec0..1c482a96 100644 --- a/logical/padding-longhands.html +++ b/logical/padding-longhands.html @@ -1,111 +1,107 @@ - + - + Padding Longhands - + - + - +
    -
    -
    - padding-top: 5px
    - padding-right: 0
    - padding-bottom: 2em
    - padding-left: 50px -
    +
    +
    + padding-top: 5px
    + padding-right: 0
    + padding-bottom: 2em
    + padding-left: 50px +
    -
    - padding-block-start: 5px
    - padding-inline-end: 0
    - padding-block-end: 2em
    - padding-inline-start: 50px -
    +
    + padding-block-start: 5px
    + padding-inline-end: 0
    + padding-block-end: 2em
    + padding-inline-start: 50px
    +
    - + padding-block-start: 5px; + padding-inline-end: 0; + padding-block-end: 2em; + padding-inline-start: 50px; +} - +
    + padding-top: 5px
    + padding-right: 0
    + padding-bottom: 2em
    + padding-left: 50px +
    +
    + padding-block-start: 5px
    + padding-inline-end: 0
    + padding-block-end: 2em
    + padding-inline-start: 50px +
    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/logical/positioning-inset.html b/logical/positioning-inset.html index b04ca9c9..8d09853c 100644 --- a/logical/positioning-inset.html +++ b/logical/positioning-inset.html @@ -1,99 +1,95 @@ - + - + inset properties for positioning - + - + - +
    -
    -
    -
    -
    -
    -
    -
    +
    +
    +
    +
    +
    +
    +
    +
    - + position: absolute; + inset-block-start: 20px; + inset-inline-end: 0; +} - - +
    +
    +
    +
    +
    +
    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/logical/size-inline-block.html b/logical/size-inline-block.html index 7cbaafbe..b98315f2 100644 --- a/logical/size-inline-block.html +++ b/logical/size-inline-block.html @@ -1,59 +1,56 @@ - + - + Size: inline-size and block-size - + - + - +
    -
    -
    - I have a width of 200px and a height of 100px. -
    +
    +
    + I have a width of 200px and a height of 100px. +
    -
    - I have an inline-size of 200px and a block-size of 100px. -
    +
    + I have an inline-size of 200px and a block-size of 100px.
    +
    - + inline-size: 200px; + block-size: 100px; +} - +
    + I have a width of 200px and a height of 100px. +
    +
    + I have an inline-size of 200px and a block-size of 100px. +
    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/logical/size-max.html b/logical/size-max.html index 599f830b..f84a81a8 100644 --- a/logical/size-max.html +++ b/logical/size-max.html @@ -1,84 +1,76 @@ - + - + Size: max-inline-size - + - + - +
    -
    -
    - I have a max-width of 200px. -
    +
    +
    I have a max-width of 200px.
    -
    - I have an max-inline-size of 200px. -
    -
    +
    I have an max-inline-size of 200px.
    +
    - + max-inline-size: 200px; +} - +
    + I have a max-width of 200px. +
    +
    + I have an max-inline-size of 200px. +
    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/logical/size-min.html b/logical/size-min.html index 6ea74dda..9b2c6955 100644 --- a/logical/size-min.html +++ b/logical/size-min.html @@ -1,88 +1,84 @@ - + - + Size: min-block-size - + - + - +
    -
    -
    - I have a width of 200px and a height of 100px. -
    +
    +
    + I have a width of 200px and a height of 100px. +
    -
    - I have an inline-size of 200px and a min-block-size of 5em. -
    +
    + I have an inline-size of 200px and a min-block-size of 5em.
    +
    - + inline-size: 200px; + min-block-size: 5em; +} - +
    + I have a width of 200px and a min-height of 5em. +
    +
    + I have an inline-size of 200px and a min-block-size of 5em. +
    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/logical/size-resize.html b/logical/size-resize.html index 54f34586..a887d52d 100644 --- a/logical/size-resize.html +++ b/logical/size-resize.html @@ -1,62 +1,61 @@ - + - + Size: the resize property - + - + - +
    -
    -
    - I have a width of 200px and a height of 100px. I can be resized horizontally. -
    +
    +
    + I have a width of 200px and a height of 100px. I can be resized + horizontally. +
    -
    - I have an inline-size of 200px and a block-size of 100px. I can be resized in the inline direction. -
    +
    + I have an inline-size of 200px and a block-size of 100px. I can be + resized in the inline direction.
    +
    - + inline-size: 200px; + block-size: 100px; + resize: inline; +} - +
    + I have a width of 200px and a height of 100px. I can be resized horizontally. +
    +
    + I have an inline-size of 200px and a block-size of 100px. I can be resized in the inline direction. +
    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/logical/text-align.html b/logical/text-align.html index ea343e01..d21f6e4f 100644 --- a/logical/text-align.html +++ b/logical/text-align.html @@ -1,80 +1,73 @@ - + - + text-align logical values - + - + - +
    -
    -
    - Aligned text -
    -
    - Aligned text -
    -
    +
    +
    Aligned text
    +
    Aligned text
    +
    - + text-align: end; +} - - +
    + Aligned text +
    +
    + Aligned text +
    +
    - +
    - - - - \ No newline at end of file + + + diff --git a/masking/mask-border.html b/masking/mask-border.html index c8a4510b..2202e9b1 100644 --- a/masking/mask-border.html +++ b/masking/mask-border.html @@ -1,143 +1,134 @@ - + - - - - Masking: the mask-origin property - - - + + + + +
    +
    + This element is surrounded by a bitmap-based mask border! Pretty neat, + isn't it? +
    +
    + + - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/masking/mask-clip.html b/masking/mask-clip.html index aa2707e4..09567db9 100644 --- a/masking/mask-clip.html +++ b/masking/mask-clip.html @@ -1,90 +1,88 @@ - + - - - - Masking: the mask-clip property - - - - - - -
    -
    -
    - -
    - - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/masking/mask-composite.html b/masking/mask-composite.html index 2e33236a..cef0408c 100644 --- a/masking/mask-composite.html +++ b/masking/mask-composite.html @@ -1,69 +1,88 @@ - + - - - - Masking: the mask-origin property - - - + + + + +
    +
    +
    + + + +
    +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/masking/mask-image.html b/masking/mask-image.html index 9e4563e9..da0bee0b 100644 --- a/masking/mask-image.html +++ b/masking/mask-image.html @@ -1,124 +1,118 @@ - + - - - - Masking: the mask-image property - - - + + + + +
    +
    +
    + + + +
    +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/masking/mask-mode.html b/masking/mask-mode.html index 6142c442..606e8cdf 100644 --- a/masking/mask-mode.html +++ b/masking/mask-mode.html @@ -1,128 +1,122 @@ - + - - - - Masking: the mask-mode property - - - + + + + +
    +
    +
    + + + +
    +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/masking/mask-origin.html b/masking/mask-origin.html index 7e61cb79..7196af3b 100644 --- a/masking/mask-origin.html +++ b/masking/mask-origin.html @@ -1,129 +1,124 @@ - + - - - - Masking: the mask-origin property - - - - - - -
    -
    -
    - -
    - - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/masking/mask-position.html b/masking/mask-position.html index 0fa67e17..326cf4c1 100644 --- a/masking/mask-position.html +++ b/masking/mask-position.html @@ -1,92 +1,94 @@ - + - - - - Masking: the mask-position property - - - - - - -
    -
    + + + + Masking: the mask-position property + + + + + + +
    +
    -
    -
    +
    +
    - - -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/masking/mask-repeat.html b/masking/mask-repeat.html index 879dd0ca..098d0579 100644 --- a/masking/mask-repeat.html +++ b/masking/mask-repeat.html @@ -1,127 +1,122 @@ - + - - - - Masking: the mask-origin property - - - + + + + +
    +
    +
    + + + +
    +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/masking/mask-size.html b/masking/mask-size.html index 1af2d9a7..4f88f497 100644 --- a/masking/mask-size.html +++ b/masking/mask-size.html @@ -1,127 +1,122 @@ - + - - - - Masking: the mask-origin property - - - + + + + +
    +
    +
    + + + +
    +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/min-max-clamp/index.html b/min-max-clamp/index.html index 540456df..63897c81 100644 --- a/min-max-clamp/index.html +++ b/min-max-clamp/index.html @@ -1,4 +1,4 @@ - + @@ -16,7 +16,7 @@ h1 { letter-spacing: 2px; - font-size: clamp(1.8rem, 2.5vw, 2.8rem) + font-size: clamp(1.8rem, 2.5vw, 2.8rem); } p { @@ -27,8 +27,29 @@

    Simple responsive test

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci, eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula. Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis, libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit. Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum. Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.

    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci, + eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas + erat eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at + ligula. Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce + iaculis, libero quis elementum viverra, nulla ante accumsan lectus, sit + amet convallis lacus ipsum vel est. Curabitur et urna non est consectetur + pulvinar vel id risus. Ut vestibulum, sem in semper aliquet, felis arcu + euismod sapien, ac imperdiet massa nisl quis sem. Vestibulum ac elementum + felis, in tempor velit. Pellentesque purus ex, mattis at ornare quis, + porta condimentum mi. Donec vestibulum ligula vel nulla blandit, quis + euismod nulla vestibulum. Suspendisse potenti. Nunc neque mauris, tempor + sed facilisis at, ultrices eget nulla. Pellentesque convallis ante nec + augue porttitor, id tempus ante luctus. +

    -

    Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.

    +

    + Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. + Nunc eu facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus + at, pharetra quam. Cras feugiat vulputate tortor at rhoncus. Class aptent + taciti sociosqu ad litora torquent per conubia nostra, per inceptos + himenaeos. Nam non felis quis sem lobortis sodales vel id libero. + Phasellus sit amet placerat lorem. +

    diff --git a/modules/animation.html b/modules/animation.html index fd7f2a56..68e85a12 100644 --- a/modules/animation.html +++ b/modules/animation.html @@ -1,4 +1,4 @@ - + @@ -138,11 +138,12 @@ height: 150px; background: #ffffff; border-radius: 0 0 90px 33% / 0 0 45px 50px; - box-shadow: - 5px 15px 15px white, - -5px 15px 15px white, - 0 20px 20px rgba(125 125 125 / 0.5); - animation: clouds ease 5s alternate infinite 0.2s, + box-shadow: + 5px 15px 15px white, + -5px 15px 15px white, + 0 20px 20px rgba(125 125 125 / 0.5); + animation: + clouds ease 5s alternate infinite 0.2s, wind ease-out 4s alternate infinite; } .ground { @@ -196,7 +197,7 @@ div[class] { animation-play-state: paused; } - /* When the div is hovered, the animation plays. Also, + /* When the div is hovered, the animation plays. Also, when the input is checked, the animation coming after the checked checkbox plays */ div:hover *, input:checked ~ div * { diff --git a/modules/backgrounds.html b/modules/backgrounds.html index ad5d680f..6f9923b0 100644 --- a/modules/backgrounds.html +++ b/modules/backgrounds.html @@ -1,4 +1,4 @@ - + @@ -28,11 +28,13 @@ /* the third transparent background image was added to provide space for the background color to show through */ background-color: currentcolor; background-position: center; - background-size: 60px 60px, 120px 120px; + background-size: + 60px 60px, + 120px 120px; background-clip: content-box, content-box, padding-box; - box-shadow: + box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.4), - inset -5px -5px 5px rgba(0, 0, 0, 0.4), + inset -5px -5px 5px rgba(0, 0, 0, 0.4), 5px 5px 5px rgba(0, 0, 0, 0.4), -5px -5px 5px rgba(0, 0, 0, 0.4); } diff --git a/modules/basicUI.html b/modules/basicUI.html index 58eab64c..1f2bd488 100644 --- a/modules/basicUI.html +++ b/modules/basicUI.html @@ -1,4 +1,4 @@ - + @@ -50,13 +50,16 @@ Be careful not to ruin usability: try resizing these. + + + diff --git a/modules/colors.html b/modules/colors.html index 1974bbae..d15c47d6 100644 --- a/modules/colors.html +++ b/modules/colors.html @@ -1,4 +1,4 @@ - + @@ -41,7 +41,9 @@ black 180deg 270deg, transparent 270deg 360deg ); - background-size: 100% 100%, 20px 20px; + background-size: + 100% 100%, + 20px 20px; padding: 0; margin: 0; } @@ -164,8 +166,7 @@ h = ((g - b) / delta) % 6; } else if (cmax === g) { h = (b - r) / delta + 2; - } - else h = (r - g) / delta + 4; + } else h = (r - g) / delta + 4; h = Math.round(h * 60); @@ -175,7 +176,7 @@ } l = (cmax + cmin) / 2; - s = (delta === 0) ? 0 : delta / (1 - Math.abs(2 * l - 1)); + s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); s = Number((s * 100).toFixed(1)); l = Number((l * 100).toFixed(1)); @@ -189,7 +190,7 @@ function createHWB(h, s, l, opacity) { const cell = document.querySelector("#HWB td"); - const chroma = s * (1 - Math.abs(l/50 - 1)); + const chroma = s * (1 - Math.abs(l / 50 - 1)); let W = l - chroma / 2; let B = 100 - l - chroma / 2; W = W.toFixed(1); diff --git a/modules/compositing.html b/modules/compositing.html index fd739b15..79f0d4d4 100644 --- a/modules/compositing.html +++ b/modules/compositing.html @@ -1,4 +1,4 @@ - + diff --git a/modules/filters.html b/modules/filters.html index b6af49fe..fa9c14bd 100644 --- a/modules/filters.html +++ b/modules/filters.html @@ -1,4 +1,4 @@ - + @@ -171,7 +171,7 @@ /* do function */ changeCSS(); }, - false + false, ); } document.querySelector("button").addEventListener( @@ -181,7 +181,7 @@ changeCSS(); }, 50); }, - false + false, ); function changeCSS() { @@ -227,9 +227,7 @@ } function hueRotate() { let hueRotateValue = document.getElementsByName("hueRotate")[0].value; - return hueRotateValue == 0 - ? "" - : `hue-rotate(${hueRotateValue}turn) `; + return hueRotateValue == 0 ? "" : `hue-rotate(${hueRotateValue}turn) `; } function invert() { let invertValue = document.getElementsByName("invert")[0].value; diff --git a/modules/generated_content.html b/modules/generated_content.html index 7dc529dd..da599e48 100644 --- a/modules/generated_content.html +++ b/modules/generated_content.html @@ -1,58 +1,105 @@ - + Generated content diff --git a/modules/multicol.html b/modules/multicol.html index 6c79ee8f..443a56e1 100644 --- a/modules/multicol.html +++ b/modules/multicol.html @@ -1,4 +1,4 @@ - + diff --git a/modules/overflow.html b/modules/overflow.html index 5bbca06e..e0133503 100644 --- a/modules/overflow.html +++ b/modules/overflow.html @@ -1,4 +1,4 @@ - + @@ -130,15 +130,15 @@ Oh, Rubber Duckie, you're the one You make bath time lots of fun Rubber Duckie, I'm awfully fond of you - + Rubber Duckie, joy of joys When I squeeze you, you make noise Rubber Duckie, you're my very best friend, it's true - + Oh, every day when I make my way to the tubby I find a little fella who's cute and yellow and chubby Rub-a-dub-dubby - + Rubber Duckie, you're so fine And I'm lucky that you're mine Rubber Duckie, I'm awfully fond of you diff --git a/modules/scroll_snap.html b/modules/scroll_snap.html index d6807c29..b095079d 100644 --- a/modules/scroll_snap.html +++ b/modules/scroll_snap.html @@ -1,4 +1,4 @@ - + @@ -6,15 +6,15 @@ Scroll snap - - + - + + fill='context-stroke' stroke='context-fill red'/>" + /> diff --git a/multicol/balancing/auto.html b/multicol/balancing/auto.html index 15cca0ae..b7307a94 100644 --- a/multicol/balancing/auto.html +++ b/multicol/balancing/auto.html @@ -1,134 +1,134 @@ - + - - - - Multicol example - auto - - + + + + +
    +
    + balloons + +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

    - section input { - display: block; - margin: 5px; - } - img { - max-width: 100%; -} - - - - - - -
    -
    - balloons - -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    -

    Gumbo beet greens corn soko endive gumbo gourd.

    - - -
    - -
    - - + -
    - -
    - - + +
    +
    + +
    + + diff --git a/multicol/balancing/balance.html b/multicol/balancing/balance.html index b1706b90..4ad545f4 100644 --- a/multicol/balancing/balance.html +++ b/multicol/balancing/balance.html @@ -1,134 +1,135 @@ - + - - - - Multicol example - balancing - - - - - - -
    -
    - balloons - -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion.

    - - -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/multicol/basics/column-count-width.html b/multicol/basics/column-count-width.html index aaafcb9c..03a340f7 100644 --- a/multicol/basics/column-count-width.html +++ b/multicol/basics/column-count-width.html @@ -1,124 +1,136 @@ - + - - - - Multicol example - column-count and column-width - - - - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/multicol/basics/column-count.html b/multicol/basics/column-count.html index afa30a61..d60b94dc 100644 --- a/multicol/basics/column-count.html +++ b/multicol/basics/column-count.html @@ -1,122 +1,134 @@ - + - - - - Multicol example - column-count - - - - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/multicol/basics/column-width.html b/multicol/basics/column-width.html index 3501b2ff..aeb5ea47 100644 --- a/multicol/basics/column-width.html +++ b/multicol/basics/column-width.html @@ -1,122 +1,134 @@ - + - - - - Multicol example - column-width - - - - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/multicol/fragmentation/break-before.html b/multicol/fragmentation/break-before.html index 3f6de2c5..ea50c28b 100644 --- a/multicol/fragmentation/break-before.html +++ b/multicol/fragmentation/break-before.html @@ -1,155 +1,159 @@ - + - - - - Multicol example - break-before - - - + - - - -
    -
    - -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon.

    + } + + + + +
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon. +

    My heading

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce.

    - - -
    -
    - - + -
    - -
    - - +

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon.

    + +

    My heading

    + +

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    + +

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce.

    + + +
    +
    + +
    + + diff --git a/multicol/fragmentation/break-inside.html b/multicol/fragmentation/break-inside.html index 34282561..c6ec0578 100644 --- a/multicol/fragmentation/break-inside.html +++ b/multicol/fragmentation/break-inside.html @@ -1,149 +1,154 @@ - + - - - - Multicol example - break-inside - - - + - + } + + - -
    -
    + +
    +
    - balloons -
    Balloons
    + balloons +
    Balloons
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.

    - - -
    - -
    - - + -
    - -
    - - + +
    +
    + +
    + + diff --git a/multicol/fragmentation/orphans.html b/multicol/fragmentation/orphans.html index 0d85184a..a52ae999 100644 --- a/multicol/fragmentation/orphans.html +++ b/multicol/fragmentation/orphans.html @@ -1,148 +1,149 @@ - + - - - - Multicol example - orphans - - - - - - -
    -
    - -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce.

    - - -
    - -
    - + - +
    + +
    + + + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/multicol/overflow/image-max-width.html b/multicol/overflow/image-max-width.html index a6d7b916..337969ee 100644 --- a/multicol/overflow/image-max-width.html +++ b/multicol/overflow/image-max-width.html @@ -1,132 +1,144 @@ - + - - - - Multicol example - image with max-width - - - + - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - - balloons - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    -
    - -
    - - + -
    - -
    - - + +
    + +
    + + diff --git a/multicol/overflow/image.html b/multicol/overflow/image.html index 42d9f057..c1cdba3a 100644 --- a/multicol/overflow/image.html +++ b/multicol/overflow/image.html @@ -1,126 +1,138 @@ - + - - - - Multicol example - image overflow - - - - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - - balloons - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    -
    - -
    - - + -
    - -
    - - + +
    + +
    + + diff --git a/multicol/overflow/min-height.html b/multicol/overflow/min-height.html index 614bdcb0..38a5a4c2 100644 --- a/multicol/overflow/min-height.html +++ b/multicol/overflow/min-height.html @@ -1,126 +1,138 @@ - + - - - - Multicol example - min-height media query - - - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    + .playable-buttons { + text-align: right; + width: 90%; + max-width: 700px; + padding: 5px 10px 5px 26px; + font-size: 100%; + } -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    -
    + section { + width: 90%; + max-width: 700px; + border: 1px solid #4d4e53; + border-radius: 2px; + padding: 10px 14px 10px 10px; + margin-bottom: 10px; + } -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/multicol/overflow/overflow-inline.html b/multicol/overflow/overflow-inline.html index 1e318096..c3cefef2 100644 --- a/multicol/overflow/overflow-inline.html +++ b/multicol/overflow/overflow-inline.html @@ -1,124 +1,136 @@ - + - - - - Multicol example - inline overflow - - - - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/multicol/spanning/h2-span.html b/multicol/spanning/h2-span.html index e8d04a54..56877bda 100644 --- a/multicol/spanning/h2-span.html +++ b/multicol/spanning/h2-span.html @@ -1,137 +1,150 @@ - + - - - - Multicol example - h2 spanning element - - - + - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd.

    + } + + + + +
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo + beet greens corn soko endive gumbo gourd. +

    A heading

    -

    Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    -
    - -
    - - + -
    - -
    - - +
    +
    + +
    + + diff --git a/multicol/spanning/mpb-span.html b/multicol/spanning/mpb-span.html index afe35515..b1a02d20 100644 --- a/multicol/spanning/mpb-span.html +++ b/multicol/spanning/mpb-span.html @@ -1,147 +1,159 @@ - + - - - - Multicol example - broken border and padding - - - + - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd.

    + } + + + + +
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo + beet greens corn soko endive gumbo gourd. +

    -

    A heading

    - -

    Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    +

    A heading

    + +

    + Parsley shallot courgette tatsoi pea sprouts fava bean collard + greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea + peanut soko zucchini. +

    + +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea + lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage + asparagus winter purslane kale. Celery potato scallion desert raisin + horseradish spinach carrot soko. +

    -
    - -
    - - + -
    - -
    - - +
    +
    + +
    + + diff --git a/multicol/spanning/nested-h2-span.html b/multicol/spanning/nested-h2-span.html index a4e0b93f..5051643f 100644 --- a/multicol/spanning/nested-h2-span.html +++ b/multicol/spanning/nested-h2-span.html @@ -1,139 +1,152 @@ - + - - - - Multicol example - h2 spanning element inside article - - - + - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd.

    + } + + + + +
    +
    +

    + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh + onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo + beet greens corn soko endive gumbo gourd. +

    -

    A heading

    - -

    Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    +

    A heading

    + +

    + Parsley shallot courgette tatsoi pea sprouts fava bean collard + greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea + peanut soko zucchini. +

    + +

    + Turnip greens yarrow ricebean rutabaga endive cauliflower sea + lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage + asparagus winter purslane kale. Celery potato scallion desert raisin + horseradish spinach carrot soko. +

    -
    - -
    - - + -
    - -
    - - +
    +
    + +
    + + diff --git a/multicol/styling/column-gap.html b/multicol/styling/column-gap.html index c4327c48..a9aeb873 100644 --- a/multicol/styling/column-gap.html +++ b/multicol/styling/column-gap.html @@ -1,124 +1,136 @@ - + - - - - Multicol example - column-gap - - - - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/multicol/styling/column-rule-wide.html b/multicol/styling/column-rule-wide.html index 74cb7170..2b7381c0 100644 --- a/multicol/styling/column-rule-wide.html +++ b/multicol/styling/column-rule-wide.html @@ -1,126 +1,138 @@ - + - - - - Multicol example - column-rule properties - - - - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/multicol/styling/column-rule.html b/multicol/styling/column-rule.html index a3484612..f9821a7b 100644 --- a/multicol/styling/column-rule.html +++ b/multicol/styling/column-rule.html @@ -1,128 +1,140 @@ - + - - - - Multicol example - column-rule properties - - - - - - -
    -
    -

    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.

    - -

    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

    - -

    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.

    -
    - -
    - - + -
    - -
    - - + reset.addEventListener("click", function () { + textareaHTML.value = htmlCode; + textareaCSS.value = cssCode; + fillCode(); + }); + textareaHTML.addEventListener("input", fillCode); + textareaCSS.addEventListener("input", fillCode); + window.addEventListener("load", fillCode); + diff --git a/object-fit-basics/index.html b/object-fit-basics/index.html index f3c2dcb6..271a5558 100644 --- a/object-fit-basics/index.html +++ b/object-fit-basics/index.html @@ -1,70 +1,128 @@ - + Object-fit basics - - + +

    Object fit basics

    -

    This page illustrates different object-fit settings. It is part of the Exploring object-fit Mozilla Hacks post.

    +

    + This page illustrates different object-fit settings. It is part of the + Exploring object-fit + Mozilla Hacks post. +

    object-fit: contain

    -

    with object-fit: contain, the image is letterboxed inside the image element, retaining its aspect ratio.

    +

    + with object-fit: contain, the image is letterboxed inside the + image element, retaining its aspect ratio. +

    - with object-fit contain, the image is trapped inside the image element, retaining aspect ratio. + with object-fit contain, the image is trapped inside the image element, retaining aspect ratio.

    object-fit: cover

    -

    with object-fit: cover, the image completely covers the image element — it is shown completely along the shortest dimension, and will be cut off in the other direction.

    +

    + with object-fit: cover, the image completely covers the image + element — it is shown completely along the shortest dimension, and will be + cut off in the other direction. +

    - with object-fit cover, the image completely covers the image element and is cropped along the longest dimension + with object-fit cover, the image completely covers the image element and is cropped along the longest dimension

    object-fit: fill

    -

    Object-fill: fill can override a video’s intrinsic aspect ratio, forcing it to completely fill the <video> element. This is good for correcting videos with broken aspect ratios.

    - -