Merge pull request #111 from ThomasRubini/css_has_workaround

removed :has() css attributes to use classes

Views/category/view.php

@@ -9,7 +9,7 @@ $allCategory = array(
 );
 ?>
 
-<main>
+<main class="hasAside">
     <?= View::show("common/category_list"); ?>
     <article>
         <?php

Views/common/category_list.php

@@ -10,7 +10,7 @@ $allCategory = array(
 
 <aside>
     <ul>
-        <li><h3>Catégories :</h3></li>
+        <li class="hasH3"><h3>Catégories :</h3></li>
         <?php
         foreach($allCategory as $category => $category_path) {
             echo '<li><a href="/category#' . $category_path . '">'. $category . '</a></li>';

Views/home/view.php

@@ -1,7 +1,7 @@
 <img src="static/img/bandeau.jpg" alt="Cook">
 
 
-<main>
+<main class="hasAside">
     <?php View::show("common/category_list") ?>
     <article>
         <section>

Views/recipe/search.php

@@ -4,7 +4,7 @@
 ?>
 
 
-<main>
+<main class="hasAside">
     <?php View::show("common/category_list") ?>
     <article>
         <!-- Inclure les catégories -->

Views/recipe/view.php

@@ -1,7 +1,7 @@
 <?php
 $O_recipe = $A_view["RECIPE"];
 ?>
-<main>
+<main class="hasAside>
     <?php View::show("common/category_list") ?>
     <article>
         <img src="<?= $O_recipe->getImgLink() ?>" alt="Image d'illustration de la recette">

Views/user/login.php

@@ -1,6 +1,6 @@
 <?php
     if (isset($A_view["errmsg"])){
-        echo "<p> Error: {$A_view["errmsg"]} </p>";
+        echo "<p class=\"inMainRegisterPage\"> Error: {$A_view["errmsg"]} </p>";
     }
 ?>
 <main class="registerPage">

static/style.css

@@ -114,7 +114,7 @@ body > header > nav > ul > li:last-child > a > img {
     height: calc(var(--size-max) - var(--size-xl));
 }
 
-main:has(aside) {
+main.hasAside {
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -140,7 +140,7 @@ aside ul {
     flex-direction: column;
     gap: var(--size-s);
 }
-aside li:has(h3)::marker{
+aside li.hasH3::marker{
     content: none;
 }
 aside li h3 {
@@ -206,7 +206,7 @@ main.registerPage {
     gap: var(--size-xl);
 }
 
-body:has(main.registerPage) > p {
+p.inMainRegisterPage {
     display: flex;
     justify-content: center;
     font-size: var(--size-xl);