Correction de bugs responsive

This commit is contained in:
Lyanis SOUIDI 2023-01-17 23:57:17 +01:00
parent abfed8d506
commit 1f2f6412d6
14 changed files with 76 additions and 49 deletions

View File

@ -21,7 +21,7 @@
<body> <body>
<header> <header>
<div> <div>
<a href="../"><img id="logo" src="../assets/img/logo_noir.png" height="60"></a> <a href="../"><img id="logo" src="../assets/img/logo_noir.png" height="60" alt="Elite Solar"></a>
<img id="burger-menu" alt="Menu" onclick="burgerMenu()" src="../assets/img/open-menu.svg"> <img id="burger-menu" alt="Menu" onclick="burgerMenu()" src="../assets/img/open-menu.svg">
<nav> <nav>
<ul id="menu" class="invisible"> <ul id="menu" class="invisible">
@ -37,7 +37,7 @@
<main> <main>
<nav class="crumbs"> <nav class="crumbs">
<ol> <ol>
<li class="crumb"><a href="../">Accueil</a></li> &gt; <li class="crumb"><a href="../">Accueil</a></li>
<li class="crumb">Qui sommes-nous ?</li> <li class="crumb">Qui sommes-nous ?</li>
</ol> </ol>
</nav> </nav>
@ -52,7 +52,7 @@
<p>Nous avons choisi ce type de logo car il est sobre et facile de compréhension, en effet il est assez simple pour que le publique puisse le reconnaitre facilement. Tout comme notre nom, il décrit très bien notre entreprise, en effet nous pouvons voir un soleil avec un éclair à l'intérieur, ce qui fait directement référence à notre source d'énergie, qui est le soleil, et la flèche autour du soleil fait référence à notre volonté de participer activement au développement durable.</p> <p>Nous avons choisi ce type de logo car il est sobre et facile de compréhension, en effet il est assez simple pour que le publique puisse le reconnaitre facilement. Tout comme notre nom, il décrit très bien notre entreprise, en effet nous pouvons voir un soleil avec un éclair à l'intérieur, ce qui fait directement référence à notre source d'énergie, qui est le soleil, et la flèche autour du soleil fait référence à notre volonté de participer activement au développement durable.</p>
</div> </div>
<div id="logo"><img src="../assets/img/logo_noir.png" alt="Logo"></div> <div id="logo2"><img src="../assets/img/logo_noir.png" alt="Logo"></div>
<div> <div>
<h2>Nos motivations</h2> <h2>Nos motivations</h2>

View File

@ -8,7 +8,7 @@
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
#logo{ #logo2 {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
@ -23,8 +23,18 @@
display: grid; display: grid;
} }
#logo{ #logo2 {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
} }
#logo2 {
filter: invert(100%);
}
@media (prefers-color-scheme: light) {
#logo2 {
filter: none;
}
}

View File

@ -30,3 +30,10 @@ footer div.social {
gap: 1rem; gap: 1rem;
align-items: center; align-items: center;
} }
@media (max-width: 700px) {
footer div.content {
flex-direction: column-reverse;
gap: 0.5rem;
}
}

View File

@ -15,7 +15,11 @@ header div {
header #logo { header #logo {
filter: invert(100%); filter: invert(100%);
float: left; }
#burger-menu {
transform: translateY(25%);
filter: invert(100%);
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
@ -60,12 +64,11 @@ header h1 {
border-radius: 4px; border-radius: 4px;
} }
#burger-menu { @media screen and (min-width: 700px) {
transform: translateY(25%); header #logo {
filter: invert(100%); float: left;
} }
@media screen and (min-width: 700px) {
#menu li a { #menu li a {
border-radius: 4px; border-radius: 4px;
} }

View File

@ -131,3 +131,7 @@ nav.crumbs {
.crumb { .crumb {
display: inline-block; display: inline-block;
} }
.crumb:before {
content: "> ";
}

View File

@ -74,6 +74,10 @@ img[alt="github"] {
#skill h2 { #skill h2 {
grid-column: 1/3; grid-column: 1/3;
} }
.crumbs {
display: none;
}
} }
#articles li { #articles li {

View File

