Introduce block and inline callout components

This is a nicer way of showing current updates.

includes/layouts/base/main.njk

@@ -66,6 +66,12 @@
 			</nav>
 		</header>
 
+		{% if callout %}
+			<div class='page-callout'>
+				{{ callout }}
+			</div>
+		{% endif %}
+
 		<main id="content" {% if contentClass %} class="{{ contentClass }}"{% endif %}>
 			{% block content %}
 				{{ content | safe }}

sites/angestoepselt/computer-beantragen/index.md

@@ -4,6 +4,7 @@ useForms: true
 eleventyNavigation:
   key: Computer beantragen
   order: 50
+callout: "Hinweis: Wir bekommen gerade sehr viele Anfragen und können daher keine neuen Laptops ausgeben!"
 ---
 
 # Computer beantragen
@@ -11,8 +12,6 @@ eleventyNavigation:
 Damit wir dir einen Computer geben können, musst du uns einige Fragen beantworten.
 Danach können wir den Antrag prüfen und uns bei dir melden.
 
-_Hinweis: Wir bekommen gerade sehr viele Anfragen und können daher keine neuen Laptops ausgeben!_
-
 
 Für wen brauchst du den Computer?
 

sites/angestoepselt/computer-beantragen/privat.md

@@ -1,6 +1,7 @@
 ---
 layout: layouts/page.njk
 useForms: true
+callout: "Hinweis: Wir bekommen gerade sehr viele Anfragen und können daher keine neuen Laptops ausgeben!"
 ---
 
 # Privat einen Computer beantragen

sites/angestoepselt/index.md

@@ -22,7 +22,10 @@ Wir schaffen Zugang in die digitale Welt
   </div>
 
   <a href="/computer-beantragen">
+    <div>
       <h3>Computer bekommen</h3>
+      <em class="inline-callout">Aktuell keine Laptops</em>
+    </div>
     <svg class="action-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 219 175">
       <linearGradient id="emphasis-gradient-sun" class="emphasis-gradient">
         <stop offset="0%" />

styles/components/_actions.scss

@@ -39,11 +39,16 @@
 		@include colors.card-shadow;
 		transition: motion.$subtle background-color, motion.$subtle transform;
 
-		> h3 {
+		> h3,
+		> div > h3 {
 			margin: 0;
 			text-transform: uppercase;
 		}
 
+		> div > .inline-callout {
+			margin-top: layout.$normal-gap;
+		}
+
 		> svg {
 			align-self: center;
 			margin-bottom: layout.$normal-gap;

styles/components/_banner.scss

@@ -81,3 +81,20 @@
 		}
 	}
 }
+
+%callout {
+	background-color: colors.$yellow-300;
+	color: colors.$blue-800;
+}
+
+.page-callout {
+	@extend %callout;
+	padding: layout.$normal-gap;
+}
+
+.inline-callout {
+	@extend %callout;
+	display: inline-block;
+	font-style: normal;
+	padding: layout.$small-gap layout.$normal-gap;
+}