details BEM

src/components/details-template.pug

@@ -9,16 +9,16 @@ html
     block navbar 
       +navbarMixin("")
     
-    .details-container
+    .details
-      header.details-header
+      header.details__header
         block header
           h1 Default Header
       
-      .details-content
+      .details__content
-        .details-text
+        .details__text
           block text
             p Default text content
         
-        .details-gallery
+        .details__gallery
           block gallery
             p No images available

src/pages/photography-details.pug

@@ -1,18 +1,5 @@
-include ../components/mixins.pug
 extends ../components/details-template.pug
 
--
-    const photographyData = {
-        header: "Photography",
-        description: "temptext.",
-        images: [
-            require('../images/photos/image0.png'),
-            require('../images/photos/image1.png'), 
-            require('../images/photos/image2.png')
-        ],
-        details: "D3100 -> SLT A58."
-    }
-
 block title
     title Photography Portfolio - Details
 
@@ -20,15 +7,16 @@ block navbar
     +navbarMixin("Photography")
 
 block header
-    h1.details-title #{photographyData.header}
+    h1.details__title Photography
-    p.details-description #{photographyData.description}
+    p.details__description I prefer landscape photography.
 
 block text
-    p.details-text-content #{photographyData.details}
+    p.details__text-content D3100 -> SLT A58.
-    .details-back-link
-        a.back-button(href="./index.html") ← Back to Home
     
 block gallery
-    each image, index in photographyData.images
+    .details__gallery-item
-        .gallery-item
+        img.details__gallery-image(src=require('../images/photos/image0.png') alt="Photography 1")
-            img.gallery-image(src=image alt=`Photography ${index + 1}`)
+    .details__gallery-item
+        img.details__gallery-image(src=require('../images/photos/image1.png') alt="Photography 2")
+    .details__gallery-item
+        img.details__gallery-image(src=require('../images/photos/image2.png') alt="Photography 3")

src/styles/details.styl

@@ -1,107 +1,58 @@
-// Details Template Styles
+.details
-.details-container
-  max-width 1200px
   margin 0 auto
   padding 20px
 
-.details-header
+.details__header
-  margin-bottom 40px
+  margin-bottom 20px
   text-align center
   
-  .details-title
+.details__title
-    font-size 2.5rem
+  margin-bottom 5px
-    margin-bottom 20px
-    color #333
     
-  .details-description
+.details__description
-    font-size 1.2rem
+  margin auto
-    color #666
-    line-height 1.6
-    max-width 800px
-    margin 0 auto
 
-.details-content
+.details__content
   display flex
   gap 40px
   align-items flex-start
 
-  .details-text
+.details__text
-    flex 1
+  flex 1
+  text-align justify
 
-    .details-text-content
+.details__text-content
-      font-size 1.1rem
+  margin auto 30px
-      line-height 1.8
-      color #444
-      margin-bottom 30px
       
-    .details-back-link
+.details__gallery
-      margin-top 30px
+  display flex
+  flex-direction column
+  gap 20px
+  margin auto
 
-      .back-button
+.details__gallery-item
-        display inline-block
+  overflow hidden
-        padding 12px 24px
+  border-radius 8px
-        background-color #007bff
+  box-shadow 0 4px 12px rgba(0, 0, 0, 0.1)
-        color white
+  transition transform 0.3s ease, box-shadow 0.3s ease
-        text-decoration none
-        border-radius 6px
-        transition background-color 0.3s ease
-        font-weight 500
   
-        &:hover
+  &:hover
-          background-color #0056b3
+    transform translateY(-5px)
+    box-shadow 0 8px 20px rgba(0, 0, 0, 0.15)
 
-  .details-gallery
+.details__gallery-image
-    flex 0 0 300px
+  width 100%
-    display flex
+  height 250px
-    flex-direction column
+  object-fit cover
-    gap 20px
+  display block
 
-    .gallery-item
-      overflow hidden
-      border-radius 8px
-      box-shadow 0 4px 12px rgba(0, 0, 0, 0.1)
-      transition transform 0.3s ease, box-shadow 0.3s ease
-      
-      &:hover
-        transform translateY(-5px)
-        box-shadow 0 8px 20px rgba(0, 0, 0, 0.15)
-      
-      .gallery-image
-        width 100%
-        height 200px
-        object-fit cover
-        display block
-
-// Responsive Design - Mobile (screens smaller than 700px)
 @media screen and (max-width: 700px)
-  .details-container
+  .details__content
-    padding 15px
-    
-  .details-header
-    margin-bottom 30px
-    
-    .details-title
-      font-size 2rem
-      
-    .details-description
-      font-size 1.1rem
-      
-  .details-content
     flex-direction column
-    gap 30px
     
-    .details-gallery
+  .details__gallery
-      flex 1
+    order -1  // Move gallery above text
-      order -1  // Move gallery above text on mobile
     
-      .gallery-item
+  .details__gallery-image
-        .gallery-image
+    height 300px
-          height 250px
     
-    .details-text
-      .details-text-content
-        font-size 1rem
-        
-      .back-button
-        padding 10px 20px
-        font-size 0.95rem