feat: organization page responsive

static/assets/organization.css

@@ -13,6 +13,10 @@
   font-size: 1.2em;
 }
 
+.header-title {
+  text-align: right;
+}
+
 .return {
   display: flex;
   align-items: center;
@@ -115,6 +119,16 @@
   justify-content: center;
   align-items: center;
   font-size: 3.5em;
+
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.media-container {
+  position: relative;
 }
 
 .media-overlay i {
@@ -142,6 +156,7 @@
 } */
 
 .media {
+  height: 100%;
   border-radius: 4px;
   background-size: cover;
   background-position: center;
@@ -217,6 +232,7 @@ section {
   justify-content: space-between;
   align-items: center;
   padding: 1em 2em 1em 2em;
+  cursor: pointer;
 }
 
 .schedule-category-collapse-icon {
@@ -236,10 +252,12 @@ section {
   border-radius: 4px;
   background-color: #ECF0F1;
   width: 40;
+
   margin-left: 2em;
   margin-top: 1em;
   margin-bottom: 1em;
   margin-right: 40em;
+  
   padding: 1em 2em 1em 2em;
 }
 
@@ -391,4 +409,66 @@ section {
 
 .footer div:nth-child(3) {
   background-color: rgb(253, 110, 11, .83);
+}
+
+
+@media (max-width: 900px) {
+
+  .cover-background {
+    height: 30em;
+    width: 100%;
+  }
+  
+  .cover {
+    height: 30em;
+    margin-top: -30em;
+  }
+  
+  .cover-content {
+    height: 30em;
+
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .cover-image {
+    margin-right: 0;
+    margin-bottom: 3em;
+  }
+
+  .cover-title {
+    margin-bottom: .25em;
+  }
+
+  .media-mosaic {
+    height: 33em;
+    grid-template-columns: .5fr .5fr;
+    grid-template-rows: 1fr .5fr .5fr;
+  }
+  .media-main {
+    grid-row: 1 / span 1;
+    grid-column: 1 / span 2;
+  }
+
+  .schedule-category-days-container {
+    margin-right: 5em;
+  }
+
+  .pricing-card {
+    margin-right: .5em;
+  }
+
+  .contact {
+    width: 100%;
+  }
+
+  .contact-item {
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+
+  .contact-content {
+    word-break: break-all;
+  }
 }

static/organization.html

@@ -38,15 +38,22 @@
     </div>
     <div class="container">
       <div class="media-mosaic">
-        <div class="media media-main" style="background-image: url('assets/img/dummy-1.jpg')">
+        <div class="media-container media-main">
+          <div class="media" style="background-image: url('assets/img/dummy-1.jpg')"></div>
         </div>
-        <div class="media media-1-1" style="background-image: url('assets/img/dummy-3.jpg')"></div>
+        <div class="media-container media-1-1">
-        <div class="media media-1-2" style="background-image: url('assets/img/dummy-2.jpg'); grid-column: 3/ span 1; grid-row: 1/ span 1;"></div>
+          <div class="media" style="background-image: url('assets/img/dummy-3.jpg')"></div>
-        <div class="media-1-2 media-overlay" style="grid-column: 3/ span 1; grid-row: 1/ span 1;">
+        </div>
-          <i class="fas fa-play-circle"></i>
+        <div class="media-container media-1-2">
+          <div class="media" style="background-image: url('assets/img/dummy-2.jpg')"></div>
+          <div class="media-overlay"><i class="fas fa-play-circle"></i></div>
+        </div>
+        <div class="media-container media-2-1">
+          <div class="media" style="background-image: url('assets/img/dummy-4.jpg')"></div>
+        </div> 
+        <div class="media-container media-2-2">
+          <div class="media" style="background-image: url('assets/img/dummy-5.jpg')"></div>
         </div>
-        <div class="media media-2-1" style="background-image: url('assets/img/dummy-4.jpg')"></div>
-        <div class="media media-2-2" style="background-image: url('assets/img/dummy-5.jpg')"></div>
       </div>
       <section>
         <div class="section-title">
@@ -75,7 +82,7 @@
         </div>
         <div class="schedule">
           <div class="schedule-category">
-            <div class="schedule-category-header">
+            <div class="schedule-category-header" title="Déroulez">
               <div class="schedule-category-name">
                 Création de robots super cool
               </div>
@@ -111,7 +118,7 @@
             </div>
           </div>
           <div class="schedule-category">
-            <div class="schedule-category-header">
+            <div class="schedule-category-header" title="Déroulez">
               <div class="schedule-category-name">
                 Cours de programmation de gros expert
               </div>