Commit 88c5318d authored by alexandre's avatar alexandre

Merge branch 'master' of git.constantvzw.org:osp.work.medor.maquette

parents d7e3c31a fc1696ef
......@@ -6,6 +6,7 @@
*/
/* Loads the base variables such as page size and margins. */
@import "setup.less";
......
#flow-decheance { .flow-into(flowDecheance); }
.flow-decheance { .flow-from(flowDecheance); }
#flow-decheance h1 {
-webkit-region-break-after: always;
}
#flow-utopie { .flow-into(flowUtopie); }
.flow-utopie { .flow-from(flowUtopie); }
#flow-utopie h1 {
-webkit-region-break-after: always;
}
#flow-claise { .flow-into(flowClaise); }
.flow-claise { .flow-from(flowClaise); }
#flow-claise h1 {
-webkit-region-break-after: always;
}
......@@ -6,7 +6,6 @@
.page { text-rendering: optimizeLegibility; }
/*
* Styles génériques
* -----------------
......@@ -16,94 +15,120 @@ body {
font-family: "Century Schoolbook", serif;
font-size: 9pt;
line-height: 12pt;
letter-spacing: .025em;
}
.bloc {
color:yellow;
}
h1,
h2,
h3 {
margin-top: 0;
margin-bottom: 0;
-webkit-break-inside: avoid-region;
-webkit-break-inside: avoid-region;
}
h1 {
margin-top: 0;
margin-bottom: 0;
font-family: "Bagnard";
font-size: 44pt;
line-height: 6pt * 7;
letter-spacing: -.05em;
font-weight: normal;
}
p { margin: 0; }
h2 {
float: left;
p + p { text-indent: 6pt; }
em { font-style: italic; }
margin: 0 6pt 0 0 ;
.exergue {
font-family: "Erbar condensed";
font-weight: bold;
font-size: 9.4pt;
line-height: 6pt * 2;
text-transform: uppercase;
font-size: 20pt;
line-height: 6pt * 3;
margin-top: 6pt;
margin-bottom: 6pt;
}
p { margin: 0; }
p + p { text-indent: 6pt; }
p:first-of-type::first-letter {
/*
* Styles enquêtes
* -----------------
*/
.enquete h1 {
font-family: "Erbar condensed";
font-weight: bold;
/*font-size: 12pt * 4;*/
-webkit-initial-letter: 4;
initial-letter: 4;
/*float: left;*/
/*line-height: 12pt * 3;*/
/*margin-right: 6pt;*/
font-size: 54pt;
line-height: 6pt * 9;
text-transform: uppercase;
}
.enquete h2 {
font-family: "Erbar condensed";
font-weight: bold;
font-size: 15pt;
line-height: 6pt * 3;
text-transform: uppercase;
margin-top: 12pt;
}
/*a { */
/*text-decoration: none;*/
/*color: rgba(177, 69, 66, 255);*/
/*}*/
em { font-style: italic; }
/*ul {*/
/*list-style-type: none;*/
/*padding-left: 1.25em;*/
/*}*/
/*ul li { position: relative; }*/
.enquete .chapeau {
font-family: "Bagnard";
font-size: 15pt;
line-height: 6pt * 3;
-webkit-region-break-after: always;
}
/*ul li:before {*/
/*content: "—";*/
/*width: 1.25em;*/
/*display: block;*/
/*position: absolute;*/
/*left: -1.25em;*/
/*}*/
.enquete figure {
border:3px solid red;
display: block;
margin-top: 6pt;
margin-bottom: 6pt;
}
/*ol { padding-left: 1.25em; }*/
/*
* Styles interview
* -----------------
*/
/*li { margin-top: 9.75pt; }*/
.interview b {
font-family: "Century Schoolbook";
font-style: italic;
}
.interview h1 {
font-family: "Century Schoolbook";
font-size: 45pt;
line-height: 6pt * 6;
}
.interview .chapeau {
font-family: "Century Schoolbook";
font-size: 14pt;
line-height: 6pt * 3;
-webkit-region-break-after: always;
}
/*pre { white-space: pre; }*/
/*code { font-family: "DOS"; }*/
// Pour les footnotes
/*hr { display: none; }*/
/*
* Styles rubriques
* -----------------
*/
/*figure { text-align: center; }*/
.rubrique h1 {
margin-top: 0;
margin-bottom: 0;
font-family: "Bagnard";
font-size: 44pt;
line-height: 6pt * 7;
font-weight: normal;
}
/*img { max-width: 100%; }*/
.rubrique h2 {
float: left;
/*pre { overflow: hidden; }*/
margin: 0 6pt 0 0;
/*sup { line-height: 0; vertical-align: -0.1em; }*/
font-family: "Erbar condensed";
font-weight: bold;
font-size: 9.4pt;
line-height: 6pt * 2;
text-transform: uppercase;
}
<!DOCTYPE HTML>
<html lang="en" class="normal">
<head>
<meta charset="utf-8">
<title>Title of the document</title>
<!-- STYLESHEETS -->
<link rel="stylesheet" href="assets/components/normalize.css/normalize.css">
<link rel="stylesheet" href="assets/components/normalize-opentype.css/normalize-opentype.css">
<link rel="stylesheet" href="assets/css/main.less" type="text/less">
</head>
<body>
<!-- PAGES -->
<div id="page 1">
<div class="paper">
<div class="page grid">
<div class="header"></div>
<div class="body">
<div class="bloc x1 y0 w8 h2 flow-utopie"></div>
<div class="bloc x1 y2 w8 h3 flow-utopie"></div>
<div class="bloc x1 y5 w4 h4 flow-utopie"></div>
<div class="bloc x5 y5 w4 h4 flow-utopie"></div>
</div>
<div class="footer"></div>
</div>
</div>
</div>
<div id="page 2">
<div class="paper">
<div class="page grid">
<div class="header"></div>
<div class="body">
<div class="bloc x1 y1 w4 h8 flow-utopie"></div>
<div class="bloc x5 y1 w4 h8 flow-utopie"></div>
</div>
<div class="footer"></div>
</div>
</div>
</div>
<div id="page 3">
<div class="paper">
<div class="page grid">
<div class="header"></div>
<div class="body">
<div class="bloc x1 y1 w4 h8 flow-utopie"></div>
<div class="bloc x5 y1 w4 h8 flow-utopie"></div>
</div>
<div class="footer"></div>
</div>
</div>
</div>
<div id="page 4>
<div class="paper">
<div class="page grid">
<div class="header"></div>
<div class="body">
<div class="bloc x1 y1 w4 h8 flow-utopie"></div>
<div class="bloc x5 y1 w4 h8 flow-utopie"></div>
</div>
<div class="footer"></div>
</div>
</div>
</div>
<div id="page 5">
<div class="paper">
<div class="page grid">
<div class="header"></div>
<div class="body">
<div class="bloc x1 y1 w4 h8 flow-utopie"></div>
<div class="bloc x5 y1 w4 h8 flow-utopie"></div>
</div>
<div class="footer"></div>
</div>
</div>
</div>
<div id="page 6>
<div class="paper">
<div class="page grid">
<div class="header"></div>
<div class="body">
<div class="bloc x1 y1 w4 h8 flow-utopie"></div>
<div class="bloc x5 y1 w4 h8 flow-utopie"></div>
</div>
<div class="footer"></div>
</div>
</div>
</div>
<div id="stories">
<article id="flow-utopie" class="enquete" data-src="sample-content/html/enquête_utopie-numerique.html"></article>
</div>
<!-- JAVASCRIPT -->
<script src="assets/components/less/dist/less.js"></script>
<script src="assets/components/jquery/dist/jquery.min.js"></script>
<script src="assets/js/stories.js"></script>
</body>
</html>
......@@ -31,7 +31,7 @@
</div>
<div id="stories">
<article id="flow-decheance" data-src="sample-content/html/decheance-de-nationalite.html"></article>
<article id="flow-decheance" class="rubrique" data-src="sample-content/html/decheance-de-nationalite.html"></article>
</div>
<!-- JAVASCRIPT -->
......
......@@ -8,7 +8,7 @@
</head>
<body>
<div id="viewport">
<iframe src="doc.html"></iframe>
<iframe src="doc-utopie.html"></iframe>
</div>
<div id="toolbar">
......
De l’utopie numérique au choc social
De l’utopie numéri-que au choc social
=============================
Quarante-cinq ans après les premiers pas de l’homme sur la Lune, la course technologique emprunte une voie singulière : en janvier dernier, un réfrigérateur connecté à Internet envoyait inopinément des rafales de courriels indésirables... Au-delà de son folklore, la numérisation de la vie quotidienne engendre un modèle économique qui contraste avec les promesses mirifiques de la Silicon Valley.
{: .chapeau}
<!-- 0026.jpg : image en entrée sur la première colonne -->
<figure>
<img src="../img/0026.jpg" alt="0026.jpg">
</figure>
Dans la «&nbsp;salle de bains connectée&nbsp;», la brosse à dents interactive lancée cette année par la société Oral-B (filiale du groupe Procter & Gamble) tient assurément la vedette : elle interagit — sans fil — avec notre téléphone portable tandis que, sur l’écran, une application traque seconde par seconde la progression du brossage et indique les recoins de notre cavité buccale qui mériteraient davantage d’attention. Avons-nous brossé avec suffisamment de vigueur, passé le fil dentaire, gratté la langue, rincé le tout ?
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment