From b97efcc16e89a6cd8e6c19a727ae499356ab7a8b Mon Sep 17 00:00:00 2001 From: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Thu, 7 Dec 2023 14:46:35 +0530 Subject: [PATCH 01/23] run prettier on html, css, and html files (#162) --- backdrop/index.html | 3 +- css-cookbook/list-group-badges.html | 3 +- css-text/hyphens.html | 3 +- css-text/inline-overflow-hidden.html | 5 +- css-text/inline-overflow.html | 3 +- css-text/min-content.html | 3 +- css-text/overflow-wrap.html | 3 +- css-text/wbr.html | 3 +- css-text/word-break-checkbox.html | 3 +- css-text/word-break.html | 3 +- editable-samples-2/css/editable.css | 20 +- editable-samples-2/css/prism.css | 82 ++-- editable-samples-2/js/editable.js | 20 +- .../pages/border-top-color/index.html | 25 +- editable-samples-2/pages/filter/index.html | 18 +- editable-samples-2/pages/font/css/element.css | 2 +- editable-samples-2/pages/font/index.html | 32 +- editable-samples-2/pages/transform/index.html | 22 +- editable-samples/codemirror/mode/css/gss.html | 2 +- .../codemirror/mode/css/index.html | 2 +- .../codemirror/mode/css/less.html | 8 +- .../codemirror/mode/css/scss.html | 2 +- editable-samples/css/editable-old.css | 2 +- editable-samples/css/editable.css | 16 +- editable-samples/js/editable-old.js | 53 +-- editable-samples/js/editable.js | 12 +- .../pages/border-top-color/index-old.html | 13 +- .../pages/border-top-color/index.html | 14 +- .../border-top-color/js/border-top-color.js | 2 +- editable-samples/pages/filter/index-old.html | 20 +- editable-samples/pages/filter/index.html | 21 +- editable-samples/pages/filter/js/filter.js | 2 +- editable-samples/pages/font/css/element.css | 2 +- editable-samples/pages/font/index-old.html | 36 +- editable-samples/pages/font/index.html | 44 +- editable-samples/pages/font/js/font.js | 2 +- .../pages/transform/index-old.html | 20 +- editable-samples/pages/transform/index.html | 21 +- .../pages/transform/js/transform.js | 2 +- feature-queries/not.html | 3 +- feature-queries/or.html | 3 +- feature-queries/simple.html | 3 +- feature-queries/step1.html | 3 +- feature-queries/step2.html | 3 +- feature-queries/step3.html | 3 +- feature-queries/step4.html | 3 +- flexbox/use-cases/label-input-button.html | 3 +- font-features/font-kerning.html | 6 +- font-features/font-variant-alternates.html | 6 +- font-features/font-variant-caps.html | 6 +- font-features/font-variant-east-asian.html | 38 +- font-features/font-variant-ligatures.html | 6 +- .../font-variant-numeric-example.html | 3 +- font-features/font-variant-numeric-frac.html | 6 +- font-features/font-variant-numeric.html | 6 +- font-features/font-variant-position.html | 6 +- font-features/font-variant.html | 6 +- grid/docs/autoplacement.html | 3 +- grid/masonry/inline-axis.html | 3 +- grid/masonry/justify-tracks.html | 3 +- grid/masonry/masonry-auto-flow.html | 3 +- grid/masonry/positioned.html | 3 +- grid/masonry/spanners.html | 9 +- grid/subgrid/adding-line-names.html | 3 +- grid/subgrid/both.html | 3 +- grid/subgrid/columns.html | 3 +- grid/subgrid/gap.html | 3 +- grid/subgrid/implicit.html | 3 +- grid/subgrid/line-names.html | 3 +- grid/subgrid/no-implicit.html | 3 +- grid/subgrid/rows.html | 3 +- howto/box-shadow-button.html | 3 +- howto/center.html | 3 +- howto/highlight_first_line.html | 3 +- howto/highlight_first_line2.html | 3 +- howto/highlight_first_para.html | 3 +- howto/highlight_h1_plus_para.html | 3 +- howto/object-fit.html | 3 +- howto/opacity.html | 3 +- howto/transition-button.html | 3 +- images/image-set-type.html | 3 +- images/image-set.html | 3 +- .../background-blend-mode.html | 3 +- .../backgrounds-borders/background-image.html | 3 +- learn/backgrounds-borders/background.html | 95 ++--- learn/backgrounds-borders/borders.html | 88 ++-- learn/backgrounds-borders/color.html | 88 ++-- learn/backgrounds-borders/corners.html | 3 +- learn/backgrounds-borders/gradients.html | 102 ++--- learn/backgrounds-borders/mix-blend-mode.html | 3 +- .../multiple-background-image.html | 3 +- learn/backgrounds-borders/position.html | 3 +- learn/backgrounds-borders/repeat.html | 3 +- learn/backgrounds-borders/size.html | 3 +- learn/box-model/border.html | 90 ++-- learn/box-model/box-models.html | 3 +- learn/box-model/inline-block-nav.html | 98 ++--- learn/box-model/margin-collapse.html | 3 +- learn/box-model/margin.html | 3 +- learn/box-model/padding.html | 3 +- learn/images/filter-text.html | 86 ++-- learn/images/layout.html | 3 +- learn/inspecting/inspecting.html | 132 +++--- learn/layers/layer-order.html | 3 +- learn/layers/layer-precedence.html | 3 +- learn/layers/media-order.html | 3 +- learn/media-queries/grid.html | 388 +++++++++--------- learn/media-queries/step1.html | 284 ++++++------- learn/media-queries/step2.html | 304 +++++++------- learn/media-queries/step3.html | 324 ++++++++------- learn/overflow/auto.html | 3 +- learn/overflow/block-overflow.html | 3 +- learn/overflow/hidden.html | 3 +- learn/overflow/inline-overflow.html | 3 +- learn/overflow/scroll-x.html | 3 +- learn/overflow/scroll-y.html | 3 +- learn/overflow/scroll.html | 3 +- learn/selectors/class-many.html | 3 +- learn/selectors/class.html | 3 +- learn/selectors/descendant.html | 3 +- learn/selectors/first-child.html | 3 +- learn/selectors/universal.html | 3 +- learn/sizing/height.html | 3 +- learn/sizing/intrinsic-text.html | 3 +- learn/sizing/max-width.html | 3 +- learn/sizing/min-height.html | 3 +- learn/sizing/percent-mp.html | 3 +- learn/sizing/percent-width.html | 3 +- learn/sizing/vw-vh.html | 3 +- learn/styles.css | 6 +- learn/tasks/box-model/box-models.html | 3 +- learn/tasks/box-model/inline-block.html | 3 +- learn/tasks/box-model/mbp.html | 3 +- learn/tasks/cascade/cascadelayer.html | 3 +- learn/tasks/float/float1.html | 3 +- learn/tasks/float/float2.html | 3 +- learn/tasks/float/float3-download.html | 92 ++--- learn/tasks/float/float3.html | 109 ++--- learn/tasks/grid/grid2-download.html | 106 +++-- learn/tasks/grid/grid2.html | 120 +++--- learn/tasks/images/form.html | 3 +- learn/tasks/multicol/multicol1.html | 3 +- learn/tasks/multicol/multicol2.html | 3 +- learn/tasks/overflow/overflow-hidden.html | 3 +- learn/tasks/overflow/overflow-scroll.html | 3 +- learn/tasks/position/position1-download.html | 94 +++-- learn/tasks/position/position1.html | 106 ++--- learn/tasks/position/position2-download.html | 138 +++---- learn/tasks/position/position2.html | 154 +++---- learn/tasks/sizing/height-min-height.html | 3 +- learn/tasks/sizing/percentages.html | 3 +- learn/tasks/styles.css | 6 +- learn/tasks/values/color.html | 3 +- learn/tasks/values/position.html | 3 +- learn/tasks/writing-modes/logical-mbp.html | 3 +- .../writing-modes/logical-width-height.html | 3 +- learn/tasks/writing-modes/writing-mode.html | 3 +- learn/values-units/color-hex.html | 3 +- learn/values-units/color-hsl.html | 90 ++-- learn/values-units/color-hsla.html | 3 +- learn/values-units/color-keywords.html | 3 +- learn/values-units/color-rgb.html | 3 +- learn/values-units/color-rgba.html | 98 ++--- learn/values-units/image.html | 96 ++--- learn/values-units/length.html | 3 +- learn/values-units/opacity.html | 3 +- learn/values-units/percentage.html | 3 +- learn/values-units/position.html | 3 +- learn/values-units/strings-idents.html | 3 +- learn/writing-modes/block-inline.html | 3 +- learn/writing-modes/inline-size.html | 3 +- learn/writing-modes/width.html | 3 +- logical/intro-feature-queries.html | 3 +- logical/intro-grid-example.html | 3 +- masking/mask-border.html | 3 +- masking/mask-composite.html | 3 +- masking/mask-origin.html | 3 +- masking/mask-repeat.html | 3 +- masking/mask-size.html | 3 +- modules/animation.html | 3 +- modules/colors.html | 3 +- modules/compositing.html | 10 +- modules/filters.html | 33 +- modules/multicol.html | 6 +- modules/scroll_snap.html | 6 +- moz-context-properties/index.html | 9 +- object-fit-basics/index.html | 28 +- overscroll-behavior/index.html | 3 +- target-text/index.html | 6 +- time/current.html | 3 +- time/future.html | 3 +- time/past.html | 3 +- tools/border-image-generator/index.html | 24 +- tools/border-radius-generator/index.html | 54 +-- tools/box-shadow-generator/index.html | 168 +++----- tools/color-picker/index.html | 3 +- variable-fonts/font-stretch.html | 3 +- variable-fonts/grade.html | 3 +- variable-fonts/italic.html | 3 +- variable-fonts/optical-sizing.html | 3 +- variable-fonts/slant.html | 167 ++++---- variable-fonts/weight.html | 3 +- variable-fonts/width.html | 3 +- 203 files changed, 2420 insertions(+), 2383 deletions(-) diff --git a/backdrop/index.html b/backdrop/index.html index 2d9d8474..61df9a65 100644 --- a/backdrop/index.html +++ b/backdrop/index.html @@ -20,8 +20,7 @@ controls src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217" - width="620" - > + width="620"> Sorry, your browser doesn't support embedded videos. Time to upgrade! diff --git a/css-cookbook/list-group-badges.html b/css-cookbook/list-group-badges.html index 88bc6dae..fb0a441f 100644 --- a/css-cookbook/list-group-badges.html +++ b/css-cookbook/list-group-badges.html @@ -72,7 +72,8 @@ display: flex; justify-content: space-between; align-items: center; -} +} +} +} - +} +} +} +} +} +} +
- London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill. Smoke lowering down from chimney-pots, making a soft black drizzle, with flakes of soot in it as big as full-grown snowflakes—gone into mourning, one might imagine, for the death of the sun. Dogs, undistinguishable in mire. Horses, scarcely better; splashed to their very blinkers. Foot passengers, jostling one another's umbrellas in a general infection of ill temper, and losing their foot-hold at street-corners, where tens of thousands of other foot passengers have been slipping and sliding since the day broke (if this day ever broke), adding new deposits to the crust upon crust of mud, sticking at those points tenaciously to the pavement, and accumulating at compound interest. + London. Michaelmas term lately over, and the Lord Chancellor sitting in + Lincoln's Inn Hall. Implacable November weather. As much mud in the + streets as if the waters had but newly retired from the face of the + earth, and it would not be wonderful to meet a Megalosaurus, forty feet + long or so, waddling like an elephantine lizard up Holborn Hill. Smoke + lowering down from chimney-pots, making a soft black drizzle, with + flakes of soot in it as big as full-grown snowflakes—gone into mourning, + one might imagine, for the death of the sun. Dogs, undistinguishable in + mire. Horses, scarcely better; splashed to their very blinkers. Foot + passengers, jostling one another's umbrellas in a general infection of + ill temper, and losing their foot-hold at street-corners, where tens of + thousands of other foot passengers have been slipping and sliding since + the day broke (if this day ever broke), adding new deposits to the crust + upon crust of mud, sticking at those points tenaciously to the pavement, + and accumulating at compound interest.
- + - - - + diff --git a/editable-samples/pages/font/js/font.js b/editable-samples/pages/font/js/font.js index 4390e579..87605075 100644 --- a/editable-samples/pages/font/js/font.js +++ b/editable-samples/pages/font/js/font.js @@ -1 +1 @@ -var cmInitContent = 'font: italic 1.5em cursive;\n\n'; +var cmInitContent = "font: italic 1.5em cursive;\n\n"; diff --git a/editable-samples/pages/transform/index-old.html b/editable-samples/pages/transform/index-old.html index 03b6db02..5c9bf751 100644 --- a/editable-samples/pages/transform/index-old.html +++ b/editable-samples/pages/transform/index-old.html @@ -1,20 +1,20 @@ - + - + - - - + + + - +
- +
@@ -26,10 +26,8 @@ - + - - - + diff --git a/editable-samples/pages/transform/index.html b/editable-samples/pages/transform/index.html index b79fe3ee..f646eca0 100644 --- a/editable-samples/pages/transform/index.html +++ b/editable-samples/pages/transform/index.html @@ -1,36 +1,33 @@ - + - + - - - + + + - + -
- +
- + - - - + diff --git a/editable-samples/pages/transform/js/transform.js b/editable-samples/pages/transform/js/transform.js index 2ed178fe..ff876721 100644 --- a/editable-samples/pages/transform/js/transform.js +++ b/editable-samples/pages/transform/js/transform.js @@ -1 +1 @@ -var cmInitContent = 'transform: skew(30deg, 20deg);\n\n'; +var cmInitContent = "transform: skew(30deg, 20deg);\n\n"; diff --git a/feature-queries/not.html b/feature-queries/not.html index dc5eda8b..19eca9bd 100644 --- a/feature-queries/not.html +++ b/feature-queries/not.html @@ -39,7 +39,8 @@ border: 4px solid red; color: red; } -} +} +} +} +} +} +} +} +} + checked />
@@ -213,8 +212,7 @@ name="demo2_control" id="demo2_control" value="on" - checked - /> + checked />
diff --git a/font-features/font-variant-numeric.html b/font-features/font-variant-numeric.html index 6951caca..36e0412a 100644 --- a/font-features/font-variant-numeric.html +++ b/font-features/font-variant-numeric.html @@ -161,8 +161,7 @@ name="demo1_control" id="demo1_control" value="on" - checked - /> + checked />
@@ -195,8 +194,7 @@ name="demo2_control" id="demo2_control" value="on" - checked - /> + checked />
diff --git a/font-features/font-variant-position.html b/font-features/font-variant-position.html index 0cac0e16..61751a62 100644 --- a/font-features/font-variant-position.html +++ b/font-features/font-variant-position.html @@ -165,8 +165,7 @@ name="demo1_control" id="demo1_control" value="on" - checked - /> + checked />
@@ -201,8 +200,7 @@ name="demo2_control" id="demo2_control" value="on" - checked - /> + checked />
diff --git a/font-features/font-variant.html b/font-features/font-variant.html index da690ed2..e697c355 100644 --- a/font-features/font-variant.html +++ b/font-features/font-variant.html @@ -152,8 +152,7 @@ name="demo1_control" id="demo1_control" value="on" - checked - /> + checked />
@@ -181,8 +180,7 @@ name="demo2_control" id="demo2_control" value="on" - checked - /> + checked />
diff --git a/grid/docs/autoplacement.html b/grid/docs/autoplacement.html index 8ae6ee09..eb60ecd9 100644 --- a/grid/docs/autoplacement.html +++ b/grid/docs/autoplacement.html @@ -65,7 +65,8 @@ .wrapper li.landscape { grid-column-end: span 2; -} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} - - - -
- -
- - - +} + + + +
+ +
+ + diff --git a/learn/backgrounds-borders/borders.html b/learn/backgrounds-borders/borders.html index 314439cf..53e1a9d1 100644 --- a/learn/backgrounds-borders/borders.html +++ b/learn/backgrounds-borders/borders.html @@ -1,45 +1,44 @@ + + + Backgrounds and Borders: border + + - .box { - width: 500px; - padding: 0.5em; - } - + + - h2 { - border-top: 2px dotted rebeccapurple; - border-bottom: 1em double rgb(24 163 78); - } - - + +
+
+

