Browse Source

créer le répertoire

main
Rémi Borfigat 9 months ago
commit
2ea2f958f1
  1. 9
      LICENCE.txt
  2. 20
      README.md
  3. 58
      blog/articles/article.html
  4. 38
      blog/flux.atom
  5. 47
      blog/index.html
  6. 0
      favicon.png
  7. 0
      images/profil-150w.jpg
  8. 0
      images/profil-150w.webp
  9. 0
      images/profil-200w.jpg
  10. 0
      images/profil-200w.webp
  11. 49
      index.html
  12. 61
      pages/droit-d’auteur.html
  13. 50
      pages/mentions-légales.html
  14. 51
      pages/politique-de-confidentialité.html
  15. 53
      pages/à-propos.html
  16. 135
      styles/styles.css

9
LICENCE.txt

@ -0,0 +1,9 @@
MIT License
Copyright (c) 2021 Rémi Borfigat
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice (including the next paragraph) shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

20
README.md

@ -0,0 +1,20 @@
# Code source du site de Rémi Borfigat
On trouvera les fichiers sources du site (HTML, CSS et Atom) sous forme de gabarit. Les fichiers de contenu tels que les images ou la favicon sont vides pour garder intact la structure.
Le paquet Fork Awesome n’est pas inclus. Il n’est pas obligatoire si vous souhaitez utiliser un CDN plutôt que de l’héberger directement. Consulter les [instructions sur leur site](https://forkaweso.me/Fork-Awesome/get-started/).
## Comment utiliser ce gabarit pour votre site ?
1. Cloner le répertoire sur votre machine avec git :
git clone git.borfigat.org
2. Dans le cas où vous souhaitez héberger les fichiers de Fork Awesome, il faut télécharger le paquet `fork-awesome` depuis [leur site](https://forkaweso.me/Fork-Awesome/) et placer son contenu dans `styles/`.
3. Modifier le gabarit pour l’adapter à votre contenu.
4. Poussez l’ensemble de votre répertoire sur la machine de votre hébergeur.
## Licence
Consulter le fichier LICENCE.txt de ce répertoire.

58
blog/articles/article.html

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="utf-8">
<title>Titre de l’article</title>
<meta name="author" content="Nom de l’auteur">
<meta name="description" content="Description de l’article.">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="license" href="lien/vers/la/licence">
<link rel="alternate" type="application/atom+xml" title="Flux Atom des articles du blog" href="/blog/flux.atom">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon.png">
<link rel="stylesheet" href="../../styles/styles.css">
<link rel="stylesheet" href="../../styles/fork-awesome/css/fork-awesome.min.css">
</head>
<body>
<header id="nav-header">
<nav>
<a class="nav-link" href="/index.html"><span class="fa fa-home fa-fw" aria-hidden="true"></span>Accueil</a>
<a class="nav-link" href="/blog/index.html"><span class="fa fa-newspaper-o fa-w" aria-hidden="true"></span>Blog</a>
<a class="nav-link" href="/blog/flux.atom"><span class="fa fa-rss fa-w"></span>Syndication</a>
<a class="nav-link" href="/pages/à-propos.html"><span class="fa fa-user-circle-o fa-fw" aria-hidden="true"></span>À propos</a>
</nav>
</header>
<main>
<article>
<header>
<h1>Titre de l’article</h1>
<p id="published">Publié le <time datetime="AAAA-MM-JJ">JJ mois AAAA</time></p>
</header>
<p>Texte d’introduction.</p>
<h2>Titre de deuxième niveau</h2>
<p>Contenu du paragraphe.</p>
</article>
<aside>
<h2>Sitographie</h2>
<ul>
<li>Premier lien</li>
<li>Deuxième lien</li>
</ul>
</aside>
</main>
<footer>
<a class="nav-link" href="/pages/droit-d’auteur.html">Droit d’auteur</a> · <a class="nav-link" href="/pages/mentions-légales.html">Mentions légales</a> · <a class="nav-link" href="/pages/politique-de-confidentialité.html">Politique de confidentialité</a>
</footer>
</body>
</html>

38
blog/flux.atom

@ -0,0 +1,38 @@
<?xml version="1.0" encoding="utf-8"?>
<feed xml:lang="fr-FR" xmlns="http://www.w3.org/2005/Atom">
<title>Titre du site</title>
<id>tag:nomdedomaine,AAAA-MM-JJ:blog/</id>
<updated>AAAA-MM-DDTHH:MM:SSZ</updated>
<author>
<name>Nom de l’auteur</name>
<email>Adresse électronique de l’auteur</email>
</author>
<link rel="alternate" type="text/html" href="/blog/index.html"/>
<link rel="self" type="application/atom+xml" href="url/complet/vers/flux.atom"/>
<icon>/favicon.png</icon>
<rights type="xhtml">
<div xmlns="http://www.w3.org/1999/xhtml">Notice de la licence du site.</div>
</rights>
<entry>
<title>Titre de l’article</title>
<id>tag:nomdedomaine,AAAA-MM-JJ:blog/uri/de/l’article</id>
<updated>AAAA-MM-DDTHH:MM:SSZ</updated>
<link rel="alternate" type="text/html" href="url/complet/vers/article.html"/>
<summary>Résumé de l’article</summary>
<published>AAAA-MM-DDTHH:MM:SSZ</published>
</entry>
<entry>
<title>Titre du deuxième article</title>
<id>tag:nomdedomaine,AAAA-MM-JJ:blog/uri/de/l’article</id>
<updated>AAAA-MM-DDTHH:MM:SSZ</updated>
<link rel="alternate" type="text/html" href="url/complet/vers/article.html"/>
<summary>Résumé de l’article</summary>
<published>AAAA-MM-DDTHH:MM:SSZ</published>
</entry>
</feed>

47
blog/index.html

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="utf-8">
<title>Index du blog</title>
<meta name="author" content="Nom de l’auteur">
<meta name="description" content="Index des articles du blog.">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="license" href="lien/vers/la/licence">
<link rel="alternate" type="application/atom+xml" title="Flux Atom des articles du blog" href="/blog/flux.atom">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon.png">
<link rel="stylesheet" href="../styles/styles.css">
<link rel="stylesheet" href="../styles/fork-awesome/css/fork-awesome.min.css">
</head>
<body>
<header id="nav-header">
<nav>
<a class="nav-link" href="/index.html"><span class="fa fa-home fa-fw" aria-hidden="true"></span>Accueil</a>
<a class="nav-link" href="/blog/index.html"><span class="fa fa-newspaper-o fa-w" aria-hidden="true"></span>Blog</a>
<a class="nav-link" href="/blog/flux.atom"><span class="fa fa-rss fa-w"></span>Syndication</a>
<a class="nav-link" href="/pages/à-propos.html"><span class="fa fa-user-circle-o fa-fw" aria-hidden="true"></span>À propos</a>
</nav>
</header>
<main>
<h1>Index du blog</h1>
<p>Texte d’introduction.</p>
<nav>
<h2>Liste des articles</h2>
<ul>
<li><time datetime="YYYY-MM-JJ">JJ/MM/AAAA</time>&nbsp;<a href="lien/vers/article.html">Titre de l’article</a></li>
</ul>
</nav>
</main>
<footer>
<a class="nav-link" href="/pages/droit-d’auteur.html">Droit d’auteur</a> · <a class="nav-link" href="/pages/mentions-légales.html">Mentions légales</a> · <a class="nav-link" href="/pages/politique-de-confidentialité.html">Politique de confidentialité</a>
</footer>
</body>
</html>

0
favicon.png

0
images/profil-150w.jpg

0
images/profil-150w.webp

0
images/profil-200w.jpg

0
images/profil-200w.webp

49
index.html

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="utf-8">
<title>Tite du site</title>
<meta name="author" content="Nom de l’auteur">
<meta name="description" content="Courte description de la page.">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="license" href="lien/vers/licence">
<link rel="alternate" type="application/atom+xml" title="Flux Atom des articles du blog" href="/blog/flux.atom">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon.png">
<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/fork-awesome/css/fork-awesome.min.css">
</head>
<body>
<header id="nav-header">
<nav>
<a class="nav-link" href="/index.html"><span class="fa fa-home fa-fw" aria-hidden="true"></span>Accueil</a>
<a class="nav-link" href="/blog/index.html"><span class="fa fa-newspaper-o fa-w" aria-hidden="true"></span>Blog</a>
<a class="nav-link" href="/blog/flux.atom"><span class="fa fa-rss fa-w"></span>Syndication</a>
<a class="nav-link" href="/pages/à-propos.html"><span class="fa fa-user-circle-o fa-fw" aria-hidden="true"></span>À propos</a>
</nav>
</header>
<main>
<h1>Nom du site Web</h1>
<p>Texte d’introduction.</p>
<section>
<h2>Articles les plus récents</h2>
<ul>
<li><a href="lien/vers/article">Titre de l’article</a></li>
</ul>
<p><a href="blog/index.html">Consulter la liste de tous les articles</a> du blog.</p>
</section>
</main>
<footer>
<a class="nav-link" href="/pages/droit-d’auteur.html">Droit d’auteur</a> · <a class="nav-link" href="/pages/mentions-légales.html">Mentions légales</a> · <a class="nav-link" href="/pages/politique-de-confidentialité.html">Politique de confidentialité</a>
</footer>
</body>
</html>

61
pages/droit-d’auteur.html

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="utf-8">
<title>Droit d’auteur</title>
<meta name="author" content="Nom de l’auteur">
<meta name="description" content="Prendre connaissance des droits d’auteur s’appliquant au site.">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="license" href="lien/vers/la/licence">
<link rel="alternate" type="application/atom+xml" title="Flux Atom des articles du blog" href="/blog/flux.atom">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon.png">
<link rel="stylesheet" href="../styles/styles.css">
<link rel="stylesheet" href="../styles/fork-awesome/css/fork-awesome.min.css">
</head>
<body>
<header id="nav-header">
<nav>
<a class="nav-link" href="/index.html"><span class="fa fa-home fa-fw" aria-hidden="true"></span>Accueil</a>
<a class="nav-link" href="/blog/index.html"><span class="fa fa-newspaper-o fa-w" aria-hidden="true"></span>Blog</a>
<a class="nav-link" href="/blog/flux.atom"><span class="fa fa-rss fa-w"></span>Syndication</a>
<a class="nav-link" href="/pages/à-propos.html"><span class="fa fa-user-circle-o fa-fw" aria-hidden="true"></span>À propos</a>
</nav>
</header>
<main>
<h1>Droit d’auteur</h1>
<section>
<h2>Code informatique</h2>
<p>Texte.</p>
</section>
<section>
<h2>Images</h2>
<p>Texte.</p>
</section>
<section>
<h2>Police de caractères</h2>
<p>Texte.</p>
</section>
<section>
<h2>Textes</h2>
<p>Texte.</p>
</section>
</main>
<footer>
Droit d’auteur · <a class="nav-link" href="/pages/mentions-légales.html">Mentions légales</a> · <a class="nav-link" href="/pages/politique-de-confidentialité.html">Politique de confidentialité</a>
</footer>
</body>
</html>

50
pages/mentions-légales.html

@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="utf-8">
<title>Mentions légales</title>
<meta name="author" content="Nom de l’auteur">
<meta name="description" content="Consulter les mentions légales du site.">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="license" href="lien/vers/la/licence">
<link rel="alternate" type="application/atom+xml" title="Flux Atom des articles du blog" href="/blog/flux.atom">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon.png">
<link rel="stylesheet" href="../styles/styles.css">
<link rel="stylesheet" href="../styles/fork-awesome/css/fork-awesome.min.css">
</head>
<body>
<header id="nav-header">
<nav>
<a class="nav-link" href="/index.html"><span class="fa fa-home fa-fw" aria-hidden="true"></span>Accueil</a>
<a class="nav-link" href="/blog/index.html"><span class="fa fa-newspaper-o fa-w" aria-hidden="true"></span>Blog</a>
<a class="nav-link" href="/blog/flux.atom"><span class="fa fa-rss fa-w"></span>Syndication</a>
<a class="nav-link" href="/pages/à-propos.html"><span class="fa fa-user-circle-o fa-fw" aria-hidden="true"></span>À propos</a>
</nav>
</header>
<main>
<h1>Mentions légales</h1>
<p>Texte des mentions légales.</p>
<section>
<h2>Hébergeur</h2>
<address>
<p>Adresse<br>
de l’hébergeur</p>
<p>Tél. <a href="tel:XXXXXXXX">XX&#8239;XX&#8239;XX&#8239;XX&#8239;XX</a></p>
</address>
</section>
</main>
<footer>
<a class="nav-link" href="/pages/droit-d’auteur.html">Droit d’auteur</a> · Mentions légales · <a class="nav-link" href="/pages/politique-de-confidentialité.html">Politique de confidentialité</a>
</footer>
</body>
</html>

51
pages/politique-de-confidentialité.html

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="utf-8">
<title>Politique de confidentialité</title>
<meta name="author" content="Nom de l’auteur">
<meta name="description" content="Consulter la politique de confidentialité du site.">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="license" href="lien/vers/la/licence">
<link rel="alternate" type="application/atom+xml" title="Flux Atom des articles du blog" href="/blog/flux.atom">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon.png">
<link rel="stylesheet" href="../styles/styles.css">
<link rel="stylesheet" href="../styles/fork-awesome/css/fork-awesome.min.css">
</head>
<body>
<header id="nav-header">
<nav>
<a class="nav-link" href="/index.html"><span class="fa fa-home fa-fw" aria-hidden="true"></span>Accueil</a>
<a class="nav-link" href="/blog/index.html"><span class="fa fa-newspaper-o fa-w" aria-hidden="true"></span>Blog</a>
<a class="nav-link" href="/blog/flux.atom"><span class="fa fa-rss fa-w"></span>Syndication</a>
<a class="nav-link" href="/pages/à-propos.html"><span class="fa fa-user-circle-o fa-fw" aria-hidden="true"></span>À propos</a>
</nav>
</header>
<main>
<h1>Politique de confidentialité</h1>
<p>Texte d’introduction.</p>
<section>
<h2>Titre de la première section</h2>
<p>Texte.</p>
</section>
<section>
<h2>Titre de la deuxième section</h2>
<p>Texte.</p>
</section>
</main>
<footer>
<a class="nav-link" href="/pages/droit-d’auteur.html">Droit d’auteur</a> · <a class="nav-link" href="/pages/mentions-légales.html">Mentions légales</a> · Politique de confidentialité
</footer>
</body>
</html>

53
pages/à-propos.html

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="utf-8">
<title>À propos</title>
<meta name="author" content="Nom de l’auteur">
<meta name="description" content="En apprendre plus sur Nom de l’auteur.">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="license" href="lien/vers/la/licence">
<link rel="alternate" type="application/atom+xml" title="Flux Atom des articles du blog" href="/blog/flux.atom">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon.png">
<link rel="stylesheet" href="../styles/styles.css">
<link rel="stylesheet" href="../styles/fork-awesome/css/fork-awesome.min.css">
</head>
<body>
<header id="nav-header">
<nav>
<a class="nav-link" href="/index.html"><span class="fa fa-home fa-fw" aria-hidden="true"></span>Accueil</a>
<a class="nav-link" href="/blog/index.html"><span class="fa fa-newspaper-o fa-w" aria-hidden="true"></span>Blog</a>
<a class="nav-link" href="/blog/flux.atom"><span class="fa fa-rss fa-w"></span>Syndication</a>
<a class="nav-link" href="/pages/à-propos.html"><span class="fa fa-user-circle-o fa-fw" aria-hidden="true"></span>À propos</a>
</nav>
</header>
<main>
<h1>À propos</h1>
<section>
<h2>Titre de la première section</h2>
<picture>
<source type="image/webp" srcset="../images/profil-150w.webp 150w, ../images/profil-200w.webp 200w" sizes="(max-width: 700px) 150px, 200px">
<source type="image/jpeg" srcset="../images/profil-150w.jpg 150w, ../images/profil-200w.jpg 200w" sizes="(max-width: 700px) 150px, 200px">
<img id="profil" alt="Texte alternatif de l’image." src="../images/profil-200w.jpg">
</picture>
</section>
<section>
<h2>Titre de la deuxième section</h2>
<p>Texte.</p>
</section>
</main>
<footer>
<a class="nav-link" href="/pages/droit-d’auteur.html">Droit d’auteur</a> · <a class="nav-link" href="/pages/mentions-légales.html">Mentions légales</a> · <a class="nav-link" href="/pages/politique-de-confidentialité.html">Politique de confidentialité</a>
</footer>
</body>
</html>

135
styles/styles.css

@ -0,0 +1,135 @@
/* Général */
body {
width: 80vw;
margin: auto;
color: black;
background-color: white;
font-family: sans-serif;
}
/* Outils */
.fa {
margin-right: 5px;
}
.nav-link {
text-decoration: none;
}
.nav-link:link {
color: black;
}
.nav-link:visited {
color: inherit;
}
.nav-link:hover {
text-decoration: underline;
}
/* En-tête */
#nav-header {
margin-bottom: 5vh;
border-bottom: 2px solid;
padding: 1em 0;
}
#nav-header nav {
display: flex;
justify-content: space-evenly;
font-size: 0.8rem;
}
/* Contenu principal */
main {
font-size: 1.2rem;
}
h1 {
font-size: 2.1rem;
text-align: center;
}
article header {
margin-bottom: 5vh;
}
#article-title {
font-size: 2.5rem;
text-align: left;
}
#published {
font-style: oblique;
}
#profil {
display: block;
margin: auto;
border: 2px solid black;
}
/* Pied de page */
footer {
font-size: 0.8rem;
text-align: center;
margin-top: 5vh;
border-top: 2px solid;
padding: 1em 0;
}
/* Réglages pour tout écran */
@media only screen and (min-width: 500px) { /* Mettre la photo de profil à droite */
#profil {
float: right;
margin-left: 1vw;
}
#nav-header nav {
font-size: 1rem;
}
}
@media only screen and (min-width: 800px) { /* Agrandir la largeur de la colonne */
body {
width: 70vw;
}
}
@media only screen and (min-width: 1100px) { /* Fixer la largeur pour limiter la longeur des lignes */
body {
width: 900px;
}
}
/* Réglages du mode nuit */
@media (prefers-color-scheme: dark) {
body {
color: #fff;
background-color: #222;
}
#profil {
border-color: #fff;
}
a:link {
color: #62a4d4;
}
a:visited {
color: #ab57ec;
}
.nav-link:link {
color: #fff;
}
}
Loading…
Cancel
Save