Browse Source

some first real presentation slides

master
parent
commit
c279e4872b
  1. 102
      boilerplate.html
  2. 122
      themes/style/y/main.css
  3. 155
      themes/style/y/main.sass

102
boilerplate.html

@ -38,7 +38,7 @@
<section class="slide">
<h1>Category Theory <span class="and">&amp;</span> Programming
<div><author style="font-size: .5em">by Yann Esposito
<div><author style="font-size: .4em"><em class="base01">by</em> Yann Esposito
<div>
<twitter style="font-size: .5em">
<a href="http://twitter.com/yogsototh">@yogsototh</a>,
@ -61,6 +61,106 @@
</section>
<section class="slide">
<h2>Abstraction Example</h2>
<p>Something you see very often but in different instances.</p>
<p>Once you recognize the notion, you see it almost everywhere.</p>
<ul>
<li class="slide">Numbers: <em>0</em>,1,2,3,... (3400 BC, real numbers 760 BC)</li>
<li class="slide">Rational numbers: \(\frac{p}{q}\) (concept is prehistoric)</li>
<li class="slide">Negative numbers: ..., -3, -2, -1, 0, 1, 2, ... (100-50 BC)</li>
<li class="slide">Irrational numbers: \(\mathbb{A}\), \(\mathbb{R}\) (500 BC → Pythogoras killed Hippasus because of \(\sqrt{2}\)!)</li>
<li class="slide">Complex numbers: \(\mathbb{C}\) (100 AD, then 16th century)</li>
</ul>
</section>
<section class="slide">
<h2>Numbers ⇒ Set Theory (\(\infty\))</h2>
<table>
<tr>
<th>Numbers</th>
<th>Set Theory</th>
</tr>
<tr>
<td>\(\mathbb{N}\): \((+,0)\)</td>
<td>Semigroups</td>
</tr>
<tr class="slide">
<td>\(\mathbb{Z}\): \((+,0,\times,1)\)</td>
<td>Rings</td>
</tr>
<tr class="slide">
<td>\(\mathbb{Q}\)</td>
<td>Fields</td>
</tr>
<tr class="slide">
<td>\(\mathbb{R}\)</td>
<td>Complete Fields (<em class="base01">topology</em>)</td>
</tr>
<tr class="slide">
<td>\(\mathbb{C}\)</td>
<td>Algebræ</td>
</tr>
<tr class="slide"><td></td><td>Modules,Vector Spaces, Monoids, ...</td></tr>
</table>
<p class="slide">More <strong>general</strong>: more things are sets.<br/>
<span class="and">&amp;</span> More <strong>precise</strong>: clear distinction between concepts)</p>
</section>
<section class="slide">
<h2>Set Theory ⇒? Category Theory</h2>
<table>
<tr>
<th>Numbers</th>
<th>Set Theory (\(\infty\))</th>
<th>Category Theory (relations)</th>
</tr>
<tr>
<td>\(\mathbb{N}\): \((+,0)\)</td>
<td>Semigroups</td>
<td>?</td>
</tr>
<tr>
<td>\(\mathbb{Z}\): \((+,0,\times,1)\)</td>
<td>Rings</td>
<td>?</td>
</tr>
<tr>
<td>\(\mathbb{Q}\)</td>
<td>Fields</td>
<td>?</td>
</tr>
<tr>
<td>\(\mathbb{R}\)</td>
<td>Complete Fields (<em class="base01">topology</em>)</td>
<td>?</td>
</tr>
<tr>
<td>\(\mathbb{C}\)</td>
<td>Algebræ</td>
<td>?</td>
</tr>
<tr><td></td><td>Modules,Vector Spaces, Monoids, ...</td><td>?</td></tr>
</table>
</section>
<section class="slide">
<h2><span class="yellow">/.*/</span> ⇒? Category Theory</h2>
<ul>
<li class="slide">Topology ⇒ Category Theory</li>
<li class="slide">Quantum Physics ⇒ Category Theory</li>
<li class="slide">Logic ⇒ Category Theory</li>
<li class="slide"><b>Programming</b> ⇒ Category Theory</li>
</ul>
<p class="slide">More <strong>general</strong>: more things are sets.<br/>
<span class="and">&amp;</span> More <strong>precise</strong>: clear distinction between concepts)</p>
</section>
<section class="slide">
<h2>too much abstraction?</h2>
<p>More general <span class="and">&amp;</span> more precise</p>
</section>
<section class="slide">
<h2>Animation, Math &amp; Code</h2>
<p>Some math \(\sum_{i=1}^\infty \frac{1}{2^x} = 1 \)</p>
<p class="slide">Another <b>math</b> <em>formula</em> $$\sum_{i=1}^\infty \frac{1}{2^x} = 1$$</p>

