Reduce duplicated code for banners (#749)

Unifies the banner and CTA css styles used on multiple pages.

Moves the element to a common location so the it can be found in the
source easily and be reused across pages.

Author: rauhul

assets/stylesheets/_elements.scss

@@ -0,0 +1 @@
+@import "elements/banner";

assets/stylesheets/application.scss

@@ -6,6 +6,7 @@ layout: source
 @import "colors";
 @import "syntax";
 @import "screen";
+@import "elements";
 @import "mobile";
 @import "pages";
 @import "print";

assets/stylesheets/core/colors/_dark.scss

@@ -25,7 +25,9 @@
 
   --color-banner-foreground: rgb(240, 81, 56);
   --color-banner-background: rgb(240, 81, 56, 0.1);
+  --color-banner-border: rgb(240, 81, 56, 0.15);
   --color-banner-detail: rgb(240, 81, 56, 0.5);
+
   --color-article-body-background: rgb(17, 17, 17);
   --color-button-background-active: #{dark-color(fill-blue)};
   --color-dropdown-background: var(--color-dropdown-dark-background);

assets/stylesheets/core/colors/_light.scss

@@ -26,7 +26,9 @@
 
   --color-banner-foreground: rgb(222, 75, 52);
   --color-banner-background: rgb(222, 75, 52, 0.1);
+  --color-banner-border: rgb(222, 75, 52, 0.15);
   --color-banner-detail: rgb(222, 75, 52, 0.5);
+
   --color-article-background: var(--color-fill-tertiary);
   --color-article-body-background: var(--color-fill);
   --color-aside-deprecated: var(--color-figure-gray);

assets/stylesheets/elements/_banner.scss

@@ -0,0 +1,33 @@
+// Default callout banner
+.banner {
+  padding: 0.75rem 1.25rem;
+
+  color: var(--color-text);
+  border: 1px solid var(--color-fill-tertiary);
+  background: var(--color-fill-secondary);
+  border-radius: var(--border-radius);
+
+  p {
+    margin: 0;
+  }
+}
+
+// Orange attention grabbing banner
+.banner.primary {
+  color: var(--color-banner-foreground);
+  border: 1px solid var(--color-banner-border);
+  background: var(--color-banner-background);
+  font-weight: 500;
+  text-align: center;
+
+  a {
+    color: inherit;
+    text-decoration: underline;
+    text-decoration-color: var(--color-banner-detail);
+    text-underline-offset: 2px;
+
+    &:hover {
+      color: var(--color-banner-foreground);
+    }
+  }
+}

assets/stylesheets/pages/_landing.scss

@@ -61,31 +61,6 @@
   }
 }
 
-.banner {
-  padding: 0.75rem 1.25rem;
-  margin: 2rem 0;
-  color: var(--color-banner-foreground);
-  background: var(--color-banner-background);
-  font-weight: 500;
-  text-align: center;
-  border-radius: var(--border-radius);
-
-  p {
-    margin: 0;
-  }
-
-  a {
-    color: inherit;
-    text-decoration: underline;
-    text-decoration-color: var(--color-banner-detail);
-    text-underline-offset: 2px;
-
-    &:hover {
-      text-decoration-color: var(--color-banner-foreground);
-    }
-  }
-}
-
 .link-grid {
   ul {
     display: grid;

index.md

@@ -16,7 +16,7 @@ atom: true
 {% endfor %}
 </div>
 
-<div class="banner">
+<div class="banner primary">
   <p>Get ready for the Swift 6 language mode with the <a href="https://www.swift.org/migration/documentation/migrationguide/">official migration guide</a></p>
 </div>
 

packages/_get-involved.html

@@ -1,3 +1,3 @@
-<p class="cta">
+<p class="banner">
   <strong>Get involved!</strong> Packages in the Community Showcase are nominated by community members like you. This is your chance to share new or interesting packages with others. <a href="https://forums.swift.org/t/68168">Nominate packages here</a> and you could see them featured next month!
 </p>