wildebeest/html-explorations
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

remise en ordre des dossiers

Browse Source
This commit is contained in:
tierce (Thierry Fenasse) 2022-06-20 15:56:22 +02:00
commit 0362152173
Signed by: tierce
GPG Key ID: 56BF2A3A07DDEB1F
40 changed files with 4149 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.gitmodules vendored Normal file
View File

@ -0,0 +1,12 @@
[submodule "computhings/dependances/fork-awesome"]
path = computhings/dependances/fork-awesome
url = https://github.com/ForkAwesome/Fork-Awesome.git
[submodule "nomdedom/simple.css"]
path = nomdedom/simple.css
url = https://github.com/kevquirk/simple.css.git
[submodule "gnuragistes/dependances/fork-awesome"]
path = gnuragistes/dependances/fork-awesome
url = https://github.com/ForkAwesome/Fork-Awesome.git
[submodule "nomdedom/dependances/fork-awesome"]
path = nomdedom/dependances/fork-awesome
url = https://github.com/ForkAwesome/Fork-Awesome.git

16
README.md Normal file
View File

@ -0,0 +1,16 @@
# Labo html css etc.
Dans l'idée d'en faire un jour des squelettes SPIP.
C'est à chaque fois…
- un fichier `index.html` qui sert de maquette
- un dossier `dependances` qui contient des répo externes comme ForkAwsome, Simple css, etc.
- un dossier `images` avec le favicon ou d'autres images
- un dossier `polices` pour les polices de caractère
- un dossier `js` pour les bouts de Javascripts.
## Remarque
Pou `computhings`, c'est basé sur PureCSS qui a été bidouillé parce que c'était avant d'intégrér le concepte de `dependances` liées à des répo git extenes *(sub-modules)*.

7
computhings/css/layouts/print.css Executable file
View File

@ -0,0 +1,7 @@
@media print
{
.no-print, .no-print *{
display: none !important;
height: 0;
}
}

255
computhings/css/layouts/side-menu-old-ie.css Executable file
View File

@ -0,0 +1,255 @@
body {
color: #777;
}
.pure-img-responsive {
max-width: 100%;
height: auto;
}
/*
Add transition to containers so they can push in and out.
*/
#layout,
#menu,
.menu-link {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
/*
This is the parent `<div>` that contains the menu and the content area.
*/
#layout {
position: relative;
left: 0;
padding-left: 0;
}
#layout.active #menu {
left: 150px;
width: 150px;
}
#layout.active .menu-link {
left: 150px;
}
/*
The content `<div>` is where all your content goes.
*/
.content {
margin: 0 auto;
padding: 0 2em;
max-width: 800px;
margin-bottom: 50px;
line-height: 1.6em;
}
.header {
margin: 0;
color: #333;
text-align: center;
padding: 2.5em 2em 0;
border-bottom: 1px solid #eee;
}
.header h1 {
margin: 0.2em 0;
font-size: 3em;
font-weight: 300;
}
.header h2 {
font-weight: 300;
color: #ccc;
padding: 0;
margin-top: 0;
}
.subheader {
margin: 50px 0 20px 0;
font-weight: 300;
color: #888;
}
/*
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page.
*/
#menu {
margin-left: -150px;
/* "#menu" width */
width: 150px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
/* so the menu or its navicon stays above all content */
background: #191818;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/*
All anchors inside the menu should be styled like this.
*/
#menu a {
color: #999;
border: none;
padding: 0.6em 0 0.6em 0.6em;
}
/*
Remove all background/borders, since we are applying them to #menu.
*/
#menu .pure-menu,
#menu .pure-menu ul {
border: none;
background: transparent;
}
/*
Add that light border to separate items into groups.
*/
#menu .pure-menu ul,
#menu .pure-menu .menu-item-divided {
border-top: 1px solid #333;
}
/*
Change color of the anchor links on hover/focus.
*/
#menu .pure-menu li a:hover,
#menu .pure-menu li a:focus {
background: #333;
}
/*
This styles the selected menu item `<li>`.
*/
#menu .pure-menu-selected,
#menu .pure-menu-heading {
background: #1f8dd6;
}
/*
This styles a link within a selected menu item `<li>`.
*/
#menu .pure-menu-selected a {
color: #fff;
}
/*
This styles the menu heading.
*/
#menu .pure-menu-heading {
font-size: 110%;
color: #fff;
margin: 0;
}
/* -- Dynamic Button For Responsive Menu -------------------------------------*/
/*
The button to open/close the Menu is custom-made and not part of Pure. Here's
how it works:
*/
/*
`.menu-link` represents the responsive menu toggle that shows/hides on
small screens.
*/
.menu-link {
position: fixed;
display: block;
/* show this only on small screens */
top: 0;
left: 0;
/* "#menu width" */
background: #000;
background: rgba(0,0,0,0.7);
font-size: 10px;
/* change this value to increase/decrease button size */
z-index: 10;
width: 2em;
height: auto;
padding: 2.1em 1.6em;
}
.menu-link:hover,
.menu-link:focus {
background: #000;
}
.menu-link span {
position: relative;
display: block;
}
.menu-link span,
.menu-link span:before,
.menu-link span:after {
background-color: #fff;
width: 100%;
height: 0.2em;
}
.menu-link span:before,
.menu-link span:after {
position: absolute;
margin-top: -0.6em;
content: " ";
}
.menu-link span:after {
margin-top: 0.6em;
}
/* -- Responsive Styles (Media Queries) ------------------------------------- */
/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
.header,
.content {
padding-left: 2em;
padding-right: 2em;
}
#layout {
padding-left: 150px;
/* left col width "#menu" */
left: 0;
}
#menu {
left: 150px;
}
.menu-link {
position: fixed;
left: 150px;
display: none;
}
#layout.active .menu-link {
left: 150px;
}

349
computhings/css/layouts/side-menu.css Executable file
View File

@ -0,0 +1,349 @@
body {
color: #777;
}
.pure-img-responsive {
max-width: 100%;
height: auto;
max-height: 200px;
}
/*
Add transition to containers so they can push in and out.
*/
#layout,
#menu,
.menu-link {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
/*
This is the parent `<div>` that contains the menu and the content area.
*/
#layout {
position: relative;
left: 0;
padding-left: 0;
}
#layout.active #menu {
left: 150px;
width: 150px;
}
#layout.active .menu-link {
left: 150px;
}
/*
The header `<div>` that contains the title, subtitle and description
*/
.header {
margin: 0;
color: #333;
text-align: center;
padding: 2.5em 2em 0;
border-bottom: 1px solid #eee;
}
.header h1 {
margin: 0.2em 0;
font-size: 3em;
font-weight: 300;
color: #fe1976;
}
.header h2 {
font-weight: 300;
color: #777;
padding: 0;
margin-top: 0;
}
/*
The content `<div>` is where all your content goes.
*/
.content {
margin: 0 auto;
padding: 0 2em;
max-width: 800px;
margin-bottom: 50px;
line-height: 1.6em;
}
.content a{
color: #fe1976;
text-decoration: none;
background-color: #EEE;
}
.content a:hover{
background-color:#96D321;
color:white;
}
/*
The subheader `div` is where meta data is displayed (date, tags, ...)
*/
.subheader {
margin: 2px 10px 20px 0px;
color: #888;
text-align: right;
font-style: italic;
font-size: small;
}
.subheader a {
color: #84bb1D;
text-decoration: none;
}
.content h2 {
/* border-bottom: 10px solid black; */
/* box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black */
/* color: #fe1976; */
color: #96D321;
}
.fiche-client {
display: block;
}
/*
The footer `<div>` that contains the bottom licences, and other links
*/
.footer {
font-size: smaller;
text-align: center;
}
.footer a{
color: #fe1976;
text-decoration: none;
}
.footer hr{
color: #E8FFD2;
margin: 60px 0px 10px;
}
/*
About using some img alignement with markdown and pure-g
*/
.center {
margin: auto;
}
.right {
float: right;
margin: 0px 0px 10px 10px
}
.avatar {
float: right;
max-width: 120px;
margin: 0px 0px 10px 0px
}
/*
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page.
*/
#menu {
margin-left: -150px; /* "#menu" width */
width: 150px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000; /* so the menu or its navicon stays above all content */
background: #191818;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/*
All anchors inside the menu should be styled like this.
*/
#menu a {
color: #999;
border: none;
padding: 0.6em 0 0.6em 0.6em;
}
/*
Remove all background/borders, since we are applying them to #menu.
*/
#menu .pure-menu,
#menu .pure-menu ul {
border: none;
background: transparent;
}
/*
Add that light border to separate items into groups.
*/
#menu .pure-menu ul,
#menu .pure-menu .menu-item-divided {
border-top: 1px solid #333;
}
/*
Change color of the anchor links on hover/focus.
*/
#menu .pure-menu li a:hover,
#menu .pure-menu li a:focus {
background: #333;
color: #fff;
}
/*
This styles the selected menu item `<li>`.
*/
#menu .pure-menu-selected,
#menu .pure-menu-heading {
background: #96D321;
}
/*
This styles a link within a selected menu item `<li>`.
*/
#menu .pure-menu-active a {
color: #96D321;
}
/*
This styles the menu heading.
*/
#menu .pure-menu-heading {
font-size: 110%;
color: #fff;
margin: 0;
}
/* -- Dynamic Button For Responsive Menu -------------------------------------*/
/*
The button to open/close the Menu is custom-made and not part of Pure. Here's
how it works:
*/
/*
`.menu-link` represents the responsive menu toggle that shows/hides on
small screens.
*/
.menu-link {
position: fixed;
display: block; /* show this only on small screens */
top: 0;
left: 0; /* "#menu width" */
background: #000;
background: rgba(0,0,0,0.7);
font-size: 10px; /* change this value to increase/decrease button size */
z-index: 10;
width: 2em;
height: auto;
padding: 2.1em 1.6em;
}
.menu-link:hover,
.menu-link:focus {
background: #000;
}
.menu-link span {
position: relative;
display: block;
}
.menu-link span,
.menu-link span:before,
.menu-link span:after {
background-color: #fff;
width: 100%;
height: 0.2em;
}
.menu-link span:before,
.menu-link span:after {
position: absolute;
margin-top: -0.6em;
content: " ";
}
.menu-link span:after {
margin-top: 0.6em;
}
/* content tuning */
blockquote {
background-color: ghostwhite;
border-left-color: rgb(214, 214, 214);
border-left-style: solid;
border-left-width: 5px;
line-height: 25.6px;
margin-bottom: 16px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-wrap: break-word;
padding-bottom: 0px;
padding-left: 15px;
padding-right: 15px;
padding-top: 0px;
}
code {
color: #333;
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
}
/* -- Responsive Styles (Media Queries) ------------------------------------- */
/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 48em) {
.header,
.content {
padding-left: 2em;
padding-right: 2em;
}
#layout {
padding-left: 150px; /* left col width "#menu" */
left: 0;
}
#menu {
left: 150px;
}
.menu-link {
position: fixed;
left: 150px;
display: none;
}
#layout.active .menu-link {
left: 150px;
}
}
@media (max-width: 48em) {
/* Only apply this when the window is small. Otherwise, the following
case results in extra padding on the left:
* Make the window small.
* Tap the menu to trigger the active state.
* Make the window large again.
*/
#layout.active {
position: relative;
left: 150px;
}
}

1006
computhings/css/main.css Executable file
View File

File diff suppressed because it is too large Load Diff

1
computhings/dependances/fork-awesome Submodule

@ -0,0 +1 @@
Subproject commit a99579ae3e735ee70e51ed62dfcee3172b5b2db7

BIN
computhings/images/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

216
computhings/index.html Normal file
View File

@ -0,0 +1,216 @@
<!DOCTYPE html>
<html lang="fr" class="no-js">
<head>
<title>Titre de la page de travail | Labo html</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="">
<meta name="description" content="" />
<meta name="robots" content="archive,index,follow" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/layouts/side-menu.css" rel="stylesheet" type="text/css" />
<link href="dependances/fork-awesome/css/fork-awesome.min.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.png" />
</head>
<body>
<section id="layout">
<!-- Menu toggle -->
<a href="#menu" id="menuLink" class="menu-link">
<!-- Hamburger icon -->
<span></span>
</a>
<section id="menu">
<!-- Main site menu -->
<div class="pure-menu">
<a class="pure-menu-heading" href="/">🐭 Home</a>
<a class="pure-menu-link"href="#">Lien du menu avec une grande ligne comme entrée</a>
<a class="pure-menu-link" href="#">Lien du menu</a>
<a class="pure-menu-link pure-menu-active" href="#">Lien du menu</a>
<a class="pure-menu-link" href="#">Lien du menu</a>
<a class="pure-menu-link" href="#">Lien du menu</a>
</div>
</section>
<section id="main">
<section class="header">
<h1>Titre principal de ma page (setction header, h1)</h1>
<h2>Titre secondaire de ma page - (section header, h2)</h2>
<h3>Titre ternaire de ma page - (section header, h3)</h3>
</section>
<section class="subheader">
01 avril 1069 - <a href="#">auteur</a>,<a href="#">auteur</a>
</section>
<section class="content">
<h1>An h1 header</h1>
<p>Paragraphs are separated by a blank line.</p>
<p>2nd paragraph. <em>Italic</em>, <strong>bold</strong>, and <code>monospace</code>. Itemized lists
look like:</p>
<ul>
<li>this one</li>
<li>that one</li>
<li>the other one</li>
</ul>
<p>Note that --- not considering the asterisk --- the actual text
content starts at 4-columns in.</p>
<blockquote>
<p>Block quotes are
written like so.</p>
<p>They can span multiple paragraphs,
if you like.</p>
</blockquote>
<p>Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all
in chapters 12--14"). Three dots ... will be converted to an ellipsis.
Unicode is supported. ☺</p>
<h2>An h2 header</h2>
<p>Here's a numbered list:</p>
<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
<p>Note again how the actual text starts at 4 columns in (4 characters
from the left side). Here's a code sample:</p>
<div class="highlight"><pre><span></span><span class="err"># Let me re-iterate ...</span>
<span class="err">for i in 1 .. 10 { do-something(i) }</span>
</pre></div>
<p>As you probably guessed, indented 4 spaces. By the way, instead of
indenting the block, you can use delimited blocks, if you like:</p>
<div class="highlight"><pre><span></span><span class="err">define foobar() {</span>
<span class="err"> print "Welcome to flavor country!";</span>
<span class="err">}</span>
</pre></div>
<p>(which makes copying &amp; pasting easier). You can optionally mark the
delimited block for Pandoc to syntax highlight it:</p>
<div class="highlight"><pre><span></span><span class="kn">import</span> <span class="nn">time</span>
<span class="c1"># Quick, count to ten!</span>
<span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="mi">10</span><span class="p">):</span>
<span class="c1"># (but not *too* quick)</span>
<span class="n">time</span><span class="o">.</span><span class="n">sleep</span><span class="p">(</span><span class="mf">0.5</span><span class="p">)</span>
<span class="nb">print</span> <span class="n">i</span>
</pre></div>
<h3>An h3 header</h3>
<p>Now a nested list:</p>
<ol>
<li>
<p>First, get these ingredients:</p>
<ul>
<li>carrots</li>
<li>celery</li>
<li>lentils</li>
</ul>
</li>
<li>
<p>Boil some water.</p>
</li>
<li>
<p>Dump everything in the pot and follow
this algorithm:</p>
<div class="highlight"><pre><span></span><span class="err">find wooden spoon</span>
<span class="err">uncover pot</span>
<span class="err">stir</span>
<span class="err">cover pot</span>
<span class="err">balance wooden spoon precariously on pot handle</span>
<span class="err">wait 10 minutes</span>
<span class="err">goto first step (or shut off burner when done)</span>
</pre></div>
<p>Do not bump wooden spoon or it will fall.</p>
</li>
</ol>
<p>Notice again how text always lines up on 4-space indents (including
that last line which continues item 3 above).</p>
<p>Here's a link to <a href="http://foo.bar">a website</a>, to a <a href="local-doc.html">local
doc</a>, and to a <a href="#an-h2-header">section heading in the current
doc</a>. Here's a footnote <sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup>.</p>
<p>Tables can look like this:</p>
<p>size material color</p>
<hr>
<p>9 leather brown
10 hemp canvas natural
11 glass transparent</p>
<p>Table: Shoes, their sizes, and what they're made of</p>
<p>(The above is the caption for the table.) Pandoc also supports
multi-line tables:</p>
<hr>
<p>keyword text</p>
<hr>
<p>red Sunsets, apples, and
other red or reddish
things.</p>
<p>green Leaves, grass, frogs
and other things it's
not easy being.</p>
<hr>
<p>A horizontal rule follows.</p>
<hr>
<p>Here's a definition list:</p>
<dl>
<dt>apples</dt>
<dd>
<dl>
<dt>Good for making applesauce.</dt>
<dt>oranges</dt>
<dd>
<dl>
<dt>Citrus!</dt>
<dt>tomatoes</dt>
<dd>There's no "e" in tomatoe.</dd>
</dl>
</dd>
</dl>
</dd>
</dl>
<p>Again, text is indented 4 spaces. (Put a blank line between each
term/definition pair to spread things out more.)</p>
<p>Here's a "line block":</p>
<p>| Line one
| Line too
| Line tree</p>
<p>and images can be specified like so:</p>
<p><img alt="example image" src="example-image.jpg" title="An exemplary image"></p>
<p>Inline math equations go in like so: $\omega = d\phi / dt$. Display
math should get its own line and be put in in double-dollarsigns:</p>
<p>$$I = \int \rho R^{2} dV$$</p>
<p>And note that you can backslash-escape any punctuation characters
which you wish to be displayed literally, ex.: `foo`, *bar*, etc.</p>
<div class="footnote">
<hr>
<ol>
<li id="fn:1">
<p>Footnote text goes here.&nbsp;<a class="footnote-backref" href="#fnref:1" title="Jump back to footnote 1 in the text">↩</a>
</section>
<section class="footer">
<hr>
Moteur: <a target="_blank" href="https://blog.getpelican.com/">Pelican</a>, Carosserie: <a href="https://purecss.io/">Pure v0.6.2</a>, Auto-hébergé grâce à <a href="https://yunohost.org">Yunohost</a>. <br/>
<a target="_blank" rel="license" href="http://creativecommons.org/licenses/by/4.0/">CC-BY 4.0</a> ☺ {{ COPYLEFT }} - {{ FOOTER_TITLE }}
</section>
<!--
Se script doit être chargé après menuLink.
Si on le met dans head, il se plaint que les variables n'existesnt pas.
Peut-être que ça vaudrait la peine de l'étudier un peu pour, peut-être l'améliorer.
-->
<script src="js/ui.js"></script>
</section>
</body>
</html>

