site provi: page mention legal + footer

public/assets/sass/_home.scss

@@ -1,4 +1,4 @@
-#home {
+#app_home {
   padding-bottom: 30px;
   padding-top: 30px;
 
@@ -76,8 +76,18 @@
   }
 
   footer {
-    .legal-mention {
-      text-align: right;
+    margin-top: 50px;
+    font-family: dinregular;
+    color: #568a73;
+    text-align: center;
+
+    a {
+      color: #568a73;
+      font-family: dinbold;
+
+      &:hover {
+        text-decoration: underline;
+      }
     }
   }
 }

public/assets/sass/_legal_mention.scss

@@ -0,0 +1,39 @@
+#app_legal_mention {
+  margin-top: 30px;
+
+  .logo-acc {
+    text-align: center;
+  }
+
+  .title {
+    h1 {
+      color: #568a73;
+      font-size: 45px;
+      margin-top: 80px;
+      margin-bottom: 30px;
+      font-family: dinbold;
+    }
+  }
+
+  .description {
+    font-family: dinregular;
+    font-size: 17px;
+    text-align: justify;
+  }
+
+  footer {
+    margin-top: 50px;
+    font-family: dinregular;
+    color: #568a73;
+    text-align: center;
+
+    a {
+      color: #568a73;
+      font-family: dinbold;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}

public/assets/sass/screen.scss

@@ -13,6 +13,7 @@ $yellow: #ffe580;
 
 @import "_base.scss";
 @import "_home.scss";
+@import "_legal_mention.scss";
 @import "_responsive.scss";
 
 @font-face {

public/assets/stylesheets/screen.css

@@ -68,22 +68,22 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
 }
 
 /* line 1, ../sass/_home.scss */
-#home {
+#app_home {
   padding-bottom: 30px;
   padding-top: 30px;
 }
 /* line 6, ../sass/_home.scss */
-#home header .logo-aac {
+#app_home header .logo-aac {
   width: 80%;
 }
 /* line 10, ../sass/_home.scss */
-#home header .personnages-acc {
+#app_home header .personnages-acc {
   width: 26%;
   position: absolute;
   bottom: 0;
 }
 /* line 16, ../sass/_home.scss */
-#home header h1 {
+#app_home header h1 {
   color: #aab769;
   font-size: 32px;
   font-family: dinbold;
@@ -92,17 +92,17 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
   width: 100%;
 }
 /* line 24, ../sass/_home.scss */
-#home header h1 .main-title {
+#app_home header h1 .main-title {
   margin-left: 26%;
   display: inline-block;
   width: 70%;
 }
 /* line 30, ../sass/_home.scss */
-#home header h1 .aac {
+#app_home header h1 .aac {
   color: #dc5b2f;
 }
 /* line 36, ../sass/_home.scss */
-#home h2 {
+#app_home h2 {
   color: #568a73;
   font-size: 30px;
   margin-top: 80px;
@@ -110,11 +110,11 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
   font-family: dinbold;
 }
 /* line 45, ../sass/_home.scss */
-#home ul li {
+#app_home ul li {
   margin-top: 25px;
 }
 /* line 48, ../sass/_home.scss */
-#home ul li button {
+#app_home ul li button {
   width: 70%;
   font-size: 18px;
   font-family: dinbold;
@@ -123,29 +123,80 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
   border-radius: 15px / 15px;
 }
 /* line 54, ../sass/_home.scss */
-#home ul li button a {
+#app_home ul li button a {
   color: #FFF;
 }
 /* line 59, ../sass/_home.scss */
-#home ul li .yellow {
+#app_home ul li .yellow {
   background-color: #ffe680;
 }
 /* line 63, ../sass/_home.scss */
-#home ul li .green {
+#app_home ul li .green {
   background-color: #aab769;
 }
 /* line 67, ../sass/_home.scss */
-#home ul li .orange {
+#app_home ul li .orange {
   background-color: #dc5b2f;
 }
 /* line 73, ../sass/_home.scss */
-#home .logo-coop {
+#app_home .logo-coop {
   width: 60%;
   margin-top: 50px;
 }
