Dancer2-Plugin-LiteBlog

 view release on metacpan or  search on metacpan

lib/Dancer2/Plugin/LiteBlog/Scaffolder/Data.pm  view on Meta::CPAN

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    padding-bottom: 20px; /* Space at the bottom */

    flex-direction: column;
    justify-content: space-between; /* This will push the title to the center and meta to the bottom */
    align-items: center;
    background-size: cover;
    background-position: center;
    max-width: 100%;
    border-radius: 5px;
    position: relative; /* Needed for the overlay and for the meta's absolute positioning */
    margin-bottom: 20px;
}

.post-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6); /* Black overlay to ensure text readability */
    z-index: 1;
}

.post-header .header-content {
	flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;  
    z-index: 2; /* To ensure it's above the ::before pseudo-element */
    width: 100%; /* Ensure it takes the full width of the container */

lib/Dancer2/Plugin/LiteBlog/Scaffolder/Data.pm  view on Meta::CPAN

/* END single page post-header style */

/* post-header when there is no featured image */

.post-header.no-featured-image {
    background: #f0f0f0; /* Light background */
    color: #333; /* Darker text color for better contrast on light bg */
    
}

/* Override the dark overlay when no featured image */
.post-header.no-featured-image::before {
    background: rgba(255, 255, 255, 0); /* Transparent overlay */
}

/* Adjust the title color for better readability on light background */
.post-header.no-featured-image .post-title {
    color: #333;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7); /* Subtle text outline for depth */
}

/* Adjust the meta background and text color for light theme */
.post-header.no-featured-image .post-meta li {

t/public/css/liteblog/single-page.css  view on Meta::CPAN

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    padding-bottom: 20px; /* Space at the bottom */

    flex-direction: column;
    justify-content: space-between; /* This will push the title to the center and meta to the bottom */
    align-items: center;
    background-size: cover;
    background-position: center;
    max-width: 100%;
    border-radius: 5px;
    position: relative; /* Needed for the overlay and for the meta's absolute positioning */
    margin-bottom: 20px;
}

.post-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6); /* Black overlay to ensure text readability */
    z-index: 1;
}

.post-header .header-content {
	flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;  
    z-index: 2; /* To ensure it's above the ::before pseudo-element */
    width: 100%; /* Ensure it takes the full width of the container */

t/public/css/liteblog/single-page.css  view on Meta::CPAN

/* END single page post-header style */

/* post-header when there is no featured image */

.post-header.no-featured-image {
    background: #f0f0f0; /* Light background */
    color: #333; /* Darker text color for better contrast on light bg */
    
}

/* Override the dark overlay when no featured image */
.post-header.no-featured-image::before {
    background: rgba(255, 255, 255, 0); /* Transparent overlay */
}

/* Adjust the title color for better readability on light background */
.post-header.no-featured-image .post-title {
    color: #333;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7); /* Subtle text outline for depth */
}

/* Adjust the meta background and text color for light theme */
.post-header.no-featured-image .post-meta li {