46
computhings/js/ui.js Executable file
View File

@ -0,0 +1,46 @@
(function (window, document) {
var layout = document.getElementById('layout'),
menu = document.getElementById('menu'),
menuLink = document.getElementById('menuLink'),
content = document.getElementById('main');
function toggleClass(element, className) {
var classes = element.className.split(/\s+/),
length = classes.length,
i = 0;
for(; i < length; i++) {
if (classes[i] === className) {
classes.splice(i, 1);
break;
}
}
// The className is not found
if (length === classes.length) {
classes.push(className);
}
element.className = classes.join(' ');
}
function toggleAll(e) {
var active = 'active';
e.preventDefault();
toggleClass(layout, active);
toggleClass(menu, active);
toggleClass(menuLink, active);
}
menuLink.onclick = function (e) {
toggleAll(e);
};
content.onclick = function(e) {
if (menu.className.indexOf('active') !== -1) {
toggleAll(e);
}
};
}(this, this.document));

243
default/index.html Normal file
View File

@ -0,0 +1,243 @@
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titre de la page de travail | Labo html</title>
<meta name="keywords" content="">
<meta name="description" content="" />
<meta name="robots" content="archive,index,follow" />
<link href="#theme/computhings/main.css" rel="stylesheet" type="text/css" />
<link href="theme/gnuragistes/main.css" rel="stylesheet" type="text/css" />
<link href="#theme/nomdedom/main.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="" />
</head>
<body>
<section id=head>
<h1>Titre principal de ma page (setction head, h1)</h1>
<h2>Titre secondaire de ma page - (section head, h2)</h2>
<h3>Titre ternaire de ma page - (section head, h3)</h3>
</section><!-- end #head -->
<hr class=title>
<nav id=menu>
<a href="#" class="button"><i class="fa fa-info"></i>Une entrée du menu avec icone</a>
<a href="#" class="button"><i class="fa fa-gnu"></i>Une entrée du menu avec icone</a>
<a href="#" class="button"><i class="fa fa-info"></i>Une entrée du menu avec icone</a>
</nav>
<nav id="menu-secondaire">
<ul>
<li>
<h3>Pages ul-li-h3</h3>
<ul>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
</ul>
</li>
<li>
<h3>Catégories ul-li-h3</h3>
<ul>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
</ul>
</li>
<li>
<h3>Blogroll ul-li-h3</h3>
<ul>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
</ul>
</li>
<li>
<h3>Social ul-li-h3</h3>
<ul>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
</ul>
</li>
<li>
<h3>Tags ul-li-h3</h3>
<ul>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
</ul>
</li>
</ul>
<section class="content">
<h1>An h1 header</h1>
<p>Paragraphs are separated by a blank line.</p>
<p>2nd paragraph. <em>Italic</em>, <strong>bold</strong>, and <code>monospace</code>. Itemized lists
look like:</p>
<ul>
<li>this one</li>
<li>that one</li>
<li>the other one</li>
</ul>
<p>Note that --- not considering the asterisk --- the actual text
content starts at 4-columns in.</p>
<blockquote>
<p>Block quotes are
written like so.</p>
<p>They can span multiple paragraphs,
if you like.</p>
</blockquote>
<p>Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all
in chapters 12--14"). Three dots ... will be converted to an ellipsis.
Unicode is supported. ☺</p>
<h2>An h2 header</h2>
<p>Here's a numbered list:</p>
<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
<p>Note again how the actual text starts at 4 columns in (4 characters
from the left side). Here's a code sample:</p>
<div class="highlight"><pre><span></span><span class="err"># Let me re-iterate ...</span>
<span class="err">for i in 1 .. 10 { do-something(i) }</span>
</pre></div>
<p>As you probably guessed, indented 4 spaces. By the way, instead of
indenting the block, you can use delimited blocks, if you like:</p>
<div class="highlight"><pre><span></span><span class="err">define foobar() {</span>
<span class="err"> print "Welcome to flavor country!";</span>
<span class="err">}</span>
</pre></div>
<p>(which makes copying &amp; pasting easier). You can optionally mark the
delimited block for Pandoc to syntax highlight it:</p>
<div class="highlight"><pre><span></span><span class="kn">import</span> <span class="nn">time</span>
<span class="c1"># Quick, count to ten!</span>
<span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="mi">10</span><span class="p">):</span>
<span class="c1"># (but not *too* quick)</span>
<span class="n">time</span><span class="o">.</span><span class="n">sleep</span><span class="p">(</span><span class="mf">0.5</span><span class="p">)</span>
<span class="nb">print</span> <span class="n">i</span>
</pre></div>
<h3>An h3 header</h3>
<p>Now a nested list:</p>
<ol>
<li>
<p>First, get these ingredients:</p>
<ul>
<li>carrots</li>
<li>celery</li>
<li>lentils</li>
</ul>
</li>
<li>
<p>Boil some water.</p>
</li>
<li>
<p>Dump everything in the pot and follow
this algorithm:</p>
<div class="highlight"><pre><span></span><span class="err">find wooden spoon</span>
<span class="err">uncover pot</span>
<span class="err">stir</span>
<span class="err">cover pot</span>
<span class="err">balance wooden spoon precariously on pot handle</span>
<span class="err">wait 10 minutes</span>
<span class="err">goto first step (or shut off burner when done)</span>
</pre></div>
<p>Do not bump wooden spoon or it will fall.</p>
</li>
</ol>
<p>Notice again how text always lines up on 4-space indents (including
that last line which continues item 3 above).</p>
<p>Here's a link to <a href="http://foo.bar">a website</a>, to a <a href="local-doc.html">local
doc</a>, and to a <a href="#an-h2-header">section heading in the current
doc</a>. Here's a footnote <sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup>.</p>
<p>Tables can look like this:</p>
<p>size material color</p>
<hr>
<p>9 leather brown
10 hemp canvas natural
11 glass transparent</p>
<p>Table: Shoes, their sizes, and what they're made of</p>
<p>(The above is the caption for the table.) Pandoc also supports
multi-line tables:</p>
<hr>
<p>keyword text</p>
<hr>
<p>red Sunsets, apples, and
other red or reddish
things.</p>
<p>green Leaves, grass, frogs
and other things it's
not easy being.</p>
<hr>
<p>A horizontal rule follows.</p>
<hr>
<p>Here's a definition list:</p>
<dl>
<dt>apples</dt>
<dd>
<dl>
<dt>Good for making applesauce.</dt>
<dt>oranges</dt>
<dd>
<dl>
<dt>Citrus!</dt>
<dt>tomatoes</dt>
<dd>There's no "e" in tomatoe.</dd>
</dl>
</dd>
</dl>
</dd>
</dl>
<p>Again, text is indented 4 spaces. (Put a blank line between each
term/definition pair to spread things out more.)</p>
<p>Here's a "line block":</p>
<p>| Line one
| Line too
| Line tree</p>
<p>and images can be specified like so:</p>
<p><img alt="example image" src="example-image.jpg" title="An exemplary image"></p>
<p>Inline math equations go in like so: $\omega = d\phi / dt$. Display
math should get its own line and be put in in double-dollarsigns:</p>
<p>$$I = \int \rho R^{2} dV$$</p>
<p>And note that you can backslash-escape any punctuation characters
which you wish to be displayed literally, ex.: `foo`, *bar*, etc.</p>
<div class="footnote">
<hr>
<ol>
<li id="fn:1">
<p>Footnote text goes here.&nbsp;<a class="footnote-backref" href="#fnref:1" title="Jump back to footnote 1 in the text">↩</a>
</section><!-- end #content -->
<section id="footer">
<p>Proudly powered by <a href="#">rien du tout</a>, avec la participation de <a href="#">python</a>.
</section><!-- end #footer -->
</body>
</html>

