fix(launch): add inline notification styles for noscript users

Author: bennypowers

docs/docs/presets/launch.md

@@ -58,7 +58,7 @@ The launch preset configures [11ty data](https://www.11ty.dev/docs/data/) using
 import '@rocket/launch/inline-notification/inline-notification.js';
 ```
 
-Launch ships with `<inline-notification>`, a custom element that applies some styles similar to "info boxes".
+Launch ships with `<inline-notification>`, a custom element that applies some styles similar to "info boxes". The element works for `<noscript>` users as well, as long as you don't [override](/guides/presets/override/) the default `noscript.css` file.
 
 To add an inline notification you need to remember to import the element definition:
 
@@ -134,3 +134,9 @@ I am a success message
 
 </inline-notification>
 ```
+
+<inline-notification type="warning">
+
+The `title` attribute does not change the title for `<noscript>` users, so don't include any critical information in it.
+
+</inline-notification>

packages/launch/preset/_assets/_static/noscript.css

@@ -4,3 +4,53 @@
 :not(:defined) {
   opacity: 1 !important;
 }
+
+inline-notification {
+  padding: 0.1rem 1.5rem;
+  border-left-width: 0.5rem;
+  border-left-style: solid;
+  margin: 1rem 0;
+  display: block;
+  opacity: 1 !important;
+}
+
+inline-notification::before {
+  content: attr(type);
+  font-weight: 600;
+  font-size: 1.17em;
+  margin-top: 24px;
+  margin-bottom: 7px;
+  display: block;
+  text-transform: uppercase;
+}
+
+inline-notification[type='tip'] {
+  background-color: var(--inline-notification-tip-background-color, rgba(221, 221, 221, 0.3));
+  border-color: var(--inline-notification-tip-border-color, #42b983);
+}
+
+inline-notification[type='warning'] {
+  background-color:
+    var(
+      --inline-notification-warning-background-color,
+      rgba(255, 229, 100, 0.2)
+    );
+  border-color: var(--inline-notification-warning-border-color, #e7c000);
+}
+
+inline-notification[type='danger'] {
+  background-color: var(--inline-notification-danger-background-color, rgba(192, 0, 0, 0.1));
+  border-color: var(--inline-notification-danger-border-color, #c00);
+}
+
+inline-notification[type='warning']::before {
+  color: var(--inline-notification-warning-heading-color, #b29400);
+}
+
+inline-notification[type='danger']::before {
+  color: var(--inline-notification-danger-heading-color, #900);
+}
+
+inline-notification > p {
+  line-height: 1.7;
+}