Merge pull request #241 from wpaccessibility/233-remove-css-content-callout-blocks

233 Remove css content callout blocks

Author: rianrietveld

_sass/components/_callouts.scss

@@ -19,49 +19,44 @@ p.example {
   background: var(--color-informative-bg-document);
   border-left-color: var(--color-informative-border-default);
 
-  &::before {
-    color: var(--color-informative-color-document);
-    content: "Example";
+  > strong {
+    color: var(--color-informative-color-s);
   }
 }
 
 p.alert {
   background: var(--color-warning-bg-document);
   border-left-color: var(--color-warning-border-default);
 
-  &::before {
-    color: var(--color-warning-color-document);
-    content: "Alert";
+  > strong {
+    color: var(--color-warning-color-subtle);
   }
 }
 
 p.tip {
   background: var(--color-positive-bg-document);
   border-left-color: var(--color-positive-border-default);
 
-  &::before {
-    color: var(--color-positive-color-document);
-    content: "Tip";
+  > strong {
+    color: var(--color-positive-color-subtle);
   }
 }
 
 p.info {
   background: var(--color-informative-bg-default);
   border-left-color: var(--color-informative-border-default);
 
-  &::before {
-    color: var(--color-informative-color-document);
-    content: "Info";
+  > strong {
+    color: var(--color-informative-color-subtle);
   }
 }
 
 p.warning {
   background: var(--color-negative-bg-default);
   border-left-color: var(--color-negative-border-default);
 
-  &::before {
+  > strong {
     color: var(--color-negative-color-subtle);
-    content: "Warning";
   }
 }
 
@@ -70,9 +65,8 @@ p.dont {
   border: 2px solid var(--color-negative-border-default);
   border-radius: $border-radius;
 
-  &::before {
+  > strong {
     color: var(--color-negative-color-subtle);
-    content: "Don't";
   }
 }
 
@@ -81,7 +75,7 @@ p.do {
   border: 2px solid var(--color-positive-border-default);
   border-radius: $border-radius;
 
-  &::before {
-    content: "Do";
+  > strong {
+    color: var(--color-positive-color-subtle);
   }
 }

docs/about/accessibility-statement.md

@@ -17,7 +17,7 @@ Please inform us!
 - or create an [issue in GitHub](https://github.com/wpaccessibility/wp-a11y-docs/issues/).
 
 {: .callout  .info }
-Please note: this is only for accessibility issues in **this website** and not for WordPress itself. If you find an accessibility issue in WordPress core, or in one of the core themes, please create a [new ticket on Make WordPress Core](https://core.trac.wordpress.org/newticket) and give it the focus “accessibility”.
+**Please note:** this is only for accessibility issues in **this website** and not for WordPress itself. If you find an accessibility issue in WordPress core, or in one of the core themes, please create a [new ticket on Make WordPress Core](https://core.trac.wordpress.org/newticket) and give it the focus “accessibility”.
 
 ## Known accessibility issues
 

docs/contribute/github/content-kitchen-sink.md

@@ -10,7 +10,7 @@ has_video: true
 This page lists the options and code available for creating content in this documentation.
 
 {: .callout  .info }
-WordPress.org provides a lot of style guides for documentation: [WordPress Style Guides - highlights](https://make.wordpress.org/docs/style-guide/welcome/highlights/). We value most of all: be [kind and professional](docs/contribute/CODE_OF_CONDUCT.md) in your text and please write the text yourself or make sure the reader knows who you are citing.
+**Please note:** WordPress.org provides a lot of style guides for documentation: [WordPress Style Guides - highlights](https://make.wordpress.org/docs/style-guide/welcome/highlights/). We value most of all: be [kind and professional](docs/contribute/CODE_OF_CONDUCT.md) in your text and please write the text yourself or make sure the reader knows who you are citing.
 
 ## Headings
 ```markdown
@@ -31,11 +31,11 @@ WordPress.org provides a lot of style guides for documentation: [WordPress Style
 ###### This is an H6 heading
 
 {: .callout  .alert }
-In blog posts the H1 is added by the template: [Add a blog post]({{site.baseurl}}/docs/contribute/github/blog-post/).
+**Alert:** In blog posts the H1 is added by the template: [Add a blog post]({{site.baseurl}}/docs/contribute/github/blog-post/).
 
 ## Summary in a larger text font.
 
-Start the paragraph with an H2 named "Summaty, or introduction and the callout {: .lead }`
+Start the paragraph with an H2 named "Summary, or introduction and the callout {: .lead }`
 
 
 ```markdown
@@ -83,7 +83,7 @@ An image: ![Alt text](url)
 ![Library]({{site.baseurl}}/assets/images/small-image.jpg)
 
 {: .callout  .tip } 
-For more text options with Markdown read: [Basic writing and formatting syntax](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax) on GitHub.
+**Tip:** For more text options with Markdown read: [Basic writing and formatting syntax](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax) on GitHub.
 
 ## Videos
 This site uses the accessible media player Able Player.
@@ -166,54 +166,54 @@ For larger pieces of content, you can add to a `<p>`, `<div>`or even a landmark,
 
 ```markdown
 {: .callout  .info }
-This is an informational message and uses the “info” callout.
+**Info:** This is an informational message and uses the “info” callout.
 
 {: .callout  .tip }
-Use the “tip” callout to highlight tips.
+**Tip:** Use the “tip” callout to highlight tips.
 
 {: .callout  .alert }
-The “alert” callout is for alerting readers to important messages.
+**Alert:** The “alert” callout is for alerting readers to important messages.
 
 {: .callout  .warning }
-When something is particularly precarious, use the “warning” callout.
+**Warning:** When something is particularly precarious, use the “warning” callout.
 
 {: .callout  .example }
-Give an example with the "example" callout. 
+**Example:** Give an example with the "example" callout. 
 The title of the callout will be "Example".
 
 {: .callout  .do }
-Example of good practice.
+**Do:** Example of good practice.
 
 {: .callout  .dont }
-Example of bad practice.
+**Don't:** Example of bad practice.
 
 ```
 
 {: .callout  .info }
-This is an informational message and uses the “info” callout.
+**Info:** This is an informational message and uses the “info” callout.
 
 {: .callout  .tip }
-Use the “tip” callout to highlight tips.
+**Tip:** Use the “tip” callout to highlight tips.
 
 {: .callout  .alert }
-The “alert” callout is for alerting readers to important messages.
+**Alert:** The “alert” callout is for alerting readers to important messages.
 
 {: .callout  .warning }
-When something is particularly precarious, use the “warning” callout.
+**Warning:** When something is particularly precarious, use the “warning” callout.
 
 {: .callout  .example }
-Give an example with the example. The title of the callout will be "Example".
+**Example:** Give an example with the example.
 
 {: .callout  .do }
-Example of how to do something. The title of the callout will be "Do".
+**Do:** Example of how to do something.
 
 {: .callout  .dont }
-Example of how not to do something. The title of the callout will be "Don't".
+**Don't:** Example of how not to do something. 
 
 ### Labels
 
 {: .callout  .info }
-Note: these are not form labels, but text labels.
+**Please note:** These are not form labels, but text labels.
 
 
 ```markdown

docs/contribute/github/index.md

@@ -11,6 +11,6 @@ We use the GitHub repository [wpaccessibility/wp-a11y-docs](https://github.com/w
 The project board [WP A11y docs](https://github.com/orgs/wpaccessibility/projects/3) contains all open issues and also the pull requests to review.
 
 {: .callout  .alert }
-Before you start writing new documentation, please let us know that you’d like to work on it, so we can assign the task to you. Content written without contacting the project leads first, will not be reviewed.
+**Alert:** Before you start writing new documentation, please let us know that you’d like to work on it, so we can assign the task to you. Content written without contacting the project leads first, will not be reviewed.
 
 

docs/contribute/report-error.md

@@ -15,4 +15,4 @@ There are several ways you can report an error:
 - Open an issue in the GitHub repository [wpaccessibility/wp-a11y-docs](https://github.com/wpaccessibility/wp-a11y-docs/).
 
 {: .callout  .info }
-Please note: this is only for errors in the documentation or code in **wpaccessibility.org** and not for WordPress itself. If you find an accessibility issue in WordPress core, or in one of the core themes, please create a [new ticket on Make WordPress Core](https://core.trac.wordpress.org/newticket) and give it the focus “accessibility”.
+**Please note:** This is only for errors in the documentation or code in **wpaccessibility.org** and not for WordPress itself. If you find an accessibility issue in WordPress core, or in one of the core themes, please create a [new ticket on Make WordPress Core](https://core.trac.wordpress.org/newticket) and give it the focus “accessibility”.

docs/contribute/write.md

@@ -8,12 +8,12 @@ nav_order: 3
 # Write documentation
 
 {: .callout  .alert }
-Before you start writing new documentation, please let us know that you’d like to work on it, so we can assign the task to you. Content written without contacting the project leads first, will not be reviewed.
+**Alert:** Before you start writing new documentation, please let us know that you’d like to work on it, so we can assign the task to you. Content written without contacting the project leads first, will not be reviewed.
 
 We keep track of the work on the documentation in the project board [WP A11y docs](https://github.com/orgs/wpaccessibility/projects/3).
 
 {: .callout  .tip }
-Please write the content yourself and use AI (artificial intelligence) only to translate or to check the quality of your English.
+**Tip:** Please write the content yourself and use AI (artificial intelligence) only to translate or to check the quality of your English.
 
 To keep all pages in the same structure, please stick to the following formats for a blogpost or an accessibility topic.
 

docs/guide/index.md

@@ -7,7 +7,7 @@ nav_order: 3
 # Reading guide
 
 {: .callout  .alert }
-This content will be created later, when there is sufficient content to point to.  
+**Alert:** This content will be created later, when there is sufficient content to point to.  
 Help discuss how to create a useful reading guide for various target groups with comments on issue [GitHub #59
 Reading guide](https://github.com/wpaccessibility/wp-a11y-docs/issues/59).  
 

docs/legislation/index.md

@@ -7,5 +7,5 @@ nav_order: 7
 # Legislation
 
 {: .callout  .alert }
-This content will be written.  
+**Alert:** This content will be written.  
 Related issue on [GitHub #179 Intro page Legislation](https://github.com/wpaccessibility/wp-a11y-docs/issues/177).    

docs/resources/index.md

@@ -7,5 +7,5 @@ nav_order: 9
 # Resources on accessibility
 
 {: .callout  .alert }
-This content will be written.  
+**Alert:** This content will be written.  
 Related issue on [GitHub #181 Intro page Resources on accessibility](https://github.com/wpaccessibility/wp-a11y-docs/issues/181).    

docs/start/at/index.md

@@ -8,5 +8,5 @@ nav_order: 5
 # Assistive technology
 
 {: .callout  .alert }
-This content will be written.
+**Alert:** This content will be written.
 Related issue on [GitHub #87 Assistive technology](https://github.com/wpaccessibility/wp-a11y-docs/issues/87).