responsive site provisoire

config/routes.yaml

   path: /
   defaults: { _controller: App\Controller\DefaultController::index ,  _locale: fr }
 
-home:
+app_home:
   path: /home
   controller: App\Controller\Frontend\DefaultController:home
+
+app_legal_mention:
+  path: /mentions-legales
+  controller: App\Controller\Frontend\DefaultController::mention

public/assets/sass/_home.scss

 #home {
+  padding-bottom: 30px;
+  padding-top: 30px;
+
   header {
     .logo-aac {
       width: 80%;
       font-size: 32px;
       font-family: dinbold;
       position: absolute;
-      bottom: 46px;
+      bottom: 19px;
       width: 100%;
 
       .main-title {
     width: 60%;
     margin-top: 50px;
   }
+
+  footer {
+    .legal-mention {
+      text-align: right;
+    }
+  }
 }

public/assets/sass/_responsive.scss

+.hidden {
+  display: none !important;
+}
+
+@media screen and (max-width: 1200px) {
+  #home {
+    header {
+      .bloc-logo {
+        text-align: center;
+
+        .logo-aac {
+          max-height: 200px;
+          width: auto;
+          max-width: 100%;
+          height: 100%;
+        }
+      }
+
+      h1 {
+        font-size: 23px;
+      }
+    }
+
+    h2 {
+      font-size: 24px;
+    }
+
+    ul li button {
+      width: 90%;
+      font-size: 16px;
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  #home {
+    header {
+      h1 {
+        font-size: 21px;
+      }
+    }
+
+    .hidden-mobile {
+      display: none;
+    }
+
+    .bloc-title {
+      min-height: 120px;
+    }
+
+    h2 {
+      margin-top: 0;
+    }
+
+    .bloc-video-mobile {
+      margin-top: 30px;
+      margin-bottom: 30px;
+      display: block !important;
+    }
+  }
+}

public/assets/sass/screen.scss

 
 @import "_base.scss";
 @import "_home.scss";
+@import "_responsive.scss";
 
 @font-face {
   font-family: 'dinregular';

public/assets/stylesheets/screen.css

   display: block;
 }
 
-/* line 3, ../sass/_home.scss */
+/* line 1, ../sass/_home.scss */
+#home {
+  padding-bottom: 30px;
+  padding-top: 30px;
+}
+/* line 6, ../sass/_home.scss */
 #home header .logo-aac {
   width: 80%;
 }
-/* line 7, ../sass/_home.scss */
+/* line 10, ../sass/_home.scss */
 #home header .personnages-acc {
   width: 26%;
   position: absolute;
   bottom: 0;
 }
-/* line 13, ../sass/_home.scss */
+/* line 16, ../sass/_home.scss */
 #home header h1 {
   color: #aab769;
   font-size: 32px;
   font-family: dinbold;
   position: absolute;
-  bottom: 46px;
+  bottom: 19px;
   width: 100%;
 }
-/* line 21, ../sass/_home.scss */
+/* line 24, ../sass/_home.scss */
 #home header h1 .main-title {
   margin-left: 26%;
   display: inline-block;
   width: 70%;
 }
-/* line 27, ../sass/_home.scss */
+/* line 30, ../sass/_home.scss */
 #home header h1 .aac {
   color: #dc5b2f;
 }
-/* line 33, ../sass/_home.scss */
+/* line 36, ../sass/_home.scss */
 #home h2 {
   color: #568a73;
   font-size: 30px;
   margin-bottom: 30px;
   font-family: dinbold;
 }
-/* line 42, ../sass/_home.scss */
+/* line 45, ../sass/_home.scss */
 #home ul li {
   margin-top: 25px;
 }
-/* line 45, ../sass/_home.scss */
+/* line 48, ../sass/_home.scss */
 #home ul li button {
   width: 70%;
   font-size: 18px;
   -webkit-border-radius: 15px 15px;
   border-radius: 15px / 15px;
 }
-/* line 51, ../sass/_home.scss */
+/* line 54, ../sass/_home.scss */
 #home ul li button a {
   color: #FFF;
 }
-/* line 56, ../sass/_home.scss */
+/* line 59, ../sass/_home.scss */
 #home ul li .yellow {
   background-color: #ffe680;
 }
-/* line 60, ../sass/_home.scss */
+/* line 63, ../sass/_home.scss */
 #home ul li .green {
   background-color: #aab769;
 }
-/* line 64, ../sass/_home.scss */
+/* line 67, ../sass/_home.scss */
 #home ul li .orange {
   background-color: #dc5b2f;
 }
-/* line 70, ../sass/_home.scss */
+/* line 73, ../sass/_home.scss */
 #home .logo-coop {
   width: 60%;
   margin-top: 50px;
 }
+/* line 79, ../sass/_home.scss */
+#home footer .legal-mention {
+  text-align: right;
+}
 
+/* line 1, ../sass/_responsive.scss */
+.hidden {
+  display: none !important;
+}
+
+@media screen and (max-width: 1200px) {
+  /* line 8, ../sass/_responsive.scss */
+  #home header .bloc-logo {
+    text-align: center;
+  }
+  /* line 11, ../sass/_responsive.scss */
+  #home header .bloc-logo .logo-aac {
+    max-height: 200px;
+    width: auto;
+    max-width: 100%;
+    height: 100%;
+  }
+  /* line 19, ../sass/_responsive.scss */
+  #home header h1 {
+    font-size: 23px;
+  }
+  /* line 24, ../sass/_responsive.scss */
+  #home h2 {
+    font-size: 24px;
+  }
+  /* line 28, ../sass/_responsive.scss */
+  #home ul li button {
+    width: 90%;
+    font-size: 16px;
+  }
+}
+@media screen and (max-width: 768px) {
+  /* line 38, ../sass/_responsive.scss */
+  #home header h1 {
+    font-size: 21px;
+  }
+  /* line 43, ../sass/_responsive.scss */
+  #home .hidden-mobile {
+    display: none;
+  }
+  /* line 47, ../sass/_responsive.scss */
+  #home .bloc-title {
+    min-height: 120px;
+  }
+  /* line 51, ../sass/_responsive.scss */
+  #home h2 {
+    margin-top: 0;
+  }
+  /* line 55, ../sass/_responsive.scss */
+  #home .bloc-video-mobile {
+    margin-top: 30px;
+    margin-bottom: 30px;
+    display: block !important;
+  }
+}
 @font-face {
   font-family: 'dinregular';
   src: url("../fonts/din_regular-webfont.eot");

src/Controller/Frontend/DefaultController.php

 
 namespace App\Controller\Frontend;
 
+use Doctrine\ORM\EntityManagerInterface;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Annotation\Route;
+use App\Entity\Site\Page;
 
 class DefaultController extends AbstractController
 {
+    protected $em;
+
+    public function __construct(EntityManagerInterface $em)
+    {
+        $this->em = $em;
+    }
 
     public function home()
     {
         return $this->render('frontend/home.html.twig');
     }
 
+    public function mention(): Response
+    {
+        $pageRepository = $this->em->getRepository(Page::class);
+
+        return $this->render('page/page.html.twig', [
+            'controller_name' => 'IndexController',
+            'page' => $pageRepository->findOneByDevAlias('legal-mention')
+        ]);
+    }
+
 }

src/Entity/Site/Page.php

             $this->gallery = new ArrayCollection();
         }
 
-        public function getId(): ?int
+        public function __toString()
+        {
+            return $this->title;
+        }
+
+    public function getId(): ?int
         {
                 return $this->id;
         }

templates/frontend/home.html.twig

 
 {% block body %}
     <div id="home" class="ui container">
