generated from nhcarrigan/template
feat: fonts
This commit is contained in:
+87
-17
@@ -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,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><g transform="translate(12 12) rotate(-45 12 12)"><circle cx="12" cy="6" r="5" fill="%232B1B3D"/><circle cx="6" cy="12" r="5" fill="%232B1B3D"/><circle cx="18" cy="12" r="5" fill="%232B1B3D"/><circle cx="12" cy="18" r="5" fill="%232B1B3D"/><circle cx="12" cy="12" r="3.5" fill="%23A8577E"/><path d="M12 18 L12 36" stroke="%232B1B3D" stroke-width="2.5"/><path d="M10 34 L8 38" stroke="%232B1B3D" stroke-width="2"/><path d="M14 34 L16 38" stroke="%232B1B3D" stroke-width="2"/></g><circle cx="3" cy="3" r="1.5" fill="%23D4A5C7" opacity="0.8"/></svg>') 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,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><defs><filter id="glow"><feGaussianBlur stdDeviation="3" result="coloredBlur"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g transform="translate(12 12) rotate(-45 12 12)" filter="url(%23glow)"><circle cx="12" cy="6" r="5.5" fill="%23A8577E"/><circle cx="6" cy="12" r="5.5" fill="%23A8577E"/><circle cx="18" cy="12" r="5.5" fill="%23A8577E"/><circle cx="12" cy="18" r="5.5" fill="%23A8577E"/><circle cx="12" cy="12" r="4" fill="%23D4A5C7"/><path d="M12 18 L12 36" stroke="%232B1B3D" stroke-width="2.5"/><path d="M10 34 L8 38" stroke="%232B1B3D" stroke-width="2"/><path d="M14 34 L16 38" stroke="%232B1B3D" stroke-width="2"/></g><circle cx="3" cy="3" r="2" fill="%23D4A5C7" opacity="0.9"/></svg>') 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,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><defs><filter id="glow"><feGaussianBlur stdDeviation="3" result="coloredBlur"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g transform="translate(12 12) rotate(-45 12 12)" filter="url(%23glow)"><circle cx="12" cy="6" r="5.5" fill="%23A8577E"/><circle cx="6" cy="12" r="5.5" fill="%23A8577E"/><circle cx="18" cy="12" r="5.5" fill="%23A8577E"/><circle cx="12" cy="18" r="5.5" fill="%23A8577E"/><circle cx="12" cy="12" r="4" fill="%23D4A5C7"/><path d="M12 18 L12 36" stroke="%232B1B3D" stroke-width="2.5"/><path d="M10 34 L8 38" stroke="%232B1B3D" stroke-width="2"/><path d="M14 34 L16 38" stroke="%232B1B3D" stroke-width="2"/></g><circle cx="3" cy="3" r="2" fill="%23D4A5C7" opacity="0.9"/></svg>') 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,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><g transform="translate(12 12)"><path d="M12 2 L2 12 L12 22 L22 12 Z" fill="%232B1B3D"/><circle cx="12" cy="12" r="6" fill="%23A8577E"/><circle cx="12" cy="12" r="4" fill="%23D4A5C7"/><path d="M12 4 L12 0 M12 24 L12 20 M4 12 L0 12 M24 12 L20 12" stroke="%232B1B3D" stroke-width="2"/></g></svg>') 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;
|
||||
|
||||
Reference in New Issue
Block a user