78
gnuragistes/css/classes.css Normal file
View File

@ -0,0 +1,78 @@
/* classes */
.smaller {
font-size: 1.2rem;
}
.hide
{
visibility: hidden;
}
.right
{
float: right;
}
.left
{
float: left;
}
.white
{
color: white;
}
.yellow
{
color: yellow;
}
a.button
{
display:inline-block;
padding:0.35em 1.2em;
/* border:0.1em solid magenta; */
margin:0 0.3em 0.3em 0;
border-radius:0.12em;
box-sizing: border-box;
text-decoration:none;
color: lightgreen;
text-align:center;
transition: all 0.2s;
font-size: 1.5rem;
}
a.button > i
{
padding-right: 0.5em;
color: yellow;
}
a.button:hover, a:hover
{
color:#0F0F0F;
background-color: lightgreen;
}
a.button:hover > i
{
padding-right: 0.5em;
color: #0F0F0F;
}
hr.title {
border: 0.3rem solid red;
}
#footer
{
color:red;
font-size: 1.5rem;
}
img.reduce
{
width: 15rem;
}

105
gnuragistes/css/main.css Normal file
View File

@ -0,0 +1,105 @@
@import "fork-awesome/css/fork-awesome.min.css";
@import "classes.css";
@import "syntax.css";
@import "pure-min.css";
/* fonts */
@font-face
{
font-family: "OpenDyslexic";
src: url("../fonts/OpenDyslexic-Regular.eot");
src: url("../fonts/OpenDyslexic-Regular.woff") format("woff"),
url("../fonts/OpenDyslexic-Regular.ttf") format("truetype"),
url("../fonts/OpenDyslexic-Regular.svg") format("svg");
font-weight: normal;
font-style: normal;
}
/* common html tags */
body
{
background-color: #0F0F0F;
font-family: OpenDyslexic;
color: darkturquoise;
}
section{
max-width: 85%;
margin-left: auto;
margin-right: auto;
margin-top: 1rem;
line-height: 3rem;
}
a
{
text-decoration: none;
color: lightgreen;
}
h1
{
font-size: 3rem;
color: #bbb;
}
h2
{
font-size: 2rem;
color: #bbb;
}
h3
{
font-size: 1.5rem;
color: #bbb;
}
hr
{
border: 0.3rem solid #bbb;
border-radius: 0.5rem;
}
img
{
height: auto;
}
p, ul, table
{
font-size: 1.5rem;
}
table
{
min-width: 80%;
}
pre, code {
line-height: 2.1rem;
font-family: courier;
font-size: 1.5rem;
}
/* for smaller screens transformations */
@media (max-width: 1024px)
{
/* common html tags */
body
{
line-height: 1.8;
}
img
{
max-width: 90%;
height: auto;
}
p
{
font-size: 2rem;
}
}

17
gnuragistes/css/syntax.css Normal file
View File

@ -0,0 +1,17 @@
/* for the code highlight */
.highlight pre, code {
background: #272822;
color: #bbb;
padding: 0.5rem;
}
/* inspiration potentielle ?
- https://gist.github.com/demisx/025698a7b5e314a7a4b5
- https://github.com/mkaz/code-syntax-block
*/

1
gnuragistes/dependances/fork-awesome Submodule

@ -0,0 +1 @@
Subproject commit a99579ae3e735ee70e51ed62dfcee3172b5b2db7

BIN
gnuragistes/images/zebras-favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

242
gnuragistes/index.html Normal file
View File

@ -0,0 +1,242 @@
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titre de la page de travail | Labo html</title>
<meta name="keywords" content="">
<meta name="description" content="" />
<meta name="robots" content="archive,index,follow" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="dependances/fork-awesome/css/fork-awesome.min.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/zebras-favicon.png" />
</head>
<body>
<section id=head>
<h1>Titre principal de ma page (setction head, h1)</h1>
<h2>Titre secondaire de ma page - (section head, h2)</h2>
<h3>Titre ternaire de ma page - (section head, h3)</h3>
</section><!-- end #head -->
<hr class=title>
<nav id=menu>
<a href="#" class="button"><i class="fa fa-info"></i>Une entrée du menu avec icone</a>
<a href="#" class="button"><i class="fa fa-gnu"></i>Une entrée du menu avec icone</a>
<a href="#" class="button"><i class="fa fa-info"></i>Une entrée du menu avec icone</a>
</nav>
<nav id="menu-secondaire">
<ul>
<li>
<h3>Pages ul-li-h3</h3>
<ul>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
</ul>
</li>
<li>
<h3>Catégories ul-li-h3</h3>
<ul>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
</ul>
</li>
<li>
<h3>Blogroll ul-li-h3</h3>
<ul>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
</ul>
</li>
<li>
<h3>Social ul-li-h3</h3>
<ul>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
</ul>
</li>
<li>
<h3>Tags ul-li-h3</h3>
<ul>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
</ul>
</li>
</ul>
<section class="content">
<h1>An h1 header</h1>
<p>Paragraphs are separated by a blank line.</p>
<p>2nd paragraph. <em>Italic</em>, <strong>bold</strong>, and <code>monospace</code>. Itemized lists
look like:</p>
<ul>
<li>this one</li>
<li>that one</li>
<li>the other one</li>
</ul>
<p>Note that --- not considering the asterisk --- the actual text
content starts at 4-columns in.</p>
<blockquote>
<p>Block quotes are
written like so.</p>
<p>They can span multiple paragraphs,
if you like.</p>
</blockquote>
<p>Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all
in chapters 12--14"). Three dots ... will be converted to an ellipsis.
Unicode is supported. ☺</p>
<h2>An h2 header</h2>
<p>Here's a numbered list:</p>
<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
<p>Note again how the actual text starts at 4 columns in (4 characters
from the left side). Here's a code sample:</p>
<div class="highlight"><pre><span></span><span class="err"># Let me re-iterate ...</span>
<span class="err">for i in 1 .. 10 { do-something(i) }</span>
</pre></div>
<p>As you probably guessed, indented 4 spaces. By the way, instead of
indenting the block, you can use delimited blocks, if you like:</p>
<div class="highlight"><pre><span></span><span class="err">define foobar() {</span>
<span class="err"> print "Welcome to flavor country!";</span>
<span class="err">}</span>
</pre></div>
<p>(which makes copying &amp; pasting easier). You can optionally mark the
delimited block for Pandoc to syntax highlight it:</p>
<div class="highlight"><pre><span></span><span class="kn">import</span> <span class="nn">time</span>
<span class="c1"># Quick, count to ten!</span>
<span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="mi">10</span><span class="p">):</span>
<span class="c1"># (but not *too* quick)</span>
<span class="n">time</span><span class="o">.</span><span class="n">sleep</span><span class="p">(</span><span class="mf">0.5</span><span class="p">)</span>
<span class="nb">print</span> <span class="n">i</span>
</pre></div>
<h3>An h3 header</h3>
<p>Now a nested list:</p>
<ol>
<li>
<p>First, get these ingredients:</p>
<ul>
<li>carrots</li>
<li>celery</li>
<li>lentils</li>
</ul>
</li>
<li>
<p>Boil some water.</p>
</li>
<li>
<p>Dump everything in the pot and follow
this algorithm:</p>
<div class="highlight"><pre><span></span><span class="err">find wooden spoon</span>
<span class="err">uncover pot</span>
<span class="err">stir</span>
<span class="err">cover pot</span>
<span class="err">balance wooden spoon precariously on pot handle</span>
<span class="err">wait 10 minutes</span>
<span class="err">goto first step (or shut off burner when done)</span>
</pre></div>
<p>Do not bump wooden spoon or it will fall.</p>
</li>
</ol>
<p>Notice again how text always lines up on 4-space indents (including
that last line which continues item 3 above).</p>
<p>Here's a link to <a href="http://foo.bar">a website</a>, to a <a href="local-doc.html">local
doc</a>, and to a <a href="#an-h2-header">section heading in the current
doc</a>. Here's a footnote <sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup>.</p>
<p>Tables can look like this:</p>
<p>size material color</p>
<hr>
<p>9 leather brown
10 hemp canvas natural
11 glass transparent</p>
<p>Table: Shoes, their sizes, and what they're made of</p>
<p>(The above is the caption for the table.) Pandoc also supports
multi-line tables:</p>
<hr>
<p>keyword text</p>
<hr>
<p>red Sunsets, apples, and
other red or reddish
things.</p>
<p>green Leaves, grass, frogs
and other things it's
not easy being.</p>
<hr>
<p>A horizontal rule follows.</p>
<hr>
<p>Here's a definition list:</p>
<dl>
<dt>apples</dt>
<dd>
<dl>
<dt>Good for making applesauce.</dt>
<dt>oranges</dt>
<dd>
<dl>
<dt>Citrus!</dt>
<dt>tomatoes</dt>
<dd>There's no "e" in tomatoe.</dd>
</dl>
</dd>
</dl>
</dd>
</dl>
<p>Again, text is indented 4 spaces. (Put a blank line between each
term/definition pair to spread things out more.)</p>
<p>Here's a "line block":</p>
<p>| Line one
| Line too
| Line tree</p>
<p>and images can be specified like so:</p>
<p><img alt="example image" src="example-image.jpg" title="An exemplary image"></p>
<p>Inline math equations go in like so: $\omega = d\phi / dt$. Display
math should get its own line and be put in in double-dollarsigns:</p>
<p>$$I = \int \rho R^{2} dV$$</p>
<p>And note that you can backslash-escape any punctuation characters
which you wish to be displayed literally, ex.: `foo`, *bar*, etc.</p>
<div class="footnote">
<hr>
<ol>
<li id="fn:1">
<p>Footnote text goes here.&nbsp;<a class="footnote-backref" href="#fnref:1" title="Jump back to footnote 1 in the text">↩</a>
</section><!-- end #content -->
<section id="footer">
<p>Proudly powered by <a href="#">rien du tout</a>, avec la participation de <a href="#">python</a>.
</section><!-- end #footer -->
</body>
</html>

BIN
gnuragistes/polices/OpenDyslexic-Regular.eot Normal file
View File

Binary file not shown.

BIN
gnuragistes/polices/OpenDyslexic-Regular.otf Normal file
View File

Binary file not shown.

BIN
gnuragistes/polices/OpenDyslexic-Regular.ttf Normal file
View File

Binary file not shown.

BIN
gnuragistes/polices/OpenDyslexic-Regular.woff Normal file
View File

Binary file not shown.

33
index.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Labo html css etc.</title>
</head>
<body>
<h1>Laboratoire d'exploration html css etc.</h1>
<ul>
<li>
<a href="computhings/">utilisé par Computhings (purecss)</a>
</li>
<li>
<a href="default/">sans css, ni rien.</a>
</li>
<li>
<a href="gnuragistes/">utilisé par Gnuragistes (rien)</a>
</li>
<li>
<a href="nomdedom/">pas utilisé (simplecss)</a>
</li>
<li>
<a href="space/">pas encore fait.</a>
</li>
</ul>
</p>
</body>
</html>

80
nomdedom/css/main.css Normal file
View File

@ -0,0 +1,80 @@
@import "simple.css/simple.css";
:root {
--turquoise: #00f9ff;
--rouge: #ff0000;
--vert: #23e818;
--orange: #e87318;
--rose: #de18e8 ;
}
/* Format navigation */
nav#tag {
font-size: 1rem;
line-height: 2;
padding: 1rem 0 0 0;
}
/* Use flexbox to allow items to wrap, as needed */
nav#tag ul,
nav#tag ol {
align-content: space-around;
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
list-style-type: none;
margin: 0;
padding: 0;
}
/* List items are inline elements, make them behave more like blocks */
nav#tag ul li,
nav#tag ol li {
display: inline-block;
}
nav#tag a,
nav#tag a:visited {
margin: 0 1rem 1rem 0;
border: 1px solid var(--border);
border-radius: 5px;
color: var(--text);
display: inline-block;
padding: 0.1rem 1rem;
text-decoration: none;
}
nav#tag a:last-child {
margin-right: 0;
}
/* pour collorer les block de tag */
nav#tag.turquoise a:hover {
color: var(--turquoise);
border-color: var(--turquoise);
}
nav#tag.rouge a:hover {
color: var(--rouge);
border-color: var(--rouge);
}
nav#tag.vert a:hover {
color: var(--vert);
border-color: var(--vert);
}
nav#tag.orange a:hover {
color: var(--orange);
border-color: var(--orange);
}
nav#tag.rose a:hover {
color: var(--rose);
border-color: var(--rose);
}

1
nomdedom/dependances/fork-awesome Submodule

@ -0,0 +1 @@
Subproject commit a99579ae3e735ee70e51ed62dfcee3172b5b2db7

21
nomdedom/dependances/simple.css/.github/workflows/cdn-deploy.yml vendored Normal file
View File

@ -0,0 +1,21 @@
name: Minify CSS
on:
push
jobs:
minify:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Auto Minify
uses: nizarmah/auto-minify@master
# Auto commits minified files to the repository
# Ignore it if you don't want to commit the files to the repository
- name: Auto committing minified files
uses: stefanzweifel/git-auto-commit-action@v3.0.0
with:
commit_message: "Github Action: Auto Minified JS and CSS files"
branch: ${{ github.ref }}

17
nomdedom/dependances/simple.css/.github/workflows/npm-publish.yml vendored Normal file
View File

@ -0,0 +1,17 @@
name: NPM Publish
on: push
jobs:
publish:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- uses: actions/setup-node@v1
with:
node-version: 10
- run: npm install
- run: npm test
- uses: JS-DevTools/npm-publish@v1
with:
token: ${{ secrets.NPM_TOKEN }}

1
nomdedom/dependances/simple.css/.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.DS_Store

13
nomdedom/dependances/simple.css/CONTRIBUTING.md Normal file
View File

