feat: update dependencies and add new styles

- Added node and sass to dependencies in package.json - Added @types/node to devDependencies - Removed unused CSS files and replaced them with SCSS files - Updated import paths in App.tsx and Blog.tsx to use new aliasing - Configured TypeScript paths for easier imports - Updated Vite config to include path aliases - Created new SCSS files for About, Blog, Error, and Main styles - Added a variables file for color and effect variables - Updated index.scss for global styles and responsive adjustments
2025-05-18 14:29:54 +02:00
parent bb3f67a83f
commit 848318a23e
18 changed files with 2246 additions and 1063 deletions
@@ -0,0 +1,196 @@
+body {
+    background-color: var(--primary-dark);
+    color: var(--text-light);
+    background-image: url('../images/background.png');
+    background-repeat: round;
+    background-size: 300px 300px;
+    background-position: 0 0;
+    position: relative;
+    overflow-x: hidden;
+    font-family: 'Cinzel', serif;
+}
+
+body::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle at 50% 50%, rgba(139, 0, 0, 0.08), rgba(10, 10, 10, 0.4));
+    pointer-events: none;
+    z-index: -1;
+}
+
+/* Bootstrap Overrides */
+.navbar {
+    background-color: rgba(10, 10, 10, 0.95) !important;
+    border-bottom: 1px solid rgba(255, 100, 0, 0.3);
+}
+
+.navbar-brand {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.navbar-toggler {
+    border: 1px solid rgba(255, 100, 0, 0.5);
+    color: var(--accent-fire);
+}
+
+.navbar-toggler-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 100, 0, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
+.nav-link {
+    color: var(--text-light) !important;
+    position: relative;
+    padding: 0.5rem 1rem;
+    transition: color 0.3s;
+}
+
+.nav-link:hover,
+.nav-link.active {
+    color: var(--accent-fire) !important;
+}
+
+.nav-link::after {
+    content: "";
+    position: absolute;
+    width: 0;
+    height: 2px;
+    bottom: 0;
+    left: 0;
+    background: linear-gradient(to right, var(--accent-fire), transparent);
+    transition: width 0.3s ease;
+}
+
+.nav-link:hover::after,
+.nav-link.active::after {
+    width: 100%;
+}
+
+/* Logo styling */
+.logo-icon {
+    font-size: 2rem;
+    color: var(--accent-fire);
+    text-shadow: var(--glow-effect);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.logo-text {
+    font-weight: 700;
+    font-size: 1.5rem;
+    background: linear-gradient(to right, var(--accent-fire), var(--text-light));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    letter-spacing: 1px;
+}
+
+
+
+@keyframes fall {
+    0% {
+        transform: translateY(-100%);
+    }
+
+    100% {
+        transform: translateY(100vh);
+    }
+}
+
+
+
+@keyframes rise {
+    0% {
+        transform: translateY(0) translateX(0);
+        opacity: 0;
+    }
+
+    10% {
+        opacity: 0.5;
+    }
+
+    90% {
+        opacity: 0.5;
+    }
+
+    100% {
+        transform: translateY(-100px) translateX(var(--x));
+        opacity: 0;
+    }
+}
+
+/* Footer */
+.footer {
+    background-color: var(--primary-dark);
+    padding: 3rem 0;
+    border-top: 1px solid rgba(255, 100, 0, 0.2);
+    margin-top: 5rem;
+}
+
+.social-links {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-bottom: 1.5rem;
+}
+
+.social-icon {
+    font-size: 1.5rem;
+    color: var(--text-ash);
+    transition: all 0.3s ease;
+}
+
+.social-icon:hover {
+    color: var(--accent-fire);
+    transform: translateY(-5px);
+}
+
+.copyright {
+    color: var(--text-ash);
+    font-size: 0.9rem;
+    margin-top: 1rem;
+    text-align: center;
+}
+
+/* Responsive adjustments */
+@media (max-width: 992px) {
+    .title-main {
+        font-size: 3rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .title-main {
+        font-size: 2.5rem;
+    }
+
+    .subtitle {
+        font-size: 1.2rem;
+    }
+
+    .binary-line {
+        font-size: 0.8rem;
+    }
+}
+
+@media (max-width: 576px) {
+    .title-main {
+        font-size: 2rem;
+    }
+
+    .subtitle {
+        font-size: 1rem;
+    }
+
+    .btn-primary {
+        padding: 0.6rem 1.5rem;
+        font-size: 0.9rem;
+    }
+}