Greg/MyFavStuff5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: create single page layout with responsive image and content styling

Browse Source
This commit is contained in:
Greg 2025-05-26 21:16:41 +02:00
parent 0415e4198c
commit f42782baf2
1 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
layouts/_default/single.html
View File

@ -103,6 +103,8 @@
@media (min-width: 768px) { @media (min-width: 768px) {
.detail-top { .detail-top {
flex-direction: row; flex-direction: row;
align-items: flex-start; /* Vertically align items to the top */
gap: 24px; /* Add space between image/placeholder and info */
} }
} }
.detail-image-container { .detail-image-container {
@ -132,16 +134,31 @@
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.detail-image-container { .detail-image-container,
padding: 40px;
}
.detail-image {
max-height: 500px;
}
.detail-image-placeholder { .detail-image-placeholder {
width: 40%; flex: 0 0 320px; /* Fixed width for the image/placeholder column */
height: 350px; border-radius: 8px; /* Rounded corners on all sides */
} }
.detail-image-container {
padding: 20px; /* Reduced padding */
/* background: #f5f5f5; is already defined in base styles */
}
.detail-image {
max-width: 100%; /* Ensure image scales within container */
max-height: 450px; /* Adjusted max height */
/* object-fit: contain; is already defined in base styles */
/* border-radius: 4px; is already defined in base styles */
}
.detail-image-placeholder {
/* width: 40%; Replaced by flex rule */
height: 320px; /* Make it square with the flex-basis */
/* Other properties like display, align-items, justify-content are in base styles */
}
/* .detail-info will take remaining space due to flex:1 in its base style */
} }
.placeholder-initial { .placeholder-initial {
font-size: 5rem; font-size: 5rem;