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>