From 9a3ea56e0ef2555dc6f33aedb4498a90304af8ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Orzech?= <pawel@pawelorzech.pl>
Date: Mon, 8 Sep 2025 10:47:44 +0200
Subject: [PATCH] Fix CSS to match HTML structure and enable proper styling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Corrected CSS classes to match the HTML elements (.navbar, .hero, .blog-card, etc.)
- Fixed broken styling that was using incompatible CSS from different design
- Restored modern blog appearance with gradients, animations, and responsive design
- Website now displays correctly with proper navigation, hero section, and blog cards

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 style.css | 659 ++++++++++++++++++++++++++++--------------------------
 1 file changed, 344 insertions(+), 315 deletions(-)

diff --git a/style.css b/style.css
index a65ddb4..dd21d07 100644
--- a/style.css
+++ b/style.css
@@ -1,410 +1,439 @@
-/* Reset and Base Styles */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
+body {
+    font-family: 'Inter', sans-serif;
+    line-height: 1.6;
+    color: #333;
+    overflow-x: hidden;
+}
+
 html {
-    font-size: 16px;
     scroll-behavior: smooth;
 }
 
-body {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    line-height: 1.6;
-    color: #1a1a1a;
-    background-color: #ffffff;
-    font-weight: 400;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-/* Typography */
-h1, h2, h3, h4, h5, h6 {
-    font-family: 'Crimson Text', Georgia, serif;
-    font-weight: 600;
-    line-height: 1.3;
-    margin: 0;
-}
-
-a {
-    color: #1a1a1a;
-    text-decoration: none;
-    transition: color 0.2s ease;
-}
-
-a:hover {
-    color: #666;
-}
-
-/* Header */
-.site-header {
-    border-bottom: 1px solid #e5e5e5;
-    background: #ffffff;
-    position: sticky;
-    top: 0;
-    z-index: 100;
-}
-
-.header-container {
-    max-width: 800px;
+.container {
+    max-width: 1200px;
     margin: 0 auto;
-    padding: 2rem 1.5rem;
+    padding: 0 20px;
+}
+
+/* Navigation */
+.navbar {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+}
+
+.nav-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 1rem 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
-.site-identity {
-    flex: 1;
-}
-
-.site-title {
-    font-size: 1.5rem;
+.nav-logo h2 {
+    color: #2563eb;
     font-weight: 600;
-    margin-bottom: 0.25rem;
-    letter-spacing: -0.02em;
 }
 
-.site-tagline {
-    font-size: 0.875rem;
-    color: #666;
-    font-weight: 400;
-}
-
-.site-nav {
+.nav-menu {
     display: flex;
+    justify-content: space-between;
+    align-items: center;
+    list-style: none;
     gap: 2rem;
 }
 
+.nav-item {
+    list-style: none;
+}
+
 .nav-link {
-    font-size: 0.875rem;
+    text-decoration: none;
+    color: #333;
     font-weight: 500;
+    transition: color 0.3s ease;
     position: relative;
 }
 
+.nav-link:hover {
+    color: #2563eb;
+}
+
 .nav-link::after {
     content: '';
     position: absolute;
-    bottom: -4px;
-    left: 0;
     width: 0;
-    height: 1px;
-    background-color: #1a1a1a;
-    transition: width 0.2s ease;
+    height: 2px;
+    bottom: -5px;
+    left: 0;
+    background-color: #2563eb;
+    transition: width 0.3s ease;
 }
 
 .nav-link:hover::after {
     width: 100%;
 }
 
-/* Main Content */
-.main-content {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 0 1.5rem;
+.hamburger {
+    display: none;
+    flex-direction: column;
+    cursor: pointer;
 }
 
-/* Posts */
-.posts {
-    padding: 3rem 0;
+.bar {
+    width: 25px;
+    height: 3px;
+    background-color: #333;
+    margin: 3px 0;
+    transition: 0.3s;
 }
 
-.post {
-    margin-bottom: 4rem;
-    border-bottom: 1px solid #f0f0f0;
-    padding-bottom: 3rem;
-}
-
-.post:last-child {
-    border-bottom: none;
-    margin-bottom: 0;
-    padding-bottom: 0;
-}
-
-.post-header {
-    margin-bottom: 1rem;
-}
-
-.post-title {
-    font-size: 1.75rem;
-    margin-bottom: 0.75rem;
-    font-weight: 600;
-    letter-spacing: -0.02em;
-    line-height: 1.2;
-}
-
-.post-title a {
-    color: #1a1a1a;
-}
-
-.post-title a:hover {
-    color: #666;
-}
-
-.post-meta {
+/* Hero Section */
+.hero {
+    height: 100vh;
     display: flex;
     align-items: center;
-    gap: 1rem;
-    font-size: 0.875rem;
-    color: #666;
-}
-
-.post-meta time {
-    font-weight: 500;
-}
-
-.post-type {
-    background: #f5f5f5;
-    padding: 0.25rem 0.75rem;
-    border-radius: 12px;
-    font-size: 0.75rem;
-    font-weight: 500;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
-.post-content {
-    font-size: 1.05rem;
-    line-height: 1.7;
-    color: #333;
-}
-
-.post-content p {
-    margin-bottom: 1.5rem;
-}
-
-.post-content p:last-child {
-    margin-bottom: 0;
-}
-
-/* Photography Posts */
-.post-photo {
-    margin-bottom: 5rem;
-}
-
-.post-image {
-    width: 100%;
-    margin-bottom: 1.5rem;
-    border-radius: 8px;
-    overflow: hidden;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-}
-
-.post-image img {
-    width: 100%;
-    height: auto;
-    display: block;
-    transition: transform 0.3s ease;
-}
-
-.post-image:hover img {
-    transform: scale(1.02);
-}
-
-/* Figure elements for blog posts */
-figure.post-image {
-    margin: 2rem 0;
+    justify-content: center;
+    position: relative;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
     text-align: center;
 }
 
-figure.post-image img {
+.hero-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
-    height: auto;
+    height: 100%;
+    opacity: 0.1;
+    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='m0 40l40-40h-40v40zm40 0v-40h-40l40 40z'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.hero-content {
+    z-index: 2;
+    max-width: 600px;
+    padding: 0 20px;
+}
+
+.hero h1 {
+    font-size: 3.5rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    animation: fadeInUp 1s ease;
+}
+
+.hero-subtitle {
+    font-size: 1.2rem;
+    margin-bottom: 2rem;
+    opacity: 0.9;
+    animation: fadeInUp 1s ease 0.2s both;
+}
+
+.cta-button {
+    display: inline-block;
+    background: white;
+    color: #2563eb;
+    padding: 15px 30px;
+    text-decoration: none;
+    border-radius: 50px;
+    font-weight: 600;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    animation: fadeInUp 1s ease 0.4s both;
+}
+
+.cta-button:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+}
+
+/* Sections */
+.blog-section,
+.about-section,
+.contact-section {
+    padding: 80px 0;
+}
+
+.section-title {
+    text-align: center;
+    font-size: 2.5rem;
+    font-weight: 600;
+    margin-bottom: 3rem;
+    color: #1f2937;
+}
+
+.section-title::after {
+    content: '';
     display: block;
-    border-radius: 8px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    width: 50px;
+    height: 3px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    margin: 1rem auto;
+}
+
+/* Blog Grid */
+.blog-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 2rem;
+    margin-top: 3rem;
+}
+
+.blog-card {
+    background: white;
+    border-radius: 15px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
-figure.post-image:hover img {
-    transform: scale(1.02);
-    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+.blog-card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
 }
 
-figure.post-image figcaption {
-    margin-top: 0.75rem;
-    font-size: 0.875rem;
-    color: #666;
-    font-style: italic;
-    line-height: 1.4;
-}
-
-/* Short Posts */
-.post-short .post-content {
-    font-size: 1.125rem;
-    font-style: italic;
-    color: #444;
+.blog-image {
+    height: 200px;
     position: relative;
-    padding-left: 1.5rem;
+    overflow: hidden;
 }
 
-.post-short .post-content::before {
-    content: '"';
+.placeholder-image {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
     font-size: 3rem;
-    color: #ddd;
-    position: absolute;
-    left: -0.5rem;
-    top: -1rem;
-    font-family: Georgia, serif;
-    line-height: 1;
 }
 
-/* Footer */
-.site-footer {
-    border-top: 1px solid #e5e5e5;
-    margin-top: 4rem;
-    background: #fafafa;
+.blog-content {
+    padding: 1.5rem;
 }
 
-.footer-container {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 2rem 1.5rem;
+.blog-meta {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-size: 0.875rem;
-    color: #666;
+    margin-bottom: 1rem;
 }
 
-.footer-links {
-    display: flex;
-    gap: 1.5rem;
+.blog-date {
+    color: #6b7280;
+    font-size: 0.9rem;
 }
 
-.footer-links a {
-    color: #666;
+.blog-tag {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.8rem;
     font-weight: 500;
 }
 
-.footer-links a:hover {
-    color: #1a1a1a;
+.blog-content h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    color: #1f2937;
+}
+
+.blog-content p {
+    color: #6b7280;
+    margin-bottom: 1rem;
+    line-height: 1.6;
+}
+
+.read-more {
+    color: #2563eb;
+    text-decoration: none;
+    font-weight: 600;
+    transition: color 0.3s ease;
+}
+
+.read-more:hover {
+    color: #1d4ed8;
+}
+
+.read-more.disabled {
+    color: #9ca3af;
+    cursor: not-allowed;
+}
+
+/* About Section */
+.about-section {
+    background: #f9fafb;
+}
+
+.about-content {
+    max-width: 600px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.about-text p {
+    font-size: 1.1rem;
+    color: #4b5563;
+    margin-bottom: 1.5rem;
+}
+
+.about-links {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-top: 2rem;
+}
+
+.social-link {
+    width: 50px;
+    height: 50px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    font-size: 1.2rem;
+    transition: transform 0.3s ease;
+}
+
+.social-link:hover {
+    transform: translateY(-3px) scale(1.1);
+}
+
+/* Contact Section */
+.contact-section {
+    text-align: center;
+}
+
+.contact-text {
+    font-size: 1.1rem;
+    color: #4b5563;
+    margin-bottom: 2rem;
+    max-width: 500px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.contact-button {
+    display: inline-block;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 15px 30px;
+    text-decoration: none;
+    border-radius: 50px;
+    font-weight: 600;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.contact-button:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
+}
+
+/* Footer */
+.footer {
+    background: #1f2937;
+    color: white;
+    text-align: center;
+    padding: 2rem 0;
+}
+
+/* Animations */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 /* Responsive Design */
-@media (max-width: 768px) {
-    html {
-        font-size: 15px;
-    }
-    
-    .header-container {
-        padding: 1.5rem 1rem;
+@media screen and (max-width: 768px) {
+    .nav-menu {
+        position: fixed;
+        left: -100%;
+        top: 70px;
         flex-direction: column;
-        gap: 1rem;
+        background-color: white;
+        width: 100%;
         text-align: center;
-    }
-    
-    .site-nav {
-        gap: 1.5rem;
-        justify-content: center;
-    }
-    
-    .main-content {
-        padding: 0 1rem;
-    }
-    
-    .posts {
+        transition: 0.3s;
+        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
         padding: 2rem 0;
     }
-    
-    .post {
-        margin-bottom: 3rem;
-        padding-bottom: 2rem;
+
+    .nav-menu.active {
+        left: 0;
     }
-    
-    .post-title {
-        font-size: 1.5rem;
+
+    .hamburger {
+        display: flex;
     }
-    
-    .post-meta {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 0.5rem;
+
+    .hamburger.active .bar:nth-child(2) {
+        opacity: 0;
     }
-    
-    .footer-container {
-        flex-direction: column;
-        gap: 1rem;
-        text-align: center;
-        padding: 1.5rem 1rem;
+
+    .hamburger.active .bar:nth-child(1) {
+        transform: translateY(8px) rotate(45deg);
     }
-    
-    .post-short .post-content {
-        padding-left: 1rem;
+
+    .hamburger.active .bar:nth-child(3) {
+        transform: translateY(-8px) rotate(-45deg);
     }
-    
-    .post-short .post-content::before {
-        left: -0.25rem;
+
+    .hero h1 {
         font-size: 2.5rem;
-        top: -0.75rem;
+    }
+
+    .section-title {
+        font-size: 2rem;
+    }
+
+    .blog-grid {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+    }
+
+    .container {
+        padding: 0 15px;
     }
 }
 
-@media (max-width: 480px) {
-    .site-nav {
-        gap: 1rem;
+@media screen and (max-width: 480px) {
+    .hero h1 {
+        font-size: 2rem;
     }
-    
-    .nav-link {
-        font-size: 0.8rem;
-    }
-    
-    .post-title {
-        font-size: 1.375rem;
-    }
-    
-    .post-content {
+
+    .hero-subtitle {
         font-size: 1rem;
     }
-    
-    .post-short .post-content {
-        font-size: 1.0625rem;
-    }
-}
 
-/* Print Styles */
-@media print {
-    .site-header,
-    .site-footer {
-        display: none;
+    .blog-grid {
+        grid-template-columns: 1fr;
     }
-    
-    .main-content {
-        max-width: none;
-        padding: 0;
-    }
-    
-    .post {
-        page-break-inside: avoid;
-        margin-bottom: 2rem;
-        padding-bottom: 1rem;
-    }
-    
-    .post-image {
-        box-shadow: none;
-    }
-    
-    a {
-        color: #1a1a1a !important;
-    }
-}
 
-/* Focus and Accessibility */
-a:focus,
-button:focus {
-    outline: 2px solid #1a1a1a;
-    outline-offset: 2px;
-}
-
-/* Selection */
-::selection {
-    background: #1a1a1a;
-    color: #ffffff;
-}
-
-::-moz-selection {
-    background: #1a1a1a;
-    color: #ffffff;
+    .blog-card {
+        margin: 0 10px;
+    }
 }
\ No newline at end of file