diff --git a/src/index.ts b/src/index.ts
index aceb19f..31839ab 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -185,6 +185,9 @@ nhcarriganHeadersStyles.innerHTML = `
src: url('https://cdn.nhcarrigan.com/fonts/vampyr.ttf') format('truetype');
}
+/* Import fun and whimsical fonts! */
+@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Creepster&family=Griffy&family=Henny+Penny&display=swap');
+
:root {
/* Witchy Purple Rose Palette */
--witch-purple: #2B1B3D;
@@ -215,7 +218,7 @@ nhcarriganHeadersStyles.innerHTML = `
}
html {
- font-family: 'Vampyr', monospace;
+ font-family: 'Kalam', cursive, sans-serif;
cursor: url('data:image/svg+xml;utf8,') 0 0, url('https://cdn.nhcarrigan.com/cursors/cursor.cur'), auto;
min-height: 100vh;
min-width: 100vw;
@@ -338,7 +341,8 @@ footer {
cursor: url('data:image/svg+xml;utf8,') 0 0, url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
color: var(--witch-lavender);
font-size: 1rem;
- font-family: 'Vampyr', monospace;
+ font-family: 'Kalam', cursive;
+ font-weight: 700;
padding: 8px 15px;
transition: all 0.3s ease;
}
@@ -477,16 +481,39 @@ a:hover {
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
- font-weight: normal;
+ font-family: 'Griffy', cursive;
+ font-weight: 400;
+ letter-spacing: 1px;
+}
+
+@keyframes wiggle {
+ 0%, 100% { transform: rotate(-2deg); }
+ 25% { transform: rotate(2deg); }
+ 50% { transform: rotate(-1deg); }
+ 75% { transform: rotate(1deg); }
}
h1 {
color: var(--witch-plum);
- font-size: 2.5rem;
+ font-size: 2.8rem;
+ text-shadow: 3px 3px 0px var(--witch-rose),
+ 4px 4px 8px rgba(168, 87, 126, 0.4);
+ transform: rotate(-2deg);
+ display: inline-block;
+ animation: wiggle 4s ease-in-out infinite;
}
-h2, h3 {
+h2 {
color: var(--witch-purple);
+ font-size: 2.2rem;
+ text-shadow: 2px 2px 4px rgba(68, 39, 90, 0.3);
+}
+
+h3 {
+ color: var(--witch-purple);
+ font-size: 1.6rem;
+ font-family: 'Kalam', cursive;
+ font-weight: 700;
}
p {
@@ -496,10 +523,12 @@ p {
/* Form elements */
input, textarea, select {
- font-family: 'Vampyr', monospace;
+ font-family: 'Kalam', cursive;
+ font-weight: 400;
+ font-size: 1rem;
padding: 12px 16px;
- border: 1px solid var(--witch-plum);
- border-radius: 8px;
+ border: 2px solid var(--witch-plum);
+ border-radius: 15px;
background: rgba(245, 245, 245, 0.95);
color: var(--witch-purple);
transition: all 0.3s ease;
@@ -516,24 +545,29 @@ input:focus, textarea:focus, select:focus {
}
button, input[type="submit"], input[type="button"] {
- font-family: 'Vampyr', monospace;
- padding: 12px 24px;
+ font-family: 'Griffy', cursive;
+ font-weight: 400;
+ padding: 14px 28px;
background: linear-gradient(135deg,
var(--witch-plum) 0%,
var(--witch-purple) 100%
);
color: var(--witch-moon);
- border: none;
- border-radius: 25px;
+ border: 3px solid transparent;
+ border-radius: 30px;
cursor: url('data:image/svg+xml;utf8,') 0 0, url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
transition: all 0.3s ease;
- text-transform: uppercase;
+ text-transform: none;
+ font-size: 1.1rem;
letter-spacing: 1px;
+ transform: rotate(-1deg);
}
button:hover, input[type="submit"]:hover, input[type="button"]:hover {
- transform: translateY(-2px);
- box-shadow: 0 5px 20px rgba(68, 39, 90, 0.4);
+ transform: translateY(-3px) rotate(1deg) scale(1.05);
+ box-shadow: 0 8px 25px rgba(68, 39, 90, 0.4),
+ 0 0 30px rgba(168, 87, 126, 0.3);
+ border-color: var(--witch-rose);
}
/* Lists */
@@ -576,11 +610,18 @@ tr:hover {
/* Blockquotes */
blockquote {
- border-left: 3px solid var(--witch-rose);
+ border-left: 5px wavy var(--witch-rose);
padding-left: 20px;
margin: 1em 0;
- font-style: italic;
+ font-family: 'Griffy', cursive;
+ font-style: normal;
color: var(--witch-plum);
+ font-size: 1.2rem;
+ line-height: 1.8;
+ background: linear-gradient(90deg,
+ rgba(168, 87, 126, 0.05) 0%,
+ transparent 50%);
+ position: relative;
}
/* Code blocks */
@@ -633,6 +674,35 @@ pre {
cursor: url('data:image/svg+xml;utf8,') 12 12, move;
}
+/* Special decorative text classes */
+.witchy-accent {
+ font-family: 'Creepster', cursive;
+ letter-spacing: 3px;
+ text-shadow: 3px 3px 0px var(--witch-rose),
+ 4px 4px 8px rgba(168, 87, 126, 0.5);
+ color: var(--witch-purple);
+ transform: skew(-5deg);
+ display: inline-block;
+}
+
+.mystical-text {
+ font-family: 'Henny Penny', 'Vampyr', cursive;
+ letter-spacing: 2px;
+ text-shadow: 2px 2px 4px rgba(68, 39, 90, 0.4);
+}
+
+.spooky-title {
+ font-family: 'Creepster', cursive;
+ background: linear-gradient(45deg,
+ var(--witch-purple) 0%,
+ var(--witch-rose) 50%,
+ var(--witch-mauve) 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ text-shadow: none;
+}
+
@media screen and (max-width: 625px) {
#tree-nation-offset-website {
display: none;