Correction affichage dates et style minimaliste sur /photo/blog
This commit is contained in:
parent
d82e51c4c9
commit
3566488a0a
4 changed files with 12 additions and 45 deletions
|
|
@ -1,12 +0,0 @@
|
||||||
---
|
|
||||||
title: "في انتظار العروس"
|
|
||||||
description: "تحضيرات زفاف."
|
|
||||||
date: 2014-10-25
|
|
||||||
coverImage: "../../assets/images/photos/blog/waiting-for-the-bride/01-.jpg"
|
|
||||||
tags: []
|
|
||||||
featured: false
|
|
||||||
draft: false
|
|
||||||
lang: ar
|
|
||||||
---
|
|
||||||
|
|
||||||
تحضيرات زفاف.
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
---
|
|
||||||
title: "Waiting for the Bride"
|
|
||||||
description: "Wedding preparations."
|
|
||||||
date: 2014-10-25
|
|
||||||
coverImage: "../../assets/images/photos/blog/waiting-for-the-bride/01-.jpg"
|
|
||||||
tags: []
|
|
||||||
featured: false
|
|
||||||
draft: false
|
|
||||||
lang: en
|
|
||||||
---
|
|
||||||
|
|
||||||
Wedding preparations.
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
---
|
|
||||||
title: "En attendant la mariée"
|
|
||||||
description: "Préparatifs d'un mariage"
|
|
||||||
date: 2014-10-25
|
|
||||||
coverImage: "../../assets/images/photos/blog/waiting-for-the-bride/01-.jpg"
|
|
||||||
tags: []
|
|
||||||
featured: false
|
|
||||||
draft: false
|
|
||||||
---
|
|
||||||
|
|
||||||
Préparatifs d'un mariage.
|
|
||||||
|
|
@ -41,7 +41,6 @@ const regularPosts = postsWithImages.filter(post => !post.data.featured);
|
||||||
<div class="post-content">
|
<div class="post-content">
|
||||||
<span class="post-badge">À la une</span>
|
<span class="post-badge">À la une</span>
|
||||||
<h2 class="post-title">{post.data.title}</h2>
|
<h2 class="post-title">{post.data.title}</h2>
|
||||||
<p class="post-description">{post.data.description}</p>
|
|
||||||
<time class="post-date">
|
<time class="post-date">
|
||||||
{new Date(post.data.date).toLocaleDateString('fr-FR', {
|
{new Date(post.data.date).toLocaleDateString('fr-FR', {
|
||||||
year: 'numeric',
|
year: 'numeric',
|
||||||
|
|
@ -69,7 +68,6 @@ const regularPosts = postsWithImages.filter(post => !post.data.featured);
|
||||||
<div class="post-overlay">
|
<div class="post-overlay">
|
||||||
<div class="overlay-content">
|
<div class="overlay-content">
|
||||||
<h3 class="post-title">{post.data.title}</h3>
|
<h3 class="post-title">{post.data.title}</h3>
|
||||||
<p class="post-subtitle">{post.data.description}</p>
|
|
||||||
<time class="post-date">
|
<time class="post-date">
|
||||||
{new Date(post.data.date).toLocaleDateString('fr-FR', {
|
{new Date(post.data.date).toLocaleDateString('fr-FR', {
|
||||||
year: 'numeric',
|
year: 'numeric',
|
||||||
|
|
@ -141,13 +139,10 @@ const regularPosts = postsWithImages.filter(post => !post.data.featured);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.featured-post .post-content {
|
.featured-post .post-content {
|
||||||
color: white;
|
color: white;
|
||||||
max-height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-badge {
|
.post-badge {
|
||||||
|
|
@ -165,7 +160,7 @@ const regularPosts = postsWithImages.filter(post => !post.data.featured);
|
||||||
.featured-post .post-title {
|
.featured-post .post-title {
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin: 0 0 12px 0;
|
margin: 0 0 4px 0;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -182,6 +177,7 @@ const regularPosts = postsWithImages.filter(post => !post.data.featured);
|
||||||
}
|
}
|
||||||
|
|
||||||
.featured-post .post-date {
|
.featured-post .post-date {
|
||||||
|
display: block;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
@ -211,6 +207,11 @@ const regularPosts = postsWithImages.filter(post => !post.data.featured);
|
||||||
aspect-ratio: 3/2;
|
aspect-ratio: 3/2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.featured-post .post-link {
|
||||||
|
aspect-ratio: auto;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.post-link img {
|
.post-link img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -221,18 +222,19 @@ const regularPosts = postsWithImages.filter(post => !post.data.featured);
|
||||||
|
|
||||||
.post-item .post-overlay {
|
.post-item .post-overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
|
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,0) 50%);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
padding: 20px;
|
padding: 12px 16px;
|
||||||
transition: background 0.3s ease;
|
transition: background 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-item:hover .post-overlay {
|
.post-item:hover .post-overlay {
|
||||||
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 100%);
|
background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 25%, rgba(0,0,0,0) 50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-item:hover img {
|
.post-item:hover img {
|
||||||
|
|
@ -246,7 +248,7 @@ const regularPosts = postsWithImages.filter(post => !post.data.featured);
|
||||||
.post-item .post-title {
|
.post-item .post-title {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin: 0 0 4px 0;
|
margin: 0 0 2px 0;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
text-shadow: 0 1px 3px rgba(0,0,0,0.8);
|
text-shadow: 0 1px 3px rgba(0,0,0,0.8);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue