Commit bc7ded60 authored by Corentin Bettiol's avatar Corentin Bettiol 💻

change menu design, remove h2 from page & add it on menu

parent cb9aaa73
...@@ -24,7 +24,8 @@ CSS ...@@ -24,7 +24,8 @@ CSS
align-items: center; align-items: center;
font-family: ubuntumono; font-family: ubuntumono;
background-color: #f0f0f0; background-color: #f0f0f0;
padding: 2px; padding: 2px;
border-bottom: 5px solid #cccccc;
} }
article p, #pageTitle, article h3, article ul{ article p, #pageTitle, article h3, article ul{
...@@ -39,7 +40,7 @@ article p, #pageTitle, article h3, article ul{ ...@@ -39,7 +40,7 @@ article p, #pageTitle, article h3, article ul{
#logo{ #logo{
width: 45px; width: 45px;
height: 45px; height: 45px;
margin-right: 5px; margin-right: 15px;
} }
#title{ #title{
...@@ -50,16 +51,19 @@ article p, #pageTitle, article h3, article ul{ ...@@ -50,16 +51,19 @@ article p, #pageTitle, article h3, article ul{
text-shadow: 0 0 3px #6699ff; text-shadow: 0 0 3px #6699ff;
} }
#pageTitle{
font-family: ubuntumono;
font-weight: normal;
margin-left: 15px;
}
#menu{ #menu{
margin: auto; margin: auto;
} }
h2{
display: inline-block;
margin: 0;
padding: 0;
font-weight: normal;
font-size: 1.5em;
}
h3{ h3{
margin-top: 5px; margin-top: 5px;
font-size: 1em; font-size: 1em;
...@@ -67,7 +71,6 @@ h3{ ...@@ -67,7 +71,6 @@ h3{
#listMenu{ #listMenu{
list-style-type: none; list-style-type: none;
font-size: 1.5em;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-around;
...@@ -132,19 +135,12 @@ Media Queries ...@@ -132,19 +135,12 @@ Media Queries
#header{ #header{
justify-content: space-around; justify-content: space-around;
} }
#listMenu{
font-size: 1.2em;
}
} }
@media all and (max-width: 1075px){ @media all and (max-width: 1075px){
#title{ #logo{
margin-left: 2px; margin: 0;
} }
}
@media all and (max-width: 910px){
#page{ #page{
font-size: 1.2em; font-size: 1.2em;
} }
...@@ -163,18 +159,7 @@ Media Queries ...@@ -163,18 +159,7 @@ Media Queries
} }
} }
@media all and (max-width: 700px){ @media all and (max-width: 500px){
#listMenu{
flex-wrap: wrap;
justify-content: center;
}
#listMenu a{
padding: 5px;
}
}
@media all and (max-width: 450px){
#page{ #page{
font-size: 1em; font-size: 1em;
} }
...@@ -182,19 +167,30 @@ Media Queries ...@@ -182,19 +167,30 @@ Media Queries
width: 45px; width: 45px;
height: 45px; height: 45px;
} }
#title{
margin-bottom: 15px;
}
#listMenu{
width: 50%;
margin: auto;
flex-wrap: wrap;
justify-content: center;
}
#listMenu li, #listMenu h2, #listMenu a{
width: 100%;
}
#listMenu li{ #listMenu li{
width: 90%; margin: 5px auto;
margin: -5px auto;
text-align: center; text-align: center;
} }
#listMenu a{ #listMenu a{
display: inline-block; display: inline-block;
width: 90%; padding: 3px 0;
padding: 5px; margin: 0;
} }
#listMenu .selected{ #listMenu .selected{
border: none; border: none;
background-color: #d9d9d9; background-color: #cccccc;
} }
} }
......
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
function writeMenu($pageName){ function writeMenu($pageName){
?> ?>
<ul id="listMenu"> <ul id="listMenu">
<li><a href="/" title="Blog" <?php if($pageName == "Blog"){ ?>class="selected"<?php } ?>>Blog</a></li> <li><h2><a href="/" title="Blog" <?php if($pageName == "Blog"){ ?>class="selected"<?php } ?>>Blog</a></h2></li>
<li><a href="/about" title="À propos" <?php if($pageName == "À Propos"){ ?>class="selected"<?php } ?>>À propos</a></li> <li><h2><a href="/about" title="À propos" <?php if($pageName == "À Propos"){ ?>class="selected"<?php } ?>>À propos</a></h2></li>
<li><a href="/projects" title="Projets" <?php if($pageName == "Projets"){ ?>class="selected"<?php } ?>>Projets</a></li> <li><h2><a href="/projects" title="Projets" <?php if($pageName == "Projets"){ ?>class="selected"<?php } ?>>Projets</a></h2></li>
<li><a href="/contact" title="Contact" <?php if($pageName == "Contact"){ ?>class="selected"<?php } ?>>Contact</a></li> <li><h2><a href="/contact" title="Contact" <?php if($pageName == "Contact"){ ?>class="selected"<?php } ?>>Contact</a></h2></li>
</ul> </ul>
<?php } <?php }
\ No newline at end of file
...@@ -32,8 +32,6 @@ ...@@ -32,8 +32,6 @@
</nav> </nav>
</header> </header>
<h2 id="pageTitle"><?php echo $pageName[0]; ?></h2>
<?php require_once("site/view/". $pageName[1] .".php"); ?> <?php require_once("site/view/". $pageName[1] .".php"); ?>
<hr /> <hr />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment