details page in progress

2025-12-11 21:58:56 +10:00
parent 39d023d50b
commit 38e70189b8
8 changed files with 169 additions and 198 deletions
--- a/src/styles/details.styl
+++ b/src/styles/details.styl
@@ -0,0 +1,107 @@
+// Details Template Styles
+.details-container
+  max-width 1200px
+  margin 0 auto
+  padding 20px
+
+.details-header
+  margin-bottom 40px
+  text-align center
+  
+  .details-title
+    font-size 2.5rem
+    margin-bottom 20px
+    color #333
+    
+  .details-description
+    font-size 1.2rem
+    color #666
+    line-height 1.6
+    max-width 800px
+    margin 0 auto
+
+.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)
+@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
+    flex-direction column
+    gap 30px
+    
+    .details-gallery
+      flex 1
+      order -1  // Move gallery above text on mobile
+      
+      .gallery-item
+        .gallery-image
+          height 250px
+    
+    .details-text
+      .details-text-content
+        font-size 1rem
+        
+      .back-button
+        padding 10px 20px
+        font-size 0.95rem