feat: theme change to ayu dark

Jitesh117 · Jul 8, 2024 · 6715b84 · 6715b84
1 parent 560f63b
commit 6715b84
Show file tree

Hide file tree

Showing 3 changed files with 160 additions and 16 deletions.
diff --git a/assets/css/common/post-single.css b/assets/css/common/post-single.css
@@ -45,29 +45,54 @@
 }
 
 .post-content h1 { color: var(--primary); margin: 40px auto 32px; font-size: 40px; }
-.post-content h2 {
-  color: #E5C890; /* Yellow */
+/* .post-content h2 {
+  color: #E5C890;
   margin: 32px auto 24px;
   font-size: 32px;
 }
 
 .post-content h3 {
-  color: #98C377; /* Green */
+  color: #98C377;
   font-size: 24px;
 }
 
 .post-content h4 {
-  color: #e146b8; /* Maroon */
+  color: #e146b8;
   font-size: 16px;
 }
 
 .post-content h5 {
-  color: #F28FAD; /* Red */
+  color: #F28FAD;
   font-size: 14px;
 }
 
 .post-content h6 {
-  color: #A6ADC8; /* Surface2 */
+  color: #A6ADC8;
+  font-size: 12px;
+} */
+ .post-content h2 {
+  color: #ff9100; /* Ayu Dark Yellow */
+  margin: 32px auto 24px;
+  font-size: 32px;
+}
+
+.post-content h3 {
+  color: #37da93; /* Ayu Dark Green */
+  font-size: 24px;
+}
+
+.post-content h4 {
+  color: #FF8F40; /* Ayu Dark Orange */
+  font-size: 16px;
+}
+
+.post-content h5 {
+  color: #FF3333; /* Ayu Dark Red */
+  font-size: 14px;
+}
+
+.post-content h6 {
+  color: #5C6773; /* Ayu Dark Gray */
   font-size: 12px;
 }
 

diff --git a/assets/css/core/reset.css b/assets/css/core/reset.css
@@ -0,0 +1,119 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Slab:[email protected]&display=swap');
+*,
+::after,
+::before {
+    box-sizing: border-box;
+}
+
+html {
+    -webkit-tap-highlight-color: transparent;
+    overflow-y: scroll;
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+}
+
+a,
+button,
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--primary);
+}
+
+body {
+    font-family:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-size: 18px;
+    line-height: 1.6;
+    word-break: break-word;
+    background: var(--theme);
+}
+
+article,
+aside,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+table {
+    display: block;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    line-height: 1.2;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+ul {
+    padding: 0;
+}
+
+a {
+    text-decoration: none;
+}
+
+body,
+figure,
+ul {
+    margin: 0;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    overflow-x: auto;
+    word-break: keep-all;
+}
+
+button,
+input,
+textarea {
+    padding: 0;
+    font: inherit;
+    background: 0 0;
+    border: 0;
+}
+
+input,
+textarea {
+    outline: 0;
+}
+
+button,
+input[type=button],
+input[type=submit] {
+    cursor: pointer;
+}
+
+input:-webkit-autofill,
+textarea:-webkit-autofill {
+    box-shadow: 0 0 0 50px var(--theme) inset;
+}
+
+img {
+    display: block;
+    max-width: 100%;
+}
diff --git a/assets/css/core/theme-vars.css b/assets/css/core/theme-vars.css
@@ -20,16 +20,16 @@
 }
 
 .dark {
-/* Dark mode colors */
---theme: #1E1E2E; /* Mantle */
---entry: #473974; /* Crust */
---primary: #D9E0EE; /* Light crust */
---secondary: #b5b8e3; /* Green */
---tertiary: #2e3793; /* Yellow */
---content: #D9E0EE; /* Light crust */
---code-block-bg: #3f3144; /* Surface */
---code-bg: #63359f; /* Crust */
---border: #585B70; /* Crust */
+    /* Ayu Dark theme colors */
+    --theme: #0A0E14; /* Background */
+    --entry: #1F2430; /* Slightly lighter background for entries */
+    --primary: #E6E1CF; /* Primary text color */
+    --secondary: #fffffe; /* Secondary text color */
+    --tertiary: #ff9100; /* Accent color (Yellow in Ayu) */
+    --content: #E6E1CF; /* Content text color */
+    --code-block-bg: #191E2A; /* Code block background */
+    --code-bg: #232834; /* Inline code background */
+    --border: #3D424D; /* Border color */
 }
 
 .list {