finish off initial dark mode

rubyapi · Nov 3, 2019 · cc864ef · cc864ef
1 parent 7243faa
commit cc864ef
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 12 deletions.
diff --git a/app/javascript/packs/app/application.scss b/app/javascript/packs/app/application.scss
@@ -1,8 +1,8 @@
 /* purgecss start ignore */
-@import "tailwindcss/base";
+@tailwind base;
 /* purgecss end ignore */
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+@tailwind components;
+@tailwind utilities;
 
 /* purgecss start ignore */
 
@@ -23,26 +23,38 @@ code {
   @apply bg-gray-300 rounded leading-relaxed text-sm text-gray-700;
 }
 
+@screen dark {
+  code { @apply bg-gray-700 text-gray-400; }
+}
+
 pre:not(.ruby) {
   @apply overflow-auto font-mono;
 }
 
 .pagination {
-  & { @apply py-5 text-lg }
+  & { @apply py-5 text-lg; }
 
   .current {
-    & { @apply text-white bg-red-500 }
+    & { @apply text-white bg-red-500; }
+
+    @screen dark {
+      & { @apply bg-gray-700 text-gray-200; }
+    }
   }
 
   .page a, .next a, .prev  a, .last a, .first a, .current {
-    & { @apply px-2 inline-block text-center py-0 rounded }
-    &:hover { @apply text-white bg-red-600 }
+    & { @apply px-2 inline-block text-center py-0 rounded; }
+    &:hover { @apply text-white bg-red-600; }
+
+    @screen dark {
+      &:hover { @apply bg-gray-900 text-gray-200; }
+    }
   }
 }
 
 .ruby-documentation pre {
   h1, h2, h3, h4, h5 {
-    @apply font-bold text-lg py-1;
+    @apply font-semibold text-lg py-1;
   }
 }
 

diff --git a/app/views/objects/show.html.slim b/app/views/objects/show.html.slim
@@ -54,12 +54,12 @@ div class="max-w-screen-xl mx-auto px-3 md:px-0 lg:flex"
                     = seq
           div class="flex md:justify-end w-full md:w-2/12 mt-3 md:mt-0 font-mono"
             - if m.instance_method?
-              a class="px-2 h-6 inline-block rounded bg-gray-200 text-gray-600 dark:bg-gray-700 algin-middle cursor-default hover:bg-gray-300 hover:text-gray-800 hover:fill-current" title="Instance Method"
+              a class="px-2 h-6 inline-block rounded bg-gray-200 dark:bg-gray-700 algin-middle cursor-default hover:bg-gray-300 hover:text-gray-800 dark:hover:bg-gray-900 dark:hover:text-gray-400 hover:fill-current" title="Instance Method"
                 | #
             - elsif m.class_method?
-              a class="px-2 h-6 inline-block rounded bg-gray-200 text-gray-600 dark:bg-gray-700 algin-middle cursor-default hover:bg-gray-300 hover:text-gray-800 hover:fill-current" title="Class Method"
+              a class="px-2 h-6 inline-block rounded bg-gray-200 dark:bg-gray-700 algin-middle cursor-default hover:bg-gray-300 hover:text-gray-800 dark:hover:bg-gray-900 dark:hover:text-gray-400 hover:fill-current" title="Class Method"
                 | ::
-            a class="px-1 ml-2 h-6 inline-block rounded bg-gray-200 text-gray-600 dark:bg-gray-700 align-middle hover:bg-gray-300 hover:text-gray-800 hover:fill-current" href="#{github_url m}" target="_blank" rel="noopener" title="View source on Github"
+            a class="px-1 ml-2 h-6 inline-block rounded bg-gray-200 dark:bg-gray-700 align-middle hover:bg-gray-300 hover:text-gray-800 dark:hover:bg-gray-900 dark:hover:text-gray-400 hover:fill-current" href="#{github_url m}" target="_blank" rel="noopener" title="View source on Github"
               i class="fab fa-github"
         div class="ruby-documentation py-1"
           - if m.description.empty?

diff --git a/postcss.config.js b/postcss.config.js
@@ -10,7 +10,6 @@ const purgecss = require('@fullhuman/postcss-purgecss')({
 
 module.exports = {
   plugins: [
-    require('postcss-import'),
     require('tailwindcss'),
     require('autoprefixer'),
     require('postcss-flexbugs-fixes'),