-/* line 79, ../sass/_home.scss */
-#home footer .legal-mention {
-  text-align: right;
+/* line 78, ../sass/_home.scss */
+#app_home footer {
+  margin-top: 50px;
+  font-family: dinregular;
+  color: #568a73;
+  text-align: center;
+}
+/* line 84, ../sass/_home.scss */
+#app_home footer a {
+  color: #568a73;
+  font-family: dinbold;
+}
+/* line 88, ../sass/_home.scss */
+#app_home footer a:hover {
+  text-decoration: underline;
+}
+
+/* line 1, ../sass/_legal_mention.scss */
+#app_legal_mention {
+  margin-top: 30px;
+}
+/* line 4, ../sass/_legal_mention.scss */
+#app_legal_mention .logo-acc {
+  text-align: center;
+}
+/* line 9, ../sass/_legal_mention.scss */
+#app_legal_mention .title h1 {
+  color: #568a73;
+  font-size: 45px;
+  margin-top: 80px;
+  margin-bottom: 30px;
+  font-family: dinbold;
+}
+/* line 18, ../sass/_legal_mention.scss */
+#app_legal_mention .description {
+  font-family: dinregular;
+  font-size: 17px;
+  text-align: justify;
+}
+/* line 24, ../sass/_legal_mention.scss */
+#app_legal_mention footer {
+  margin-top: 50px;
+  font-family: dinregular;
+  color: #568a73;
+  text-align: center;
+}
+/* line 30, ../sass/_legal_mention.scss */
+#app_legal_mention footer a {
+  color: #568a73;
+  font-family: dinbold;
+}
+/* line 34, ../sass/_legal_mention.scss */
+#app_legal_mention footer a:hover {
+  text-decoration: underline;
 }
 
 /* line 1, ../sass/_responsive.scss */

templates/frontend/base.html.twig

@@ -7,7 +7,8 @@
     <link rel="stylesheet" href="{{ asset('assets/stylesheets/screen.css') }}">
     {% block stylesheets %}{% endblock %}
 </head>
-<body>
+{% set current_path = app.request.get('_route') %}
+<body id="{{ current_path }}">
 {% block body %}{% endblock %}
 <script src="{{ asset('assets/js/jquery-3.1.1.min.js') }}"></script>
 <script src="{{ asset('assets/semantic/semantic.min.js') }}"></script>

templates/frontend/home.html.twig

@@ -2,7 +2,7 @@
 {% import 'frontend/macro.html.twig' as macro %}
 
 {% block body %}
-    <div id="home" class="ui container">
+    <div class="ui container">
         <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') }}"
@@ -62,11 +62,9 @@
         </div>
         <footer>
             <div class="ui grid">
-                <div class="legal-mention column eight wide column">
+                <div class="column sixteen wide">
                     <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>
+                    - création <a href="https://www.laclic.fr/" title="La Clic !" target="_blank">LA CLIC !</a>
                 </div>
             </div>
         </footer>

templates/page/page.html.twig

@@ -2,7 +2,24 @@
 
 {% block body %}
     <div class="ui container">
-        <h1>{{ page.title }}</h1>
-        <p>{{ page.description|raw }}</p>
+        <div class="logo-acc">
+            <a href="{{ path('app_home') }}" title="Accueil">
+                <img src="{{ 'assets/img/Logo-Aux-Actes-Citoyens.jpg' }}" alt="Logo le panier de daphne">
+            </a>
+        </div>
+        <div class="title">
+            <h1>{{ page.title }}</h1>
+        </div>
+        <div class="description">
+            {{ page.description|raw }}
+        </div>
+        <footer>
+            <div class="ui grid">
+                <div class="column sixteen wide">
+                    <a href="{{ path('app_legal_mention') }}" title="Mentions légales">Mentions légales</a>
+                    - création <a href="https://www.laclic.fr/" title="La Clic !" target="_blank">LA CLIC !</a>
+                </div>
+            </div>
+        </footer>
     </div>
 {% endblock %}