|
@@ -14,7 +14,12 @@
|
|
|
}
|
|
|
} */
|
|
|
|
|
|
-*{
|
|
|
+body {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+header * {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
list-style: none;
|
|
@@ -22,7 +27,7 @@
|
|
|
}
|
|
|
|
|
|
header {
|
|
|
- height: 25vh;
|
|
|
+ height: 40vh;
|
|
|
width: 100vw;
|
|
|
background-image: url(../images/landscape.jpg);
|
|
|
background-size: cover;
|
|
@@ -56,6 +61,10 @@ header {
|
|
|
margin: 0 25px;
|
|
|
}
|
|
|
|
|
|
+.navbar .nav-links > ul > li {
|
|
|
+ font-size: 1.1em;
|
|
|
+}
|
|
|
+
|
|
|
.navbar .nav-links ul li.active a {
|
|
|
color: #ed3c57;
|
|
|
font-weight: 600;
|
|
@@ -76,6 +85,12 @@ header {
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
+@media screen and (max-width: 1400px) {
|
|
|
+ header {
|
|
|
+ height: 50vh;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
@media screen and (max-width: 900px) {
|
|
|
header.big {
|
|
|
height: 100vh;
|
|
@@ -130,6 +145,10 @@ header {
|
|
|
font-size: 2em;
|
|
|
}
|
|
|
|
|
|
+ header {
|
|
|
+ height: 30vh;
|
|
|
+ }
|
|
|
+
|
|
|
/* Body */
|
|
|
|
|
|
}
|
|
@@ -149,4 +168,49 @@ main {
|
|
|
|
|
|
img, .contenu-flex {
|
|
|
max-width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.article-preview {
|
|
|
+ max-height: 100px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.article-preview {
|
|
|
+ max-height: 400px; /* Hauteur maximale pour chaque article */
|
|
|
+ overflow: hidden; /* Masque le contenu qui dépasse */
|
|
|
+ position: relative; /* Nécessaire pour le gradient ou autre effet de coupure */
|
|
|
+ margin-bottom: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.article-preview p {
|
|
|
+ /* margin: 0; */
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 15; /* Nombre maximum de lignes (ici 5) */
|
|
|
+ line-clamp: 15;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.article-preview::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 100px;
|
|
|
+ background: linear-gradient(to bottom, transparent, white);
|
|
|
+}
|
|
|
+
|
|
|
+main h2 {
|
|
|
+ font-size: 2.5em;
|
|
|
+ color: rgb(34, 34, 34);
|
|
|
+}
|
|
|
+
|
|
|
+.article-by {
|
|
|
+ display: block;
|
|
|
+ font-size: 0.5em;
|
|
|
+ color: gray;
|
|
|
}
|