Revue du design

assets/app.js

@@ -6,7 +6,7 @@ import './bootstrap.js';
  * which should already be in your base.html.twig.
  */
 
-
+import './styles/liens.css';
 import './styles/buttons.css';
 import './styles/app.css';
 import './styles/forms.css';

assets/styles/app.css

@@ -94,11 +94,31 @@ main {
   box-sizing: border-box;
   margin: 0 auto;
   max-width: 900px;
-  background-color: white;
+  background-color: rgb(255, 255, 255);
+  color: #37474F;
   padding: 0 30px;
   border-radius: 15px;
   min-height: 70vh;
   transition: all 0.2s ease;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  line-height: 1.54;
+  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;
+}
+
+main p {
+  font-size: 1.2em;
+}
+
+hr {
+  width: 40%; /* Ajustez la largeur selon vos préférences */
+  margin-bottom: 15px;
+  margin-top: 30px;
+  margin-left: auto; 
+  margin-right: auto;
+  border: none; /* Enlève les bordures par défaut */
+  height: 2px; /* Épaisseur de la ligne */
+  background-color: #868686; /* Couleur de la ligne */
 }
 
 img, .contenu-flex {
@@ -139,18 +159,18 @@ img, .contenu-flex {
   background: linear-gradient(to bottom, transparent, white);
 }
 
-main h2 {
-  font-size: 2.5em;
-  color: rgb(34, 34, 34);
+main h1 {
+  font-size: 2.0em;
+  color: #263238;
 }
 
-main h2 a {
-  color: rgb(34, 34, 34);
+main h1 a {
+  color: rgb(24, 25, 31);
   text-decoration: no;
 }
 
-main h2 a:hover {
-  color: rgb(20,20,20);
+main h1 a:hover {
+  color: rgb(22, 21, 36);
 }
 
 .article-by {

assets/styles/buttons.css

@@ -13,6 +13,24 @@
     cursor: pointer;
     transition: background-color 0.3s ease-in-out;
   }
+
+  .btn::after {
+    content: ''; /* Pas de contenu textuel */
+    position: absolute;
+    left: 0;
+    bottom: 0px; /* Légèrement sous le texte */
+    width: 0;
+    height: 0px;
+    background-color: #ffffff; /* Couleur de la ligne */
+  }
+
+  .btn:hover {
+    color: white;
+  }
+
+  .btn:active {
+    color: white;
+  }
   
   /* Bouton vert (succès) */
   .btn-green {

assets/styles/liens.css

@@ -0,0 +1,46 @@
+main a {
+    color: #3498db; /* Couleur de base */
+    text-decoration: none; /* Enlève le soulignement */
+    font-weight: 500;
+    position: relative; /* Pour positionner le pseudo-élément */
+    transition: color 0.3s ease; /* Transition pour changement de couleur */
+}
+
+main a::after {
+    content: ''; /* Pas de contenu textuel */
+    position: absolute;
+    left: 0;
+    bottom: -2px; /* Légèrement sous le texte */
+    width: 0;
+    height: 2px;
+    background-color: #3498db; /* Couleur de la ligne */
+    transition: width 0.3s ease; /* Animation de l'effet sous le texte */
+}
+
+main a:hover {
+    color: #2980b9; /* Couleur lors du survol */
+}
+
+main a:hover::after {
+    width: 100%; /* Ligne apparaît sous le texte */
+}
+
+main a:active {
+    color: #1c6a9e; /* Couleur lors du clic */
+    transition: color 0.1s ease; /* Raccourcit la transition */
+}
+
+main a:focus {
+    outline: none;
+    box-shadow: 0 0 3px rgba(52, 152, 219, 0.5); /* Petit halo bleu clair */
+}
+
+main h1 a::after {
+    content: ''; /* Pas de contenu textuel */
+    position: absolute;
+    left: 0;
+    bottom: 0px; /* Légèrement sous le texte */
+    width: 0;
+    height: 0px;
+    background-color: #ffffff; /* Couleur de la ligne */
+}

templates/view/index.html.twig

@@ -3,11 +3,11 @@
 {% block title %}{{article.title}}{% endblock %}
 
 {% block body %}
-
+<a href="{{ path('app_index')}}">Retour au blog</a>
 <div>
     <article class="article">
         <header>
-            <h2>{{ article.title}}<span class="article-by">{{ article.publicationDate | date('d-m-Y')}} {{ article.author }}</span></h2>
+            <h1>{{ article.title}}<span class="article-by">{{ article.publicationDate | date('d-m-Y')}} {{ article.author }}</span></h1>
         </header>
         <section class="contenu">
                 {{ article.content | markdown }}