Add ircam themes

diff --git a/src/slides/timeside-2020.md b/src/slides/timeside-2020.md
index 4c9e956c86b7bfcf4ca561d76a4e6c0c3bee6f70..6d38f6b6aeb202b03734b1c3685d1d1c7857773b 100644 (file)
--- a/src/slides/timeside-2020.md
+++ b/src/slides/timeside-2020.md
@@ -9,6 +9,15 @@ class: center, middle, vertigo
 
 Guillaume Pellerin - IRCAM<br>
 
+---
+class: vertigo, tight
+
+1. Intro (GP)
+1. Historique du projet TimeSide (GP)
+1. Framework (GP)
+1. Server (AG)
+1. Player v2 (MD)
+1. Perspectives
 
 ---
 class: vertigo, tight

diff --git a/src/styl/remark-themes/ircam-blue.styl b/src/styl/remark-themes/ircam-blue.styl
new file mode 100644 (file)
index 0000000..474b5e6
--- /dev/null
+++ b/src/styl/remark-themes/ircam-blue.styl
@@ -0,0 +1,224 @@
+body
+  font-family "Arial"
+
+h1
+h2
+h3
+  margin-bottom 0
+  font-family "Yanone Kaffeesatz"
+  font-weight 400
+
+.remark-slide-content
+  h1
+    font-size 3em
+  h2
+    font-size 2em
+  h3
+    font-size 1.6em
+
+.footnote
+  position absolute
+  bottom 3em
+
+ul
+  list-style-type: none; /* no default bullets */
+  background white
+  border-radius 8px 0px 8px 8px
+
+li
+  line-height 1.75em
+  color #000022
+  p
+    line-height 1.25em
+
+li:before { /* the custom styled bullets */
+  background-color: #00b8ff;
+  border-radius: 50%;
+  content: "";
+  display: inline-block;
+  margin-right: 10px;
+  margin-bottom: 3px;
+  height: 5px;
+  width: 5px;
+}
+
+.red
+  color #fa0000
+
+.large
+  font-size 2em
+
+a, a > code
+  // color rgb(249, 38, 114)
+  // color rgb(110, 198, 179)
+  color #00b8ff
+  text-decoration underline
+
+hr
+  // border-color #6ec6b3
+  height 0px
+  border 0
+  border-top 2px solid #f8e71c;
+
+code
+  border-radius 5px
+  background #e7e8e2
+
+.remark-code
+.remark-inline-code
+  font-family "Ubuntu Mono"
+
+.remark-code-line-highlighted
+  background-color #373832
+
+.pull-left
+  float left
+  width 48%
+
+.pull-right
+  float right
+  width 48%
+
+.pull-right ~ p
+  clear both
+
+#slideshow
+  .slide
+    .content
+      code
+        font-size 0.8em
+      pre
+        code
+          padding 15px
+          font-size 0.9em
+
+.telemeta
+  color white
+  background #6A0307
+  text-shadow 0 0 20px #333
+
+.ircam
+  color white
+  background #000022
+  // text-shadow 0 0 20px #333
+  // background-image url(../img/starts_logo_1.png), url(../img/starts_residencies_logo_wh_200.png)
+  //background-image url(../img/starts_residencies_logo_wh_200.png)
+  background-position 3px 3px, 60px 3px
+  background-repeat no-repeat
+  background-position upper-left
+  background-size: 50px
+
+.inverse
+  color #777872
+  background #272822
+  text-shadow 0 0 20px #333
+
+.inverse h1
+.inverse h2
+  line-height 0.8em
+  color #f3f3f3
+
+/* Slide-specific styling */
+
+#slide-inverse
+  .footnote
+    bottom 12px
+    left 20px
+
+#slide-how
+  .slides
+    position absolute
+    top  151px
+    right 140px
+    font-size 0.9em
+
+#slide-how
+  .slides
+    h3
+      margin-top 0.2em
+
+#slide-how
+  .slides
+    .first
+    .second
+      width 120px
+      height 90px
+      padding 1px 20px
+      box-shadow 0 0 10px #777
+
+#slide-how
+  .slides
+    .first
+      position absolute
+      z-index 1
+      top 20%
+      left 20%
+      background #fff
+
+#slide-how
+  .slides
+    .second
+      position relative
+      z-index 0
+      background #fff
+
+/* Two-column layout */
+
+.left-column
+  float left
+  width 20%
+  height 92%
+  color #777
+
+.left-column
+  h2:last-of-type
+  h3:last-child
+    color #000
+
+.right-column
+  float right
+  width 75%
+  padding-top 1em
+
+.tight
+  li
+    line-height 1.25em
+    p
+      line-height 1.25em
+
+.pic-container
+    width 100%
+    height 80%
+    overflow-y scroll
+    overflow-x hidden
+
+
+img[alt=image]
+    width: 100%
+
+img[alt=image-wh-bg]
+    width: 100%
+    background-color: white
+    padding: 1em
+
+img[alt=image-85]
+    width: 85%
+
+img[alt=image-60]
+    width: 60%
+
+.center-60
+  width 50%
+
+
+.tight
+  li
+    line-height 1.25em
+    p
+      line-height 1.25em
+
+.pic-container
+    width 100%
+    height 80%
+    overflow-y scroll
+    overflow-x hidden

