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
id
time
title
author
content
comments (boolean)
......
/* http://www.alsacreations.com/tuto/lire/1620-une-video-arriere-plan-sur-toute-la-page.html */
#video-fond {
#videoFond {
overflow: hidden;
position: fixed;
top: 0;
......@@ -9,7 +9,7 @@
opacity: 0.6;
z-index: -1;
}
#video-fond > video {
#videoFond > video {
width: 100%;
height: 100%;
position: absolute;
......@@ -17,19 +17,19 @@
left: 0;
}
@media (min-aspect-ratio: 16/9) {
#video-fond > video {
#videoFond > video {
height: 300%;
top: -100%;
}
}
@media (max-aspect-ratio: 16/9) {
#video-fond > video {
#videoFond > video {
width: 300%;
left: -100%;
}
}
@supports (object-fit: cover) {
#video-fond > video {
#videoFond > video {
width: 100%;
height: 100%;
top: 0;
......@@ -42,7 +42,7 @@ body{
opacity: 0.75;
}
#video-fond{
#videoFond{
opacity: 1;
}
......
......@@ -27,7 +27,7 @@ CSS
padding: 2px;
}
article p, #pageTitle,article h3{
article p, #pageTitle, article h3, article ul{
max-width: 1500px;
margin: 30px auto;
}
......@@ -64,7 +64,7 @@ h3{
font-size: 1em;
}
#list-menu{
#listMenu{
list-style-type: none;
font-size: 1.5em;
display: flex;
......@@ -75,7 +75,7 @@ h3{
padding: 0;
}
#list-menu a{
#listMenu a{
padding: 7px;
margin: 10px;
text-decoration: none;
......@@ -83,7 +83,7 @@ h3{
transition: color 0.2s, background-color 0.2s;
}
#list-menu a:hover{
#listMenu a:hover{
color: #47476b;
background-color: #f0f0f0;
transition: color 0.2s, background-color 0.2s;
......@@ -98,7 +98,7 @@ article{
section{
}
#list-menu .selected{
#listMenu .selected{
padding-bottom: 2px;
border-bottom: 5px solid #cccccc;
}
......@@ -132,7 +132,7 @@ Media Queries
justify-content: space-around;
}
#list-menu{
#listMenu{
font-size: 1.2em;
}
}
......@@ -164,11 +164,11 @@ Media Queries
@media all and (max-width: 700px){
#list-menu{
#listMenu{
flex-wrap: wrap;
justify-content: center;
}
#list-menu a{
#listMenu a{
padding: 5px;
}
}
......@@ -181,17 +181,17 @@ Media Queries
width: 45px;
height: 45px;
}
#list-menu li{
#listMenu li{
width: 90%;
margin: -5px auto;
text-align: center;
}
#list-menu a{
#listMenu a{
display: inline-block;
width: 90%;
padding: 5px;
}
#list-menu .selected{
#listMenu .selected{
border: none;
background-color: #d9d9d9;
}
......
......@@ -19,6 +19,9 @@ function getPageName(){
case '404':
return ["Erreur 404 - File not found", "404"];
break;
case 'article':
return [$_GET['title'], $_GET['title']];
break;
default:
return ["Blog", "blog"];
break;
......
<?php
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="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="contact" title="Contact" <?php if($pageName == "Contact"){ ?>class="selected"<?php } ?>>Contact</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="/contact" title="Contact" <?php if($pageName == "Contact"){ ?>class="selected"<?php } ?>>Contact</a></li>
</ul>
<?php }
\ No newline at end of file
......@@ -5,16 +5,16 @@
<meta name="description" content="Site perso de Corentin Bettiol." />
<meta name="viewport" content="width=device-width" />
<title>l3m website - <?php echo $pageName[0]; ?></title>
<link rel="stylesheet" href="css/design.css" />
<link rel="stylesheet" href="/css/design.css" />
<?php
if($pageName[1] == 404){ ?>
<link rel="stylesheet" href="css/404.css" />
<link rel="stylesheet" href="/css/404.css" />
<?php } ?>
<style>
*{
color: #1f1f2e;
}
#list-menu a{
#listMenu a{
background-color: #e3e3e3;
}
</style>
......@@ -23,7 +23,7 @@
<header id="header">
<header id="title">
<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><!--
--><h1 id="title">l3m website</h1>
</header>
......
......@@ -4,7 +4,7 @@
</p>
</article>
<div id="video-fond">
<div id="videoFond">
<video autoplay loop>
<source type="video/mp4" src="img/CloudsLoop.mp4" media="(orientation: landscape)">
</video>
......
<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">
Le <time datetime="2018-09-20 14:32:49">Jeudi 20 septembre 2018 à 14h32</time> par Corentin Bettiol, pas de commentaire
</p>
......
<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>
<li>Modif design pour écrans > 1500px</li>
......@@ -8,6 +21,8 @@
</ul>
</article>
<hr />
<article>
<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