More changes

README.md

@@ -1 +1,5 @@
 # calebburke.dev
+
+## Resources
+
+- <https://github.com/cotes2020/jekyll-theme-chirpy>

web/src/components/common/AppLogo.vue

@@ -6,7 +6,7 @@
     >
       <img
         class="ml-0 mt-1"
-        style="height: 36px; transform: rotate(-12deg)"
+        style="height: 36px"
         :src="AppLogo"
       />
       <div v-if="sidebarMini || mdAndDown"></div>
@@ -15,12 +15,13 @@
         class="d-flex"
         style="width: 200px"
       >
-        <div
+        <h1
-          class="mt-1 ml-3 rotyr-font"
+          class="mt-1 ml-3"
-          style="font-size: 26px; color: #505682"
+          color="primary"
+          style="font-size: 26px"
         >
           CALEBBURKEDEV
-        </div>
+        </h1>
       </div>
     </RouterLink>
   </div>

web/src/components/layout/DefaultAppBar.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app-bar
     id="top"
-    elevation="10"
+    elevation="6"
     height="60"
     class="main-head pl-2"
   >

web/src/plugins/vuetify-plugin.ts

@@ -6,7 +6,6 @@
 
 // Styles
 import "@mdi/font/css/materialdesignicons.css"
-import "vuetify/styles"
 
 // ComposablesF
 import { createVuetify } from "vuetify"
@@ -21,7 +20,9 @@ import {
   DARK_PURPLE_THEME,
   DARK_GREEN_THEME,
   DARK_CYAN_THEME,
+  CHIRPY_JEKYLL_DARK_THEME,
 } from "@/theme/DarkTheme"
