Page d'accueil pour les slides.

css/theme/osi.css

@@ -558,3 +558,38 @@ p.caption {
 
 .reveal div.programme {
   margin: 1em auto; }
+
+#page.main {
+  font-family: 'lato', sans-serif;
+  font-size: 1.4em;
+  line-height: 1.2;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 960px; }
+  #page.main a {
+    color: #ff8a00;
+    text-decoration: none;
+    -webkit-transition: color .15s ease;
+    -moz-transition: color .15s ease;
+    -ms-transition: color .15s ease;
+    -o-transition: color .15s ease;
+    transition: color .15s ease; }
+    #page.main a:hover {
+      color: #ffb966; }
+  #page.main h1, #page.main h2, #page.main h3 {
+    color: #647a8e;
+    font-family: "League Gothic", Impact, sans-serif;
+    text-transform: uppercase; }
+  #page.main #header {
+    padding-top: 10px; }
+  #page.main #footer {
+    bottom: 0;
+    font-size: 0.65em;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 960px;
+    position: fixed;
+    width: 100%; }
+    #page.main #footer p {
+      color: #969696;
+      text-align: center; }

css/theme/source/osi.scss

@@ -581,3 +581,45 @@ p.caption {
 .reveal div.programme {
   margin: 1em auto;
 }
+
+#page.main {
+  font-family: 'lato', sans-serif;
+  font-size: 1.4em;
+  line-height: 1.2;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 960px;
+  a {
+    color: #ff8a00;
+    text-decoration: none;
+    -webkit-transition: color .15s ease;
+    -moz-transition: color .15s ease;
+    -ms-transition: color .15s ease;
+    -o-transition: color .15s ease;
+    transition: color .15s ease;
+    &:hover {
+      color: #ffb966;
+    }
+  }
+  h1, h2, h3 {
+    color: #647a8e;
+    font-family: "League Gothic", Impact, sans-serif;
+    text-transform: uppercase;
+  }
+  #header {
+    padding-top: 10px;
+  }
+  #footer {
+    bottom: 0;
+    font-size: 0.65em;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 960px;
+    position: fixed;
+    width: 100%;
+    p {
+      color: #969696;
+      text-align: center;
+    }
+  } 
+}

css/theme/source/osi.scss~

