From 4ab571290f64527bc321df8f1267376ad9b9043d Mon Sep 17 00:00:00 2001
From: salmonik <raisersoft@proton.me>
Date: Sat, 7 Feb 2026 00:45:28 +0100
Subject: demake the site, and remove external components

---
 styles.css | 374 +++++++++++--------------------------------------------------
 1 file changed, 66 insertions(+), 308 deletions(-)

(limited to 'styles.css')

diff --git a/styles.css b/styles.css
index 8a9dccd..7bdf11b 100644
--- a/styles.css
+++ b/styles.css
@@ -1,64 +1,42 @@
+/*
+    This File is part of SalmonPage
+    Copyright (C) 2025 Salmon
+    https://codeberg.org/salmonik/site
+    License: GPL-3.0
+*/
+
 /* Base Styles */
 :root {
-    --cursor-x: 50%;
-    --cursor-y: 50%;
-    --bg: #111827;
-    --bg-secondary: #1f2937;
-    --bg-tertiary: #374151;
-    --text: #f9fafb;
-    --text-secondary: #d1d5db;
-    --primary: #3b82f6;
-    --primary-hover: #2563eb;
-    --border: #374151;
-    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    --white: #ffffff;
-    --black: #111827;
+    --text-primary: #e0e0e0;
+    --text-secondary: #999999;
+    --border: #333333;
+    --accent: #3366ff;
+    --bg-primary: #0a0a0a;
+    --bg-secondary: #000066;
+    --bg-footer: #2e2e2e;
 }
 
-/* Base background and cursor light effect */
 html {
-    scroll-behavior: smooth;
-    scroll-padding-top: 80px; /* Adjust this value based on your header height */
+    scroll-padding-top: 80px;
 }
 
 html, body {
-    min-height: 100%;
     margin: 0;
     padding: 0;
-    background: #111827; /* Base dark background */
-    overflow-x: hidden;
-    /* Default cursor is now visible */
-}
-
-/* Cursor light effect */
-body::before {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: radial-gradient(
-        circle at var(--cursor-x, 50%) var(--cursor-y, 50%),
-        rgba(31, 41, 55, 0.8) 0%,
-        rgba(17, 24, 39, 0.95) 70%,
-        #111827 100%
-    );
-    pointer-events: none;
-    z-index: 0;
-}
-
-/* Ensure content is above the cursor effect */
-body > * {
-    position: relative;
-    z-index: 1;
+    background-color: var(--bg-primary);
+    font-family: Arial, sans-serif;
+    line-height: 1.4;
+    color: var(--text-primary);
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
 }
 
