]> _ Git - pmi.git/commitdiff
wip #2755 @0.20
authornael <nael@cubedesigners.com>
Wed, 12 Jun 2019 15:26:06 +0000 (17:26 +0200)
committernael <nael@cubedesigners.com>
Wed, 12 Jun 2019 15:26:06 +0000 (17:26 +0200)
public/_modules/news-feed/index.html
public/_modules/news-feed/style.css
public/_modules/news-feed/style.styl

index 6f02f0ba34915ac1f8d31e14f33d1033d72fdb53..f585a240a3527708b3f30cd07f0703d38c6733ca 100644 (file)
 <body>
 
 <div id="news" class=" mt-5 flex lg:flex-col-reverse ">
-    <div class="section-news flex flex-col mr-12">
+    <div class="section-news flex flex-col mr-12 xs:mr-0">
 
         <div class="news-feed sm:flex-col flex lg:mt-12">
             <div class="img-news mr-12 sm:mr-0">
-                <img  src="img/news.png" alt="">
+                <img class="xs:w-full" src="img/news.png" alt="">
             </div>
             <div class="news-actu text-grey-dark">
                 <span class="news-date ">12/01/19</span>
-                <h3 class="mt-2 mb-0">LSO-12-X98 - Surveillance de pont</h3>
-                <p class="news-txt" >
+                <h3 class="mt-2 mb-2">LSO-12-X98 - Surveillance de pont</h3>
+                <p class="news-txt " >
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum dolor diam,
                     ac venenatis tortor egestas in. Curabitur nec enim interdum, blandit mi at, accumsan
                     purus. Phasellus a nisl vel mauris fringilla dapibus in ac turpis. In vel purus metus.
                     Vivamus aliquet pretium mi, eget tempor neque suscipit sit amet.
                 </p>
-                <a href="#">En savoir plus</a>
+                <div class="mt-2"><a href="#">En savoir plus</a></div>
             </div>
         </div>
 
         <div class="news-feed sm:flex-col flex mt-12">
             <div class="img-news mr-12 sm:mr-0">
-                <img  src="img/news.png" alt="">
+                <img class="xs:w-full" src="img/news.png" alt="">
             </div>
             <div class="news-actu text-grey-dark">
                 <span class="news-date ">12/01/19</span>
-                <h3 class="mt-2 mb-0">LSO-12-X98 - Surveillance de pont</h3>
-                <p class="news-txt" >
+                <h3 class="mt-2 mb-2">LSO-12-X98 - Surveillance de pont</h3>
+                <p class="news-txt " >
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum dolor diam,
                     ac venenatis tortor egestas in. Curabitur nec enim interdum, blandit mi at, accumsan
                     purus. Phasellus a nisl vel mauris fringilla dapibus in ac turpis. In vel purus metus.
                     Vivamus aliquet pretium mi, eget tempor neque suscipit sit amet.
                 </p>
-                <a href="#">En savoir plus</a>
+                <div class="mt-2"><a href="#">En savoir plus</a></div>
             </div>
         </div>
 
         <div class="news-feed sm:flex-col flex mt-12">
             <div class="img-news mr-12 sm:mr-0">
-                <img  src="img/news.png" alt="">
+                <img class="xs:w-full" src="img/news.png" alt="">
             </div>
             <div class="news-actu text-grey-dark">
                 <span class="news-date ">12/01/19</span>
-                <h3 class="mt-2 mb-0">LSO-12-X98 - Surveillance de pont</h3>
-                <p class="news-txt" >
+                <h3 class="mt-2 mb-2">LSO-12-X98 - Surveillance de pont</h3>
+                <p class="news-txt " >
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum dolor diam,
                     ac venenatis tortor egestas in. Curabitur nec enim interdum, blandit mi at, accumsan
                     purus. Phasellus a nisl vel mauris fringilla dapibus in ac turpis. In vel purus metus.
                     Vivamus aliquet pretium mi, eget tempor neque suscipit sit amet.
                 </p>
-                <a href="#">En savoir plus</a>
+                <div class="mt-2"><a href="#">En savoir plus</a></div>
             </div>
         </div>
 
         <div class="news-feed sm:flex-col flex mt-12">
             <div class="img-news mr-12 sm:mr-0">
