From e142436ed3b78a369cbf8e7c2afff5cd1dce1852 Mon Sep 17 00:00:00 2001 From: OkunElya Date: Thu, 11 Dec 2025 22:26:18 +1000 Subject: [PATCH] details BEM --- src/components/details-template.pug | 10 +-- src/pages/photography-details.pug | 32 +++---- src/styles/details.styl | 135 +++++++++------------------- 3 files changed, 58 insertions(+), 119 deletions(-) diff --git a/src/components/details-template.pug b/src/components/details-template.pug index b6504c7..f3a9ae9 100644 --- a/src/components/details-template.pug +++ b/src/components/details-template.pug @@ -9,16 +9,16 @@ html block navbar +navbarMixin("") - .details-container - header.details-header + .details + header.details__header block header h1 Default Header - .details-content - .details-text + .details__content + .details__text block text p Default text content - .details-gallery + .details__gallery block gallery p No images available diff --git a/src/pages/photography-details.pug b/src/pages/photography-details.pug index 78bfd54..95921dd 100644 --- a/src/pages/photography-details.pug +++ b/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} - p.details-description #{photographyData.description} + h1.details__title Photography + p.details__description I prefer landscape photography. block text - p.details-text-content #{photographyData.details} - .details-back-link - a.back-button(href="./index.html") ← Back to Home - + p.details__text-content D3100 -> SLT A58. + block gallery - each image, index in photographyData.images - .gallery-item - img.gallery-image(src=image alt=`Photography ${index + 1}`) \ No newline at end of file + .details__gallery-item + img.details__gallery-image(src=require('../images/photos/image0.png') alt="Photography 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") \ No newline at end of file diff --git a/src/styles/details.styl b/src/styles/details.styl index 8f4283f..db322a0 100644 --- a/src/styles/details.styl +++ b/src/styles/details.styl @@ -1,107 +1,58 @@ -// Details Template Styles -.details-container - max-width 1200px +.details margin 0 auto padding 20px -.details-header - margin-bottom 40px +.details__header + margin-bottom 20px text-align center - .details-title - font-size 2.5rem - margin-bottom 20px - color #333 +.details__title + margin-bottom 5px - .details-description - font-size 1.2rem - color #666 - line-height 1.6 - max-width 800px - margin 0 auto +.details__description + margin auto -.details-content +.details__content display flex gap 40px align-items flex-start - - .details-text - flex 1 - - .details-text-content - font-size 1.1rem - line-height 1.8 - color #444 - margin-bottom 30px - - .details-back-link - margin-top 30px - - .back-button - display inline-block - padding 12px 24px - background-color #007bff - color white - text-decoration none - border-radius 6px - transition background-color 0.3s ease - font-weight 500 - - &:hover - background-color #0056b3 - - .details-gallery - flex 0 0 300px - display flex - flex-direction column - gap 20px - - .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) +.details__text + flex 1 + text-align justify + +.details__text-content + margin auto 30px + +.details__gallery + display flex + flex-direction column + gap 20px + margin auto + +.details__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) + +.details__gallery-image + width 100% + height 250px + object-fit cover + display block + @media screen and (max-width: 700px) - .details-container - padding 15px - - .details-header - margin-bottom 30px - - .details-title - font-size 2rem - - .details-description - font-size 1.1rem - - .details-content + .details__content flex-direction column - gap 30px - .details-gallery - flex 1 - order -1 // Move gallery above text on mobile - - .gallery-item - .gallery-image - height 250px + .details__gallery + order -1 // Move gallery above text - .details-text - .details-text-content - font-size 1rem - - .back-button - padding 10px 20px - font-size 0.95rem \ No newline at end of file + .details__gallery-image + height 300px + \ No newline at end of file