122
themes/style/y/main.css

@ -1,53 +1,5 @@
/* Solarized palette */
/* I won't use completely */
.base03 {
color: #002b36; }
.base02 {
color: #073642; }
.base01 {
color: #586e75; }
.base00 {
color: #657b83; }
.base0 {
color: #839496; }
.base1 {
color: #93a1a1; }
.base2 {
color: #eee8d5; }
.base3 {
color: #fdf6e3; }
.yellow {
color: #b58900; }
.orange {
color: #cb4b16; }
.red {
color: #dc322f; }
.magenta {
color: #d33682; }
.violet {
color: #6c71c4; }
.blue {
color: #268bd2; }
.cyan {
color: #2aa198; }
.green {
color: #859900; }
@font-face {
font-family: "cmuntt";
src: url("fonts/cmuntt.eot");
@ -77,6 +29,38 @@
.deck-container {
font-family: "ComputerModern", Georgia, serif;
/* Header Numbering */ }
.deck-container .base03 {
color: #002b36; }
.deck-container .base02 {
color: #073642; }
.deck-container .base01 {
color: #586e75; }
.deck-container .base00 {
color: #657b83; }
.deck-container .base0 {
color: #839496; }
.deck-container .base1 {
color: #93a1a1; }
.deck-container .base2 {
color: #eee8d5; }
.deck-container .base3 {
color: #fdf6e3; }
.deck-container .yellow {
color: #b58900; }
.deck-container .orange {
color: #cb4b16; }
.deck-container .red {
color: #dc322f; }
.deck-container .magenta {
color: #d33682; }
.deck-container .violet {
color: #6c71c4; }
.deck-container .blue {
color: #268bd2; }
.deck-container .cyan {
color: #2aa198; }
.deck-container .green {
color: #859900; }
.deck-container div {
font-family: "ComputerModern", Georgia, serif; }
.deck-container .and {
@ -144,7 +128,8 @@
list-style: none; }
.deck-container body, .deck-container h1, .deck-container h2, .deck-container h3, .deck-container h4, .deck-container #entete, .deck-container .tagname {
text-rendering: optimizelegibility;
line-height: 1.5em; }
line-height: 1.5em;
border-color: #586e75; }
.deck-container body {
font-family: "ComputerModern", Georgia, Palatino, "Century Schoolbook L", "Times New Roman", Times, serif; }
.deck-container .article #afterheader {
@ -176,7 +161,7 @@
.deck-container p {
margin-bottom: 1.2em; }
.deck-container blockquote {
border: solid 1px #ccccd0;
border: solid 1px #586e75;
border-radius: 2px;
box-shadow: 0 0 4px #073642 inset;
background-color: #002934;
@ -206,9 +191,9 @@
border-top: 4px double #93a1a1; }
.deck-container #liens .active, .deck-container #sousliens {
color: #839496;
border: #ccccd0 solid 1px;
border: #586e75 solid 1px;
border-radius: 5px;
box-shadow: 0 0 2px #ccccd0 inset;
box-shadow: 0 0 2px #586e75 inset;
background-color: #fdf6e3; }
.deck-container #liens .active a, .deck-container #sousliens a {
color: #93a1a1; }
@ -252,14 +237,14 @@
border: 1px solid #002b36;
color: #93a1a1; }
.deck-container #clickcomment:hover, .deck-container #choixlang > a:hover, .deck-container #choixrss > a:hover, .deck-container .return > a:hover {
border: solid 1px #ccccd0;
border: solid 1px #586e75;
border-radius: 2px;
box-shadow: 0 0 4px #073642 inset;
background-color: #002934;
color: #a4b2b2;
text-shadow: 0 0 2px #ffaaaa; }
.deck-container #clickcomment:active, .deck-container #choixlang > a:active, .deck-container #choixrss > a:active, .deck-container .return > a:active {
border: solid 1px #ccccd0;
border: solid 1px #586e75;
border-radius: 2px;
box-shadow: 0 0 4px #073642 inset;
background-color: #002934;
@ -310,9 +295,9 @@
line-height: 3ex;
clear: both;
color: #839496;
border: #ccccd0 solid 1px;
border: #586e75 solid 1px;
border-radius: 5px;
box-shadow: 0 0 2px #ccccd0 inset;
box-shadow: 0 0 2px #586e75 inset;
background-color: #fdf6e3;
border-radius: 0; }
.deck-container .date .year a {
@ -415,9 +400,9 @@
margin-bottom: 2em; }
.deck-container .encadre, .deck-container .black, .deck-container .red, .deck-container .shadow {
color: #839496;
border: #ccccd0 solid 1px;
border: #586e75 solid 1px;
border-radius: 5px;
box-shadow: 0 0 2px #ccccd0 inset;
box-shadow: 0 0 2px #586e75 inset;
background-color: #fdf6e3; }
.deck-container .encadre a, .deck-container .black a, .deck-container .red a, .deck-container .shadow a {
color: #93a1a1; }
@ -487,7 +472,7 @@
margin-bottom: 0; }
.deck-container .corps img {
max-width: 80%;
border: 1px solid #ccccd0;
border: 1px solid #586e75;
background-color: #002b36;
padding: 0.5em;
box-shadow: 0 10px 15px #cccccc;
@ -752,7 +737,7 @@
color: #93a1a1;
font-family: "Lucida Grande", Tahoma; }
.deck-container .block {
border: solid 1px #ccccd0;
border: solid 1px #586e75;
border-radius: 2px;
box-shadow: 0 0 4px #073642 inset;
background-color: #002934;
@ -793,7 +778,7 @@
.deck-container #tagcloud {
font-size: 0.8em;
background: #073642;
box-shadow: 0 0 6px #ccccd0;
box-shadow: 0 0 6px #586e75;
border-radius: 3px;
line-height: 2.5em;
padding: 2em;
@ -833,7 +818,8 @@
font-size: 1em;
margin-bottom: 1em; }
.deck-container table {
border: 1px solid #ccccd0; }
border: 1px solid #586e75;
width: 100%; }
.deck-container table tr td {
padding: 2px 0.5em; }
.deck-container table tr:nth-child(odd) {
@ -846,7 +832,7 @@
padding: 0; }
.deck-container p code, .deck-container ul li code, .deck-container ol li code {
background: #053440;
border: solid 1px #ccccd0;
border: solid 1px #586e75;
padding: 2px; }
.deck-container ul.sameline {
list-style: none; }
@ -870,19 +856,19 @@
.deck-container a.cut:hover {
opacity: 1;
background-color: #073642;
border-color: #ccccd0;
box-shadow: 0 0 3px #ccccd0 inset; }
border-color: #586e75;
box-shadow: 0 0 3px #586e75 inset; }
.deck-container a.cut strong {
font-weight: bold; }
.deck-container .codehighlight pre {
border-left: 4px solid #ccccd0; }
border-left: 4px solid #586e75; }
.deck-container #social {
text-align: left;
opacity: 0.3; }
.deck-container #social:hover {
opacity: 1; }
.deck-container .popularblock {
width: 30.3333%;
width: 30.333%;
margin: 0 1.5%;
float: left; }
.deck-container .popularblock figure {
@ -903,7 +889,7 @@
background: #073642; }
.deck-container {
font-size: 2em;
font-size: 3em;
color: #839496;
background-color: #002b36; }
.deck-container h1 {

155
themes/style/y/main.sass

@ -16,39 +16,6 @@ $blue : #268bd2
$cyan : #2aa198
$green : #859900
/* I won't use completely */
.base03
color: $base03
.base02
color: $base02
.base01
color: $base01
.base00
color: $base00
.base0
color: $base0
.base1
color: $base1
.base2
color: $base2
.base3
color: $base3
.yellow
color: $yellow
.orange
color: $orange
.red
color: $red
.magenta
color: $magenta
.violet
color: $violet
.blue
color: $blue
.cyan
color: $cyan
.green
color: $green
$behindColor: $base0
$mainTextColor: $base0
$mainBackgroundColor: $base03
@ -58,7 +25,7 @@ $revealColor: $base1
$secondRevealColor: $revealColor
$lighterRevealColor: $revealColor + #666
$imageBackgroundColor: $mainBackgroundColor
$borderColor: #ccccd0
$borderColor: $base01
$imageBorderColor: $borderColor
$mainLinkColor: $mainTextColor
$textLinkColor: $base1
@ -97,6 +64,47 @@ $secondTextColor: $base1
font-weight: normal
font-style: normal
=selected
background: $base01
color: $base2
=darkselected
background: $base01
color: $base2
=sc
text-transform: uppercase
font-size: 0.8em
=insetbox
background: rgba(#000,.05)
box-shadow: 0 0 2px #FFF, 0 0 3px #CCC inset
border: 1px solid rgba(#000,.1)
border-radius: 3px
&:hover
background: rgba(#000,.1)
box-shadow: 0 0 6px #555 inset
=clearbutton
display: block
width: 25%
cursor: pointer
margin: 1em 0
padding: 1em
font-size: 16px
line-height: 1.4em
border: 1px solid $mainBackgroundColor
color: $lighterText
&:hover
+innerblock
color: $highlightRevealColor
text-shadow: 0 0 2px #FAA
&:active
+innerblock
color: $highlightRevealColor
text-shadow: 0 0 2px #FAA
background: $mainBackgroundColor - #060606
=italic
font-style: italic
@ -166,8 +174,40 @@ $secondTextColor: $base1
color: $base02
color: $base0
.deck-container
.base03
color: $base03
.base02
color: $base02
.base01
color: $base01
.base00
color: $base00
.base0
color: $base0
.base1
color: $base1
.base2
color: $base2
.base3
color: $base3
.yellow
color: $yellow
.orange
color: $orange
.red
color: $red
.magenta
color: $magenta
.violet
color: $violet
.blue
color: $blue
.cyan
color: $cyan
.green
color: $green
font-family: "ComputerModern",Georgia,serif
div
font-family: "ComputerModern",Georgia,serif
@ -190,19 +230,11 @@ $secondTextColor: $base1
body
+mainColor
=selected
background: $base01
color: $base2
::selection
+selected
::-moz-selection
+selected
=darkselected
background: $base01
color: $base2
pre, code, a.cut
font-family: "cmuntt",Incosolata, Monaco, monospace
@ -256,6 +288,7 @@ $secondTextColor: $base1
body, h1, h2, h3, h4, #entete, .tagname
text-rendering: optimizelegibility
line-height: 1.5em
border-color: $base01
body
font-family: "ComputerModern", Georgia, Palatino, "Century Schoolbook L", "Times New Roman", Times, serif
@ -297,10 +330,6 @@ $secondTextColor: $base1
ul
padding-left: 1.5em
=sc
text-transform: uppercase
font-size: 0.8em
abbr,
acronym
+sc
@ -321,35 +350,6 @@ $secondTextColor: $base1
#liens .active, #sousliens
+secondColor
=insetbox
background: rgba(#000,.05)
box-shadow: 0 0 2px #FFF, 0 0 3px #CCC inset
border: 1px solid rgba(#000,.1)
border-radius: 3px
&:hover
background: rgba(#000,.1)
box-shadow: 0 0 6px #555 inset
=clearbutton
display: block
width: 25%
cursor: pointer
margin: 1em 0
padding: 1em
font-size: 16px
line-height: 1.4em
border: 1px solid $mainBackgroundColor
color: $lighterText
&:hover
+innerblock
color: $highlightRevealColor
text-shadow: 0 0 2px #FAA
&:active
+innerblock
color: $highlightRevealColor
text-shadow: 0 0 2px #FAA
background: $mainBackgroundColor - #060606
#liens a
border: 1px solid #EEE
+insetbox
@ -1039,6 +1039,7 @@ $secondTextColor: $base1
table
border: 1px solid $borderColor
width: 100%
table tr td
padding: 2px .5em
table tr
@ -1115,7 +1116,7 @@ $secondTextColor: $base1
background: $base02
.deck-container
font-size: 2em
font-size: 3em
color: $base0
background-color: $base03
h1

Loading…
Cancel
Save