update: homepage and config

opendatateam · Nov 20, 2024 · f040b06 · f040b06
1 parent 7b075b4
commit f040b06
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 155 deletions.
diff --git a/configs/hackathon/config.yaml b/configs/hackathon/config.yaml
@@ -26,19 +26,13 @@ website:
     style: 'blue-cumulus'
   # leave empty if not pertinent
   homepage:
-    title: 'BIENVENUE sur le hackathon data gouv'
-    subtitle: 'C est une page de description'
+    title:
+    subtitle:
     sections:
-      - title: Hackathon données alimentaires
+      - title:
         content:
         sub_section_datasets:
         sub_section_cards:
-          title:
-          cards:
-            - name: 'Hackathon données alimentaires'
-              description: 'tout le monde a travaillé sauf Etalab'
-              url: '/hackathons/hackathon-donnees-alimentaires'
-              image_url: '/logistique/assets/immobilier.jpg'
         sub_section_tiles:
         sub_section_buttons:
     meta_description:
@@ -114,9 +108,6 @@ website:
     topics_list: 100
     files_list: 6
   home_banner_colors:
-    - '#D2EAF7'
-    - '#DBF3F8'
-    - '#DBF2F0'
   env: 'prod'
   matomo:
     host:

diff --git a/src/custom/hackathon/views/HomeView.vue b/src/custom/hackathon/views/HomeView.vue
@@ -32,143 +32,6 @@ const goToPage = (page: string) => {
 </template>
 
 <style scoped>
-.bouquets,
-.faq {
-  background-color: #f6f6f6;
-}
-.illustration {
-  max-width: 100%;
-}
-.organize-data {
-  background-color: white;
-  padding: 2rem 0;
-
-  li {
-    border-right: 1px solid var(--border-default-grey);
-    padding-right: 1rem;
-  }
-
-  li:last-child {
-    border: none;
-  }
-
-  @media (max-width: 992px) {
-    & {
-      padding: 1rem;
-    }
-
-    h3 {
-      margin: 1rem 0 0.5rem;
-    }
-
-    li {
-      border-right: none;
-      border-bottom: 1px solid var(--border-default-grey);
-      padding-bottom: 2rem;
-      margin-bottom: 2rem;
-    }
-
-    li:last-child {
-      padding-bottom: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  h4 {
-    margin-top: 5px;
-  }
-
-  p {
-    margin-bottom: 0;
-  }
-}
-
-:deep(.fr-links-group) {
-  li {
-    display: block;
-  }
-
-  li a {
-    color: var(--text-action-high-blue-france);
-  }
-
-  li a::after {
-    content: ' →';
-    margin-left: 0.5rem;
-  }
-
-  .fr-link {
-    /* Overide style for external link */
-    font-size: inherit;
-    margin: inherit;
-    vertical-align: inherit;
-  }
-}
-
-:deep(.fr-card__content) {
-  padding-left: 1rem;
-  padding-bottom: 0;
-
-  .fr-card__desc {
-    font-size: 1rem;
-  }
-}
-:deep(.fr-card--sm .fr-card__footer) {
-  padding: 0 0 2rem;
-}
-
-.explore-contribute :deep(.fr-card__body) {
-  padding-left: 1.5rem;
-}
-.explore-contribute .fr-grid-row--gutters .fr-col-12 {
-  padding: 1.75rem;
-}
-
-:deep(.fr-card__header) {
-  flex: 0 0 33%;
-
-  .fr-card__img img {
-    object-fit: contain;
-    object-position: bottom;
-  }
-}
-
-.explorer :deep(.fr-card__img) {
-  overflow: hidden;
-}
-.explorer :deep(.fr-card__img img) {
-  object-position: -25px 65%;
-  transform: scale(1.3);
-}
-
-@media (max-width: 768px) {
-  :deep(.fr-card__header) {
-    flex: 0 0 25%;
-  }
-
-  :deep(.fr-card__header .fr-card__img) {
-    height: 120px;
-    overflow: hidden;
-  }
-
-  :deep(.fr-card__header .fr-card__img img) {
-    object-position: left bottom;
-    transform: inherit;
-  }
-
-  .explorer :deep(.fr-card__img img) {
-    position: relative;
-    top: 25%;
-    left: 1rem;
-    height: 65%;
-  }
-
-  .contribute :deep(.fr-card__img img) {
-    position: relative;
-    left: 1rem;
-    height: 120%;
-  }
-}
 .main-title-v2 {
   text-align: center;
   font-size: clamp(1.375rem, 0.4698rem + 4.5259vw, 4rem);
@@ -177,24 +40,46 @@ const goToPage = (page: string) => {
     text-align: inherit;
   }
 }
-.main-title-v2 :deep(.highlight) {
-  color: #000091;
-}
 
-.big-search {
-  max-width: 792px;
-  margin: 0 auto;
+.banner {
+  cursor: pointer;
+  border: 1px solid #bbbbbb;
+  display: flex;
+  align-items: center;
+  padding: 10px;
 }
 
 .banner {
   cursor: pointer;
   border: 1px solid #bbbbbb;
   display: flex;
   align-items: center;
+  padding: 10px;
 }
 
 .banner-text {
   margin-left: 20px;
   font-size: 18px;
 }
+
+/* Responsive styling for mobile */
+@media screen and (max-width: 768px) {
+  .banner {
+    flex-direction: column; /* Stack items vertically */
+    align-items: center; /* Center both image and text horizontally */
+  }
+
+  .banner-text {
+    margin-left: 0; /* Remove left margin for better alignment */
+    margin-top: 10px; /* Add some spacing between the image and text */
+    text-align: center; /* Optional: Center the text for better appearance */
+  }
+
+  .banner img {
+    width: 100%; /* Make the image responsive */
+    max-width: 300px; /* Maintain a maximum width */
+    margin: 0 auto; /* Center the image horizontally */
+    display: block; /* Ensure the image behaves as a block element */
+  }
+}
 </style>