Browse Source

On ajuste pour portable

Sangfroid 5 months ago
parent
commit
a83b690c31
4 changed files with 53 additions and 39 deletions
  1. 20 3
      assets/styles/app.css
  2. 33 30
      templates/_menu.html.twig
  3. 0 2
      templates/base.html.twig
  4. 0 4
      templates/index/index.html.twig

+ 20 - 3
assets/styles/app.css

@@ -22,7 +22,7 @@
 }
 
 header {
-  height: 40vh;
+  height: 25vh;
   width: 100vw;
   background-image: url(../images/landscape.jpg);
   background-size: cover;
@@ -30,7 +30,7 @@ header {
 }
 
 .navbar {
-  position: absolute;
+  /* position: absolute; */
   padding: 50px;
   display: flex;
   justify-content: space-between;
@@ -44,7 +44,7 @@ header {
 }
 
 .navbar .logo {
-  font-size: 6em;
+  font-size: 4em;
   font-weight: bold;
 }
 
@@ -83,6 +83,7 @@ header {
 
   .navbar {
     padding: 0;
+    position: absolute;
   }
 
   .nav-links {
@@ -128,8 +129,24 @@ header {
     left: 30px;
     font-size: 2em;
   }
+
+  /* Body */
+ 
 }
 
 
 
 /* Body */
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%; /* S'assure que le main ne dépasse pas la largeur de l'écran */
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  padding: 10px;
+}
+
+img, .contenu-flex {
+  max-width: 100%;
+}

+ 33 - 30
templates/_menu.html.twig

@@ -1,30 +1,33 @@
-<nav class="navbar" data-controller="menuburger">
-    <a href="#" class="logo">Opinions sur le réel</a>
-    <div class="nav-links" data-menuburger-target="navlinks">
-        <ul>
-            <li><a href="{{ path('app_index') }}">Blog</a></li>
-            <li><a href="#">Contact</a></li>
-            {% if is_granted('ROLE_AUTHOR') %}
-            <li>
-                <a href="#">Administation</a>
-                <ul>
-                    <li><a href="{{ path('app_article_index') }}">Articles</a></li>
-                </ul>
-            </li>
-            {% endif %}
-            {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
-            <li>
-                <a href="#">{{ app.user }}</a>
-                <ul>
-                    <li><a href="{{ path('app_logout') }}">Se déconnecter</a></li>
-                </ul>
-            </li>
-            {% else %}
-            <li>
-                <a href="{{ path('app_login') }}">Se connecter</a>
-            </li>
-            {% endif %}
-        </ul>
-    </div>
-    <img src="{{ asset('images/menu-btn.png')}}" alt="Menu burger" class="menu-burger" data-action="click->menuburger#toggle">
-</nav>
+<header>
+    <nav class="navbar" data-controller="menuburger">
+        <a href="#" class="logo">Opinions sur le réel</a>
+        <div class="nav-links" data-menuburger-target="navlinks">
+            <ul>
+                <li><a href="{{ path('app_index') }}">Blog</a></li>
+                <li><a href="#">Contact</a></li>
+                {% if is_granted('ROLE_AUTHOR') %}
+                <li>
+                    <a href="#">Administation</a>
+                    <ul>
+                        <li><a href="{{ path('app_article_index') }}">Articles</a></li>
+                    </ul>
+                </li>
+                {% endif %}
+                {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
+                <li>
+                    <a href="#">{{ app.user }}</a>
+                    <ul>
+                        <li><a href="{{ path('app_logout') }}">Se déconnecter</a></li>
+                    </ul>
+                </li>
+                {% else %}
+                <li>
+                    <a href="{{ path('app_login') }}">Se connecter</a>
+                </li>
+                {% endif %}
+            </ul>
+        </div>
+        <img src="{{ asset('images/menu-btn.png')}}" alt="Menu burger" class="menu-burger" data-action="click->menuburger#toggle">
+    </nav>
+</header>
+

+ 0 - 2
templates/base.html.twig

@@ -14,8 +14,6 @@
     </head>
     <body>
         {{ include('_menu.html.twig')}}
-        <header>
-        </header>
         <main>    
             {% block body %}{% endblock %}
         </main>

+ 0 - 4
templates/index/index.html.twig

@@ -5,10 +5,6 @@
 {% block body %}
 
 <div>
-    <h1>Opinions sur le réel</h1>
-
-    Le blog de benj
-
     <h2>Derniers articles</h2>
     <section id="section-articles">
         {% for article in articles %}