### some first real presentation slides

master
parent
commit
c279e4872b
3 changed files with 233 additions and 146 deletions
1. 102
boilerplate.html
2. 122
themes/style/y/main.css
3. 155
themes/style/y/main.sass

#### 102 boilerplate.html View File

 @ -38,7 +38,7 @@   


Category Theory & Programming 
by Yann Esposito 
by Yann Esposito 
   @yogsototh, @ -61,6 +61,106 @@ 

  


Abstraction Example



Something you see very often but in different instances.



Once you recognize the notion, you see it almost everywhere.



• Numbers: 0,1,2,3,... (3400 BC, real numbers 760 BC)
•  
• Rational numbers: $$\frac{p}{q}$$ (concept is prehistoric)
•  
• Negative numbers: ..., -3, -2, -1, 0, 1, 2, ... (100-50 BC)
•  
• Irrational numbers: $$\mathbb{A}$$, $$\mathbb{R}$$ (500 BC → Pythogoras killed Hippasus because of $$\sqrt{2}$$!)
•  
• Complex numbers: $$\mathbb{C}$$ (100 AD, then 16th century)
•  

  


Numbers ⇒ Set Theory ($$\infty$$)

  
$$\mathbb{N}$$: $$(+,0)$$Semigroups
$$\mathbb{Z}$$: $$(+,0,\times,1)$$Rings
$$\mathbb{Q}$$Fields
$$\mathbb{R}$$Complete Fields (topology)
$$\mathbb{C}$$Algebræ
Modules,Vector Spaces, Monoids, ...
                                                  

More general: more things are sets.
 & More precise: clear distinction between concepts)

   


Set Theory ⇒? Category Theory

  
NumbersSet Theory ($$\infty$$)Category Theory (relations)
$$\mathbb{N}$$: $$(+,0)$$Semigroups?
$$\mathbb{Z}$$: $$(+,0,\times,1)$$Rings?
$$\mathbb{Q}$$Fields?
$$\mathbb{R}$$Complete Fields (topology)?
$$\mathbb{C}$$Algebræ?
Modules,Vector Spaces, Monoids, ...?
                                                                 


/.*/ ⇒? Category Theory



• Topology ⇒ Category Theory
•  
• Quantum Physics ⇒ Category Theory
•  
• Logic ⇒ Category Theory
•  
• Programming ⇒ Category Theory
•  


More general: more things are sets.
 & More precise: clear distinction between concepts)


  


too much abstraction?



More general & more precise


  


Animation, Math & Code



Some math $$\sum_{i=1}^\infty \frac{1}{2^x} = 1$$



Another math formula $$\sum_{i=1}^\infty \frac{1}{2^x} = 1$$

#### 122 themes/style/y/main.css View File

 @ -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 View File

 @ -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