+import { CHIRPY_JEKYLL_THEME } from "@/theme/LightTheme"
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
@@ -31,7 +32,7 @@ export default createVuetify({
   },
   directives,
   theme: {
-    defaultTheme: "DARK_AQUA_THEME",
+    defaultTheme: "CHIRPY_JEKYLL_DARK_THEME",
     themes: {
       DARK_BLUE_THEME,
       DARK_AQUA_THEME,
@@ -39,6 +40,8 @@ export default createVuetify({
       DARK_PURPLE_THEME,
       DARK_GREEN_THEME,
       DARK_CYAN_THEME,
+      CHIRPY_JEKYLL_THEME,
+      CHIRPY_JEKYLL_DARK_THEME,
     },
   },
   defaults: {

web/src/theme/DarkTheme.ts

@@ -4,29 +4,29 @@ const DARK_BLUE_THEME: ThemeTypes = {
   name: "DARK_BLUE_THEME",
   dark: true,
   variables: {
-    "border-color": "#333F55",
+    "border-color": "#373737",
     "border-opacity": 1,
   },
   colors: {
-    primary: "#1B84FF",
+    primary: "#4d8ce8",
-    secondary: "#0cb9c5",
+    secondary: "#40b883",
-    lightprimary: "#253662",
+    lightprimary: "#374d77",
-    lightsecondary: "#1C455D",
+    lightsecondary: "#0d2e20",
-    lightsuccess: "#1B3C48",
+    lightsuccess: "#0d2e20",
-    lighterror: "#4B313D",
+    lighterror: "#3a1a20",
-    lightwarning: "#4D3A2A",
+    lightwarning: "#3a2a10",
-    lightinfo: "#223662",
+    lightinfo: "#1a2540",
-    textPrimary: "#EAEFF4",
+    textPrimary: "#dee2e6",
-    textSecondary: "#7C8FAC",
+    textSecondary: "#8893a4",
-    borderColor: "#333F55",
+    borderColor: "#373737",
-    inputBorder: "#465670",
+    inputBorder: "#4a4a4a",
-    containerBg: "#2a3447",
+    containerBg: "#27272a",
-    background: "#192838",
+    background: "#1b1b2e",
-    surface: "#152332",
+    surface: "#27272a",
-    hoverColor: "#333f55",
+    hoverColor: "#2f2f3a",
-    "on-surface-variant": "#2a3447",
+    "on-surface-variant": "#27272a",
-    grey100: "#333F55",
+    grey100: "#2f2f3a",
-    grey200: "#465670",
+    grey200: "#3a3a45",
   },
 }
 
@@ -181,6 +181,43 @@ const DARK_ORANGE_THEME: ThemeTypes = {
   },
 }
 
+const CHIRPY_JEKYLL_DARK_THEME: ThemeTypes = {
+  name: "CHIRPY_JEKYLL_DARK_THEME",
+  dark: true,
+  variables: {
+    "border-color": "#2c2d2d",
+    "border-opacity": 1,
+  },
+  colors: {
+    primary: "#8ab4f8",
+    secondary: "#40b883",
+    info: "#0075d1",
+    success: "#0fa30f",
+    accent: "#8ab4f8",
+    warning: "#ffa500",
+    error: "#cd0202",
+    purple: "#b370f5",
+    indigo: "#7c6af0",
+    lightprimary: "#1a2540",
+    lightsecondary: "#0d2e20",
+    lightsuccess: "#163c24",
+    lighterror: "#3a0000",
+    lightwarning: "#3a2a10",
+    lightinfo: "#073b68",
+    textPrimary: "#afb0b1",
+    textSecondary: "#868686",
+    borderColor: "#2c2d2d",
+    inputBorder: "#2e2f31",
+    containerBg: "#292929",
+    background: "#1b1b1e",
+    hoverColor: "#262626",
+    surface: "#1e1e1e",
+    "on-surface-variant": "#292929",
+    grey100: "#252526",
+    grey200: "#2e2f31",
+  },
+}
+
 export {
   DARK_BLUE_THEME,
   DARK_AQUA_THEME,
@@ -188,4 +225,5 @@ export {
   DARK_PURPLE_THEME,
   DARK_GREEN_THEME,
   DARK_CYAN_THEME,
+  CHIRPY_JEKYLL_DARK_THEME,
 }

web/src/theme/LightTheme.ts

@@ -8,8 +8,8 @@ const BLUE_THEME: ThemeTypes = {
     "border-opacity": 1,
   },
   colors: {
-    primary: "#1B84FF",
+    primary: "#2d68c4",
-    secondary: "#43CED7",
+    secondary: "#40b883",
     info: "#2CABE3",
     success: "#2CD07E",
     accent: "#FFAB91",
@@ -17,24 +17,61 @@ const BLUE_THEME: ThemeTypes = {
     error: "#F8285A",
     purple: "#725AF2",
     indigo: "#6610f2",
-    lightprimary: "#EDF5FD",
+    lightprimary: "#e8f0fb",
-    lightsecondary: "#F2FCFC",
+    lightsecondary: "#e6f7f0",
     lightsuccess: "#EDFDF2",
     lighterror: "#FFF0F4",
     lightwarning: "#FFFCF0",
     lightinfo: "#E4F5FF",
-    textPrimary: "#3A4752",
+    textPrimary: "#212529",
-    textSecondary: "#768B9E",
+    textSecondary: "#6c757d",
-    borderColor: "#ebf1f6",
+    borderColor: "#dee2e6",
-    inputBorder: "#DFE5EF",
+    inputBorder: "#c6cfd8",
     containerBg: "#ffffff",
-    background: "#eef5f9",
+    background: "#f6f6f7",
-    hoverColor: "#f6f9fc",
+    hoverColor: "#eef0f2",
-    surface: "#fff",
+    surface: "#ffffff",
-    "on-surface-variant": "#fff",
+    "on-surface-variant": "#ffffff",
-    grey100: "#F2F6FA",
+    grey100: "#f0f2f4",
-    grey200: "#EAEFF4",
+    grey200: "#e2e6ea",
   },
 }
 
-export { BLUE_THEME }
+const CHIRPY_JEKYLL_THEME: ThemeTypes = {
+  name: "CHIRPY_JEKYLL_THEME",
+  dark: false,
+  variables: {
+    "border-color": "#dee2e6",
+    "border-opacity": 1,
+  },
+  colors: {
+    primary: "#0056b2",
+    secondary: "#07a8f7",
+    info: "#0070cb",
+    success: "#03b303",
+    accent: "#07a8f7",
+    warning: "#ef9c03",
+    error: "#df3c30",
+    purple: "#8250df",
+    indigo: "#6610f2",
+    lightprimary: "#dce8f8",
+    lightsecondary: "#daf2fe",
+    lightsuccess: "#dafbe1",
+    lighterror: "#f8d7da",
+    lightwarning: "#fff3cd",
+    lightinfo: "#e1f5fe",
+    textPrimary: "#34343c",
+    textSecondary: "#757575",
+    borderColor: "#dee2e6",
+    inputBorder: "#b8b8b8",
+    containerBg: "#ffffff",
+    background: "#f6f8fa",
+    hoverColor: "#e2e2e2",
+    surface: "#ffffff",
+    "on-surface-variant": "#ffffff",
+    grey100: "#f6f8fa",
+    grey200: "#e9ecef",
+  },
+}
+
+export { BLUE_THEME, CHIRPY_JEKYLL_THEME }