-                <img  src="img/news.png" alt="">
+                <img class="xs:w-full" src="img/news.png" alt="">
             </div>
             <div class="news-actu text-grey-dark">
                 <span class="news-date ">12/01/19</span>
-                <h3 class="mt-2 mb-0">LSO-12-X98 - Surveillance de pont</h3>
-                <p class="news-txt" >
+                <h3 class="mt-2 mb-2">LSO-12-X98 - Surveillance de pont</h3>
+                <p class="news-txt " >
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum dolor diam,
                     ac venenatis tortor egestas in. Curabitur nec enim interdum, blandit mi at, accumsan
                     purus. Phasellus a nisl vel mauris fringilla dapibus in ac turpis. In vel purus metus.
                     Vivamus aliquet pretium mi, eget tempor neque suscipit sit amet.
                 </p>
-                <a href="#">En savoir plus</a>
+                <div class="mt-2"><a href="#">En savoir plus</a></div>
             </div>
         </div>
 
         <div class="news-feed sm:flex-col flex mt-12">
             <div class="img-news mr-12 sm:mr-0">
-                <img  src="img/news.png" alt="">
+                <img class="xs:w-full" src="img/news.png" alt="">
             </div>
             <div class="news-actu text-grey-dark">
                 <span class="news-date ">12/01/19</span>
-                <h3 class="mt-2 mb-0">LSO-12-X98 - Surveillance de pont</h3>
-                <p class="news-txt" >
+                <h3 class="mt-2 mb-2">LSO-12-X98 - Surveillance de pont</h3>
+                <p class="news-txt " >
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum dolor diam,
                     ac venenatis tortor egestas in. Curabitur nec enim interdum, blandit mi at, accumsan
                     purus. Phasellus a nisl vel mauris fringilla dapibus in ac turpis. In vel purus metus.
                     Vivamus aliquet pretium mi, eget tempor neque suscipit sit amet.
                 </p>
-                <a href="#">En savoir plus</a>
+                <div class="mt-2"><a href="#">En savoir plus</a></div>
             </div>
         </div>
 
         <div class="news-feed sm:flex-col flex mt-12">
             <div class="img-news mr-12 sm:mr-0">
-                <img  src="img/news.png" alt="">
+                <img class="xs:w-full" src="img/news.png" alt="">
             </div>
             <div class="news-actu text-grey-dark">
                 <span class="news-date ">12/01/19</span>
-                <h3 class="mt-2 mb-0">LSO-12-X98 - Surveillance de pont</h3>
-                <p class="news-txt" >
+                <h3 class="mt-2 mb-2">LSO-12-X98 - Surveillance de pont</h3>
+                <p class="news-txt " >
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum dolor diam,
                     ac venenatis tortor egestas in. Curabitur nec enim interdum, blandit mi at, accumsan
                     purus. Phasellus a nisl vel mauris fringilla dapibus in ac turpis. In vel purus metus.
                     Vivamus aliquet pretium mi, eget tempor neque suscipit sit amet.
                 </p>
-                <a href="#">En savoir plus</a>
+                <div class="mt-2"><a href="#">En savoir plus</a></div>
             </div>
         </div>
+
     </div>
 
     <div>
index 8a102c08630ada8512df283bb051c2df5f3be881..16ad50aeabcd72f73160bf5eeb4987748e78ad7c 100644 (file)
@@ -37,3 +37,6 @@
   font-family: 'Barlow', sans-serif;
   font-weight: 500;
 }
+#news img {
+  width: 100%;
+}
index 84bd3bd64354634317a333f5c265975d3b68825d..ef750a4875610b6ae1ed00645ce8a7a9051f9893 100644 (file)
@@ -22,6 +22,7 @@ $verylightgrey =#E7E9F3
     max-width: 744px
     @media (max-width : 767px)
       margin-top: 2.5vw
+
   .news-date
     font-size: 14px
   .news-txt
@@ -33,4 +34,6 @@ $verylightgrey =#E7E9F3
       width 100%
   .event-title
     font-family: $barlow
-    font-weight: 500
\ No newline at end of file
+    font-weight: 500
+  img
+    width 100%
\ No newline at end of file