-        <header class="ui grid">
-            <div class="five wide column">
+        <header class="ui stackable grid">
+            <div class="five wide column bloc-logo">
                 <img class="logo-aac" src="{{ asset('assets/img/Logo-Aux-Actes-Citoyens.jpg') }}"
                      alt="logo aux actes citoyens">
             </div>
-            <div class="eleven wide column">
+            <div class="eleven wide column bloc-title">
                 <h1>
-                    <img class="personnages-acc" src="{{ asset('assets/img/Personnages-AAC.jpg') }}" alt="Aux actes Citoyens">
+                    <img class="personnages-acc" src="{{ asset('assets/img/Personnages-AAC.jpg') }}"
+                         alt="Aux actes Citoyens">
                     <span class="main-title">La plateforme numérique <br><span class="aac">« Aux actes Citoyens »</span> arrive bientôt !</span>
                 </h1>
             </div>
         </header>
-        <div class="ui grid">
+        <div class="hidden bloc-video-mobile">
+            <iframe width="100%" height="350px" src="https://www.youtube.com/embed/1dC1OoIi87o"
+                    title="YouTube video player" frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowfullscreen></iframe>
+        </div>
+        <div class="ui stackable grid">
             <div class="five wide column">
                 <h2>En attendant,<br>rejoignez-nous !</h2>
 
                 <ul>
                     <li>
                         <button class="ui button yellow">
-                            <a href="{{ asset('assets/pdf/AAC-Fiche-Pratique-Aux-Actes-Citoyens.pdf') }}" title="Découvrir" target="_blank">Découvrir</a>
+                            <a href="{{ asset('assets/pdf/AAC-Fiche-Pratique-Aux-Actes-Citoyens.pdf') }}"
+                               title="Découvrir" target="_blank">Découvrir</a>
                         </button>
                     </li>
                     <li>
                         <button class="ui button green">
-                            <a href="{{ asset('assets/pdf/Dossier-Partenariat-web.pdf') }}" title="Dossier partenariat" target="_blank">Dossier partenariat</a>
+                            <a href="{{ asset('assets/pdf/Dossier-Partenariat-web.pdf') }}" title="Dossier partenariat"
+                               target="_blank">Dossier partenariat</a>
                         </button>
                     </li>
                     <li>
                 </ul>
 
                 <div>
-                    <img class="logo-coop" src="{{ asset('assets/img/Logo-Cooperative-Citoyens.jpg') }}"
-                         alt="la cooperative des citoyens">
+                    <a href="https://www.lacooperativedescitoyens.fr/" title="lacooperativedescitoyens" target="_blank">
+                        <img class="logo-coop" src="{{ asset('assets/img/Logo-Cooperative-Citoyens.jpg') }}"
+                             alt="la cooperative des citoyens">
+                    </a>
                 </div>
             </div>
-            <div class="eleven wide column">
-                <iframe width="100%" height="100%" src="https://www.youtube.com/embed/1dC1OoIi87o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+            <div class="eleven wide column bloc-video hidden-mobile">
+                <iframe width="100%" height="100%" src="https://www.youtube.com/embed/1dC1OoIi87o"
+                        title="YouTube video player" frameborder="0"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                        allowfullscreen></iframe>
             </div>
         </div>
+        <footer>
+            <div class="ui grid">
+                <div class="legal-mention column eight wide column">
+                    <a href="{{ path('app_legal_mention') }}" title="Mentions légales">Mentions légales</a>
+                </div>
+                <div class="column eight wide column">
+                    création <a href="https://www.laclic.fr/" title="La Clic !" target="_blank">LA CLIC !</a>
+                </div>
+            </div>
+        </footer>
     </div>
 {% endblock %}

templates/page/page.html.twig

+{% extends 'frontend/base.html.twig' %}
+
+{% block body %}
+    <div class="ui container">
+        <h1>{{ page.title }}</h1>
+        <p>{{ page.description|raw }}</p>
+    </div>
+{% endblock %}