diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index f1b0b948..8c045e99 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -6,4 +6,8 @@
# https://docs.github.com/en/free-pro-team@latest/github/creating-cloning-and-archiving-repositories/about-code-owners
# Default
-* @mdn/core-yari-content
+* @mdn/content-team
+
+/.github/workflows/ @mdn/engineering
+/.github/CODEOWNERS @mdn/content-team @mdn/engineering
+/SECURITY.md @mdn/engineering
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
new file mode 100644
index 00000000..f90e9084
--- /dev/null
+++ b/.github/dependabot.yml
@@ -0,0 +1,8 @@
+version: 2
+updates:
+ - package-ecosystem: github-actions
+ directory: /
+ schedule:
+ interval: weekly
+ commit-message:
+ prefix: "ci(deps): "
diff --git a/.github/workflows/idle-issues.yml b/.github/workflows/idle-issues.yml
deleted file mode 100644
index 0daf455a..00000000
--- a/.github/workflows/idle-issues.yml
+++ /dev/null
@@ -1,10 +0,0 @@
-name: "Mark issues and pull requests as idle"
-on:
- schedule:
- - cron: "49 11,23 * * *"
-
-jobs:
- idle:
- uses: mdn/workflows/.github/workflows/idle.yml@main
- with:
- target-repo: "mdn/css-examples"
diff --git a/.github/workflows/lock-closed.yml b/.github/workflows/lock-closed.yml
index 33c6a521..1b33797c 100644
--- a/.github/workflows/lock-closed.yml
+++ b/.github/workflows/lock-closed.yml
@@ -3,6 +3,10 @@ on:
schedule:
- cron: "0 9 1 * *"
+permissions:
+ issues: write
+ pull-requests: write
+
jobs:
lock:
uses: mdn/workflows/.github/workflows/lock-closed.yml@main
diff --git a/.github/workflows/new-issues.yml b/.github/workflows/new-issues.yml
index 373f82ca..f0e85f0f 100644
--- a/.github/workflows/new-issues.yml
+++ b/.github/workflows/new-issues.yml
@@ -6,12 +6,16 @@ on:
- reopened
- opened
+permissions:
+ issues: write
+ pull-requests: write
+
jobs:
label-new-issues:
runs-on: ubuntu-latest
steps:
- name: initial labelling
- uses: andymckay/labeler@master
+ uses: andymckay/labeler@3a4296e9dcdf9576b0456050db78cfd34853f260 # master
with:
add-labels: "needs triage"
ignore-if-assigned: true
diff --git a/.github/workflows/pr-merge-conflicts.yml b/.github/workflows/pr-merge-conflicts.yml
index f94b9feb..c1c1e3f1 100644
--- a/.github/workflows/pr-merge-conflicts.yml
+++ b/.github/workflows/pr-merge-conflicts.yml
@@ -3,8 +3,14 @@ name: "Label PRs with conflicts"
on:
push:
pull_request_target:
+ branches:
+ - main
types: [synchronize]
+permissions:
+ # Label pull requests.
+ pull-requests: write
+
jobs:
label-merge-conflicts:
uses: mdn/workflows/.github/workflows/pr-rebase-needed.yml@main
diff --git a/SECURITY.md b/SECURITY.md
new file mode 100644
index 00000000..5033b966
--- /dev/null
+++ b/SECURITY.md
@@ -0,0 +1,25 @@
+# Security Policy
+
+## Overview
+
+This policy applies to MDN's website (`developer.mozilla.org`), backend services, and GitHub repositories in the [`mdn`](https://github.com/mdn) organization. Issues affecting other Mozilla products or services should be reported through the [Mozilla Security Bug Bounty Program](https://www.mozilla.org/en-US/security/bug-bounty/).
+
+For non-security issues, please file a [content bug](https://github.com/mdn/content/issues/new/choose), a [website bug](https://github.com/mdn/fred/issues/new/choose) or a [content/feature suggestion](https://github.com/mdn/mdn/issues/new/choose).
+
+## Reporting a Vulnerability
+
+If you discover a potential security issue, please report it privately via .
+
+If you prefer not to use HackerOne, you can report it via .
+
+## Bounty Program
+
+Vulnerabilities in MDN may qualify for Mozilla's Bug Bounty Program. Eligibility and reward amounts are described on .
+
+Please use the above channels even if you are not interested in a bounty reward.
+
+## Responsible Disclosure
+
+Please do not publicly disclose details until Mozilla's security team and the MDN engineering team have verified and fixed the issue.
+
+We appreciate your efforts to keep MDN and its users safe.
diff --git a/assets/styles.css b/assets/styles.css
index 11945fee..f46d5bc4 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -1,10 +1,10 @@
/* 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)
+rgb(53 43 34)
+rgb(75 70 74)
+rgb(95 97 110)
+rgb(137 151 188)
+rgb(160 178 226)
*/
body {
background-color: #fff;
diff --git a/backdrop/styles.css b/backdrop/styles.css
index 11945fee..f46d5bc4 100644
--- a/backdrop/styles.css
+++ b/backdrop/styles.css
@@ -1,10 +1,10 @@
/* 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)
+rgb(53 43 34)
+rgb(75 70 74)
+rgb(95 97 110)
+rgb(137 151 188)
+rgb(160 178 226)
*/
body {
background-color: #fff;
diff --git a/box-alignment/flexbox/auto-margins.html b/box-alignment/flexbox/auto-margins.html
index b1d9394a..0f2aca8a 100644
--- a/box-alignment/flexbox/auto-margins.html
+++ b/box-alignment/flexbox/auto-margins.html
@@ -61,14 +61,14 @@
.box {
width: 500px;
- border: 2px dotted rgb(96, 139, 168);
+ border: 2px dotted rgb(96 139 168);
}
.box > * {
padding: 20px;
- border: 2px solid rgb(96, 139, 168);
+ border: 2px solid rgb(96 139 168);
border-radius: 5px;
- background-color: rgba(96, 139, 168, 0.2);
+ background-color: rgb(96 139 168 / 0.2);
}
diff --git a/css-cookbook/columns-flexbox.html b/css-cookbook/columns-flexbox.html
index cbcd6c5a..f1921840 100644
--- a/css-cookbook/columns-flexbox.html
+++ b/css-cookbook/columns-flexbox.html
@@ -11,14 +11,14 @@
diff --git a/css-cookbook/columns-grid--download.html b/css-cookbook/columns-grid--download.html
index 91349f2d..be9b851e 100644
--- a/css-cookbook/columns-grid--download.html
+++ b/css-cookbook/columns-grid--download.html
@@ -21,7 +21,7 @@
}
.container {
- border: 2px solid rgb(75, 70, 74);
+ border: 2px solid rgb(75 70 74);
border-radius: 0.5em;
padding: 20px;
width: 500px;
@@ -32,7 +32,7 @@
.container > * {
padding: 10px;
- border: 2px solid rgb(95, 97, 110);
+ border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
margin: 0;
}
diff --git a/css-cookbook/columns-grid.html b/css-cookbook/columns-grid.html
index ffbc7af1..75ec4044 100644
--- a/css-cookbook/columns-grid.html
+++ b/css-cookbook/columns-grid.html
@@ -11,7 +11,7 @@
diff --git a/css-cookbook/columns-multicol.html b/css-cookbook/columns-multicol.html
index e8bea1af..b6794a8d 100644
--- a/css-cookbook/columns-multicol.html
+++ b/css-cookbook/columns-multicol.html
@@ -11,7 +11,7 @@
@@ -51,7 +51,7 @@
diff --git a/css-cookbook/grid-wrapper--download.html b/css-cookbook/grid-wrapper--download.html
index 7c5706a0..95dfc3f0 100644
--- a/css-cookbook/grid-wrapper--download.html
+++ b/css-cookbook/grid-wrapper--download.html
@@ -31,7 +31,7 @@
}
.grid > * {
- border: 2px solid rgb(95, 97, 110);
+ border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
padding: 20px;
}
diff --git a/css-cookbook/grid-wrapper.html b/css-cookbook/grid-wrapper.html
index 166418bb..62802904 100644
--- a/css-cookbook/grid-wrapper.html
+++ b/css-cookbook/grid-wrapper.html
@@ -17,7 +17,7 @@
}
.grid > * {
- border: 2px solid rgb(95, 97, 110);
+ border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
padding: 20px;
}
diff --git a/css-cookbook/sticky-footer--download.html b/css-cookbook/sticky-footer--download.html
index 0ec88b6a..c4bd3ba7 100644
--- a/css-cookbook/sticky-footer--download.html
+++ b/css-cookbook/sticky-footer--download.html
@@ -44,7 +44,7 @@
.page-header,
.page-footer {
- background-color: rgb(75, 70, 74);
+ background-color: rgb(75 70 74);
color: #fff;
padding: 20px;
}
diff --git a/css-cookbook/sticky-footer-flexbox--download.html b/css-cookbook/sticky-footer-flexbox--download.html
index 60b1c7bc..8a447013 100644
--- a/css-cookbook/sticky-footer-flexbox--download.html
+++ b/css-cookbook/sticky-footer-flexbox--download.html
@@ -45,7 +45,7 @@
}
.page-header,
.page-footer {
- background-color: rgb(75, 70, 74);
+ background-color: rgb(75 70 74);
color: #fff;
padding: 20px;
}
diff --git a/css-cookbook/sticky-footer-flexbox.html b/css-cookbook/sticky-footer-flexbox.html
index 7d764a60..e460daba 100644
--- a/css-cookbook/sticky-footer-flexbox.html
+++ b/css-cookbook/sticky-footer-flexbox.html
@@ -23,7 +23,7 @@
.page-header,
.page-footer {
- background-color: rgb(75, 70, 74);
+ background-color: rgb(75 70 74);
color: #fff;
padding: 20px;
}
diff --git a/css-cookbook/sticky-footer.html b/css-cookbook/sticky-footer.html
index 2f238620..eccb73b5 100644
--- a/css-cookbook/sticky-footer.html
+++ b/css-cookbook/sticky-footer.html
@@ -25,7 +25,7 @@
.page-header,
.page-footer {
- background-color: rgb(75, 70, 74);
+ background-color: rgb(75 70 74);
color: #fff;
padding: 20px;
}
diff --git a/css-cookbook/styles.css b/css-cookbook/styles.css
index 11945fee..f46d5bc4 100644
--- a/css-cookbook/styles.css
+++ b/css-cookbook/styles.css
@@ -1,10 +1,10 @@
/* 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)
+rgb(53 43 34)
+rgb(75 70 74)
+rgb(95 97 110)
+rgb(137 151 188)
+rgb(160 178 226)
*/
body {
background-color: #fff;
diff --git a/css-text/styles.css b/css-text/styles.css
index 11945fee..f46d5bc4 100644
--- a/css-text/styles.css
+++ b/css-text/styles.css
@@ -1,10 +1,10 @@
/* 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)
+rgb(53 43 34)
+rgb(75 70 74)
+rgb(95 97 110)
+rgb(137 151 188)
+rgb(160 178 226)
*/
body {
background-color: #fff;
diff --git a/display/multi-keyword/inline-block.html b/display/multi-keyword/inline-block.html
index 1f22b167..217de84c 100644
--- a/display/multi-keyword/inline-block.html
+++ b/display/multi-keyword/inline-block.html
@@ -66,7 +66,7 @@
diff --git a/flexbox/alignment/align-content.html b/flexbox/alignment/align-content.html
index 01d44a27..e9ce451c 100644
--- a/flexbox/alignment/align-content.html
+++ b/flexbox/alignment/align-content.html
@@ -61,14 +61,14 @@
.box {
width: 500px;
- border: 2px dotted rgb(96, 139, 168);
+ border: 2px dotted rgb(96 139 168);
}
.box > * {
padding: 20px;
- border: 2px solid rgb(96, 139, 168);
+ border: 2px solid rgb(96 139 168);
border-radius: 5px;
- background-color: rgba(96, 139, 168, 0.2);
+ background-color: rgb(96 139 168 / 0.2);
flex: 1 1 100px;
}
diff --git a/flexbox/alignment/align-items.html b/flexbox/alignment/align-items.html
index 64bfb2ba..6a13714f 100644
--- a/flexbox/alignment/align-items.html
+++ b/flexbox/alignment/align-items.html
@@ -61,14 +61,14 @@
.box {
width: 500px;
- border: 2px dotted rgb(96, 139, 168);
+ border: 2px dotted rgb(96 139 168);
}
.box > * {
padding: 20px;
- border: 2px solid rgb(96, 139, 168);
+ border: 2px solid rgb(96 139 168);
border-radius: 5px;
- background-color: rgba(96, 139, 168, 0.2);
+ background-color: rgb(96 139 168 / 0.2);
}
diff --git a/flexbox/basics/flex-shorthands.html b/flexbox/basics/flex-shorthands.html
index 62e1899c..6566683b 100644
--- a/flexbox/basics/flex-shorthands.html
+++ b/flexbox/basics/flex-shorthands.html
@@ -60,15 +60,15 @@
}
.box > * {
- border: 2px solid rgb(96, 139, 168);
+ border: 2px solid rgb(96 139 168);
border-radius: 5px;
- background-color: rgba(96, 139, 168, 0.2);
+ background-color: rgb(96 139 168 / 0.2);
}
.box {
display: flex;
width: 500px;
- border: 2px dotted rgb(96, 139, 168);
+ border: 2px dotted rgb(96 139 168);
}
diff --git a/flexbox/basics/flex-wrap.html b/flexbox/basics/flex-wrap.html
index 46f9c041..6de90a3d 100644
--- a/flexbox/basics/flex-wrap.html
+++ b/flexbox/basics/flex-wrap.html
@@ -60,15 +60,15 @@
}
.box > * {
- border: 2px solid rgb(96, 139, 168);
+ border: 2px solid rgb(96 139 168);
border-radius: 5px;
- background-color: rgba(96, 139, 168, 0.2);
+ background-color: rgb(96 139 168 / 0.2);
width: 200px;
}
.box {
width: 500px;
- border: 2px dotted rgb(96, 139, 168);
+ border: 2px dotted rgb(96 139 168);
}
diff --git a/flexbox/basics/justify-content.html b/flexbox/basics/justify-content.html
index 1d09ba04..aba72e7f 100644
--- a/flexbox/basics/justify-content.html
+++ b/flexbox/basics/justify-content.html
@@ -61,13 +61,13 @@
.box {
width: 500px;
- border: 2px dotted rgb(96, 139, 168);
+ border: 2px dotted rgb(96 139 168);
}
.box > * {
- border: 2px solid rgb(96, 139, 168);
+ border: 2px solid rgb(96 139 168);
border-radius: 5px;
- background-color: rgba(96, 139, 168, 0.2);
+ background-color: rgb(96 139 168 / 0.2);
}
diff --git a/flexbox/basics/the-flex-container.html b/flexbox/basics/the-flex-container.html
index 851c4441..b2b6c122 100644
--- a/flexbox/basics/the-flex-container.html
+++ b/flexbox/basics/the-flex-container.html
@@ -62,13 +62,13 @@
.box {
width: 500px;
- border: 2px dotted rgb(96, 139, 168);
+ border: 2px dotted rgb(96 139 168);
}
.box > * {
- border: 2px solid rgb(96, 139, 168);
+ border: 2px solid rgb(96 139 168);
border-radius: 5px;
- background-color: rgba(96, 139, 168, 0.2);
+ background-color: rgb(96 139 168 / 0.2);
}
diff --git a/flexbox/ratios/flex-basis.html b/flexbox/ratios/flex-basis.html
index b640ead3..6766b04a 100644
--- a/flexbox/ratios/flex-basis.html
+++ b/flexbox/ratios/flex-basis.html
@@ -41,6 +41,7 @@
text-align: right;
width: 90%;
max-width: 700px;
+ min-width: 500px;
padding: 5px 10px 5px 26px;
font-size: 100%;
}
@@ -48,6 +49,7 @@
section {
width: 90%;
max-width: 700px;
+ min-width: 500px;
border: 1px solid #4d4e53;
border-radius: 2px;
padding: 10px 14px 10px 10px;
@@ -60,15 +62,15 @@
}
.box > * {
- border: 2px solid rgb(96, 139, 168);
+ border: 2px solid rgb(96 139 168);
border-radius: 5px;
- background-color: rgba(96, 139, 168, 0.2);
+ background-color: rgb(96 139 168 / 0.2);
}
.box {
display: flex;
width: 500px;
- border: 2px dotted rgb(96, 139, 168);
+ border: 2px dotted rgb(96 139 168);
}
diff --git a/flexbox/ratios/flex-grow-ratios.html b/flexbox/ratios/flex-grow-ratios.html
index 2a9806b2..1392fe59 100644
--- a/flexbox/ratios/flex-grow-ratios.html
+++ b/flexbox/ratios/flex-grow-ratios.html
@@ -60,15 +60,15 @@
}
.box > * {
- border: 2px solid rgb(96, 139, 168);
+ border: 2px solid rgb(96 139 168);
border-radius: 5px;
- background-color: rgba(96, 139, 168, 0.2);
+ background-color: rgb(96 139 168 / 0.2);
}
.box {
display: flex;
width: 500px;
- border: 2px dotted rgb(96, 139, 168);
+ border: 2px dotted rgb(96 139 168);
}
diff --git a/flexbox/ratios/flex-grow.html b/flexbox/ratios/flex-grow.html
index ed49c954..60815ad8 100644
--- a/flexbox/ratios/flex-grow.html
+++ b/flexbox/ratios/flex-grow.html
@@ -41,6 +41,7 @@
text-align: right;
width: 90%;
max-width: 700px;
+ min-width: 500px;
padding: 5px 10px 5px 26px;
font-size: 100%;
}
@@ -48,6 +49,7 @@
section {
width: 90%;
max-width: 700px;
+ min-width: 500px;
border: 1px solid #4d4e53;
border-radius: 2px;
padding: 10px 14px 10px 10px;
@@ -60,15 +62,15 @@
}
.box > * {
- border: 2px solid rgb(96, 139, 168);
+ border: 2px solid rgb(96 139 168);
border-radius: 5px;
- background-color: rgba(96, 139, 168, 0.2);
+ background-color: rgb(96 139 168 / 0.2);
}
.box {
display: flex;
width: 500px;
- border: 2px dotted rgb(96, 139, 168);
+ border: 2px dotted rgb(96 139 168);
}
diff --git a/flexbox/ratios/flex-shrink-min-content.html b/flexbox/ratios/flex-shrink-min-content.html
index 3bcf056d..2c7171e8 100644
--- a/flexbox/ratios/flex-shrink-min-content.html
+++ b/flexbox/ratios/flex-shrink-min-content.html
@@ -41,6 +41,7 @@
text-align: right;
width: 90%;
max-width: 700px;
+ min-width: 500px;
padding: 5px 10px 5px 26px;
font-size: 100%;
}
@@ -48,6 +49,7 @@
section {
width: 90%;
max-width: 700px;
+ min-width: 500px;
border: 1px solid #4d4e53;
border-radius: 2px;
padding: 10px 14px 10px 10px;
@@ -60,14 +62,14 @@
}
.box > * {
- border: 2px solid rgb(96, 139, 168);
+ border: 2px solid rgb(96 139 168);
border-radius: 5px;
- background-color: rgba(96, 139, 168, 0.2);
+ background-color: rgb(96 139 168 / 0.2);
}
.box {
display: flex;
- border: 2px dotted rgb(96, 139, 168);
+ border: 2px dotted rgb(96 139 168);
}
diff --git a/flexbox/ratios/flex-shrink-ratios.html b/flexbox/ratios/flex-shrink-ratios.html
index f66ec25c..f1a9e00e 100644
--- a/flexbox/ratios/flex-shrink-ratios.html
+++ b/flexbox/ratios/flex-shrink-ratios.html
@@ -41,6 +41,7 @@
text-align: right;
width: 90%;
max-width: 700px;
+ min-width: 500px;
padding: 5px 10px 5px 26px;
font-size: 100%;
}
@@ -48,6 +49,7 @@
section {
width: 90%;
max-width: 700px;
+ min-width: 500px;
border: 1px solid #4d4e53;
border-radius: 2px;
padding: 10px 14px 10px 10px;
@@ -60,15 +62,15 @@
}
.box > * {
- border: 2px solid rgb(96, 139, 168);
+ border: 2px solid rgb(96 139 168);
border-radius: 5px;
- background-color: rgba(96, 139, 168, 0.2);
+ background-color: rgb(96 139 168 / 0.2);
}
.box {
display: flex;
width: 500px;
- border: 2px dotted rgb(96, 139, 168);
+ border: 2px dotted rgb(96 139 168);
}
diff --git a/flexbox/ratios/flex-shrink.html b/flexbox/ratios/flex-shrink.html
index 17d4d03b..f76189ff 100644
--- a/flexbox/ratios/flex-shrink.html
+++ b/flexbox/ratios/flex-shrink.html
@@ -41,6 +41,7 @@
text-align: right;
width: 90%;
max-width: 700px;
+ min-width: 500px;
padding: 5px 10px 5px 26px;
font-size: 100%;
}
@@ -48,6 +49,7 @@
section {
width: 90%;
max-width: 700px;
+ min-width: 500px;
border: 1px solid #4d4e53;
border-radius: 2px;
padding: 10px 14px 10px 10px;
@@ -60,15 +62,15 @@
}
.box > * {
- border: 2px solid rgb(96, 139, 168);
+ border: 2px solid rgb(96 139 168);
border-radius: 5px;
- background-color: rgba(96, 139, 168, 0.2);
+ background-color: rgb(96 139 168 / 0.2);
}
.box {
display: flex;
width: 500px;
- border: 2px dotted rgb(96, 139, 168);
+ border: 2px dotted rgb(96 139 168);
}
diff --git a/flexbox/ratios/min-max-content.html b/flexbox/ratios/min-max-content.html
index 758f1dcf..cb18b334 100644
--- a/flexbox/ratios/min-max-content.html
+++ b/flexbox/ratios/min-max-content.html
@@ -63,11 +63,11 @@
@@ -86,11 +86,11 @@
diff --git a/grid/subgrid/columns.html b/grid/subgrid/columns.html
index 780a37e1..2c08d63f 100644
--- a/grid/subgrid/columns.html
+++ b/grid/subgrid/columns.html
@@ -23,7 +23,7 @@
}
.subitem {
- background-color: rgb(40, 240, 83);
+ background-color: rgb(40 240 83);
}
diff --git a/grid/subgrid/gap.html b/grid/subgrid/gap.html
index c6e49894..fb3c7b4b 100644
--- a/grid/subgrid/gap.html
+++ b/grid/subgrid/gap.html
@@ -23,7 +23,7 @@
}
.subitem {
- background-color: rgb(40, 240, 83);
+ background-color: rgb(40 240 83);
}
@@ -49,7 +49,7 @@
}
.subitem2 {
- background-color: rgba(0, 0, 0, 0.5);
+ background-color: rgb(0 0 0 / 0.5);
grid-column: 2;
grid-row: 1;
}
@@ -89,7 +89,7 @@
}
.subitem2 {
- background-color: rgba(0,0,0,.5);
+ background-color: rgb(0 0 0 / .5);
grid-column: 2;
grid-row: 1;
}
diff --git a/grid/subgrid/rows.html b/grid/subgrid/rows.html
index d3bf2d57..b4553e47 100644
--- a/grid/subgrid/rows.html
+++ b/grid/subgrid/rows.html
@@ -23,7 +23,7 @@
}
.subitem {
- background-color: rgb(40, 240, 83);
+ background-color: rgb(40 240 83);
}
diff --git a/houdini/css_painting_api/example-boxbg.html b/houdini/css_painting_api/example-boxbg.html
index 1adefa9f..3e83579e 100644
--- a/houdini/css_painting_api/example-boxbg.html
+++ b/houdini/css_painting_api/example-boxbg.html
@@ -7,16 +7,16 @@
diff --git a/howto/box-shadow-button.html b/howto/box-shadow-button.html
index 0633fa96..73465746 100644
--- a/howto/box-shadow-button.html
+++ b/howto/box-shadow-button.html
@@ -26,7 +26,7 @@
@@ -40,7 +40,7 @@
diff --git a/howto/center.html b/howto/center.html
index 51bd2cb5..d8c2a34a 100644
--- a/howto/center.html
+++ b/howto/center.html
@@ -7,7 +7,7 @@
@@ -59,7 +59,7 @@
}
.box2 {
- background-color: rgba(0,0,0,.5);
+ background-color: rgb(0 0 0 / .5);
color: #fff;
}
diff --git a/howto/styles.css b/howto/styles.css
index 11945fee..f46d5bc4 100644
--- a/howto/styles.css
+++ b/howto/styles.css
@@ -1,10 +1,10 @@
/* 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)
+rgb(53 43 34)
+rgb(75 70 74)
+rgb(95 97 110)
+rgb(137 151 188)
+rgb(160 178 226)
*/
body {
background-color: #fff;
diff --git a/howto/text-shadow.html b/howto/text-shadow.html
index f41b61a6..8829e784 100644
--- a/howto/text-shadow.html
+++ b/howto/text-shadow.html
@@ -21,7 +21,7 @@
@@ -36,7 +36,7 @@
Adding a shadow to text
diff --git a/images/styles.css b/images/styles.css
index 11945fee..f46d5bc4 100644
--- a/images/styles.css
+++ b/images/styles.css
@@ -1,10 +1,10 @@
/* 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)
+rgb(53 43 34)
+rgb(75 70 74)
+rgb(95 97 110)
+rgb(137 151 188)
+rgb(160 178 226)
*/
body {
background-color: #fff;
diff --git a/logical/border-longhands.html b/logical/border-longhands.html
index f2f77aaa..20cf6ac8 100644
--- a/logical/border-longhands.html
+++ b/logical/border-longhands.html
@@ -11,7 +11,7 @@
}
.box {
border-radius: 5px;
- background-color: rgba(96, 139, 168, 0.2);
+ background-color: rgb(96 139 168 / 0.2);
margin: 10px;
width: 220px;
height: 220px;
diff --git a/logical/float.html b/logical/float.html
index b8327c1b..13abacf3 100644
--- a/logical/float.html
+++ b/logical/float.html
@@ -11,9 +11,9 @@
}
.box {
- border: 2px solid rgb(96, 139, 168);
+ border: 2px solid rgb(96 139 168);
border-radius: 5px;
- background-color: rgba(96, 139, 168, 0.2);
+ background-color: rgb(96 139 168 / 0.2);
padding: 10px;
margin: 10px;
width: 100px;
diff --git a/logical/intro-feature-queries.html b/logical/intro-feature-queries.html
index 9b9cf0e3..c90e0710 100644
--- a/logical/intro-feature-queries.html
+++ b/logical/intro-feature-queries.html
@@ -10,14 +10,14 @@
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
- border: 2px solid rgb(96, 139, 168);
+ border: 2px solid rgb(96 139 168);
border-radius: 5px;
}
.grid > * {
border-radius: 5px;
- border: 2px solid rgba(96, 139, 168, 0.4);
- background-color: rgba(96, 139, 168, 0.2);
+ border: 2px solid rgb(96 139 168 / 0.4);
+ background-color: rgb(96 139 168 / 0.2);
padding: 10px;
}
diff --git a/logical/intro-grid-example.html b/logical/intro-grid-example.html
index efaf0fb4..e72e3583 100644
--- a/logical/intro-grid-example.html
+++ b/logical/intro-grid-example.html
@@ -10,14 +10,14 @@
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
- border: 2px solid rgb(96, 139, 168);
+ border: 2px solid rgb(96 139 168);
border-radius: 5px;
}
.grid > * {
border-radius: 5px;
- border: 2px solid rgba(96, 139, 168, 0.4);
- background-color: rgba(96, 139, 168, 0.2);
+ border: 2px solid rgb(96 139 168 / 0.4);
+ background-color: rgb(96 139 168 / 0.2);
padding: 10px;
}
diff --git a/logical/margin-longhands.html b/logical/margin-longhands.html
index 99dea384..a766ffd9 100644
--- a/logical/margin-longhands.html
+++ b/logical/margin-longhands.html
@@ -13,9 +13,9 @@
border: 2px dotted grey;
}
.box {
- border: 2px solid rgb(96, 139, 168);
+ border: 2px solid rgb(96 139 168);
border-radius: 5px;
- background-color: rgba(96, 139, 168, 0.2);
+ background-color: rgb(96 139 168 / 0.2);
padding: 10px;
width: 220px;
height: 220px;
diff --git a/logical/padding-longhands.html b/logical/padding-longhands.html
index 1c482a96..ae9697ef 100644
--- a/logical/padding-longhands.html
+++ b/logical/padding-longhands.html
@@ -10,9 +10,9 @@
display: flex;
}
.box {
- border: 2px solid rgb(96, 139, 168);
+ border: 2px solid rgb(96 139 168);
border-radius: 5px;
- background-color: rgba(96, 139, 168, 0.2);
+ background-color: rgb(96 139 168 / 0.2);
margin: 10px;
width: 220px;
height: 220px;
diff --git a/logical/positioning-inset.html b/logical/positioning-inset.html
index 8d09853c..f531e36f 100644
--- a/logical/positioning-inset.html
+++ b/logical/positioning-inset.html
@@ -18,9 +18,9 @@
}
.box {
- border: 2px solid rgb(96, 139, 168);
+ border: 2px solid rgb(96 139 168);
border-radius: 5px;
- background-color: rgba(96, 139, 168, 0.2);
+ background-color: rgb(96 139 168 / 0.2);
padding: 10px;
width: 100px;
height: 100px;
diff --git a/logical/size-inline-block.html b/logical/size-inline-block.html
index b98315f2..986c419a 100644
--- a/logical/size-inline-block.html
+++ b/logical/size-inline-block.html
@@ -10,9 +10,9 @@
display: flex;
}
.box {
- border: 2px solid rgb(96, 139, 168);
+ border: 2px solid rgb(96 139 168);
border-radius: 5px;
- background-color: rgba(96, 139, 168, 0.2);
+ background-color: rgb(96 139 168 / 0.2);
padding: 10px;
margin: 10px;
}
diff --git a/logical/size-max.html b/logical/size-max.html
index fbdd2020..6055778d 100644
--- a/logical/size-max.html
+++ b/logical/size-max.html
@@ -10,9 +10,9 @@
display: flex;
}
.box {
- border: 2px solid rgb(96, 139, 168);
+ border: 2px solid rgb(96 139 168);
border-radius: 5px;
- background-color: rgba(96, 139, 168, 0.2);
+ background-color: rgb(96 139 168 / 0.2);
padding: 10px;
margin: 10px;
}
diff --git a/logical/size-min.html b/logical/size-min.html
index 9b2c6955..d87445d0 100644
--- a/logical/size-min.html
+++ b/logical/size-min.html
@@ -10,9 +10,9 @@
display: flex;
}
.box {
- border: 2px solid rgb(96, 139, 168);
+ border: 2px solid rgb(96 139 168);
border-radius: 5px;
- background-color: rgba(96, 139, 168, 0.2);
+ background-color: rgb(96 139 168 / 0.2);
padding: 10px;
margin: 10px;
}
diff --git a/logical/size-resize.html b/logical/size-resize.html
index a887d52d..c176b977 100644
--- a/logical/size-resize.html
+++ b/logical/size-resize.html
@@ -10,9 +10,9 @@
display: flex;
}
.box {
- border: 2px solid rgb(96, 139, 168);
+ border: 2px solid rgb(96 139 168);
border-radius: 5px;
- background-color: rgba(96, 139, 168, 0.2);
+ background-color: rgb(96 139 168 / 0.2);
padding: 10px;
margin: 10px;
overflow: scroll;
diff --git a/modules/animation.html b/modules/animation.html
index 36611e87..be216cd2 100644
--- a/modules/animation.html
+++ b/modules/animation.html
@@ -141,7 +141,7 @@
box-shadow:
5px 15px 15px white,
-5px 15px 15px white,
- 0 20px 20px rgba(125 125 125 / 0.5);
+ 0 20px 20px rgb(125 125 125 / 0.5);
animation:
clouds ease 5s alternate infinite 0.2s,
wind ease-out 4s alternate infinite;
diff --git a/modules/backgrounds.html b/modules/backgrounds.html
index 6f9923b0..8e74ac3d 100644
--- a/modules/backgrounds.html
+++ b/modules/backgrounds.html
@@ -33,10 +33,10 @@
120px 120px;
background-clip: content-box, content-box, padding-box;
box-shadow:
- 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);
+ inset 5px 5px 5px rgb(0 0 0 / 0.4),
+ inset -5px -5px 5px rgb(0 0 0 / 0.4),
+ 5px 5px 5px rgb(0 0 0 / 0.4),
+ -5px -5px 5px rgb(0 0 0 / 0.4);
}
div:first-of-type {
border-radius: 0;
diff --git a/modules/compositing.html b/modules/compositing.html
index b71a8b3c..d82d7ff9 100644
--- a/modules/compositing.html
+++ b/modules/compositing.html
@@ -45,7 +45,7 @@
background: radial-gradient(
circle,
transparent 0 20px,
- rgb(255, 200, 200) 20px
+ rgb(255 200 200) 20px
);
background-size: 60px 60px;
background-position: center;
diff --git a/modules/transforms.html b/modules/transforms.html
index 4e3b7fad..b2c8e301 100644
--- a/modules/transforms.html
+++ b/modules/transforms.html
@@ -1,487 +1,487 @@
-
-
-
-
-
-
- CSS Transforms
-
-
-
-
-
-
-
-
-
-
1
-
2
-
3
-
4
-
5
-
6
-
-
z:0px
-
-
-
-
-
-
-
-
\ No newline at end of file
+
+
+
+
+
+
+ CSS Transforms
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
z:0px
+
+
+
+
+
+
+
+
diff --git a/overscroll-behavior/overscroll-behavior-x.html b/overscroll-behavior/overscroll-behavior-x.html
index 4f504989..b87c70e1 100644
--- a/overscroll-behavior/overscroll-behavior-x.html
+++ b/overscroll-behavior/overscroll-behavior-x.html
@@ -11,9 +11,9 @@
background-color: magenta;
background-image: repeating-linear-gradient(
to right,
- rgba(0, 0, 0, 0) 0px,
- rgba(0, 0, 0, 0) 19px,
- rgba(0, 0, 0, 0.5) 20px
+ rgb(0 0 0 / 0) 0px,
+ rgb(0 0 0 / 0) 19px,
+ rgb(0 0 0 / 0.5) 20px
);
}
@@ -33,15 +33,15 @@
background-color: yellow;
background-image: repeating-linear-gradient(
to right,
- rgba(0, 0, 0, 0) 0px,
- rgba(0, 0, 0, 0) 19px,
- rgba(0, 0, 0, 0.5) 20px
+ rgb(0 0 0 / 0) 0px,
+ rgb(0 0 0 / 0) 19px,
+ rgb(0 0 0 / 0.5) 20px
);
}
p {
padding: 10px;
- background-color: rgba(255, 0, 0, 0.5);
+ background-color: rgb(255 0 0 / 0.5);
margin: 0;
width: 300px;
position: relative;
diff --git a/path/offset-path.html b/path/offset-path.html
index 454cf8b8..16e88be8 100644
--- a/path/offset-path.html
+++ b/path/offset-path.html
@@ -67,7 +67,7 @@
.parent {
width: 200px;
height: 200px;
- border: 4px solid rgba(0, 0, 0, 0.1);
+ border: 4px solid rgb(0 0 0 / 0.1);
border-radius: 50%;
margin: 40px;
}
@@ -96,7 +96,7 @@
.parent {
width: 200px;
height: 200px;
- border: 4px solid rgba(0,0,0,0.1);
+ border: 4px solid rgb(0 0 0 / 0.1);
border-radius: 50%;
margin: 40px;
}
diff --git a/time/styles.css b/time/styles.css
index 11945fee..f46d5bc4 100644
--- a/time/styles.css
+++ b/time/styles.css
@@ -1,10 +1,10 @@
/* 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)
+rgb(53 43 34)
+rgb(75 70 74)
+rgb(95 97 110)
+rgb(137 151 188)
+rgb(160 178 226)
*/
body {
background-color: #fff;
diff --git a/tools/border-image-generator/index.html b/tools/border-image-generator/index.html
index c478509d..b682c79c 100644
--- a/tools/border-image-generator/index.html
+++ b/tools/border-image-generator/index.html
@@ -90,7 +90,7 @@