Ensure headings differ in shade/tint to body copy

georgedoescode · georgedoescode · commit 1c62b830da0b · 2022-10-12T15:06:47.000+01:00
diff --git a/src/css/tailwind.css b/src/css/tailwind.css
@@ -9,6 +9,9 @@
 
 
 @layer base {
+  h1, h2, h3 {
+    @apply text-blue-900 dark:text-white;
+  }
   h1 {
     @apply font-bold text-4xl leading-tight my-8;
   }
@@ -18,7 +21,7 @@
     }
   }
   h2 {
-    @apply text-blue-900 dark:text-white text-3xl font-bold leading-none mb-2;
+    @apply text-3xl font-bold leading-none mb-2;
   }
   @screen md {
     h2 {
@@ -393,6 +396,7 @@ details[open] .summary-swap-open {
   @apply bg-black;
   @apply text-sm;
   @apply font-bold;
+  @apply text-blue-100;
   position: absolute;
   right: .4em;
   top: .4em;
diff --git a/src/site/_includes/layouts/base.njk b/src/site/_includes/layouts/base.njk
@@ -50,7 +50,7 @@ ogimage: "/img/og/default-og-image.png"
     <script defer src="{{ url }}"></script>
     {%- endfor %}
   </head>
-  <body class="bg-gray-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100 leading-relaxed antialiased">
+  <body class="bg-gray-100 dark:bg-blue-900 text-blue-800 dark:text-blue-100 leading-relaxed antialiased">
     <svg width="0" height="0" aria-hidden="true" style="position: absolute;">
       <defs>
         <symbol id="logo-jamstack" viewBox="0 0 523 98" fill="none">

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,9 @@`
`9`	`9`
`10`	`10`
`11`	`11`	`@layer base {`
	`12`	`+ h1, h2, h3 {`
	`13`	`+ @apply text-blue-900 dark:text-white;`
	`14`	`+ }`
`12`	`15`	`h1 {`
`13`	`16`	`@apply font-bold text-4xl leading-tight my-8;`
`14`	`17`	`}`
`@@ -18,7 +21,7 @@`
`18`	`21`	`}`
`19`	`22`	`}`
`20`	`23`	`h2 {`
`21`		`- @apply text-blue-900 dark:text-white text-3xl font-bold leading-none mb-2;`
	`24`	`+ @apply text-3xl font-bold leading-none mb-2;`
`22`	`25`	`}`
`23`	`26`	`@screen md {`
`24`	`27`	`h2 {`
`@@ -393,6 +396,7 @@ details[open] .summary-swap-open {`
`393`	`396`	`@apply bg-black;`
`394`	`397`	`@apply text-sm;`
`395`	`398`	`@apply font-bold;`
	`399`	`+ @apply text-blue-100;`
`396`	`400`	`position: absolute;`
`397`	`401`	`right: .4em;`
`398`	`402`	`top: .4em;`