Borders

+

Try changing the borders.

+
+
- -
-
-

Borders

-

Try changing the borders.

-
-
- - +} - - -
- -
- - + +
+ +
+ + diff --git a/learn/backgrounds-borders/color.html b/learn/backgrounds-borders/color.html index bdbe199a..5b9bc9dd 100644 --- a/learn/backgrounds-borders/color.html +++ b/learn/backgrounds-borders/color.html @@ -1,46 +1,45 @@ + + + Backgrounds and Borders: background-color + + - .box { - width: 500px; - padding: 0.5em; - } - + + - span { - background-color: rgb(255 255 255 / 50%); - } - - + +
+
+

Background Colors

+

Try changing the background colors.

+
+
- -
-
-

Background Colors

-

Try changing the background colors.

-
-
- - +} - - -
- -
- - + +
+ +
+ + diff --git a/learn/backgrounds-borders/corners.html b/learn/backgrounds-borders/corners.html index a448dd8f..9fb32312 100644 --- a/learn/backgrounds-borders/corners.html +++ b/learn/backgrounds-borders/corners.html @@ -36,7 +36,8 @@

Borders

border: 10px solid rebeccapurple; border-radius: 1em; border-top-right-radius: 10% 30%; -} +} +} - - -
- -
- - + +
+ +
+ + diff --git a/learn/backgrounds-borders/mix-blend-mode.html b/learn/backgrounds-borders/mix-blend-mode.html index 1883c8a2..8bf90b50 100644 --- a/learn/backgrounds-borders/mix-blend-mode.html +++ b/learn/backgrounds-borders/mix-blend-mode.html @@ -78,7 +78,8 @@ .multiply-mix { mix-blend-mode: multiply; -} +} +} +} +} +} + + + Box Model: Borders + + - .box { - padding: 20px; - background-color: lightgray; - } - + + - .box { - border: 1px solid #333333; - border-top-style: dotted; - border-right-width: 20px; - border-bottom-color: hotpink; - } - - + +
+
+
Change my borders.
+
+
- -
-
-
Change my borders.
-
-
- - +} - - -
- -
- - + +
+ +
+ + diff --git a/learn/box-model/box-models.html b/learn/box-model/box-models.html index 4ccf23ef..d026bfc2 100644 --- a/learn/box-model/box-models.html +++ b/learn/box-model/box-models.html @@ -40,7 +40,8 @@ .alternate { box-sizing: border-box; -} +} +} - - -
- -
- - + +
+ +
+ + diff --git a/learn/box-model/margin-collapse.html b/learn/box-model/margin-collapse.html index 04383b50..c33419d8 100644 --- a/learn/box-model/margin-collapse.html +++ b/learn/box-model/margin-collapse.html @@ -43,7 +43,8 @@ .two { margin-top: 30px; -} +} +} +} +} - - -
- -
- - +

Box shadow

+
+ +
+ + diff --git a/learn/images/layout.html b/learn/images/layout.html index 7d21d56e..8eb01544 100644 --- a/learn/images/layout.html +++ b/learn/images/layout.html @@ -46,7 +46,8 @@ .wrapper > div { background-color: rebeccapurple; border-radius: .5em; -} +} +@layer site, page;

font-style: italic; font-weight: bold !important; } -} +} +} + + + + + Media Queries: a simple mobile first design, adding a grid component + + - - - -
-
- -
-
-
-
-

Veggies!

-

- 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. -

- -
    -
  • -

    Card 1

    -

    - Turnip greens yarrow ricebean rutabaga endive cauliflower sea - lettuce kohlrabi amaranth water spinach avocado daikon napa - cabbage asparagus winter purslane kale. -

    -
    • -
  • -

    Card 2

    -

    - Celery potato scallion desert raisin horseradish spinach - carrot soko. -

    -
    • + + @media screen and (min-width: 40em) { + article { + display: grid; + grid-template-columns: 3fr 1fr; + column-gap: 20px; + } + + nav ul { + display: flex; + } + + nav li { + flex: 1; + } + } + + @media screen and (min-width: 70em) { + main { + display: grid; + grid-template-columns: 3fr 1fr; + column-gap: 20px; + } + + article { + margin-bottom: 0; + } + + footer { + border-top: 1px solid #ccc; + margin-top: 2em; + } + } + + + + +
    +
    + +
    +
    +
    +
    +

    Veggies!

    +

    + 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. +

    + +
      +
    • +

      Card 1

      +

      + Turnip greens yarrow ricebean rutabaga endive cauliflower sea + lettuce kohlrabi amaranth water spinach avocado daikon napa + cabbage asparagus winter purslane kale. +

      +
      • +
    • +

      Card 2

      +

      + Celery potato scallion desert raisin horseradish spinach + carrot soko. +

      +
      • +
    • +

      Card 3

      +

      + Lotus root water spinach fennel kombu maize bamboo shoot green + bean swiss chard seakale pumpkin onion chickpea gram corn pea. +

      +
      • +
    • +

      Card 4

      +

      + Brussels sprout coriander water chestnut gourd swiss chard + wakame kohlrabi beetroot carrot watercress. +

      +
      • +
    • +

      Card 5

      +

      + Corn amaranth salsify bunya nuts nori azuki bean chickweed + potato bell pepper artichoke. +

      +
      • +
    +
    + +
    + +
    - -
- - -
- -
-

©2019

-
-
- + + + + diff --git a/learn/media-queries/step1.html b/learn/media-queries/step1.html index c53f46aa..59458ae6 100644 --- a/learn/media-queries/step1.html +++ b/learn/media-queries/step1.html @@ -1,144 +1,150 @@ - - - - - Media Queries: a simple mobile first design, step 1 - - - - -
-
- -
-
-
-
-

Veggies!

-

- 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. -

- -

- 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. Sea lettuce lettuce water chestnut - eggplant winter purslane fennel azuki bean earthnut pea sierra - leone bologi leek soko chicory celtuce parsley jícama salsify. -

-
-
- - -
- -
-

©2019

-
-
- + + + + diff --git a/learn/media-queries/step2.html b/learn/media-queries/step2.html index 23072652..7d52b07a 100644 --- a/learn/media-queries/step2.html +++ b/learn/media-queries/step2.html @@ -1,160 +1,166 @@ + + + + Media Queries: a simple mobile first design, step 2 + - - - -
-
- -
-
-
-
-

Veggies!

-

- 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. -

- -

- 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. Sea lettuce lettuce water chestnut - eggplant winter purslane fennel azuki bean earthnut pea sierra - leone bologi leek soko chicory celtuce parsley jícama salsify. -

-
-
- - -
- -
-

©2019

-
-
- + + + + diff --git a/learn/media-queries/step3.html b/learn/media-queries/step3.html index 67c859f9..654e351d 100644 --- a/learn/media-queries/step3.html +++ b/learn/media-queries/step3.html @@ -1,177 +1,183 @@ + + + + Media Queries: a simple mobile first design, step 3 + - - - -
-
- -
-
-
-
-

Veggies!

-

- 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. -

- -

- 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. Sea lettuce lettuce water chestnut - eggplant winter purslane fennel azuki bean earthnut pea sierra - leone bologi leek soko chicory celtuce parsley jícama salsify. -

-
-
- - -
- -
-

©2019

-
-
- + + + + diff --git a/learn/overflow/auto.html b/learn/overflow/auto.html index 0133ba70..7caf0c78 100644 --- a/learn/overflow/auto.html +++ b/learn/overflow/auto.html @@ -32,7 +32,8 @@ width: 350px; height: 100px; overflow: auto; -} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} +} - - -
- -
- - + +
+ +
+ + diff --git a/learn/tasks/grid/grid2-download.html b/learn/tasks/grid/grid2-download.html index 4ce1e221..f84b1ccd 100644 --- a/learn/tasks/grid/grid2-download.html +++ b/learn/tasks/grid/grid2-download.html @@ -1,58 +1,56 @@ - - - - - - Grid: task 2 - - - - - - - -
-
One
-
Two
-
- - + + + + + Grid: task 2 + + + + + + + +
+
One
+
Two
+
+ diff --git a/learn/tasks/grid/grid2.html b/learn/tasks/grid/grid2.html index 33a7f143..9f0fd4c4 100644 --- a/learn/tasks/grid/grid2.html +++ b/learn/tasks/grid/grid2.html @@ -1,56 +1,57 @@ - - - - - - Grid: task 2 - - - - - - - - - -
-
-
One
-
Two
-
-
- - + - - -
- -
- - + +
+ +
+ + diff --git a/learn/tasks/images/form.html b/learn/tasks/images/form.html index 204e2685..2791be11 100644 --- a/learn/tasks/images/form.html +++ b/learn/tasks/images/form.html @@ -34,7 +34,8 @@ .myform { border: 2px solid #000; padding: 5px; -} +} +} +} +} +} +} - - -
- -
- - + +
+ +
+ + diff --git a/learn/tasks/position/position2-download.html b/learn/tasks/position/position2-download.html index 6f2370d1..6afdc105 100644 --- a/learn/tasks/position/position2-download.html +++ b/learn/tasks/position/position2-download.html @@ -1,79 +1,77 @@ + + + Position: Task 2 + + - .content { - padding: 1em; - margin-left: 160px; - } - - - - -
-
-

- 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 b323ef28..2cbef90e 100644 --- a/learn/tasks/position/position2.html +++ b/learn/tasks/position/position2.html @@ -1,88 +1,90 @@ + + + Position: Task 2 + + - .content { - padding: 1em; - margin-left: 160px; - } - + + - .sidebar {} - - - - -
-
-
-

- 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. +

+
-
-
+ - +} - +
-
- -
- - - - \ No newline at end of file +
+ +
+ + + diff --git a/learn/tasks/sizing/height-min-height.html b/learn/tasks/sizing/height-min-height.html index 33d947fb..6c2299c2 100644 --- a/learn/tasks/sizing/height-min-height.html +++ b/learn/tasks/sizing/height-min-height.html @@ -51,7 +51,8 @@ .box2 { -} +} +} +} +} +} +} +} +} +} - - -
- -
- - + +
+ +
+ + diff --git a/learn/values-units/color-hsla.html b/learn/values-units/color-hsla.html index 93d40320..b9b08ae0 100644 --- a/learn/values-units/color-hsla.html +++ b/learn/values-units/color-hsla.html @@ -54,7 +54,8 @@ .three { background-color: hsl(174 77% 31% / .9); -} +} +} +} +} - - -
- -
- - + +
+ +
+ + diff --git a/learn/values-units/image.html b/learn/values-units/image.html index 8594c64a..11fc8ac7 100644 --- a/learn/values-units/image.html +++ b/learn/values-units/image.html @@ -1,59 +1,61 @@ - - - - Values and Units: image - - - - + + - - - -
-
-
-
- - +} - - -
- -
- - - +
+ +
+ +
+ + diff --git a/learn/values-units/length.html b/learn/values-units/length.html index 05031eac..4111ada4 100644 --- a/learn/values-units/length.html +++ b/learn/values-units/length.html @@ -59,7 +59,8 @@ .em { width: 10em; -} +} +} +} +} +}

