bachir
/
ola4doc


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
							<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="generator" content="pandoc">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <title></title>
  <style type="text/css">code{white-space: pre;}</style>
  <!--[if lt IE 9]>

    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>

  <![endif]-->
  <style type="text/css">

  @font-face {

    font-family: 'ola';

    src: url("fonts/ola/olasans-webfont.eot");

    src: url("fonts/ola/olasans-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/ola/olasans-webfont.woff2") format("woff2"), url("fonts/ola/olasans-webfont.woff") format("woff"), url("fonts/ola/olasans-webfont.ttf") format("truetype");

    font-weight: normal;

    font-style: normal; }

  

  /* Generated by Font Squirrel (https://www.fontsquirrel.com) on June 17, 2016 */

  @font-face {

    font-family: 'vollkorn';

    src: url("fonts/volkorn/vollkorn-bold-webfont.woff2") format("woff2"), url("fonts/volkorn/vollkorn-bold-webfont.woff") format("woff");

    font-weight: bold;

    font-style: normal; }

  

  @font-face {

    font-family: 'vollkorn';

    src: url("fonts/volkorn/vollkorn-bolditalic-webfont.woff2") format("woff2"), url("fonts/volkorn/vollkorn-bolditalic-webfont.woff") format("woff");

    font-weight: bold;

    font-style: italic; }

  

  @font-face {

    font-family: 'vollkorn';

    src: url("fonts/volkorn/vollkorn-italic-webfont.woff2") format("woff2"), url("fonts/volkorn/vollkorn-italic-webfont.woff") format("woff");

    font-weight: normal;

    font-style: italic; }

  

  @font-face {

    font-family: 'vollkorn';

    src: url("fonts/volkorn/vollkorn-regular-webfont.woff2") format("woff2"), url("fonts/volkorn/vollkorn-regular-webfont.woff") format("woff");

    font-weight: normal;

    font-style: normal; }

  

  body {

    font-family: 'vollkorn',sans-serif;

    max-width: 100%;

    height: 100%;

    margin: 30px 0;

    font-size: 14px; }

  

  h1, h2, h3, h4, h5, h6 {

    font-family: 'ola',sans-serif;

    margin: 0; }

  

  #main h1, #main h2 {

    border: 2px solid #000;

    padding: 5px;

    display: inline-block;

    position: absolute; }

  

  #main h1 {

    padding: 5px 1rem;

    top: 100px;

    white-space: nowrap; }

  

  #main h2 {

    top: 0;

    white-space: nowrap;

    padding: 5px 1rem;

    font-size: 1rem; }

  

  p {

    font-size: 1.5em; }

  

  ul {

    margin: 0;

    padding: 0; }

  

  li {

    list-style: none; }

  

  img {

    max-width: 100%; }

  

  code {

    border: 1px solid #000;

    padding: 5px; }

  

  header#header {

    width: 18%;

    min-width: 200px;

    position: fixed;

    padding: 0 1rem; }

    header#header h1 {

      font-size: 1rem;

      border-bottom: 2px solid #000;

      margin-bottom: 1em; }

    header#header #menu li p {

      margin-top: 0;

      margin-bottom: 0.2em;

      font-size: 1em; }

    header#header #menu li a {

      color: #000; }

  

  div.user {

    position: relative;

    width: 55%;

    max-width: 800px;

    margin: 0 auto 5rem auto; }

    div.user header {

      min-height: 200px; }

    div.user .content {

      border: 2px solid #000;

      padding: 1rem;

      width: 100%;

      margin-bottom: 2rem; }

    div.user section.images ul {

      width: 105%; }

      div.user section.images ul li {

        line-height: 0;

        margin: 1rem 0;

        border: 2px solid #000; }

        div.user section.images ul li img {

          max-width: 100%;

          width: 100%; }

    div.user p img {

      border: none; }

  

  @media print {

    @page {

      margin: 1cm;

      size: A4; }

    div.user {

      width: 17cm;

      margin-top: 2cm;

      page-break-after: always;

      max-width: 19cm; }

      div.user p, div.user code {

        page-break-inside: avoid; }

      div.user section.images ul li {

        page-break-inside: avoid;

        margin-top: 1cm; } }

  

  </style>
</head>
<body>
<header id='header'>
<h1 id="ola3-documentation">OLA#3 Documentation</h1>
<p><nav id='menu'></p>
<ul>
<li><a href="#content/model">content/model</a></li>
</ul>
<p></nav></p>
</header>
<section id='main'>
<div id='content/model' class='user'>
<section class='content'>
<h1 id="le-nom-de-mon-animatique">Le nom de mon animatique</h1>
<h2 id="monprenom-monnom">Monprenom Monnom</h2>
<p>à partir d'ici vous pouvez écrire le texte de description de votre projet d'aniamtique</p>
<p><img src="images/model-00.jpg" alt="" /></p>
<p>Pour insérer des images, comme des shoot écrans de votre travail, commencez par les déposer dans le dossier images de votre dossier perso<br />
puis ajouter cette ligne:</p>
<pre><code>!images/nomdemonimage.jpeg!</code></pre>
<p>Toutes les images seront insérez automatiquement a la fin de votre description dans la documentation finale, sauf celle ajouté manuellement dans le texte.</p>
</section>
<section class='images'>
<ul>
<li><img src="images/model-01.jpg" alt="" /></li>
</ul>
</section>
<section class='sources'>
</section>
</div>
<div class="pagebreak">
</div>
</section>
<script src="bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.line/jquery.line.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
</body>
</html>