diff --git a/src/styl/remark-themes/ircam-white.styl b/src/styl/remark-themes/ircam-white.styl
new file mode 100644 (file)
index 0000000..6806c20
--- /dev/null
+++ b/src/styl/remark-themes/ircam-white.styl
@@ -0,0 +1,227 @@
+body
+  font-family "Arial"
+
+h1
+h2
+h3
+h4
+  margin-bottom 0
+  font-family "Yanone Kaffeesatz"
+  font-weight 400
+
+.remark-slide-content
+  h1
+    font-size 3em
+  h2
+    font-size 2em
+  h3
+    font-size 1.6em
+  h4
+    font-size 1.2em
+
+.footnote
+  position absolute
+  bottom 3em
+
+ul
+  list-style-type: none; /* no default bullets */
+  background white
+  border-radius 8px 0px 8px 8px
+
+
+li
+  line-height 1.75em
+  p
+    line-height 1.25em
+
+li:before { /* the custom styled bullets */
+  background-color: #00b8ff;
+  border-radius: 50%;
+  content: "";
+  display: inline-block;
+  margin-right: 10px;
+  margin-bottom: 3px;
+  height: 5px;
+  width: 5px;
+}
+
+.red
+  color #fa0000
+
+.large
+  font-size 2em
+
+a, a > code
+  // color rgb(249, 38, 114)
+  // color rgb(110, 198, 179)
+  color #00b8ff
+  text-decoration underline
+
+hr
+  // border-color #6ec6b3
+  height 0px
+  border 0
+  border-top 2px solid #f8e71c;
+
+code
+  border-radius 5px
+  background #e7e8e2
+
+.remark-code
+.remark-inline-code
+  font-family "Ubuntu Mono"
+
+.remark-code-line-highlighted
+  background-color #373832
+
+.pull-left
+  float left
+  width 48%
+
+.pull-right
+  float right
+  width 48%
+
+.pull-right ~ p
+  clear both
+
+#slideshow
+  .slide
+    .content
+      code
+        font-size 0.8em
+      pre
+        code
+          padding 15px
+          font-size 0.9em
+
+.telemeta
+  color white
+  background #6A0307
+  text-shadow 0 0 20px #333
+
+.ircam
+  color #000055
+  background white
+  // text-shadow 0 0 20px #333
+  // background-image url(../img/starts_logo_1.png), url(../img/starts_residencies_logo_wh_200.png)
+  //background-image url(../img/starts_residencies_logo_wh_200.png)
+  background-position 3px 3px, 60px 3px
+  background-repeat no-repeat
+  background-position upper-left
+  background-size: 50px
+
+.inverse
+  color #777872
+  background #272822
+  text-shadow 0 0 20px #333
+
+.inverse h1
+.inverse h2
+  line-height 0.8em
+  color #f3f3f3
+
+/* Slide-specific styling */
+
+#slide-inverse
+  .footnote
+    bottom 12px
+    left 20px
+
+#slide-how
+  .slides
+    position absolute
+    top  151px
+    right 140px
+    font-size 0.9em
+
+#slide-how
+  .slides
+    h3
+      margin-top 0.2em
+
+#slide-how
+  .slides
+    .first
+    .second
+      width 120px
+      height 90px
+      padding 1px 20px
+      box-shadow 0 0 10px #777
+
+#slide-how
+  .slides
+    .first
+      position absolute
+      z-index 1
+      top 20%
+      left 20%
+      background #fff
+
+#slide-how
+  .slides
+    .second
+      position relative
+      z-index 0
+      background #fff
+
+/* Two-column layout */
+
+.left-column
+  float left
+  width 20%
+  height 92%
+  color #777
+
+.left-column
+  h2:last-of-type
+  h3:last-child
+    color #000
+
+.right-column
+  float right
+  width 75%
+  padding-top 1em
+
+.tight
+  li
+    line-height 1.25em
+    p
+      line-height 1.25em
+
+.pic-container
+    width 100%
+    height 80%
+    overflow-y scroll
+    overflow-x hidden
+
+
+img[alt=image]
+    width: 100%
+
+img[alt=image-wh-bg]
+    width: 100%
+    background-color: white
+    padding: 1em
+
+img[alt=image-85]
+    width: 85%
+
+img[alt=image-60]
+    width: 60%
+
+.center-60
+  width 50%
+
+
+.tight
+  li
+    line-height 1.25em
+    p
+      line-height 1.25em
+
+.pic-container
+    width 100%
+    height 80%
+    overflow-y scroll
+    overflow-x hidden