Heading

.vertical { writing-mode: vertical-rl; -} +} +} +} +} +} +} diff --git a/masking/mask-composite.html b/masking/mask-composite.html index cef0408c..764c1928 100644 --- a/masking/mask-composite.html +++ b/masking/mask-composite.html @@ -90,7 +90,8 @@ mask-size: 100% 100%; -webkit-mask-composite: source-over; mask-composite: add; -} +} diff --git a/masking/mask-origin.html b/masking/mask-origin.html index 7196af3b..548e389c 100644 --- a/masking/mask-origin.html +++ b/masking/mask-origin.html @@ -89,7 +89,8 @@ mask-image: url(star.svg); -webkit-mask-origin: border-box; mask-origin: border-box; -} +} diff --git a/masking/mask-repeat.html b/masking/mask-repeat.html index 098d0579..4e34d06e 100644 --- a/masking/mask-repeat.html +++ b/masking/mask-repeat.html @@ -87,7 +87,8 @@ mask-image: url(star.svg); -webkit-mask-repeat: repeat; mask-repeat: repeat; -} +} diff --git a/masking/mask-size.html b/masking/mask-size.html index 4f88f497..ebab107a 100644 --- a/masking/mask-size.html +++ b/masking/mask-size.html @@ -87,7 +87,8 @@ mask-image: url(MDN.svg); -webkit-mask-size: 50%; mask-size: 50%; -} +} diff --git a/modules/animation.html b/modules/animation.html index 68e85a12..36611e87 100644 --- a/modules/animation.html +++ b/modules/animation.html @@ -217,8 +217,7 @@ + aria-label="Toggle the play state of the animation" />
+ step="0.1" />

