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

design + fix liens html + camelCase class html + urlrewriting

parent 62a8ace2
...@@ -8,7 +8,6 @@ l3m_blog ...@@ -8,7 +8,6 @@ l3m_blog
id id
time time
title title
author
content content
comments (boolean) comments (boolean)
......
/* http://www.alsacreations.com/tuto/lire/1620-une-video-arriere-plan-sur-toute-la-page.html */ /* http://www.alsacreations.com/tuto/lire/1620-une-video-arriere-plan-sur-toute-la-page.html */
#video-fond { #videoFond {
overflow: hidden; overflow: hidden;
position: fixed; position: fixed;
top: 0; top: 0;
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
opacity: 0.6; opacity: 0.6;
z-index: -1; z-index: -1;
} }
#video-fond > video { #videoFond > video {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
...@@ -17,19 +17,19 @@ ...@@ -17,19 +17,19 @@
left: 0; left: 0;
} }
@media (min-aspect-ratio: 16/9) { @media (min-aspect-ratio: 16/9) {
#video-fond > video { #videoFond > video {
height: 300%; height: 300%;
top: -100%; top: -100%;
} }
} }
@media (max-aspect-ratio: 16/9) { @media (max-aspect-ratio: 16/9) {
#video-fond > video { #videoFond > video {
width: 300%; width: 300%;
left: -100%; left: -100%;
} }
} }
@supports (object-fit: cover) { @supports (object-fit: cover) {
#video-fond > video { #videoFond > video {
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0; top: 0;
...@@ -42,7 +42,7 @@ body{ ...@@ -42,7 +42,7 @@ body{
opacity: 0.75; opacity: 0.75;
} }
#video-fond{ #videoFond{
opacity: 1; opacity: 1;
} }
......
...@@ -27,7 +27,7 @@ CSS ...@@ -27,7 +27,7 @@ CSS
padding: 2px; padding: 2px;
} }
article p, #pageTitle,article h3{ article p, #pageTitle, article h3, article ul{
max-width: 1500px; max-width: 1500px;
margin: 30px auto; margin: 30px auto;
} }
...@@ -64,7 +64,7 @@ h3{ ...@@ -64,7 +64,7 @@ h3{
font-size: 1em; font-size: 1em;
} }
#list-menu{ #listMenu{
list-style-type: none; list-style-type: none;
font-size: 1.5em; font-size: 1.5em;
display: flex; display: flex;
...@@ -75,7 +75,7 @@ h3{ ...@@ -75,7 +75,7 @@ h3{
padding: 0; padding: 0;
} }
#list-menu a{ #listMenu a{
padding: 7px; padding: 7px;
margin: 10px; margin: 10px;
text-decoration: none; text-decoration: none;
...@@ -83,7 +83,7 @@ h3{ ...@@ -83,7 +83,7 @@ h3{
transition: color 0.2s, background-color 0.2s; transition: color 0.2s, background-color 0.2s;
} }
#list-menu a:hover{ #listMenu a:hover{
color: #47476b; color: #47476b;
background-color: #f0f0f0; background-color: #f0f0f0;
transition: color 0.2s, background-color 0.2s; transition: color 0.2s, background-color 0.2s;
...@@ -98,7 +98,7 @@ article{ ...@@ -98,7 +98,7 @@ article{
section{ section{
} }
#list-menu .selected{ #listMenu .selected{
padding-bottom: 2px; padding-bottom: 2px;
border-bottom: 5px solid #cccccc; border-bottom: 5px solid #cccccc;
} }
...@@ -132,7 +132,7 @@ Media Queries ...@@ -132,7 +132,7 @@ Media Queries
justify-content: space-around; justify-content: space-around;
} }
#list-menu{ #listMenu{
font-size: 1.2em; font-size: 1.2em;
} }
} }
...@@ -164,11 +164,11 @@ Media Queries ...@@ -164,11 +164,11 @@ Media Queries
@media all and (max-width: 700px){ @media all and (max-width: 700px){
#list-menu{ #listMenu{
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
} }
#list-menu a{ #listMenu a{
padding: 5px; padding: 5px;
} }
} }
...@@ -181,17 +181,17 @@ Media Queries ...@@ -181,17 +181,17 @@ Media Queries
width: 45px; width: 45px;
height: 45px; height: 45px;
} }
#list-menu li{ #listMenu li{
width: 90%; width: 90%;
margin: -5px auto; margin: -5px auto;
text-align: center; text-align: center;
} }
#list-menu a{ #listMenu a{
display: inline-block; display: inline-block;
width: 90%; width: 90%;
padding: 5px; padding: 5px;
} }
#list-menu .selected{ #listMenu .selected{
border: none; border: none;
background-color: #d9d9d9; background-color: #d9d9d9;
} }
......
...@@ -19,6 +19,9 @@ function getPageName(){ ...@@ -19,6 +19,9 @@ function getPageName(){
case '404': case '404':
return ["Erreur 404 - File not found", "404"]; return ["Erreur 404 - File not found", "404"];
break; break;
case 'article':
return [$_GET['title'], $_GET['title']];
break;
default: default:
return ["Blog", "blog"]; return ["Blog", "blog"];
break; break;
......
<?php <?php
function writeMenu($pageName){ function writeMenu($pageName){
?> ?>
<ul id="list-menu"> <ul id="listMenu">
<li><a href="/" title="Blog" <?php if($pageName == "Blog"){ ?>class="selected"<?php } ?>>Blog</a></li> <li><a href="/" title="Blog" <?php if($pageName == "Blog"){ ?>class="selected"<?php } ?>>Blog</a></li>
<li><a href="about" title="À propos" <?php if($pageName == "À Propos"){ ?>class="selected"<?php } ?>>À propos</a></li> <li><a href="/about" title="À propos" <?php if($pageName == "À Propos"){ ?>class="selected"<?php } ?>>À propos</a></li>
<li><a href="projects" title="Projets" <?php if($pageName == "Projets"){ ?>class="selected"<?php } ?>>Projets</a></li> <li><a href="/projects" title="Projets" <?php if($pageName == "Projets"){ ?>class="selected"<?php } ?>>Projets</a></li>
<li><a href="contact" title="Contact" <?php if($pageName == "Contact"){ ?>class="selected"<?php } ?>>Contact</a></li> <li><a href="/contact" title="Contact" <?php if($pageName == "Contact"){ ?>class="selected"<?php } ?>>Contact</a></li>
</ul> </ul>
<?php } <?php }
\ No newline at end of file
...@@ -5,16 +5,16 @@ ...@@ -5,16 +5,16 @@
<meta name="description" content="Site perso de Corentin Bettiol." /> <meta name="description" content="Site perso de Corentin Bettiol." />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<title>l3m website - <?php echo $pageName[0]; ?></title> <title>l3m website - <?php echo $pageName[0]; ?></title>
<link rel="stylesheet" href="css/design.css" /> <link rel="stylesheet" href="/css/design.css" />
<?php <?php
if($pageName[1] == 404){ ?> if($pageName[1] == 404){ ?>
<link rel="stylesheet" href="css/404.css" /> <link rel="stylesheet" href="/css/404.css" />
<?php } ?> <?php } ?>
<style> <style>
*{ *{
color: #1f1f2e; color: #1f1f2e;
} }
#list-menu a{ #listMenu a{
background-color: #e3e3e3; background-color: #e3e3e3;
} }
</style> </style>
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<header id="header"> <header id="header">
<header id="title"> <header id="title">
<a href="/" title="Accueil - blog"><!-- <a href="/" title="Accueil - blog"><!--
--><img src="img/logo.png" alt="logo_morse" id="logo" /><!-- --><img src="/img/logo.png" alt="Logo l3m website (morse pixel art)" id="logo" /><!--
--></a><!-- --></a><!--
--><h1 id="title">l3m website</h1> --><h1 id="title">l3m website</h1>
</header> </header>
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
</p> </p>
</article> </article>
<div id="video-fond"> <div id="videoFond">
<video autoplay loop> <video autoplay loop>
<source type="video/mp4" src="img/CloudsLoop.mp4" media="(orientation: landscape)"> <source type="video/mp4" src="img/CloudsLoop.mp4" media="(orientation: landscape)">
</video> </video>
......
<article> <article>
<h3><a href="/article/premier-article">Premier article</a></h3> <h3><a href="/article/premier-post-du-nouveau-blog">Premier post du nouveau blog</a></h3>
<p class="postInfos"> <p class="postInfos">
Le <time datetime="2018-09-20 14:32:49">Jeudi 20 septembre 2018 à 14h32</time> par Corentin Bettiol, pas de commentaire Le <time datetime="2018-09-20 14:32:49">Jeudi 20 septembre 2018 à 14h32</time> par Corentin Bettiol, pas de commentaire
</p> </p>
......
<article> <article>
<h3>23/10/18</h3> <h3>04/11/18</h3>
<ul>
<li>Changement des liens html (éviter de tout casser quand on descend dans l'arborescence)</li>
<li>Unification des noms de classe css (camelCase)</li>
<li>Design listes (notamment ici, dans le changelog)</li>
<li>Un peu d'urlrewriting en plus de ce qu'il y a déjà (voir fichier urlrewriting.txt)</li>
</ul>
</article>
<hr />
<article>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/ec56b1e9d9dfb2a1867c316a835423d7d119bf4c" title="commit ec56b1e9">26/10/18</a></h3>
<ul> <ul>
<li>Modif design pour écrans > 1500px</li> <li>Modif design pour écrans > 1500px</li>
...@@ -8,6 +21,8 @@ ...@@ -8,6 +21,8 @@
</ul> </ul>
</article> </article>
<hr />
<article> <article>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/26b343419dbe163e95f354283471a791f4545d59" title="commit 26b34341">22/10/18</a></h3> <h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/26b343419dbe163e95f354283471a791f4545d59" title="commit 26b34341">22/10/18</a></h3>
......
RewriteEngine On
RewriteRule /(about|changelog|blog|rss|projects|contact|login) /index.php?action=$1
RewriteRule /article/([a-zA-Z0-9\-]*)$ /index.php?action=article&title=$1
\ No newline at end of file
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