diff --git a/src/styl/remark-themes/ircam.styl b/src/styl/remark-themes/ircam.styl
new file mode 100644 (file)
index 0000000..f15efa7
--- /dev/null
+++ b/src/styl/remark-themes/ircam.styl
@@ -0,0 +1,232 @@
+body
+  font-family "Arial"
+
+h1
+h2
+h3
+  margin-bottom 0
+  font-family "Yanone Kaffeesatz"
+  font-weight 400
+
+.remark-slide-content
+  h1
+    font-size 3em
+  h2
+    font-size 2em
+  h3
+    font-size 1.6em
+
+.footnote
+  position absolute
+  bottom 3em
+
+ul
+  list-style-type: none; /* no default bullets */
+
+li
+  line-height 1.75em
+  p
+    line-height 1.25em
+
+li:before { /* the custom styled bullets */
+  background-color: #f8e71c;
+  border-radius: 50%;
+  content: "";
+  display: inline-block;
+  margin-right: 10px;
+  margin-bottom: 2px;
+  height: 6px;
+  width: 6px;
+}
+
+.red
+  color #fa0000
+
+.large
+  font-size 2em
+
+a, a > code
+  // color rgb(249, 38, 114)
+  // color rgb(110, 198, 179)
+  color white
+  text-decoration underline
+
+hr
+  // border-color #6ec6b3
+  height 0px
+  border 0
+  border-top 2px solid #f8e71c;
+
+code
+  border-radius 5px
+  background #e7e8e2
+
+.remark-code
+.remark-inline-code
+  font-family "Ubuntu Mono"
+
+.remark-code-line-highlighted
+  background-color #373832
+
+.pull-left
+  float left
+  width 48%
+
+.pull-right
+  float right
+  width 48%
+
+.pull-right ~ p
+  clear both
+
+#slideshow
+  .slide
+    .content
+      code
+        font-size 0.8em
+      pre
+        code
+          padding 15px
+          font-size 0.9em
+
+.telemeta
+  color white
+  background #6A0307
+  text-shadow 0 0 20px #333
+
+.ircam
+  color white
+  background #000f24
+  text-shadow 0 0 20px #333
+  //background-image url(../img/starts_logo_1.png), url(../img/starts_residencies_logo_wh_200.png)
+  //background-image url(../img/starts_residencies_logo_wh_200.png)
+  background-position 3px 3px, 60px 3px
+  background-repeat no-repeat
+  background-position upper-left
+  background-size: 50px
+
+.ircam-white
+  color #000f24
+  background white
+  // text-shadow 0 0 20px #333
+  // background-image url(../img/starts_logo_1.png), url(../img/starts_residencies_logo_wh_200.png)
+  //background-image url(../img/starts_residencies_logo_wh_200.png)
+  background-position 3px 3px, 60px 3px
+  background-repeat no-repeat
+  background-position upper-left
+  background-size: 50px
+
+.inverse
+  color #777872
+  background #272822
+  text-shadow 0 0 20px #333
+
+.inverse h1
+.inverse h2
+  line-height 0.8em
+  color #f3f3f3
+
+/* Slide-specific styling */
+
+#slide-inverse
+  .footnote
+    bottom 12px
+    left 20px
+
+#slide-how
+  .slides
+    position absolute
+    top  151px
+    right 140px
+    font-size 0.9em
+
+#slide-how
+  .slides
+    h3
+      margin-top 0.2em
+
+#slide-how
+  .slides
+    .first
+    .second
+      width 120px
+      height 90px
+      padding 1px 20px
+      box-shadow 0 0 10px #777
+
+#slide-how
+  .slides
+    .first
+      position absolute
+      z-index 1
+      top 20%
+      left 20%
+      background #fff
+
+#slide-how
+  .slides
+    .second
+      position relative
+      z-index 0
+      background #fff
+
+/* Two-column layout */
+
+.left-column
+  float left
+  width 20%
+  height 92%
+  color #777
+
+.left-column
+  h2:last-of-type
+  h3:last-child
+    color #000
+
+.right-column
+  float right
+  width 75%
+  padding-top 1em
+
+.tight
+  li
+    line-height 1.25em
+    p
+      line-height 1.25em
+
+.pic-container
+    width 100%
+    height 80%
+    overflow-y scroll
+    overflow-x hidden
+
+
+img[alt=image]
+    width: 100%
+
+img[alt=image-wh-bg]
+    width: 100%
+    background-color: white
+    padding: 1em
+
+img[alt=image-85]
+    width: 85%
+
+img[alt=image-60]
+    width: 60%
+
+.center-60
+  width 50%
+
+
+.tight
+  li
+    line-height 1.25em
+    p
+      line-height 1.25em
+
+.pic-container
+    width 100%
+    height 80%
+    overflow-y scroll
+    overflow-x hidden