@ -81,7 +81,7 @@ try {
<body> <body>
<header> <header>
<div> <div>
<a href="../"><img id="logo" src="../assets/img/logo_noir.png" height="60"></a> <a href="../"><img id="logo" src="../assets/img/logo_noir.png" height="60" alt="Elite Solar"></a>
<img id="burger-menu" alt="Menu" onclick="burgerMenu()" src="../assets/img/open-menu.svg"> <img id="burger-menu" alt="Menu" onclick="burgerMenu()" src="../assets/img/open-menu.svg">
<nav> <nav>
<ul id="menu" class="invisible"> <ul id="menu" class="invisible">
@ -99,7 +99,7 @@ try {
if ($error == "db") { if ($error == "db") {
echo '<nav class="crumbs"> echo '<nav class="crumbs">
<ol> <ol>
<li class="crumb"><a href="../">Accueil</a></li> &gt; <li class="crumb"><a href="../">Accueil</a></li>
<li class="crumb">Blog</li> <li class="crumb">Blog</li>
</ol> </ol>
</nav> </nav>
@ -107,7 +107,7 @@ if ($error == "db") {
} elseif ($error == "notfound") { } elseif ($error == "notfound") {
echo '<nav class="crumbs"> echo '<nav class="crumbs">
<ol> <ol>
<li class="crumb"><a href="../">Accueil</a></li> &gt; <li class="crumb"><a href="../">Accueil</a></li>
<li class="crumb"><a href="./">Blog</a></li> <li class="crumb"><a href="./">Blog</a></li>
<li class="crumb">Article</li> <li class="crumb">Article</li>
</ol> </ol>
@ -121,7 +121,7 @@ if ($error == "db") {
if ($mode == 'list') { if ($mode == 'list') {
echo '<nav class="crumbs"> echo '<nav class="crumbs">
<ol> <ol>
<li class="crumb"><a href="../">Accueil</a></li> &gt; <li class="crumb"><a href="../">Accueil</a></li>
<li class="crumb">Blog</li> <li class="crumb">Blog</li>
</ol> </ol>
</nav>' . </nav>' .
@ -133,19 +133,18 @@ if ($error == "db") {
Publié le ' . $date->format('d/m/Y') . ' par <a href="../team/' . $article["authorUrl"] . '">' . $article["author"] . '</a><br> Publié le ' . $date->format('d/m/Y') . ' par <a href="../team/' . $article["authorUrl"] . '">' . $article["author"] . '</a><br>
Extrait : ' . $article["excerpt"] . '</li>'; Extrait : ' . $article["excerpt"] . '</li>';
} }
echo '</ul>'; echo '</ul></div>';
} elseif ($mode == 'view') { } elseif ($mode == 'view') {
$date = new DateTime($article['created_at']); $date = new DateTime($article['created_at']);
echo '<nav class="crumbs"> echo '<nav class="crumbs">
<ol> <ol>
<li class="crumb"><a href="../">Accueil</a></li> &gt; <li class="crumb"><a href="../">Accueil</a></li>
<li class="crumb"><a href="./">Blog</a></li> &gt; <li class="crumb"><a href="./">Blog</a></li>
<li class="crumb">' . $article["title"] . '</li> <li class="crumb">' . $article["title"] . '</li>
</ol> </ol>
</nav>' . </nav>' .
"<h1>" . $article["title"] . "</h1><br> "<h1>" . $article["title"] . "</h1><br>
<p>Publié le " . $date->format('d/m/Y') . " par <a href='../team/" . $article["authorUrl"] . "'>" . $article["author"] . "</a></p><br> <p>Publié le " . $date->format('d/m/Y') . " par <a href='../team/" . $article["authorUrl"] . "'>" . $article["author"] . "</a></p><br>" . $article["content"];
<p>" . $article["content"] . "</p>";
} }
} }
?> ?>

View File

@ -49,7 +49,7 @@ function contact_form($profile, $subject) : string {
if ($profile == 'business') { if ($profile == 'business') {
$text .= '<input type="radio" name="type" value="business" hidden checked> $text .= '<input type="radio" name="type" value="business" hidden checked>
<div class="field""> <div class="field">
<label for="entreprise">Entreprise</label><br> <label for="entreprise">Entreprise</label><br>
<input type="text" id="entreprise" name="entreprise" placeholder="Nom de votre entreprise.." required><br> <input type="text" id="entreprise" name="entreprise" placeholder="Nom de votre entreprise.." required><br>
</div>'; </div>';
@ -79,7 +79,7 @@ function select_subject($profile) : string {
$text .= " <a href='" . contact_query(array("subject" => "")) . "'>la garantie Solar Glass</a></h2>"; $text .= " <a href='" . contact_query(array("subject" => "")) . "'>la garantie Solar Glass</a></h2>";
$text .= "<p>La <a href='https://www.service-public.fr/particuliers/vosdroits/F11094' target='_blank'>garantie légale de conformité</a> $text .= "<p>La <a href='https://www.service-public.fr/particuliers/vosdroits/F11094' target='_blank'>garantie légale de conformité</a>
est assuré par le fabricant intégrant la technologie Solar Glass dans ses appareils, en cas de problème concernant Solar Glass sur votre appareil, est assuré par le fabricant intégrant la technologie Solar Glass dans ses appareils, en cas de problème concernant Solar Glass sur votre appareil,
merci donc de <b>contacter directement le fabricant de votre appareil</b>.</p>"; merci donc de <b>contacter directement le fabricant de votre appareil</b>.</p></div>";
} elseif (isset($_GET["subject"]) && $_GET["subject"] == 'integration') { } elseif (isset($_GET["subject"]) && $_GET["subject"] == 'integration') {
$text .= " <a href='" . contact_query(array("subject" => "")) . "'>l'intégration de Solar Glass dans vos produits</a></h2>"; $text .= " <a href='" . contact_query(array("subject" => "")) . "'>l'intégration de Solar Glass dans vos produits</a></h2>";
$text .= contact_form($profile, $_GET["subject"]); $text .= contact_form($profile, $_GET["subject"]);
@ -107,8 +107,8 @@ function select_profile() : string {
$text .= " <a href='" . contact_query(array("profile" => "")) . "'>un particulier</a>"; $text .= " <a href='" . contact_query(array("profile" => "")) . "'>un particulier</a>";
$text .= select_subject('consumer'); $text .= select_subject('consumer');
} else $text .= "...</h2> } else $text .= "...</h2>
<a class='button' href=" . contact_query(array("profile" => "business")) . ">Une entreprise</a> <a class='button' href='" . contact_query(array("profile" => "business")) . "'>Une entreprise</a>
<a class='button' href=" . contact_query(array("profile" => "consumer")) . ">Un particulier</a></div>"; <a class='button' href='" . contact_query(array("profile" => "consumer")) . "'>Un particulier</a></div>";
return $text; return $text;
} }
@ -137,7 +137,7 @@ function select_profile() : string {
<body> <body>
<header> <header>
<div> <div>
<a href="../"><img id="logo" src="../assets/img/logo_noir.png" height="60"></a> <a href="../"><img id="logo" src="../assets/img/logo_noir.png" height="60" alt="Elite Solar"></a>
<img id="burger-menu" alt="Menu" onclick="burgerMenu()" src="../assets/img/open-menu.svg"> <img id="burger-menu" alt="Menu" onclick="burgerMenu()" src="../assets/img/open-menu.svg">
<nav> <nav>
<ul id="menu" class="invisible"> <ul id="menu" class="invisible">
@ -153,7 +153,7 @@ function select_profile() : string {
<main> <main>
<nav class="crumbs"> <nav class="crumbs">
<ol> <ol>
<li class="crumb"><a href="../">Accueil</a></li> &gt; <li class="crumb"><a href="../">Accueil</a></li>
<li class="crumb">Contact</li> <li class="crumb">Contact</li>
</ol> </ol>
</nav> </nav>

View File

@ -21,7 +21,7 @@
<body> <body>
<header> <header>
<div> <div>
<a href="../"><img id="logo" src="../assets/img/logo_noir.png" height="60"></a> <a href="../"><img id="logo" src="../assets/img/logo_noir.png" height="60" alt="Elite Solar"></a>
<img id="burger-menu" alt="Menu" onclick="burgerMenu()" src="../assets/img/open-menu.svg"> <img id="burger-menu" alt="Menu" onclick="burgerMenu()" src="../assets/img/open-menu.svg">
<nav> <nav>
<ul id="menu" class="invisible"> <ul id="menu" class="invisible">
@ -37,7 +37,7 @@
<main> <main>
<nav class="crumbs"> <nav class="crumbs">
<ol> <ol>
<li class="crumb"><a href="../">Accueil</a></li> &gt; <li class="crumb"><a href="../">Accueil</a></li>
<li class="crumb">FAQ</li> <li class="crumb">FAQ</li>
</ol> </ol>
</nav> </nav>
@ -51,7 +51,7 @@
<p>Nous travaillons avec Apple, Samsung, Huawei.</p> <p>Nous travaillons avec Apple, Samsung, Huawei.</p>
<h2>Quand est-ce que le produit est livré ?</h2> <h2>Quand est-ce que le produit est livré ?</h2>
<p>Cela vas dépendre de ce que veux le client et comment adapter la technolgie à l'écran.Nous vous invitons à nous <a href="../contact/index.php">contacter</a></p> <p>Cela vas dépendre de ce que veux le client et comment adapter la technolgie à l'écran.Nous vous invitons à nous <a href="../contact">contacter</a></p>
<h2>A qui est destiné votre produit ?</h2> <h2>A qui est destiné votre produit ?</h2>
<p>Notre produit est principalement destiné aux entrerpises créant des smartphones.</p> <p>Notre produit est principalement destiné aux entrerpises créant des smartphones.</p>

View File

@ -21,7 +21,7 @@
<body> <body>
<header> <header>
<div> <div>
<a href="./"><img id="logo" src="assets/img/logo_noir.png" height="60"></a> <a href="./"><img id="logo" src="assets/img/logo_noir.png" height="60" alt="Elite Solar"></a>
<img id="burger-menu" alt="Menu" onclick="burgerMenu()" src="assets/img/open-menu.svg"> <img id="burger-menu" alt="Menu" onclick="burgerMenu()" src="assets/img/open-menu.svg">
<nav> <nav>
<ul id="menu" class="invisible"> <ul id="menu" class="invisible">
@ -89,7 +89,7 @@
</div> </div>
<div class="home"> <div class="home">
<p>Nous sommes impatients de vous aider à profiter de notre technologie innovante et de vous offrir un service de qualité. N'hésitez pas à nous <a href="contact/index.php">contacter</a> pour en savoir plus sur notre produit et comment il peut vous aider.</p> <p>Nous sommes impatients de vous aider à profiter de notre technologie innovante et de vous offrir un service de qualité. N'hésitez pas à nous <a href="contact">contacter</a> pour en savoir plus sur notre produit et comment il peut vous aider.</p>
</div> </div>
</main> </main>
<button onclick="topFunction()" id="backToTop" title="Revenir au début de la page">⬆️</button> <button onclick="topFunction()" id="backToTop" title="Revenir au début de la page">⬆️</button>

View File

@ -20,7 +20,7 @@
<body> <body>
<header> <header>
<div> <div>
<a href="../"><img id="logo" src="../assets/img/logo_noir.png" height="60"></a> <a href="../"><img id="logo" src="../assets/img/logo_noir.png" height="60" alt="Elite Solar"></a>
<img id="burger-menu" alt="Menu" onclick="burgerMenu()" src="../assets/img/open-menu.svg"> <img id="burger-menu" alt="Menu" onclick="burgerMenu()" src="../assets/img/open-menu.svg">
<nav> <nav>
<ul id="menu" class="invisible"> <ul id="menu" class="invisible">
@ -36,7 +36,7 @@
<main> <main>
<nav class="crumbs"> <nav class="crumbs">
<ol> <ol>
<li class="crumb"><a href="../">Accueil</a></li> &gt; <li class="crumb"><a href="../">Accueil</a></li>
<li class="crumb">Mentions légales</li> <li class="crumb">Mentions légales</li>
</ol> </ol>
</nav> </nav>

View File

@ -21,7 +21,7 @@
<body> <body>
<header> <header>
<div> <div>
<a href="../"><img id="logo" src="../assets/img/logo_noir.png" height="60"></a> <a href="../"><img id="logo" src="../assets/img/logo_noir.png" height="60" alt="Elite Solar"></a>
<img id="burger-menu" alt="Menu" onclick="burgerMenu()" src="../assets/img/open-menu.svg"> <img id="burger-menu" alt="Menu" onclick="burgerMenu()" src="../assets/img/open-menu.svg">
<nav> <nav>
<ul id="menu" class="invisible"> <ul id="menu" class="invisible">
@ -37,7 +37,7 @@
<main> <main>
<nav class="crumbs"> <nav class="crumbs">
<ol> <ol>
<li class="crumb"><a href="../">Accueil</a></li> &gt; <li class="crumb"><a href="../">Accueil</a></li>
<li class="crumb">Produit</li> <li class="crumb">Produit</li>
</ol> </ol>
</nav> </nav>

View File

@ -20,7 +20,7 @@
<body> <body>
<header> <header>
<div> <div>
<a href="../"><img id="logo" src="../assets/img/logo_noir.png" height="60"></a> <a href="../"><img id="logo" src="../assets/img/logo_noir.png" height="60" alt="Elite Solar"></a>
<img id="burger-menu" alt="Menu" onclick="burgerMenu()" src="../assets/img/open-menu.svg"> <img id="burger-menu" alt="Menu" onclick="burgerMenu()" src="../assets/img/open-menu.svg">
<nav> <nav>
<ul id="menu" class="invisible"> <ul id="menu" class="invisible">
@ -36,7 +36,7 @@
<main> <main>
<nav class="crumbs"> <nav class="crumbs">
<ol> <ol>
<li class="crumb"><a href="../">Accueil</a></li> &gt; <li class="crumb"><a href="../">Accueil</a></li>
<li class="crumb">Mentions légales</li> <li class="crumb">Mentions légales</li>
</ol> </ol>
</nav> </nav>

View File

@ -132,7 +132,7 @@ try {
<body> <body>
<header> <header>
<div> <div>
<a href="../"><img id="logo" src="../assets/img/logo_noir.png" height="60"></a> <a href="../"><img id="logo" src="../assets/img/logo_noir.png" height="60" alt="Elite Solar"></a>
<img id="burger-menu" alt="Menu" onclick="burgerMenu()" src="../assets/img/open-menu.svg"> <img id="burger-menu" alt="Menu" onclick="burgerMenu()" src="../assets/img/open-menu.svg">
<nav> <nav>
<ul id="menu" class="invisible"> <ul id="menu" class="invisible">
@ -150,7 +150,7 @@ try {
if ($error == "db") { if ($error == "db") {
echo '<nav class="crumbs"> echo '<nav class="crumbs">
<ol> <ol>
<li class="crumb"><a href="../">Accueil</a></li> &gt; <li class="crumb"><a href="../">Accueil</a></li>
<li class="crumb">Équipe</li> <li class="crumb">Équipe</li>
</ol> </ol>
</nav> </nav>
@ -158,7 +158,7 @@ try {
} elseif ($error == "notfound") { } elseif ($error == "notfound") {
echo '<nav class="crumbs"> echo '<nav class="crumbs">
<ol> <ol>
<li class="crumb"><a href="../">Accueil</a></li> &gt; <li class="crumb"><a href="../">Accueil</a></li>
<li class="crumb"><a href="./">Équipe</a></li> <li class="crumb"><a href="./">Équipe</a></li>
<li class="crumb">Employé</li> <li class="crumb">Employé</li>
</ol> </ol>
@ -172,7 +172,7 @@ try {
if ($mode == 'list') { if ($mode == 'list') {
echo '<nav class="crumbs"> echo '<nav class="crumbs">
<ol> <ol>
<li class="crumb"><a href="../">Accueil</a></li> &gt; <li class="crumb"><a href="../">Accueil</a></li>
<li class="crumb">Équipe</li> <li class="crumb">Équipe</li>
</ol> </ol>
</nav>' . </nav>' .
@ -188,8 +188,8 @@ try {
} elseif ($mode == 'view') { } elseif ($mode == 'view') {
echo '<nav class="crumbs"> echo '<nav class="crumbs">
<ol> <ol>
<li class="crumb"><a href="../">Accueil</a></li> &gt; <li class="crumb"><a href="../">Accueil</a></li>
<li class="crumb"><a href="./">Équipe</a></li> &gt; <li class="crumb"><a href="./">Équipe</a></li>
<li class="crumb">' . $employee["name"] . '</li> <li class="crumb">' . $employee["name"] . '</li>
</ol> </ol>
</nav>' . </nav>' .
@ -222,9 +222,9 @@ try {
} elseif ($mode == "cv") { } elseif ($mode == "cv") {
echo '<nav class="crumbs"> echo '<nav class="crumbs">
<ol> <ol>
<li class="crumb"><a href="../">Accueil</a></li> &gt; <li class="crumb"><a href="../">Accueil</a></li>
<li class="crumb"><a href="./">Équipe</a></li> &gt; <li class="crumb"><a href="./">Équipe</a></li>
<li class="crumb"><a href="./' . end($url) . '">' . $employee["name"] . '</a></li> &gt; <li class="crumb"><a href="./' . end($url) . '">' . $employee["name"] . '</a></li>
<li class="crumb">CV</li> <li class="crumb">CV</li>
</ol> </ol>
</nav>' . </nav>' .
@ -287,9 +287,9 @@ try {
} elseif ($mode == 'articles') { } elseif ($mode == 'articles') {
echo '<nav class="crumbs"> echo '<nav class="crumbs">
<ol> <ol>
<li class="crumb"><a href="../">Accueil</a></li> &gt; <li class="crumb"><a href="../">Accueil</a></li>
<li class="crumb"><a href="./">Équipe</a></li> &gt; <li class="crumb"><a href="./">Équipe</a></li>
<li class="crumb"><a href="./' . end($url) . '">' . $employee["name"] . '</a></li> &gt; <li class="crumb"><a href="./' . end($url) . '">' . $employee["name"] . '</a></li>
<li class="crumb">Articles</li> <li class="crumb">Articles</li>
</ol> </ol>
</nav>' . </nav>' .