style: change single page style

5 files changed, 47 insertions, 5 deletions

diff --git a/assets/css/base.css b/assets/css/base.css
new file mode 100644
index 0000000..3359edc
--- /dev/null
+++ b/assets/css/base.css
@@ -0,0 +1,12 @@
+:root{
+    @apply font-serif bg-tertiary;
+    --color-primary: #38B2AC;
+    --color-secondary: #FBFBFC;
+    --color-tertiary: #F2F2F7;
+}
+
+.dark {
+    --color-primary: #38B2AC;
+    --color-secondary: #303030;
+    --color-tertiary: #000000;
+}
\ No newline at end of file
diff --git a/assets/css/markdown.css b/assets/css/markdown.css
index 75ccc2d..05222d3 100644
--- a/assets/css/markdown.css
+++ b/assets/css/markdown.css
@@ -25,7 +25,7 @@
 }
 
 .markdown a {
-  @apply text-blue-600 font-semibold;
+  @apply font-semibold;
 }
 
 .markdown strong a {
@@ -97,6 +97,6 @@
 }
 
 /* Override pygments style background color. */
-.markdown .highlight pre {
+/* .markdown .highlight pre {
   @apply bg-gray-100 !important;
-}
+} */
diff --git a/assets/css/site.css b/assets/css/site.css
index 1e755f2..4748888 100644
--- a/assets/css/site.css
+++ b/assets/css/site.css
@@ -1,3 +1,23 @@
 .starter {
   color: blue;
+}
+
+.sticky-title {
+  @apply sticky top-0
+}
+
+.sticky-toc {
+  @apply sticky top-0
+}
+
+.sticky-toc a {
+  @apply text-gray-100
+}
+
+.sticky-toc a:hover, a:focus {
+  @apply text-red-900
+}
+
+.important-text {
+  @apply text-red-900 !important
 }
\ No newline at end of file
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 9611800..73a4e0b 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -1,9 +1,12 @@
 /* Tailwind base - put variables under: tailwind.config.js */
 @import "node_modules/tailwindcss/base";
+
+@import "assets/css/base";
+
 /* Tailwind component classes registered by plugins*/
 @import "node_modules/tailwindcss/components";
 /* Site Specific */
-@import "assets/css/site";
 @import "assets/css/markdown";
+@import "assets/css/site";
 /* Tailwind's utility classes - generated based on config file */
 @import "node_modules/tailwindcss/utilities";
\ No newline at end of file
diff --git a/assets/css/tailwind.config.js b/assets/css/tailwind.config.js
index dd6532c..2f2b890 100644
--- a/assets/css/tailwind.config.js
+++ b/assets/css/tailwind.config.js
@@ -1,6 +1,13 @@
 module.exports = {
+  important: true,
   theme: {
-    extend: {}
+    extend: {
+      colors: {
+        primary: 'var(--color-primary)',
+        secondary: 'var(--color-secondary)',
+        tertiary: 'var(--color-tertiary)',
+      }
+    }
   },
   variants: {},
   plugins: []