disposition + bouts de computhings + grid
This commit is contained in:
parent
6f7f2fd9ba
commit
a6c649d54d
GPG Key ID:
56BF2A3A07DDEB1F
|
|
@ -0,0 +1,165 @@
|
|||
|
||||
|
||||
body {
|
||||
background-color: #020202;
|
||||
color: turquoise;
|
||||
display: grid;
|
||||
column-gap: 1vw;
|
||||
row-gap: 1vw;
|
||||
}
|
||||
|
||||
footer {
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: turquoise;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
to {
|
||||
--angle: 360deg;
|
||||
}
|
||||
}
|
||||
|
||||
.boite {
|
||||
word-wrap: break-word;
|
||||
padding: 1vw;
|
||||
border: 3px solid;
|
||||
border-image-slice: 1;
|
||||
border-image-source: linear-gradient(to right, #3d102d, #020202);
|
||||
}
|
||||
|
||||
.boite-contenu-principal {
|
||||
grid-column-start: 2;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 10;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.boite-nav-principale {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 1;
|
||||
border-image-source: linear-gradient(to left, #3d102d, #020202);
|
||||
}
|
||||
|
||||
.boite-nav-secondaire {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 2;
|
||||
border-image-source: linear-gradient(to left, #3d102d, #020202);
|
||||
}
|
||||
|
||||
.boite-reseaux {
|
||||
grid-column-start: 4;
|
||||
grid-row-start: 1;
|
||||
}
|
||||
|
||||
.boite-metadonnees {
|
||||
grid-column-start: 4;
|
||||
grid-row-start: 2;
|
||||
}
|
||||
|
||||
.boite-images {
|
||||
grid-column-start: 4;
|
||||
grid-row-start: 3;
|
||||
}
|
||||
|
||||
.boite-fichiers {
|
||||
grid-column-start: 4;
|
||||
grid-row-start: 4;
|
||||
}
|
||||
|
||||
.boite-references {
|
||||
grid-column-start: 4;
|
||||
grid-row-start: 5;
|
||||
border-image: linear-gradient(var(--angle), #743ad5, #d53a9d) 1;
|
||||
animation: 1s rotate linear infinite;
|
||||
}
|
||||
|
||||
.boite-images img {
|
||||
max-height: fit-content;
|
||||
max-width: fit-content;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
|
||||
body {
|
||||
background-color: #020202;
|
||||
color: turquoise;
|
||||
display: grid;
|
||||
row-gap: 1vw;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.boite-nav-principale {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 1;
|
||||
}
|
||||
|
||||
.boite-nav-secondaire {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 2;
|
||||
}
|
||||
|
||||
.boite-contenu-principal {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 3;
|
||||
grid-row-end: 3;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.boite-contenu-principal {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 4;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.boite-reseaux {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 5;
|
||||
}
|
||||
|
||||
.boite-metadonnees {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 6;
|
||||
}
|
||||
|
||||
.boite-images {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 7;
|
||||
}
|
||||
|
||||
.boite-fichiers {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 8;
|
||||
}
|
||||
|
||||
.boite-references {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 9;
|
||||
}
|
||||
|
||||
footer {
|
||||
grid-column-start: 1;
|
||||
grid-row-start: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
body {
|
||||
background-color: black;
|
||||
color: turquoise;
|
||||
display: grid;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: turquoise;
|
||||
}
|
||||
|
||||
.box-row-reverse {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.box-flex-wrap {
|
||||
width: var(--petite-colonne);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
}
|
||||
|
||||
.box-space-between {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.box-row-reverse div, .box-flex-wrap div, .box-space-between div {
|
||||
padding: 10px;
|
||||
border-style:solid;
|
||||
border-radius: 5px;
|
||||
border-color: turquoise;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
deux fichiers
|
||||
|
|
@ -0,0 +1 @@
|
|||
un fichier
|
||||
|
|
@ -0,0 +1,246 @@
|
|||
<!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/grid.css" rel="stylesheet" type="text/css" />
|
||||
<link href="css/side-menu.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 id="layout">
|
||||
<!-- Menu toggle -->
|
||||
<a href="#menu" id="menuLink" class="menu-link">
|
||||
<!-- Hamburger icon -->
|
||||
<span></span>
|
||||
</a>
|
||||
<section id="menu">
|
||||
<div class="boite boite-nav-principale">
|
||||
<h1>BOITE NAV PRINCIPALE</h1>
|
||||
<div>One</div>
|
||||
<div>Two</div>
|
||||
<div>Three
|
||||
<br>has
|
||||
<br>extra
|
||||
<br>text
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="boite boite-nav-secondaire">
|
||||
<h1>BOITE NAV SECONDAIRE</h1>
|
||||
<div>One</div>
|
||||
<div>Two</div>
|
||||
<div>Three
|
||||
<br>has
|
||||
<br>extra
|
||||
<br>text
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="boite boite-reseaux">
|
||||
<h1>BOITE RÉSEAUX</h1>
|
||||
<div>Masto</div>
|
||||
<div>Oiseau bleau</div>
|
||||
<div>Face
|
||||
<br>de
|
||||
<br>bouque
|
||||
<br>qui pue
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="boite boite-metadonnees">
|
||||
<h1>BOITE METADONNÉES</h1>
|
||||
<div>2022/12/31</div>
|
||||
<div>Auteur</div>
|
||||
<ul>Mots clés
|
||||
<li>banane</li>
|
||||
<li>batate</li>
|
||||
<li>carotte</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="boite boite-images">
|
||||
<h1>BOITE IMAGES</h1>
|
||||
<img src="/disposition/images/un.png" alt="Visage n°1">
|
||||
<img src="/disposition/images/deux.png" alt="Visage n°2">
|
||||
<img src="/disposition/images/trois.png" alt="Visage n°3">
|
||||
</div>
|
||||
|
||||
<div class="boite boite-fichiers">
|
||||
<h1>BOITE FICHIERS</h1>
|
||||
<a href="/disposition/fichiers/un.txt">Un fichier</a>
|
||||
<a href="/disposition/fichiers/deux.txt">Un autre fichier</a>
|
||||
</div>
|
||||
|
||||
<div class="boite boite-references">
|
||||
<h1>BOITE REFERENCES</h1>
|
||||
<a href="#">Une url</a>
|
||||
<a href="#">Une autre url</a>
|
||||
<p>Titre d'un ouvrage, date, auteur, p.42</p>
|
||||
</div>
|
||||
|
||||
<div id="main" class="boite boite-contenu-principal">
|
||||
<article>
|
||||
<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 & 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. <a class="footnote-backref" href="#fnref:1" title="Jump back to footnote 1 in the text">↩</a>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
|
||||
<p><i class="fa fa-copyright fa-flip-horizontal"></i></i> Proudly powered by <a href="#">html & css</a>, avec la participation des <a href="#">gnuragistes</a>.
|
||||
|
||||
</footer><!-- end #footer -->
|
||||
<script src="js/ui.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 260 KiB |
|
|
@ -0,0 +1,146 @@
|
|||
<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>
|
||||
|
||||
<div class="box-row-reverse">
|
||||
<div>One</div>
|
||||
<div>Two</div>
|
||||
<div>Three
|
||||
<br>has
|
||||
<br>extra
|
||||
<br>text
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-row-reverse">
|
||||
<div> what the fuck</div>
|
||||
<div> is happening</div>
|
||||
<div> in the Univers ?</div>
|
||||
</div>
|
||||
|
||||
<div class="box-flex-wrap">
|
||||
<div>One</div>
|
||||
<div>Two</div>
|
||||
<div>Three
|
||||
<br>has
|
||||
<br>extra
|
||||
<br>text
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-flex-wrap">
|
||||
<div> what the fuck</div>
|
||||
<div> is happening</div>
|
||||
<div> in the Univers ?</div>
|
||||
</div>
|
||||
|
||||
<div class="box-space-between">
|
||||
<div>One</div>
|
||||
<div>Two</div>
|
||||
<div>Three
|
||||
<br>has
|
||||
<br>extra
|
||||
<br>text
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-space-between">
|
||||
<div> what the fuck</div>
|
||||
<div> is happening</div>
|
||||
<div> in the Univers ?</div>
|
||||
</div>
|
||||
|
||||
<header>
|
||||
<div id="text">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div id="logo">
|
||||
<img src="images/logo.png">
|
||||
</div>
|
||||
|
||||
<div id="social">
|
||||
<a href="#"><i class="fa fa-mastodon fa-2x"></i></a>
|
||||
<a href="#"><i class="fa fa-twitter fa-2x"></i></a>
|
||||
<a href="#"><i class="fa fa-facebook fa-2x"></i></a>
|
||||
</div>
|
||||
</header><!-- end #head -->
|
||||
|
||||
<nav id=menu>
|
||||
<a href="#"><i class="fa fa-info"></i>Une entrée du menu avec icone</a>
|
||||
<a href="#"><i class="fa fa-gnu"></i>Une entrée du menu avec icone</a>
|
||||
<a href="#"><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>
|
||||
</nav>
|
||||
|
||||
|
||||
<footer>
|
||||
|
||||
<p><i class="fa fa-copyright fa-flip-horizontal"></i></i> Proudly powered by <a href="#">html & css</a>, avec la participation des <a href="#">gnuragistes</a>.
|
||||
|
||||
</footer><!-- end #footer -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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));
|
||||
|
|
@ -48,7 +48,13 @@ footer {
|
|||
<body>
|
||||
<section id="page">
|
||||
<header>En-tête</header>
|
||||
<nav>Navigation</nav>
|
||||
<nav>
|
||||
<h1>Navigation</h1>
|
||||
<ul>
|
||||
<li><a href="/grid/">Index Grid</a></li>
|
||||
<li><a href="/grid/2test.html">Page de test n°2</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main>Zone principale</main>
|
||||
<footer>Bas de page</footer>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -63,52 +63,48 @@
|
|||
|
||||
@media screen and (max-width: 900px){
|
||||
|
||||
.container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#one {
|
||||
grid-column: 1 / 5;
|
||||
grid-row: 1/ 1;
|
||||
background-color: gold;
|
||||
}
|
||||
|
||||
#two {
|
||||
grid-column: 1 / 1;
|
||||
grid-row: 2 / 2;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#three {
|
||||
grid-column: 1 / 1;
|
||||
grid-row: 3 / 3;
|
||||
background-color: darkred;
|
||||
}
|
||||
|
||||
#four {
|
||||
grid-column: 2 / 2;
|
||||
grid-row: 3 / 3;
|
||||
background-color: fuchsia;
|
||||
}
|
||||
|
||||
#five {
|
||||
grid-column: 3 / 3;
|
||||
grid-row: 3 / 3;
|
||||
background-color: turquoise;
|
||||
}
|
||||
|
||||
#six {
|
||||
grid-column: 4 / 4;
|
||||
grid-row: 3 / 3;
|
||||
background-color: rebeccapurple;
|
||||
}
|
||||
|
||||
#seven {
|
||||
grid-column: 2 / 4;
|
||||
grid-row: 2 / 2;
|
||||
background-color: darkolivegreen;
|
||||
}
|
||||
|
||||
#eight {
|
||||
grid-column: 5 / 5;
|
||||
grid-row: 3 / 3;
|
||||
background-color: coral;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -118,7 +114,13 @@
|
|||
<body>
|
||||
|
||||
<section class="container">
|
||||
<div id="one">1</div>
|
||||
<div id="one">
|
||||
<h1>One</h1>
|
||||
<ul>
|
||||
<li><a href="/grid/">Index Grid</a></li>
|
||||
<li><a href="/grid/1test.html">Page de test n°1</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="two">2</div>
|
||||
<div id="three">3</div>
|
||||
<div id="four">4</div>
|
||||
|
|
|
|||
|
|
@ -48,8 +48,8 @@
|
|||
<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="/grid/1test.html">Page de test n°1</a></li>
|
||||
<li><a href="/grid/2test.html">Page de test n°2</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>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,9 @@
|
|||
<li>
|
||||
<a href="default/">sans css, ni rien.</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="disposition/">Pour explorer flex, box, etc avec des div.</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="gnuragistes/">utilisé par Gnuragistes (rien)</a>
|
||||
</li>
|
||||
|
|
@ -29,6 +32,9 @@
|
|||
<li>
|
||||
<a href="space/">pas encore fait.</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="viewport/">Pour exlporer les tailles relatives au ViewPort</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
body {
|
||||
font-size: 2vw;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
|
||||
body {
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,241 @@
|
|||
<!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 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 & 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. <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>
|
||||
Loading…
Reference in New Issue