timmypidashev/web
1
0
Fork 0
mirror of https://github.com/timmypidashev/web.git synced 2026-04-15 03:23:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add preliminary vines animation; more work on content

Browse Source
This commit is contained in:
Timothy Pidashev
2025-01-06 11:55:34 -08:00
parent efe0b9713f
commit 21772ae6cb
8 changed files with 370 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/tailwind.config.cjs
View File

@@ -34,146 +34,155 @@ module.exports = {
bright: "#8ec07c"
}
},
keyframes: {
"draw-line": {
"0%": { "stroke-dashoffset": "100" },
"100%": { "stroke-dashoffset": "0" }
}
},
animation: {
"draw-line": "draw-line 0.6s ease-out forwards"
},
typography: (theme) => ({
DEFAULT: {
css: {
color: theme('colors.foreground'),
'--tw-prose-body': theme('colors.foreground'),
'--tw-prose-headings': theme('colors.yellow.bright'),
'--tw-prose-links': theme('colors.blue.bright'),
'--tw-prose-bold': theme('colors.orange.bright'),
'--tw-prose-quotes': theme('colors.green.bright'),
'--tw-prose-code': theme('colors.purple.bright'),
'--tw-prose-hr': theme('colors.foreground'),
'--tw-prose-bullets': theme('colors.foreground'),
color: theme("colors.foreground"),
"--tw-prose-body": theme("colors.foreground"),
"--tw-prose-headings": theme("colors.yellow.bright"),
"--tw-prose-links": theme("colors.blue.bright"),
"--tw-prose-bold": theme("colors.orange.bright"),
"--tw-prose-quotes": theme("colors.green.bright"),
"--tw-prose-code": theme("colors.purple.bright"),
"--tw-prose-hr": theme("colors.foreground"),
"--tw-prose-bullets": theme("colors.foreground"),
// Base text color
color: theme('colors.foreground'),
color: theme("colors.foreground"),
// Headings
h1: {
color: theme('colors.yellow.bright'),
fontWeight: '700',
color: theme("colors.yellow.bright"),
fontWeight: "700",
},
h2: {
color: theme('colors.yellow.bright'),
fontWeight: '600',
color: theme("colors.yellow.bright"),
fontWeight: "600",
},
h3: {
color: theme('colors.yellow.bright'),
fontWeight: '600',
color: theme("colors.yellow.bright"),
fontWeight: "600",
},
h4: {
color: theme('colors.yellow.bright'),
fontWeight: '600',
color: theme("colors.yellow.bright"),
fontWeight: "600",
},
// Links
a: {
color: theme('colors.blue.bright'),
'&:hover': {
color: theme('colors.blue.DEFAULT'),
color: theme("colors.blue.bright"),
"&:hover": {
color: theme("colors.blue.DEFAULT"),
},
textDecoration: 'none',
borderBottom: `1px solid ${theme('colors.blue.bright')}`,
transition: 'all 0.2s ease-in-out',
textDecoration: "none",
borderBottom: `1px solid ${theme("colors.blue.bright")}`,
transition: "all 0.2s ease-in-out",
},
// Bold
strong: {
color: theme('colors.orange.bright'),
fontWeight: '600',
color: theme("colors.orange.bright"),
fontWeight: "600",
},
// Lists
ul: {
li: {
'&::before': {
backgroundColor: theme('colors.foreground'),
"&::before": {
backgroundColor: theme("colors.foreground"),
},
},
},
// Blockquotes
blockquote: {
borderLeftColor: theme('colors.green.bright'),
color: theme('colors.green.bright'),
fontStyle: 'italic',
quotes: '"\\201C""\\201D""\\2018""\\2019"',
borderLeftColor: theme("colors.green.bright"),
color: theme("colors.green.bright"),
fontStyle: "italic",
quotes: "\"\\201C\"\"\\201D\"\"\\2018\"\"\\2019\"",
p: {
'&::before': { content: 'none' },
'&::after': { content: 'none' },
"&::before": { content: "none" },
"&::after": { content: "none" },
},
},
// Code
code: {
color: theme('colors.purple.bright'),
backgroundColor: '#282828', // A dark gray that works with black
padding: '0.2em 0.4em',
borderRadius: '0.25rem',
fontWeight: '400',
'&::before': {
content: '""',
color: theme("colors.purple.bright"),
backgroundColor: "#282828", // A dark gray that works with black
padding: "0.2em 0.4em",
borderRadius: "0.25rem",
fontWeight: "400",
"&::before": {
content: "\"\"",
},
'&::after': {
content: '""',
"&::after": {
content: "\"\"",
},
},
// Inline code
'code::before': {
content: '""',
"code::before": {
content: "\"\"",
},
'code::after': {
content: '""',
"code::after": {
content: "\"\"",
},
// Pre
pre: {
backgroundColor: '#282828',
color: theme('colors.foreground'),
backgroundColor: "#282828",
color: theme("colors.foreground"),
code: {
backgroundColor: 'transparent',
padding: '0',
color: 'inherit',
fontSize: 'inherit',
fontWeight: 'inherit',
'&::before': { content: 'none' },
'&::after': { content: 'none' },
backgroundColor: "transparent",
padding: "0",
color: "inherit",
fontSize: "inherit",
fontWeight: "inherit",
"&::before": { content: "none" },
"&::after": { content: "none" },
},
},
// Horizontal rules
hr: {
borderColor: theme('colors.foreground'),
opacity: '0.2',
borderColor: theme("colors.foreground"),
opacity: "0.2",
},
// Table
table: {
thead: {
borderBottomColor: theme('colors.foreground'),
borderBottomColor: theme("colors.foreground"),
th: {
color: theme('colors.yellow.bright'),
color: theme("colors.yellow.bright"),
},
},
tbody: {
tr: {
borderBottomColor: theme('colors.foreground'),
borderBottomColor: theme("colors.foreground"),
},
},
},
// Images
img: {
borderRadius: '0.375rem',
borderRadius: "0.375rem",
},
// Figures
figcaption: {
color: theme('colors.foreground'),
opacity: '0.8',
color: theme("colors.foreground"),
opacity: "0.8",
},
},
},