@ -0,0 +1,13 @@
If you want to get involved in making Simple.css better, please feel free to submit a pull request with any additions or changed you think would be suitable.
Alternatively, if you're not a coder, or don't want to submit a pull request, feel free to [submit an issue](https://github.com/kevquirk/simple.css/issues).
## Contributing
If you decide to contribute to this project, please edit the `simple.css`, once I merge your change, I will minify it myself.
If you do add contributions, please add verbose commenting so I can understand the rationale for the changes/additions you are proposing.
Thanks again for wanting to contribute to this project!
-- Kev

21
nomdedom/dependances/simple.css/LICENSE Normal file
View File

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2020 Simple.css (Kev Quirk)
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 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.

11
nomdedom/dependances/simple.css/README.md Normal file
View File

@ -0,0 +1,11 @@
# Simple.css {}
Simple.css is a classless CSS template that allows you to make a good looking website really quickly.
**Find out more at [https://simplecss.org](https://simplecss.org).**
![Screenshot of Simple.css](screenshot.png)
## Supported Browsers
Any evergreen browser > IE11 (why is IE still a thing?)

22
nomdedom/dependances/simple.css/index.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Simple.css CDN</title>
<style>
body {
display:block;
max-width: 40rem;
margin: 0 auto;
padding: 0 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
"Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica,
"Helvetica Neue", sans-serif;
}
</style>
</head>
<body>
<h1>Simple.css CDN</h1>
<p>I'm just the <a href="https://simplecss.org">Simple.css</a> CDN. There's nothing for you to browse here.</p>
</body>
</html>

30
nomdedom/dependances/simple.css/package.json Normal file
View File

@ -0,0 +1,30 @@
{
"name": "simpledotcss",
"version": "2.1.0",
"description": "Simple.css is a classless CSS template that allows you to make a good looking website really quickly.",
"main": "simple.css",
"files": [
"simple.css",
"simple.min.css",
"simple-v1.css",
"simple-v1.min.css"
],
"repository": {
"type": "git",
"url": "git+https://github.com/kevquirk/simple.css.git"
},
"author": "kevquirk",
"license": "MIT",
"bugs": {
"url": "https://github.com/kevquirk/simple.css/issues"
},
"homepage": "https://github.com/kevquirk/simple.css#readme",
"keywords": [
"css",
"html",
"simple.css",
"simplecss.org",
"simplecss",
"classless"
]
}

BIN
nomdedom/dependances/simple.css/screenshot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

511
nomdedom/dependances/simple.css/simple-v1.css Normal file
View File

@ -0,0 +1,511 @@
/* Set the global variables for everything. Change these to use your own fonts and colours. */
:root {
/* Set sans-serif & mono fonts */
--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
"Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica,
"Helvetica Neue", sans-serif;
--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
/* Body font size. By default, effectively 18.4px, based on 16px as 'root em' */
--base-fontsize: 1.15rem;
/* Major third scale progression - see https://type-scale.com/ */
--header-scale: 1.25;
/* Line height is set to the "Golden ratio" for optimal legibility */
--line-height: 1.618;
/* Default (light) theme */
--bg: #fff;
--accent-bg: #f5f7ff;
--text: #212121;
--text-light: #585858;
--border: #d8dae1;
--accent: #0d47a1;
--accent-light: #90caf9;
--code: #d81b60;
--preformatted: #444;
--marked: #ffdd33;
--disabled: #efefef;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: #212121;
--accent-bg: #2b2b2b;
--text: #dcdcdc;
--text-light: #ababab;
--border: #666;
--accent: #ffb300;
--accent-light: #ffecb3;
--code: #f06292;
--preformatted: #ccc;
--disabled: #111;
}
img,
video {
opacity: 0.6;
}
}
html {
/* Set the font globally */
font-family: var(--sans-font);
}
/* Make the body a nice central block */
body {
color: var(--text);
background: var(--bg);
font-size: var(--base-fontsize);
line-height: var(--line-height);
display: flex;
min-height: 100vh;
flex-direction: column;
flex: 1;
margin: 0 auto;
max-width: 45rem;
padding: 0 0.5rem;
overflow-x: hidden;
word-break: break-word;
overflow-wrap: break-word;
}
/* Make the header bg full width, but the content inline with body */
header {
background: var(--accent-bg);
border-bottom: 1px solid var(--border);
text-align: center;
padding: 2rem 0.5rem;
width: 100vw;
position: relative;
box-sizing: border-box;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
/* Remove margins for header text */
header h1,
header p {
margin: 0;
}
/* Add a little padding to ensure spacing is correct between content and nav */
main {
padding-top: 1.5rem;
}
/* Fix line height when title wraps */
h1,
h2,
h3 {
line-height: 1.1;
}
/* Format navigation */
nav {
font-size: 1rem;
line-height: 2;
padding: 1rem 0;
}
nav a {
margin: 1rem 1rem 0 0;
border: 1px solid var(--border);
border-radius: 5px;
color: var(--text) !important;
display: inline-block;
padding: 0.1rem 1rem;
text-decoration: none;
transition: 0.4s;
}
nav a:hover {
color: var(--accent) !important;
border-color: var(--accent);
}
nav a.current:hover {
text-decoration: none;
}
footer {
margin-top: 4rem;
padding: 2rem 1rem 1.5rem 1rem;
color: var(--text-light);
font-size: 0.9rem;
text-align: center;
border-top: 1px solid var(--border);
}
/* Format headers */
h1 {
font-size: calc(
var(--base-fontsize) * var(--header-scale) * var(--header-scale) *
var(--header-scale) * var(--header-scale)
);
margin-top: calc(var(--line-height) * 1.5rem);
}
h2 {
font-size: calc(
var(--base-fontsize) * var(--header-scale) * var(--header-scale) *
var(--header-scale)
);
margin-top: calc(var(--line-height) * 1.5rem);
}
h3 {
font-size: calc(
var(--base-fontsize) * var(--header-scale) * var(--header-scale)
);
margin-top: calc(var(--line-height) * 1.5rem);
}
h4 {
font-size: calc(var(--base-fontsize) * var(--header-scale));
margin-top: calc(var(--line-height) * 1.5rem);
}
h5 {
font-size: var(--base-fontsize);
margin-top: calc(var(--line-height) * 1.5rem);
}
h6 {
font-size: calc(var(--base-fontsize) / var(--header-scale));
margin-top: calc(var(--line-height) * 1.5rem);
}
/* Format links & buttons */
a,
a:visited {
color: var(--accent);
}
a:hover {
text-decoration: none;
}
a button,
button,
[role="button"],
input[type="submit"],
input[type="reset"],
input[type="button"] {
border: none;
border-radius: 5px;
background: var(--accent);
font-size: 1rem;
color: var(--bg);
padding: 0.7rem 0.9rem;
margin: 0.5rem 0;
transition: 0.4s;
}
a button[disabled],
button[disabled],
[role="button"][aria-disabled="true"],
input[type="submit"][disabled],
input[type="reset"][disabled],
input[type="button"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][disabled],
select[disabled] {
cursor: default;
opacity: 0.5;
cursor: not-allowed;
}
input:disabled,
textarea:disabled,
select:disabled {
cursor: not-allowed;
background-color: var(--disabled);
}
input[type="range"] {
padding: 0;
}
/* Set the cursor to '?' while hovering over an abbreviation */
abbr {
cursor: help;
}
button:focus,
button:enabled:hover,
[role="button"]:focus,
[role="button"]:not([aria-disabled="true"]):hover,
input[type="submit"]:focus,
input[type="submit"]:enabled:hover,
input[type="reset"]:focus,
input[type="reset"]:enabled:hover,
input[type="button"]:focus,
input[type="button"]:enabled:hover,
input[type="checkbox"]:focus,
input[type="checkbox"]:enabled:hover,
input[type="radio"]:focus,
input[type="radio"]:enabled:hover {
filter: brightness(1.4);
cursor: pointer;
}
/* Format the expanding box */
details {
background: var(--accent-bg);
border: 1px solid var(--border);
border-radius: 5px;
margin-bottom: 1rem;
}
summary {
cursor: pointer;
font-weight: bold;
padding: 0.6rem 1rem;
}
details[open] {
padding: 0.6rem 1rem 0.75rem 1rem;
}
details[open] summary {
margin-bottom: 0.5rem;
padding: 0;
}
details[open] > *:last-child {
margin-bottom: 0;
}
/* Format tables */
table {
border-collapse: collapse;
width: 100%;
margin: 1.5rem 0;
}
td,
th {
border: 1px solid var(--border);
text-align: left;
padding: 0.5rem;
}
th {
background: var(--accent-bg);
font-weight: bold;
}
tr:nth-child(even) {
/* Set every other cell slightly darker. Improves readability. */
background: var(--accent-bg);
}
table caption {
font-weight: bold;
margin-bottom: 0.5rem;
}
/* Lists */
ol,
ul {
padding-left: 3rem;
}
/* Format forms */
textarea,
select,
input {
font-size: inherit;
font-family: inherit;
padding: 0.5rem;
margin-bottom: 0.5rem;
color: var(--text);
background: var(--bg);
border: 1px solid var(--border);
border-radius: 5px;
box-shadow: none;
box-sizing: border-box;
width: 60%;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
/* Add arrow to */
select {
background-image: linear-gradient(45deg, transparent 49%, var(--text) 51%),
linear-gradient(135deg, var(--text) 51%, transparent 49%);
background-position: calc(100% - 20px), calc(100% - 15px);
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
select[multiple] {
background-image: none !important;
}
/* checkbox and radio button style */
input[type="checkbox"],
input[type="radio"] {
vertical-align: bottom;
position: relative;
}
input[type="radio"] {
border-radius: 100%;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
background: var(--accent);
}
input[type="checkbox"]:checked::after {
/* Creates a rectangle with colored right and bottom borders which is rotated to look like a check mark */
content: " ";
width: 0.1em;
height: 0.25em;
border-radius: 0;
position: absolute;
top: 0.05em;
left: 0.18em;
background: transparent;
border-right: solid var(--bg) 0.08em;
border-bottom: solid var(--bg) 0.08em;
font-size: 1.8em;
transform: rotate(45deg);
}
input[type="radio"]:checked::after {
/* creates a colored circle for the checked radio button */
content: " ";
width: 0.25em;
height: 0.25em;
border-radius: 100%;
position: absolute;
top: 0.125em;
background: var(--bg);
left: 0.125em;
font-size: 32px;
}
/* Make the textarea wider than other inputs */
textarea {
width: 80%;
}
/* Makes input fields wider on smaller screens */
@media only screen and (max-width: 720px) {
textarea,
select,
input {
width: 100%;
}
}
/* Ensures the checkbox and radio inputs do not have a set width like other input fields */
input[type="checkbox"],
input[type="radio"] {
width: auto;
}
/* do not show border around file selector button */
input[type="file"] {
border: 0;
}
/* Without this any HTML using <fieldset> shows ugly borders and has additional padding/margin. (Issue #3) */
fieldset {
border: 0;
padding: 0;
margin: 0;
}
/* Misc body elements */
hr {
color: var(--border);
border-top: 1px;
margin: 1rem auto;
}
mark {
padding: 2px 5px;
border-radius: 4px;
background: var(--marked);
}
main img,
main video {
max-width: 100%;
height: auto;
border-radius: 5px;
}
figure {
margin: 0;
}
figcaption {
font-size: 0.9rem;
color: var(--text-light);
text-align: center;
margin-bottom: 1rem;
}
blockquote {
margin: 2rem 0 2rem 2rem;
padding: 0.4rem 0.8rem;
border-left: 0.35rem solid var(--accent);
opacity: 0.8;
font-style: italic;
}
cite {
font-size: 0.9rem;
color: var(--text-light);
font-style: normal;
}
/* Use mono font for code like elements */
code,
pre,
pre span,
kbd,
samp {
font-size: 1.075rem;
font-family: var(--mono-font);
color: var(--code);
}
kbd {
color: var(--preformatted);
border: 1px solid var(--preformatted);
border-bottom: 3px solid var(--preformatted);
border-radius: 5px;
padding: 0.1rem;
}
pre {
padding: 1rem 1.4rem;
max-width: 100%;
overflow: auto;
overflow-x: auto;
color: var(--preformatted);
background: var(--accent-bg);
border: 1px solid var(--border);
border-radius: 5px;
}
/* Fix embedded code within pre */
pre code {
color: var(--preformatted);
background: none;
margin: 0;
padding: 0;
}

1
nomdedom/dependances/simple.css/simple-v1.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

545
nomdedom/dependances/simple.css/simple.css Normal file
View File

@ -0,0 +1,545 @@
/* Global variables. */
:root {
/* Set sans-serif & mono fonts */
--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
"Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica,
"Helvetica Neue", sans-serif;
--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
/* Default (light) theme */
--bg: #fff;
--accent-bg: #f5f7ff;
--text: #212121;
--text-light: #585858;
--border: #d8dae1;
--accent: #0d47a1;
--code: #d81b60;
--preformatted: #444;
--marked: #ffdd33;
--disabled: #efefef;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: #212121;
--accent-bg: #2b2b2b;
--text: #dcdcdc;
--text-light: #ababab;
--border: #666;
--accent: #ffb300;
--code: #f06292;
--preformatted: #ccc;
--disabled: #111;
}
/* Add a bit of transparancy so light media isn't so glaring in dark mode */
img,
video {
opacity: 0.8;
}
}
html {
/* Set the font globally */
font-family: var(--sans-font);
scroll-behavior: smooth;
}
/* Make the body a nice central block */
body {
color: var(--text);
background: var(--bg);
font-size: 1.15rem;
line-height: 1.5;
display: grid;
grid-template-columns:
1fr min(45rem, 90%) 1fr;
margin: 0;
}
body>* {
grid-column: 2;
}
/* Make the header bg full width, but the content inline with body */
body > header {
background: var(--accent-bg);
border-bottom: 1px solid var(--border);
text-align: center;
padding: 0 0.5rem 2rem 0.5rem;
grid-column: 1 / -1;
box-sizing: border-box;
}
body > header h1 {
max-width: 1200px;
margin: 1rem auto;
}
body > header p {
max-width: 40rem;
margin: 1rem auto;
}
/* Add a little padding to ensure spacing is correct between content and nav */
main {
padding-top: 1.5rem;
}
body > footer {
margin-top: 4rem;
padding: 2rem 1rem 1.5rem 1rem;
color: var(--text-light);
font-size: 0.9rem;
text-align: center;
border-top: 1px solid var(--border);
}
/* Format headers */
h1 {
font-size: 3rem;
}
h2 {
font-size: 2.6rem;
margin-top: 3rem;
}
h3 {
font-size: 2rem;
margin-top: 3rem;
}
h4 {
font-size: 1.44rem;
}
h5 {
font-size: 1.15rem;
}
h6 {
font-size: 0.96rem;
}
/* Fix line height when title wraps */
h1,
h2,
h3 {
line-height: 1.1;
}
/* Reduce header size on mobile */
@media only screen and (max-width: 720px) {
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2.1rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1.25rem;
}
}
/* Format links & buttons */
a,
a:visited {
color: var(--accent);
}
a:hover {
text-decoration: none;
}
button,
[role="button"],
input[type="submit"],
input[type="reset"],
input[type="button"] {
border: none;
border-radius: 5px;
background: var(--accent);
font-size: 1rem;
color: var(--bg);
padding: 0.7rem 0.9rem;
margin: 0.5rem 0;
}
button[disabled],
[role="button"][aria-disabled="true"],
input[type="submit"][disabled],
input[type="reset"][disabled],
input[type="button"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][disabled],
select[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
input:disabled,
textarea:disabled,
select:disabled {
cursor: not-allowed;
background-color: var(--disabled);
}
input[type="range"] {
padding: 0;
}
/* Set the cursor to '?' while hovering over an abbreviation */
abbr {
cursor: help;
}
button:focus,
button:enabled:hover,
[role="button"]:focus,
[role="button"]:not([aria-disabled="true"]):hover,
input[type="submit"]:focus,
input[type="submit"]:enabled:hover,
input[type="reset"]:focus,
input[type="reset"]:enabled:hover,
input[type="button"]:focus,
input[type="button"]:enabled:hover {
filter: brightness(1.4);
cursor: pointer;
}
/* Format navigation */
header > nav {
font-size: 1rem;
line-height: 2;
padding: 1rem 0 0 0;
}
/* Use flexbox to allow items to wrap, as needed */
header > nav ul,
header > nav ol {
align-content: space-around;
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
list-style-type: none;
margin: 0;
padding: 0;
}
/* List items are inline elements, make them behave more like blocks */
header > nav ul li,
header > nav ol li {
display: inline-block;
}
header > nav a,
header > nav a:visited {
margin: 0 1rem 1rem 0;
border: 1px solid var(--border);
border-radius: 5px;
color: var(--text);
display: inline-block;
padding: 0.1rem 1rem;
text-decoration: none;
}
header > nav a:hover {
color: var(--accent);
border-color: var(--accent);
}
header > nav a:last-child {
margin-right: 0;
}
/* Reduce nav side on mobile */
@media only screen and (max-width: 720px) {
header > nav a {
border: none;
padding: 0;
color: var(--accent);
text-decoration: underline;
line-height: 1;
}
}
aside {
width: 30%;
padding: 0 15px;
margin-left: 15px;
float: right;
background: var(--accent-bg);
border: 1px solid var(--border);
border-radius: 5px;
}
article {
border: 1px solid var(--border);
padding: 1rem;
border-radius: 5px;
}
article h2:first-child,
section h2:first-child {
margin-top: 1rem;
}
section {
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 2rem 1rem;
margin: 3rem 0;
}
/* Format the expanding box */
details {
background: var(--accent-bg);
border: 1px solid var(--border);
border-radius: 5px;
margin-bottom: 1rem;
}
summary {
cursor: pointer;
font-weight: bold;
padding: 0.6rem 1rem;
}
details[open] {
padding: 0.6rem 1rem 0.75rem 1rem;
}
details[open] summary + * {
margin-top: 0;
}
details[open] summary {
margin-bottom: 0.5rem;
padding: 0;
}
details[open] > *:last-child {
margin-bottom: 0;
}
/* Format tables */
table {
border-collapse: collapse;
display: block;
margin: 1.5rem 0;
overflow: auto;
width: 100%;
}
td,
th {
border: 1px solid var(--border);
text-align: left;
padding: 0.5rem;
}
th {
background: var(--accent-bg);
font-weight: bold;
}
tr:nth-child(even) {
/* Set every other cell slightly darker. Improves readability. */
background: var(--accent-bg);
}
table caption {
font-weight: bold;
margin-bottom: 0.5rem;
}
/* Format forms */
textarea,
select,
input {
font-size: inherit;
font-family: inherit;
padding: 0.5rem;
margin-bottom: 0.5rem;
color: var(--text);
background: var(--bg);
border: 1px solid var(--border);
border-radius: 5px;
box-shadow: none;
box-sizing: border-box;
width: 60%;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
/* Add arrow to drop-down */
select {
background-image: linear-gradient(45deg, transparent 49%, var(--text) 51%),
linear-gradient(135deg, var(--text) 51%, transparent 49%);
background-position: calc(100% - 20px), calc(100% - 15px);
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
select[multiple] {
background-image: none !important;
}
/* checkbox and radio button style */
input[type="checkbox"],
input[type="radio"] {
vertical-align: middle;
position: relative;
}
input[type="radio"] {
border-radius: 100%;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
background: var(--accent);
}
input[type="checkbox"]:checked::after {
/* Creates a rectangle with colored right and bottom borders which is rotated to look like a check mark */
content: " ";
width: 0.1em;
height: 0.25em;
border-radius: 0;
position: absolute;
top: 0.05em;
left: 0.18em;
background: transparent;
border-right: solid var(--bg) 0.08em;
border-bottom: solid var(--bg) 0.08em;
font-size: 1.8em;
transform: rotate(45deg);
}
input[type="radio"]:checked::after {
/* creates a colored circle for the checked radio button */
content: " ";
width: 0.25em;
height: 0.25em;
border-radius: 100%;
position: absolute;
top: 0.125em;
background: var(--bg);
left: 0.125em;
font-size: 32px;
}
/* Make the textarea wider than other inputs */
textarea {
width: 80%;
}
/* Makes input fields wider on smaller screens */
@media only screen and (max-width: 720px) {
textarea,
select,
input {
width: 100%;
}
}
/* Ensures the checkbox and radio inputs do not have a set width like other input fields */
input[type="checkbox"],
input[type="radio"] {
width: auto;
}
/* do not show border around file selector button */
input[type="file"] {
border: 0;
}
/* Misc body elements */
hr {
color: var(--border);
border-top: 1px;
margin: 1rem auto;
}
mark {
padding: 2px 5px;
border-radius: 4px;
background: var(--marked);
}
main img,
main video {
max-width: 100%;
height: auto;
border-radius: 5px;
}
figure {
margin: 0;
text-align: center;
}
figcaption {
font-size: 0.9rem;
color: var(--text-light);
margin-bottom: 1rem;
}
blockquote {
margin: 2rem 0 2rem 2rem;
padding: 0.4rem 0.8rem;
border-left: 0.35rem solid var(--accent);
color: var(--text-light);
font-style: italic;
}
cite {
font-size: 0.9rem;
color: var(--text-light);
font-style: normal;
}
/* Use mono font for code elements */
code,
pre,
pre span,
kbd,
samp {
font-family: var(--mono-font);
color: var(--code);
}
kbd {
color: var(--preformatted);
border: 1px solid var(--preformatted);
border-bottom: 3px solid var(--preformatted);
border-radius: 5px;
padding: 0.1rem 0.4rem;
}
pre {
padding: 1rem 1.4rem;
max-width: 100%;
overflow: auto;
color: var(--preformatted);
background: var(--accent-bg);
border: 1px solid var(--border);
border-radius: 5px;
}
/* Fix embedded code within pre */
pre code {
color: var(--preformatted);
background: none;
margin: 0;
padding: 0;
}

1
nomdedom/dependances/simple.css/simple.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

243
nomdedom/index.html Normal file
View File

@ -0,0 +1,243 @@
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titre de la page de travail | Labo html</title>
<meta name="keywords" content="">
<meta name="description" content="" />
<meta name="robots" content="archive,index,follow" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="dependances/simple.css/simple.min.css" rel="stylesheet" type="text/css" />
<link href="dependances/fork-awesome/css/fork-awesome.min.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="" />
</head>
<body>
<section id=head>
<h1>Titre principal de ma page (setction head, h1)</h1>
<h2>Titre secondaire de ma page - (section head, h2)</h2>
<h3>Titre ternaire de ma page - (section head, h3)</h3>
</section><!-- end #head -->
<hr class=title>
<nav id=menu>
<a href="#" class="button"><i class="fa fa-info"></i>Une entrée du menu avec icone</a>
<a href="#" class="button"><i class="fa fa-gnu"></i>Une entrée du menu avec icone</a>
<a href="#" class="button"><i class="fa fa-info"></i>Une entrée du menu avec icone</a>
</nav>
<nav id="menu-secondaire">
<ul>
<li>
<h3>Pages ul-li-h3</h3>
<ul>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
</ul>
</li>
<li>
<h3>Catégories ul-li-h3</h3>
<ul>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
</ul>
</li>
<li>
<h3>Blogroll ul-li-h3</h3>
<ul>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
</ul>
</li>
<li>
<h3>Social ul-li-h3</h3>
<ul>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
</ul>
</li>
<li>
<h3>Tags ul-li-h3</h3>
<ul>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
<li><a href="#">Lien ul-li</a></li>
</ul>
</li>
</ul>
<section class="content">
<h1>An h1 header</h1>
<p>Paragraphs are separated by a blank line.</p>
<p>2nd paragraph. <em>Italic</em>, <strong>bold</strong>, and <code>monospace</code>. Itemized lists
look like:</p>
<ul>
<li>this one</li>
<li>that one</li>
<li>the other one</li>
</ul>
<p>Note that --- not considering the asterisk --- the actual text
content starts at 4-columns in.</p>
<blockquote>
<p>Block quotes are
written like so.</p>
<p>They can span multiple paragraphs,
if you like.</p>
</blockquote>
<p>Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all
in chapters 12--14"). Three dots ... will be converted to an ellipsis.
Unicode is supported. ☺</p>
<h2>An h2 header</h2>
<p>Here's a numbered list:</p>
<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
<p>Note again how the actual text starts at 4 columns in (4 characters
from the left side). Here's a code sample:</p>
<div class="highlight"><pre><span></span><span class="err"># Let me re-iterate ...</span>
<span class="err">for i in 1 .. 10 { do-something(i) }</span>
</pre></div>
<p>As you probably guessed, indented 4 spaces. By the way, instead of
indenting the block, you can use delimited blocks, if you like:</p>
<div class="highlight"><pre><span></span><span class="err">define foobar() {</span>
<span class="err"> print "Welcome to flavor country!";</span>
<span class="err">}</span>
</pre></div>
<p>(which makes copying &amp; pasting easier). You can optionally mark the
delimited block for Pandoc to syntax highlight it:</p>
<div class="highlight"><pre><span></span><span class="kn">import</span> <span class="nn">time</span>
<span class="c1"># Quick, count to ten!</span>
<span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="mi">10</span><span class="p">):</span>
<span class="c1"># (but not *too* quick)</span>
<span class="n">time</span><span class="o">.</span><span class="n">sleep</span><span class="p">(</span><span class="mf">0.5</span><span class="p">)</span>
<span class="nb">print</span> <span class="n">i</span>
</pre></div>
<h3>An h3 header</h3>
<p>Now a nested list:</p>
<ol>
<li>
<p>First, get these ingredients:</p>
<ul>
<li>carrots</li>
<li>celery</li>
<li>lentils</li>
</ul>
</li>
<li>
<p>Boil some water.</p>
</li>
<li>
<p>Dump everything in the pot and follow
this algorithm:</p>
<div class="highlight"><pre><span></span><span class="err">find wooden spoon</span>
<span class="err">uncover pot</span>
<span class="err">stir</span>
<span class="err">cover pot</span>
<span class="err">balance wooden spoon precariously on pot handle</span>
<span class="err">wait 10 minutes</span>
<span class="err">goto first step (or shut off burner when done)</span>
</pre></div>
<p>Do not bump wooden spoon or it will fall.</p>
</li>
</ol>
<p>Notice again how text always lines up on 4-space indents (including
that last line which continues item 3 above).</p>
<p>Here's a link to <a href="http://foo.bar">a website</a>, to a <a href="local-doc.html">local
doc</a>, and to a <a href="#an-h2-header">section heading in the current
doc</a>. Here's a footnote <sup id="fnref:1"><a class="footnote-ref" href="#fn:1">1</a></sup>.</p>
<p>Tables can look like this:</p>
<p>size material color</p>
<hr>
<p>9 leather brown
10 hemp canvas natural
11 glass transparent</p>
<p>Table: Shoes, their sizes, and what they're made of</p>
<p>(The above is the caption for the table.) Pandoc also supports
multi-line tables:</p>
<hr>
<p>keyword text</p>
<hr>
<p>red Sunsets, apples, and
other red or reddish
things.</p>
<p>green Leaves, grass, frogs
and other things it's
not easy being.</p>
<hr>
<p>A horizontal rule follows.</p>
<hr>
<p>Here's a definition list:</p>
<dl>
<dt>apples</dt>
<dd>
<dl>
<dt>Good for making applesauce.</dt>
<dt>oranges</dt>
<dd>
<dl>
<dt>Citrus!</dt>
<dt>tomatoes</dt>
<dd>There's no "e" in tomatoe.</dd>
</dl>
</dd>
</dl>
</dd>
</dl>
<p>Again, text is indented 4 spaces. (Put a blank line between each
term/definition pair to spread things out more.)</p>
<p>Here's a "line block":</p>
<p>| Line one
| Line too
| Line tree</p>
<p>and images can be specified like so:</p>
<p><img alt="example image" src="example-image.jpg" title="An exemplary image"></p>
<p>Inline math equations go in like so: $\omega = d\phi / dt$. Display
math should get its own line and be put in in double-dollarsigns:</p>
<p>$$I = \int \rho R^{2} dV$$</p>
<p>And note that you can backslash-escape any punctuation characters
which you wish to be displayed literally, ex.: `foo`, *bar*, etc.</p>
<div class="footnote">
<hr>
<ol>
<li id="fn:1">
<p>Footnote text goes here.&nbsp;<a class="footnote-backref" href="#fnref:1" title="Jump back to footnote 1 in the text">↩</a>
</section><!-- end #content -->
<section id="footer">
<p>Proudly powered by <a href="#">rien du tout</a>, avec la participation de <a href="#">python</a>.
</section><!-- end #footer -->
</body>
</html>

1
nomdedom/simple.css Submodule

@ -0,0 +1 @@
Subproject commit f20d2852731bf7957dbeae2c886925a40fe2e6e4

3
space/README.md Normal file
View File

@ -0,0 +1,3 @@
# Space travel…
Sur https://fdossena.com/?p=home.frag il y a un effet de Space Travel que j'aime bien.