-body {
-    font-family: 'Inter', sans-serif;
-    line-height: 1.6;
-    color: var(--text);
-    background-color: var(--bg);
+main {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .container {
@@ -69,14 +47,12 @@ body {
 
 /* Header */
 header {
-    background: rgba(17, 24, 39, 0.8);
-    backdrop-filter: blur(8px);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    background: var(--bg-secondary);
     position: fixed;
     width: 100%;
     top: 0;
-    z-index: 100;
-    padding: 1.5rem 0;
+    z-index: 1000;
+    padding: 1rem 0;
     border-bottom: 1px solid var(--border);
 }
 
@@ -89,25 +65,23 @@ nav {
 .logo {
     font-size: 1.5rem;
     font-weight: 700;
-    color: var(--primary);
+    color: var(--text-primary);
     text-decoration: none;
 }
 
 .nav-links a {
-    color: var(--text);
+    color: var(--text-primary);
     text-decoration: none;
     margin-left: 2rem;
     font-weight: 500;
-    transition: color 0.3s ease;
 }
 
 .nav-links a:hover {
-    color: var(--primary);
+    color: var(--accent);
 }
 
 /* Hero Section */
 .hero {
-    min-height: 100vh;
     display: flex;
     align-items: center;
     padding: 8rem 0 4rem;
@@ -119,7 +93,7 @@ nav {
 .hero-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 4rem;
+    gap: 2rem;
     align-items: center;
     width: 100%;
 }
@@ -128,292 +102,76 @@ nav {
     max-width: 600px;
 }
 
-.hero-image {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.hero-image .hero-img {
-    width: 100%;
-    max-width: 300px;
+.hero-img {
+    max-width: 100%;
     height: auto;
-    border-radius: 1rem;
-    border: none;
-    box-shadow: none;
+    border-radius: 0.5rem;
 }
 
 .greeting {
     font-size: 1.25rem;
-    color: var(--primary);
+    color: var(--accent);
     margin-bottom: 1rem;
 }
 
-h1 {
+main h1 {
     font-size: 3rem;
     font-weight: 800;
     line-height: 1.2;
-    margin-bottom: 1.5rem;
-    background: linear-gradient(90deg, #60a5fa, #3b82f6);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    color: transparent;
-}
-
-.tagline {
-    font-size: 1.25rem;
-    color: var(--text-secondary);
-    margin-bottom: 2rem;
-    max-width: 600px;
-}
-
-/* Buttons */
-.btn {
-    display: inline-block;
-    padding: 0.75rem 1.5rem;
-    border-radius: 0.375rem;
-    font-weight: 500;
-    text-decoration: none;
-    transition: all 0.3s ease;
-    margin-right: 1rem;
-}
-
-.btn-primary {
-    background-color: var(--primary);
-    color: white;
-    border: 2px solid var(--primary);
-}
-
-.btn-primary:hover {
-    background-color: var(--primary-hover);
-    border-color: var(--primary-hover);
-}
-
-.btn-outline {
-    background-color: transparent;
-    color: var(--primary);
-    border: 2px solid var(--primary);
-}
-
-.btn-outline:hover {
-    background-color: rgba(59, 130, 246, 0.1);
-    color: var(--primary-hover);
-    border-color: var(--primary-hover);
-}
-
-/* Sections */
-section {
-    padding: 6rem 0;
-    background-color: var(--bg);
-}
-
-.section-title {
+    margin: 0 0 1.5rem 0;
+    color: var(--text-primary);
     text-align: center;
-    font-size: 2.25rem;
-    margin-bottom: 3rem;
 }
 
-/* About Section */
-.about {
-    padding: 6rem 0;
-    background: transparent;
-    position: relative;
-    z-index: 1;
-}
-
-.about-content {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 4rem;
-    align-items: center;
-}
-
-.about-image {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.about-img {
-    max-width: 100%;
-    height: auto;
-    border-radius: 0.5rem;
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-}
-
-.skills {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.75rem;
-    margin-top: 1.5rem;
-}
-
-.skill-tag {
-    background-color: rgba(59, 130, 246, 0.1);
-    color: #60a5fa;
-    padding: 0.375rem 0.75rem;
-    border-radius: 9999px;
-    font-size: 0.875rem;
-    border: 1px solid rgba(59, 130, 246, 0.2);
-}
-
-/* Projects Section */
-.projects {
-    background: transparent;
-    padding: 6rem 0;
-}
-
-.projects-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 2rem;
-    margin-top: 2rem;
-}
-
-.project-card {
-    background: var(--bg-secondary);
-    border-radius: 0.5rem;
-    padding: 1.5rem;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    border: 1px solid var(--border);
-}
-
-.project-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
+@media (max-width: 768px) {
+    main h1 {
+        font-size: 2.25rem;
+    }
 }
 
-.project-title {
+.tagline {
     font-size: 1.25rem;
-    font-weight: 600;
-    color: var(--text);
-    margin-bottom: 0.75rem;
-}
-
-.project-description {
     color: var(--text-secondary);
-    margin-bottom: 1.25rem;
-    line-height: 1.6;
-}
-
-.project-links {
-    margin-bottom: 1rem;
-}
-
-.project-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    margin-top: 1rem;
-}
-
-.project-tag {
-    background: rgba(96, 165, 250, 0.1);
-    color: #60a5fa;
-    padding: 0.25rem 0.75rem;
-    border-radius: 9999px;
-    font-size: 0.75rem;
-    font-weight: 500;
-}
-
-/* Contact Section */
-.contact {
-    background-color: var(--bg-secondary);
-    text-align: center;
-    border-radius: 1rem;
-    margin: 2rem auto;
-    max-width: 1400px;
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-}
-
-.contact-content {
-    max-width: 1400px;
-    margin: 0 auto;
-    text-align: center;
+    margin-bottom: 2rem;
+    max-width: 600px;
 }
 
-.contact-methods {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 15px;
-    justify-content: center;
-    margin: 20px 0;
-    padding: 0 20px;
-}
 
-.contact-methods .btn {
-    margin: 5px;
-    flex: 0 0 auto;
-}
 
 /* Footer */
 footer {
     text-align: center;
-    padding: 2rem 0;
+    padding: 0.1rem 0;
     color: var(--text-secondary);
     font-size: 0.875rem;
-    background-color: var(--bg-secondary);
+    background-color: var(--bg-footer);
     border-top: 1px solid var(--border);
 }
 
-/* Responsive */
-@media (max-width: 1024px) {
-    .hero-content {
-        grid-template-columns: 1fr;
-        gap: 3rem;
-        text-align: center;
-    }
 
-    .hero-text {
-        margin: 0 auto;
-    }
 
-    .cta-buttons {
-        justify-content: center;
-    }
+
+main p {
+    margin-bottom: 1rem;
+    line-height: 1.6;
 }
 
-@media (max-width: 768px) {
-    .nav-links {
-        display: none;
-    }
-    
-    h1 {
-        font-size: 2.25rem;
-    }
-    
-    .about-content {
-        grid-template-columns: 1fr;
-        gap: 2rem;
-        text-align: center;
-    }
-    
-    .skills {
-        justify-content: center;
-    }
-    
-    .about-img {
-        max-width: 80%;
-        margin: 0 auto;
-    }
+main ul {
+    margin-bottom: 2rem;
+    padding-left: 2rem;
 }
 
-/* Hover Effects */
-.btn-primary:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+main li {
+    margin-bottom: 0.5rem;
+    line-height: 1.6;
 }
 
-.btn-outline:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
+main a {
+    color: #718096;
+    text-decoration: underline;
 }
 
-/* Image Placeholder */
-.image-placeholder {
-    background-color: var(--bg-tertiary);
-    height: 300px;
-    border-radius: 0.5rem;
-    border: 1px solid var(--border);
+main a:hover {
+    color: #a0aec0;
 }
+
-- 
cgit v1.2.3