@@ -1,578 +0,0 @@
-/**
- * OSI theme for reveal.js.
- *
- */
-
-
-// Default mixins and settings -----------------
-@import "../template/mixins";
-@import "../template/settings";
-// ---------------------------------------------
-
-
-
-// Include theme-specific fonts
-@font-face {
-	font-family: 'League Gothic';
-	src: url('../../lib/font/league_gothic-webfont.eot');
-	src: url('../../lib/font/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
-		 url('../../lib/font/league_gothic-webfont.woff') format('woff'),
-		 url('../../lib/font/league_gothic-webfont.ttf') format('truetype'),
-		 url('../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular') format('svg');
-
-	font-weight: normal;
-	font-style: normal;
-}
-
-
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Lato Regular'), local('Lato-Regular'), url('../../lib/font/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff') format('woff');
-}
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Lato Bold'), local('Lato-Bold'), url('../../lib/font/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff') format('woff');
-}
-@font-face {
-  font-family: 'Lato';
-  font-style: italic;
-  font-weight: 400;
-  src: local('Lato Italic'), local('Lato-Italic'), url('../../lib/font/RYyZNoeFgb0l7W3Vu1aSWOvvDin1pK8aKteLpeZ5c0A.woff') format('woff');
-}
-@font-face {
-  font-family: 'Lato';
-  font-style: italic;
-  font-weight: 700;
-  src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url('../../lib/font/HkF_qI1x_noxlxhrhMQYELO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
-}
-
-
-@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
-
-// CUSTOM
-$inverseColor: #e7d6c3;
-$shadowLight: 0 0 6px rgba(0,0,0,.2);
-$blueGray: #647a8e;
-$redTile: #ca3b28;
-$red: #d2533a;
-$green: #5a9b47;
-$orange: #ff8a00;
-$titleFont: 'League Gothic';
-$gray: #899594;
-$defaultFontSize: 28px;
-
-// Override theme settings (see ../template/settings.scss)
-$mainColor: #333;
-$headingColor: #333;
-$headingTextShadow: none;
-$backgroundColor: #e9f6fb;
-$linkColor: #ff8a00;
-$linkColorHover: lighten( $linkColor, 20% );
-$selectionBackgroundColor: $blueGray;
-$heading1TextShadow: none;
-$h1Size: 3.2em;
-
-// Background generator
-@mixin bodyBackground() {
-	@include radial-gradient( #ecf4fb, rgba(255,255,255,1) );
-}
-
-// Theme template ------------------------------
-@import "../template/theme";
-// ---------------------------------------------
-
-
-
-
-/*********************************************
- * CUSTOM
- *********************************************/
-
- 
-.reveal {
-	letter-spacing: 0em;
-}
- 
-.reveal p {
-	margin-bottom: 0.6em;
-}
-
-.reveal .slides section {
-  font-size: $defaultFontSize;
-}
- 
-.reveal .slides {
-	width: 1024px;
-}
- 
-.reveal .custom.inverse {
-	color: $inverseColor;
-}
-
-.reveal h1 {
-	font-size: $h1Size;
-}
-
-.reveal h1,
-.reveal h2,
-.reveal h3 {
-	color: $blueGray;
-}
-
-.reveal h1.chapter {
-	color: $orange;
-	margin-top: 0.8em;
-	padding: 10px;
-}
-
-.reveal .release-date {
-	color: $blueGray;
-}
-
-.reveal .right {
-        text-align: right;
-        width: 100%;
-}
-
-.reveal .left {
-        text-align: left;
-        width: 100%;
-}
-
-.reveal .name{
-	margin-top: 1.5em;
-}
-
-.footer {
-	bottom: 40px;
-	left: 30px;
-	position: fixed;
-	width: 100%;
-	z-index: 0;
-}
-
-.reveal .footnote,
-.reveal .note {
-        bottom: 10px;
-        color: $gray;
-	display: inline-block;
-        font-size: 45%;
-	margin-left: auto;
-	margin-right: auto;
-        position: relative;
-        text-align: center;
-	width: 80%;
-}
-
-.reveal .note {
-        color: $blueGray;
-}
-
-.reveal .illustration img,
-.reveal .diagramme img {
-	border: none;
-	box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
-        max-height: 65%;
-        max-width: 65%;
-}
-
-.reveal .reference img {
-	float: left;
-        max-width: 98%;
-}
-
-.reveal td.reference {
-	color: $gray;
-        font-size: 70%;
-        font-style: italic;
-        width: 25%;
-}
-
-.reveal .illustration-full img,
-.reveal .diagramme-full img {
-	border: none;
-	box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
-        margin: 0;
-        max-height: 85%;
-        max-width: 85%;
-        padding: 0;
-}
-
-.reveal .slides section.full,
-.reveal section.full img {
-        margin: 0;
-        padding: 0;
-}
-
-p.caption {
-        font-size: 60%;
-        font-style: italic;
-}
-
-.reveal code {
-        box-shadow: $shadowLight;
-        font-size: .75em;
-        font-family: monospace;
-        line-height: 1.2em;
-        margin: 0 0.35em;
-        padding: 0 .15em;
-        word-wrap: break-word;
-}
-
-.reveal .high {
-        color: $orange;
-}
-
-.reveal code.high {
-        background-color: $orange;
-        color: white;
-}
-
-.reveal .codeblock {
-        display: block;
-        font-size: .55em;
-        margin: 0.15em 0 0.15em 1em;
-        max-height: 495px;
-        overflow: auto;
-        padding: 0.3em 0.5em;
-}
-
-
-.reveal .ab {
-        display: block;
-        font-size: .6em;
-        margin: 0.15em 0 0.15em 1em;
-        max-height: 495px;
-        overflow: auto;
-        padding: 0.3em 0.5em;
-}
-
-.reveal blockquote {
-        background: rgba(255,255,255,.05);
-        box-shadow: none;
-        color: $blueGray;
-        line-height: 1.5em;
-        margin: auto;
-        padding: auto;
-        font-style: italic;
-        width: 100%;
-}
-
-.reveal blockquote.quote-small {
-        background: rgba(255,255,255,.05);
-        box-shadow: none;
-        color: $blueGray;
-        font-size: 0.8em;
-        line-height: 1.2em;
-        margin: auto auto 0.8em auto;
-        padding: auto;
-        font-style: italic;
-        width: 100%;
-}
-
-.reveal .quoteinverse {
-        background-color: $blueGray;
-        color: white;
-        padding: 0 0.15em;
-}
-
-.reveal .quote-underline {
-        border-bottom: solid 5px $blueGray;
-}
-
-.reveal ol,
-.reveal ul {
-	list-style-type: none;
-	margin: 0 0 0.85em 1.5em;
-}
-
-.reveal li {
-	margin-bottom: 0.6em;
-}
-
-.reveal li ul {
-	margin-top: 0.6em;
-}
-
-.reveal ol li:before,
-.reveal ul li:before {
-        color: $orange;
-	content: "● ";
-}
-
-.reveal ul ul ul,
-.reveal ul ul {
-	list-style-type: none;
-}
-
-.reveal ul ul li:before {
-        color: $orange;
-	content: "– ";
-}
-
-.reveal ul ul ul li:before {
-        color: $blueGray;
-	content: "· ";
-}
-
-.reveal ul ul ul li {
-	line-height: 1;
-	margin: 0 auto;
-	padding: 0 auto;
-}
-
-.reveal ul ul,
-.reveal ul ol,
-.reveal ol ol,
-.reveal ol ul {
-	margin-left: 1.5em;
-}
-
-.reveal ul,
-.reveal ol {
-	text-indent: -0.7em;
-}
-
-.reveal ul ul,
-.reveal ul ol,
-.reveal ol ol,
-.reveal ol ul {
-	text-indent: -0.6em;
-}
-
-.reveal blockquote li {
-	margin-bottom: 0.7em;
-}
-
-.reveal blockquote ol li:before,
-.reveal blockquote ul li:before {
-        color: $blueGray;
-	content: "";
-}
-
-.reveal blockquote ul ul ul,
-.reveal blockquote ul ul {
-	list-style-type: circle;
-}
-
-.reveal blockquote ul ul ul li:before,
-.reveal blockquote ul ul li:before {
-        color: $blueGray;
-	content: "";
-}
-
-.reveal blockquote ul ul,
-.reveal blockquote ul ol,
-.reveal blockquote ol ol,
-.reveal blockquote ol ul {
-	margin-left: auto;
-}
-
-.reveal .highlight {
-        background-color: $orange;
-        border-radius: 0.4em;
-        color: white;
-        font-size: 0.75em;
-        margin-left: 1em;
-        padding: 0.1em 0.3em;
-}
-
-.reveal .highlight:before {
-	content: "→ ";
-}
-
-.reveal table {
-        margin-bottom: 1em;
-        margin-top: 1.2em;
-        width: 100%;
-        
-        tr.third td {
-          width: 33%;
-        }
-        
-        tr.half td {
-          width: 50%;
-        }
-        
-        .table-title {
-          border-bottom: 15px solid rgba(255,255,255,0);
-          color: $redTile;
-          font-size: 110%;
-        }
-        
-        .table-description {
-          border-bottom: 10px solid rgba(255,255,255,0);
-          font-size: 90%;
-        }
-        
-        .table-extra {
-          color: $green;
-          font-size: 75%;
-          &:before {
-	    content: "➤ ";
-          }
-        }
-}
-
-.reveal p.theme-name {
-	color: $blueGray;
-	font-family: $titleFont;
-	font-size: 1.2em;
-	float: left;
-	margin-top: 0.5em;
-        text-align: left;
-        text-transform: uppercase;
-}
-
-.reveal table.new {
-  font-size: 0.8em;
-  line-height: 1.35;
-  margin-bottom: 0.5em;
-  margin-top: 0.5em;
-  width: 100%;
-}
-
-.reveal .new th {
-  color: $blueGray;
-  font-family: $titleFont;
-  text-transform: uppercase;
-  width: 12%;
-}
-
-.reveal .new td:before {
-        color: $orange;
-	content: "· ";
-}
-
-.reveal .two-columns-left {
-  float: left;
-  margin: auto 0;
-  width: 47.5%;
-}
-
-.reveal .two-columns-right {
-  float: right;
-  margin: auto 0;
-  width: 47.5%;
-}
-
-.reveal .compare-table {
-  border-collapse: collapse;
-  line-height: 1.1;
-  margin-top: 1em;
-  padding: 0.4em;
-  width: 100%;
-}
-
-.reveal .compare-table tr.first-row {
-  padding-bottom: 1em;
-}
-
-.reveal .compare-table th {
-  width: 16%;
-}
-
-.reveal .compare-table td {
-  width: 28%;
-}
-
-.reveal .compare-table thead {
-  font-size: 0.75em;
-}
-
-.reveal .compare-table.six thead {
-  color: $blueGray;
-}
-
-.reveal .compare-table.seven thead {
-  color: $green;
-}
-
-.reveal .compare-table.eight thead {
-  color: $red;
-}
-
-.reveal .compare-table tbody {
-  border-top: 5px solid rgba(255,255,255,0);
-  font-size: 0.65em;
-}
-
-.reveal .compare-table thead th {
-  font-family: $titleFont;
-  font-size: 1.2em;
-  position: relative;
-  top: 0.2em;
-  text-transform: uppercase;
-}
-
-.reveal section img.cover-img {
-  background: none;
-  border: none;
-  box-shadow: none;
-  margin: 0;
-}
-
-.reveal div.cover-osi {
-  color: $blueGray;
-  position: relative;
-  top: 2em;
-}
-
-.reveal div.cover-osi h3 {
-  color: $blueGray;
-}
-
-.reveal .downer {
-  margin-top: 1.5em;
-}
-
-.reveal h3.people {
-  margin-top: 0.8em;
-}
-
-.reveal table.people {
-  font-size: 0.75em;
-  line-height: 1;
-  margin: 1em 0 1.7em 0;
-  
-  tr {
-    width: 100%;
-  }
-  
-  td {
-    border-bottom: 5px solid rgba(255,255,255,0);
-    margin: 0;
-    padding: 0;
-    width: 306px;
-  }
-  
-  .td-middle {
-    border-left: 15px solid rgba(255,255,255,0);
-    border-right: 15px solid rgba(255,255,255,0);
-  }
-  
-  img {
-    max-width: 306px;
-  }
-  
-}
-
-.reveal .blue {
-  color: $blueGray;
-}
-
-.reveal .orange {
-  color: $orange;
-}
-
-.reveal .lowercase {
-  text-transform: none;
-}
-
-.reveal div.programme {
-  margin: 1em auto;
-}

index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <title>Présentations OSInet pour Drupal Global Training Day</title>
+    <link rel="stylesheet" media="screen" type="text/css" href="css/theme/osi.css" />
+    <meta charset="UTF-8">
+  </head>
+
+  <body>
+  <div id="page" class="main">
+  
+    <div id="header">
+      <div id="header-title">
+        <a href="http://www.osinet.fr">
+          <img src="osinet.png" / style="width: 150px;">
+	</a>
+      </div>
+    </div>
+    
+    <div id="content">
+      <h1 class="header-title">Drupal Global Training Day novembre 2013</h1>
+      <h2 id="slogan" class="header-title">Présentations</h2>
+      <p><a href="01-drupal-quoi.html">Drupal, qu'est-ce que c'est ?</a></p>
+      <p><a href="02-pourquoi-changer.html">Drupal, pourquoi ?</a></p>
+      <p><a href="03-chantier-drupal.html">Mon chantier Drupal</a></p>
+      <p><a href="04-en-production.html">Drupal en production</a></p>
+    </div>
+    
+    <div id="footer">
+      <p>© OSInet 2013</p>
+    </div>
+  
+  </div>
+  </body>
+  
+</html>