System-End/My-website
1
0
Fork 0
mirror of https://github.com/System-End/My-website.git synced 2026-04-19 19:45:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

css updates

Browse source
This commit is contained in:
Unknown 2025-02-24 21:21:10 -07:00 • committed by End
parent 06b02e9f11
commit 42b2e4cf7f
No known key found for this signature in database
3 changed files with 92 additions and 118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

173
src/styles/base.css
View file

@ -2,101 +2,110 @@
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background-primary: #1a0b2e;
--background-secondary: #2f1c54;
--accent-primary: #9d4edd;
--accent-neon: #b249f8;
--text-glow: #e0aaff;
--text-primary: #ffffff;
--dark-accent: #240046;
--fox-pink: #ffc6e5;
--fox-pink-glow: #ffadd6;
--fox-orange: #ff9466;
--fox-white: #fff5f9;
}
body {
background-color: var(--background-primary);
color: var(--text-primary);
}
/* Base styles */
:root {
--background-primary: #1a0b2e;
--background-secondary: #2f1c54;
--accent-primary: #9d4edd;
--accent-neon: #b249f8;
--text-glow: #e0aaff;
--text-primary: #ffffff;
--dark-accent: #240046;
--fox-pink: #ffc6e5;
--fox-pink-glow: #ffadd6;
--fox-orange: #ff9466;
--fox-white: #fff5f9;
}
@layer utilities {
.text-glow {
text-shadow: 0 0 10px var(--text-glow);
}
.section-spacing > * + * {
margin-top: 1.5rem;
}
.card-spacing > * + * {
margin-top: 1rem;
}
.element-spacing > * + * {
margin-top: 0.75rem;
}
/* Utility classes */
.text-glow {
text-shadow: 0 0 10px var(--text-glow);
}
@layer components {
.content-wrapper {
max-width: 80rem;
margin-left: auto;
margin-right: auto;
padding: 1.5rem 1rem;
}
.section-spacing > * + * {
margin-top: 3rem;
}
.nav-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
transition: all 0.2s ease;
}
.card-spacing > * + * {
margin-top: 2rem;
}
.nav-link:hover {
background-color: rgba(157, 78, 221, 0.05);
color: var(--accent-neon);
}
.element-spacing > * + * {
margin-top: 1rem;
}
.nav-link.active {
background-color: rgba(157, 78, 221, 0.1);
color: var(--accent-neon);
}
/* Component classes */
.content-wrapper {
max-width: 80rem;
margin-left: auto;
margin-right: auto;
padding: 2rem 1rem;
}
.fox-card {
position: relative;
border-radius: 0.75rem;
padding: 1.5rem;
transition: all 0.2s ease;
border: 1px solid rgba(157, 78, 221, 0.1);
background: linear-gradient(135deg, rgba(47, 28, 84, 0.2) 0%, rgba(157, 78, 221, 0.05) 100%);
}
.nav-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
transition: all 0.2s ease;
}
.fox-card:hover {
border-color: rgba(157, 78, 221, 0.2);
box-shadow: 0 2px 8px rgba(157, 78, 221, 0.05);
}
.nav-link:hover {
background-color: rgba(157, 78, 221, 0.05);
color: var(--accent-neon);
}
.nav-link.active {
background-color: rgba(157, 78, 221, 0.1);
color: var(--accent-neon);
}
.fox-card {
position: relative;
border-radius: 0.75rem;
padding: 2rem;
transition: all 0.2s ease;
border: 1px solid rgba(157, 78, 221, 0.1);
background: linear-gradient(135deg, rgba(47, 28, 84, 0.2) 0%, rgba(157, 78, 221, 0.05) 100%);
}
.fox-card:hover {
border-color: rgba(157, 78, 221, 0.2);
box-shadow: 0 2px 8px rgba(157, 78, 221, 0.05);
}
.content-grid {
display: grid;
gap: 2rem;
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 768px) {
.content-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 768px) {
.content-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1024px) {
.content-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.content-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* Additional utilities */
.bg-gradient-card {
background: linear-gradient(135deg, rgba(47, 28, 84, 0.3) 0%, rgba(157, 78, 221, 0.1) 100%);
}
.border-accent {
border-color: var(--accent-primary);
}
.text-accent {
color: var(--accent-primary);
}
.text-primary {
color: var(--text-primary);
}

30
src/styles/utilities.css
View file

@ -1,5 +1,4 @@
@layer utilities {
/* Animated background */
.animated-bg {
position: relative;
overflow: hidden;
@ -15,7 +14,6 @@
animation: gradientShift 15s ease infinite;
}
/* Fox ear styling */
.fox-ear {
position: absolute;
width: 30px;
@ -38,34 +36,6 @@
transform: rotate(-45deg);
border-radius: 0 0 15px 0;
}
/* Hover effects */
.hover-glow {
transition: all 0.2s ease;
}
.hover-glow:hover {
filter: drop-shadow(0 0 4px var(--fox-pink-glow));
}
/* Spacing utilities */
.section-spacing {
margin-top: 2rem;
margin-bottom: 2rem;
}
.section-spacing > * + * {
margin-top: 1.5rem;
}
.content-spacing {
margin-top: 1rem;
margin-bottom: 1rem;
}
.content-spacing > * + * {
margin-top: 1rem;
}
}
@keyframes gradientShift {

7
tailwind.config.js
View file

@ -21,16 +21,11 @@ export default {
},
backgroundImage: {
'gradient-primary': 'linear-gradient(135deg, var(--background-primary) 0%, var(--background-secondary) 100%)',
'gradient-card': 'linear-gradient(135deg, rgba(47, 28, 84, 0.3) 0%, rgba(157, 78, 221, 0.1) 100%)',
},
spacing: {
'ear': '30px',
'gradient-card': 'linear-gradient(135deg, rgba(47, 28, 84, 0.2) 0%, rgba(157, 78, 221, 0.05) 100%)',
},
opacity: {
'5': '0.05',
'10': '0.1',
'15': '0.15',
'20': '0.2',
},
},
},