Better dark-mode landing pages

behoppe · Mar 21, 2023 · c0bef27 · c0bef27
1 parent 151759c
commit c0bef27
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 6 deletions.
diff --git a/src/_includes/posts_cards.njk b/src/_includes/posts_cards.njk
@@ -1,7 +1,7 @@
 {% for post in postslist | reverse %}
 
   <div class="col-md-6">
-    <div class="row p-2 no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
+    <div class="row p-2 no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative" style="background-color: var(--pst-color-surface);">
       <div class="col-9 d-flex flex-column position-static">
         <a href="{{ post.url | url }}"><h3 class="font-weight-bold mt-0 mb-0">{{ post.data.title }}</h3></a>
         <div class="mb-1 text-muted">{{ post.data.date | readableDate }} &mdash; By {{ post.data.author }}</div>

diff --git a/src/doc/index.njk b/src/doc/index.njk
@@ -12,7 +12,7 @@ eleventyNavigation:
 <p>See also our <a href="/posts/">Fast code</a> blog, which puts it all in context with stories about the latest developments in performance engineering.</p>
 
 <div class="d-flex flex-wrap">
-  <div class="flex-fill m-2 p-2 rounded-3" style="background-color: var(--yellow);">
+  <div class="flex-fill m-2 p-2 rounded" style="background-color: var(--pst-color-surface); border-left: 0.2rem solid var(--yellow); border-top: 0.2rem solid var(--yellow);">
     <div class="text-center">
       <h3 class="mt-0 mb-1">User's guide</h2>
       <p class="lead">Doing things with OpenCilk</p>
@@ -27,7 +27,7 @@ eleventyNavigation:
     </ul>
   </div>
 
-  <div class="flex-fill m-2 p-2 rounded-3" style="background-color: var(--gray);">
+  <div class="flex-fill m-2 p-2 rounded" style="background-color: var(--pst-color-surface); border-left: 0.2rem solid var(--teal); border-top: 0.2rem solid var(--teal);">
     <div class="text-center">
       <h3 class="mt-0 mb-1">Tutorials</h2>
       <p class="lead">Learning OpenCilk concepts</p>
@@ -42,7 +42,7 @@ eleventyNavigation:
     </ul>
   </div>
 
-  <div class="flex-fill m-2 p-2 rounded-3" style="background-color: var(--teal);">
+  <div class="flex-fill m-2 p-2 rounded" style="background-color: var(--pst-color-surface); border-left: 0.2rem solid var(--blue); border-top: 0.2rem solid var(--blue);"">
     <div class="text-center">
       <h3 class="mt-0 mb-1">Reference</h2>
       <p class="lead">Defining OpenCilk specifications</p>

diff --git a/src/img/OpenCilk-Logo-1001-dark.png b/src/img/OpenCilk-Logo-1001-dark.png
diff --git a/src/index.njk b/src/index.njk
@@ -5,7 +5,9 @@ eleventyNavigation:
   key: Home
   order: 1
 hero:
-  image: /img/OpenCilk-Logo-1001.png
+  image:
+    light: /img/OpenCilk-Logo-1001.png
+    dark: /img/OpenCilk-Logo-1001-dark.png
   subtitle: The language of performance engineering
 features:
 - call: Write fast code
@@ -51,7 +53,8 @@ features:
 
 ---
 
-<img class="d-block pt-4 pb-4 mx-auto" src="{{ hero.image }}" width="440">
+<img class="hero-light pt-4 pb-4 mx-auto" src="{{ hero.image.light }}" width="440">
+<img class="hero-dark only-dark pt-4 pb-4 mx-auto" src="{{ hero.image.dark }}" width="440">
 <div class="text-center" style="font-size: large;">
   <p class="mb-4 mx-auto">{{ metadata.tagline }}</p>
 </div>

diff --git a/src/sphinx/docs/build/html/_static/css/custom.css b/src/sphinx/docs/build/html/_static/css/custom.css
@@ -52,6 +52,18 @@ html[data-theme="light"] {
   --pst-color-preformatted-background: white;
   --pst-color-inline-code: var(--tangelo);
 }
+html[data-theme="light"] img.hero-light {
+  display: block;
+}
+html[data-theme="light"] img.hero-dark {
+  display: none;
+}
+html[data-theme="dark"] img.hero-light {
+  display: none;
+}
+html[data-theme="dark"] img.hero-dark {
+  display: block;
+}
 html[data-theme="dark"] {
   background: url('/img/dark-grey-silk-bg.jpg') no-repeat center center fixed;
   -webkit-background-size: cover;
@@ -72,6 +84,9 @@ html[data-theme="dark"] {
   --pst-color-preformatted-background: white;
   --pst-color-inline-code: var(--yellow);
 }
+html[data-theme="dark"] .bd-content img:not(.only-dark) {
+  background: transparent;
+}
 h1, h2, h3, h4, h5, h6 {
   font-family: Ubuntu, sans-serif;
   color: var(--pst-color-header);

diff --git a/src/sphinx/docs/source/_static/css/custom.css b/src/sphinx/docs/source/_static/css/custom.css
@@ -52,6 +52,18 @@ html[data-theme="light"] {
   --pst-color-preformatted-background: white;
   --pst-color-inline-code: var(--tangelo);
 }
+html[data-theme="light"] img.hero-light {
+  display: block;
+}
+html[data-theme="light"] img.hero-dark {
+  display: none;
+}
+html[data-theme="dark"] img.hero-light {
+  display: none;
+}
+html[data-theme="dark"] img.hero-dark {
+  display: block;
+}
 html[data-theme="dark"] {
   background: url('/img/dark-grey-silk-bg.jpg') no-repeat center center fixed;
   -webkit-background-size: cover;
@@ -72,6 +84,9 @@ html[data-theme="dark"] {
   --pst-color-preformatted-background: white;
   --pst-color-inline-code: var(--yellow);
 }
+html[data-theme="dark"] .bd-content img:not(.only-dark) {
+  background: transparent;
+}
 h1, h2, h3, h4, h5, h6 {
   font-family: Ubuntu, sans-serif;
   color: var(--pst-color-header);