diff --git a/modules/compositing.html b/modules/compositing.html index 79f0d4d4..b71a8b3c 100644 --- a/modules/compositing.html +++ b/modules/compositing.html @@ -9,11 +9,17 @@ div { width: 200px; height: 200px; - background-image: repeating-linear-gradient(45deg, red 0 15px,pink 15px 30px), + background-image: repeating-linear-gradient( + 45deg, + red 0 15px, + pink 15px 30px + ), repeating-linear-gradient(-45deg, blue 0 15px, lightblue 15px 30px); background-size: 150px 150px; background-repeat: no-repeat; - background-position: top left, bottom right; + background-position: + top left, + bottom right; background-color: palegoldenrod; text-align: center; padding-top: 150px; diff --git a/modules/filters.html b/modules/filters.html index fa9c14bd..b079e20e 100644 --- a/modules/filters.html +++ b/modules/filters.html @@ -35,8 +35,7 @@ src="assets/george_floyd_memorial_sm.jpg" width="600" height="400" - alt="A colorful memorial honoring George Floyd and the Black Lives Matter movement" - /> + alt="A colorful memorial honoring George Floyd and the Black Lives Matter movement" />
Select your filters @@ -47,8 +46,7 @@ value="0" min="0" max="1" - step="0.1" - /> + step="0.1" /> blur() diff --git a/modules/multicol.html b/modules/multicol.html index 443a56e1..64df5bb3 100644 --- a/modules/multicol.html +++ b/modules/multicol.html @@ -170,8 +170,7 @@

A Lament for Confederation

max="40" value="10" step="2" - id="colWidth" - /> + id="colWidth" />

@@ -181,8 +180,7 @@

A Lament for Confederation

max="10" value="1" step="0.5" - id="gapSize" - /> + id="gapSize" />

diff --git a/modules/scroll_snap.html b/modules/scroll_snap.html index b095079d..c5c3320e 100644 --- a/modules/scroll_snap.html +++ b/modules/scroll_snap.html @@ -148,8 +148,7 @@ max="2" value="1" list="places" - id="block" - /> + id="block" /> block position

@@ -161,8 +160,7 @@ max="2" value="1" list="places" - id="inline" - /> + id="inline" /> inline position

diff --git a/moz-context-properties/index.html b/moz-context-properties/index.html index 34203ea3..cb6b183b 100644 --- a/moz-context-properties/index.html +++ b/moz-context-properties/index.html @@ -32,19 +32,16 @@ class="img1" src="data:image/svg+xml;utf8, " - /> + fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/>" /> + fill='context-fill yellow' stroke='context-stroke'/>" /> + fill='context-stroke' stroke='context-fill red'/>" /> diff --git a/object-fit-basics/index.html b/object-fit-basics/index.html index 271a5558..20cefda9 100644 --- a/object-fit-basics/index.html +++ b/object-fit-basics/index.html @@ -5,9 +5,8 @@ Object-fit basics + href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" + rel="stylesheet" /> @@ -16,7 +15,7 @@

Object fit basics

This page illustrates different object-fit settings. It is part of the - Exploring object-fit Mozilla Hacks post. @@ -32,8 +31,7 @@

object-fit: contain

with object-fit contain, the image is trapped inside the image element, retaining aspect ratio. + alt="with object-fit contain, the image is trapped inside the image element, retaining aspect ratio." />

object-fit: cover

@@ -46,8 +44,7 @@

object-fit: cover

with object-fit cover, the image completely covers the image element and is cropped along the longest dimension + alt="with object-fit cover, the image completely covers the image element and is cropped along the longest dimension" />

object-fit: fill

@@ -63,8 +60,7 @@

object-fit: fill

src="windowsill.webm" width="426" height="240" - class="fill" - > + class="fill">

HTML5 video not supported?

@@ -82,8 +78,7 @@

object-fit: none

src="flowers.jpg" class="none" alt="when hovered over the image element expands to reveal more of the image" - tabindex="0" - /> + tabindex="0" />

object-position

@@ -97,20 +92,17 @@

object-position

when hovered over the image element expands to reveal more of the image + alt="when hovered over the image element expands to reveal more of the image" /> when hovered over the image element expands to reveal more of the image + alt="when hovered over the image element expands to reveal more of the image" /> when hovered over the image element expands to reveal more of the image + alt="when hovered over the image element expands to reveal more of the image" /> diff --git a/variable-fonts/font-stretch.html b/variable-fonts/font-stretch.html index dac37a68..271bd43d 100644 --- a/variable-fonts/font-stretch.html +++ b/variable-fonts/font-stretch.html @@ -72,7 +72,8 @@ .expanded { font-stretch: 200%; -} +}
- + max="12" />
diff --git a/variable-fonts/weight.html b/variable-fonts/weight.html index d3d60741..2feb481c 100644 --- a/variable-fonts/weight.html +++ b/variable-fonts/weight.html @@ -188,8 +188,7 @@ id="text-axis" class="controls--slider" min="300" - max="900" - /> + max="900" /> diff --git a/variable-fonts/width.html b/variable-fonts/width.html index 4dad4bd7..b1106de8 100644 --- a/variable-fonts/width.html +++ b/variable-fonts/width.html @@ -196,8 +196,7 @@ id="text-axis" class="controls--slider" min="55" - max="100" - /> + max="100" /> From 484774a0310a27cc8e4239771bebef6d74f84332 Mon Sep 17 00:00:00 2001 From: Onkar Ruikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Thu, 7 Dec 2023 15:01:56 +0530 Subject: [PATCH 02/23] fix: various code issues (#161) * http -> https * un used namespace * remove redundant `` tags * fix label for attributes * provide generic fallback fonts * remove overridden properties in same rule * language issues * provide function instead of an object as argument * fix remaining closing tags * fix remaining closing tags * Update target-text/index.html * Update target-text/index.html --------- Co-authored-by: Jean-Yves Perrier --- backdrop/script.js | 2 +- counter-style-demo/css/style.css | 4 ++-- css-cookbook/sharp-account_box-24px.svg | 2 +- editable-samples-2/pages/filter/svg/example.svg | 3 +-- editable-samples/codemirror/mode/css/gss.html | 8 ++++---- editable-samples/codemirror/mode/css/index.html | 8 ++++---- editable-samples/codemirror/mode/css/less.html | 6 +++--- editable-samples/codemirror/mode/css/scss.html | 6 +++--- .../pages/border-top-color/index-old.html | 12 ++++++------ editable-samples/pages/border-top-color/index.html | 12 ++++++------ flexbox/use-cases/MDN.svg | 3 +-- font-features/font-variant-alternates.html | 2 +- font-features/font-variant-numeric-example.html | 2 +- learn/getting-started--download.html | 2 +- learn/getting-started/biog-download.html | 2 +- learn/getting-started/biog.html | 2 +- learn/getting-started/started1.html | 2 +- learn/getting-started/started2.html | 2 +- learn/getting-started/started3.html | 2 +- learn/selectors/attribute-links.html | 2 +- learn/tasks/float/marking.md | 2 +- learn/tasks/selectors/attribute-links-download.html | 2 +- learn/tasks/selectors/attribute-links.html | 2 +- learn/tasks/selectors/pseudo.html | 2 +- logical/size-max.html | 2 +- masking/MDN.svg | 3 +-- masking/star.svg | 3 +-- scroll-snap/mandatory-y-old-spec.html | 1 - tools/border-image-generator/styles.css | 5 +---- tools/border-radius-generator/styles.css | 1 - tools/color-picker/styles.css | 3 --- variable-fonts/grade.html | 2 +- variable-fonts/italic.html | 2 +- variable-fonts/optical-sizing.html | 4 ++-- variable-fonts/weight.html | 2 +- variable-fonts/width.html | 2 +- 36 files changed, 55 insertions(+), 67 deletions(-) diff --git a/backdrop/script.js b/backdrop/script.js index 404a2958..3f99bd9b 100644 --- a/backdrop/script.js +++ b/backdrop/script.js @@ -36,7 +36,7 @@ function toggleFullscreen() { if (!document.fullscreenElement) { elem .requestFullscreen() - .then({}) + .then(() => {}) .catch((err) => { alert( `Error attempting to enable full-screen mode: ${err.message} (${err.name})`, diff --git a/counter-style-demo/css/style.css b/counter-style-demo/css/style.css index e2a45d57..686e1d53 100644 --- a/counter-style-demo/css/style.css +++ b/counter-style-demo/css/style.css @@ -28,7 +28,7 @@ body { .header h1 { margin: 0; padding: 0; - font-family: Ubuntu, Arial, Tahoma, "Sans Serif"; + font-family: Ubuntu, Arial, Tahoma, sans-serif; } .header { @@ -41,7 +41,7 @@ body { .notes-section { margin: 10px; color: #4d4e53; - font-family: Ubuntu, Arial, Tahoma, "Sans Serif"; + font-family: Ubuntu, Arial, Tahoma, sans-serif; float: left; } diff --git a/css-cookbook/sharp-account_box-24px.svg b/css-cookbook/sharp-account_box-24px.svg index 0cc9b561..4767e28d 100644 --- a/css-cookbook/sharp-account_box-24px.svg +++ b/css-cookbook/sharp-account_box-24px.svg @@ -1,6 +1,6 @@ - diff --git a/editable-samples-2/pages/filter/svg/example.svg b/editable-samples-2/pages/filter/svg/example.svg index c728169f..8a0d4b53 100644 --- a/editable-samples-2/pages/filter/svg/example.svg +++ b/editable-samples-2/pages/filter/svg/example.svg @@ -1,6 +1,5 @@ + xmlns="http://www.w3.org/2000/svg"> diff --git a/editable-samples/codemirror/mode/css/gss.html b/editable-samples/codemirror/mode/css/gss.html index 232fe8c1..df24e4f5 100644 --- a/editable-samples/codemirror/mode/css/gss.html +++ b/editable-samples/codemirror/mode/css/gss.html @@ -2,17 +2,17 @@ CodeMirror: Closure Stylesheets (GSS) mode - + - - + +