Add stark❕

8 files changed, 479 insertions, 0 deletions

diff --git a/src/css/.design.css.swp b/src/css/.design.css.swp
new file mode 100755
index 0000000..89e9e74
--- /dev/null
+++ b/src/css/.design.css.swp
diff --git a/src/css/.sommaire.css.swp b/src/css/.sommaire.css.swp
new file mode 100755
index 0000000..7a61c4d
--- /dev/null
+++ b/src/css/.sommaire.css.swp
diff --git a/src/css/_contenu.scss b/src/css/_contenu.scss
new file mode 100755
index 0000000..267d51a
--- /dev/null
+++ b/src/css/_contenu.scss
@@ -0,0 +1,94 @@
+article {
+  h1 {
+    font-size:2em;
+    color: #A5B;
+  }
+  h2 {
+    font-size:1.5em;
+    color: #BB8;
+  }
+  h3 {
+    font-size:1.25em;
+    color: #AC4;
+  }
+  h2:before {
+    content: "# ";
+    color: #ABB;
+    font: bold  0.95em arial, sans-serif;
+  }
+  h3:before {
+    content: "## ";
+    color: #ABB;
+    font: bold  0.95em arial, sans-serif;
+  }
+  h4:before {
+    content: "### ";
+    color: #ABB;
+    font: bold  1em arial, sans-serif;
+  }
+}
+section {
+  > p:nth-of-type(1) {
+  }
+  > p:nth-of-type(1):after {
+    content: " ";
+    display: table;
+    clear: both;
+  }
+  > p:nth-of-type(1) > img {
+    height:150px;
+    float:right;
+  }
+
+  @media #{$gt-gsm} {
+    > p:first-of-type {
+        margin-top: 2.5%;
+        margin-bottom: 2.5%;
+        padding-left: 6%;
+        color: #944040;
+    }
+  }
+}
+article {
+  margin-right: 2%;
+  margin-left: 3%;
+  float: left;
+  width: 83%;
+  background: #FFF;
+  margin-bottom: 2.5%;
+  padding-right:0%;
+  padding-left:0%;
+  padding: 1.6em 1.6em;
+  font-family: Merriweather, "Liberation Serif", "Segoe UI";
+
+  code {
+    color: #a00;
+    background: #eee;
+    border: 1px solid #ccc;
+    padding: 0 5px;
+  }
+
+  @media #{$gt-gsm} {
+    float: none;
+    margin-right: 7%;
+    margin-left: 300px;
+    width: auto;
+
+    font-size:1em;
+    padding-right:5%;
+    padding-left:5%;
+    transition: margin-left 0.5s ease-out 0.25s;
+
+    border: 1px solid #eaeaea;
+    border: 1px solid rgba(51, 51, 51, 0.1);
+    border-color: #eaeaea !important;
+    margin-top: 50px;
+    margin-bottom: 50px;
+
+    &.zen-mode {
+      margin-left: 7%;
+      transition: margin-left 0.5s ease-out 0.25s;
+    }
+  }
+}
+
diff --git a/src/css/_rainbow.scss b/src/css/_rainbow.scss
new file mode 100644
index 0000000..905eb8e
--- /dev/null
+++ b/src/css/_rainbow.scss
@@ -0,0 +1,85 @@
+/*
+
+Style with support for rainbow parens
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #474949;
+  color: #d1d9e1;
+}
+
+
+.hljs-comment,
+.hljs-quote {
+  color: #969896;
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-type,
+.hljs-addition {
+  color: #cc99cc;
+}
+
+.hljs-number,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #f99157;
+}
+
+.hljs-string,
+.hljs-doctag,
+.hljs-regexp {
+  color: #8abeb7;
+}
+
+.hljs-title,
+.hljs-name,
+.hljs-section,
+.hljs-built_in {
+  color: #b5bd68;
+}
+
+.hljs-variable,
+.hljs-template-variable,
+.hljs-selector-id,
+.hljs-class .hljs-title {
+   color: #ffcc66;
+}
+
+.hljs-section,
+.hljs-name,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-subst,
+.hljs-meta,
+.hljs-link {
+  color: #f99157;
+}
+
+.hljs-deletion {
+  color: #dc322f;
+}
+
+.hljs-formula {
+  background: #eee8d5;
+}
+
+.hljs-attr,
+.hljs-attribute {
+  color: #81a2be;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
diff --git a/src/css/_sommaire.scss b/src/css/_sommaire.scss
new file mode 100755
index 0000000..c4e002a
--- /dev/null
+++ b/src/css/_sommaire.scss
@@ -0,0 +1,97 @@
+#sommaire {
+  height: 40px; 
+  width: auto;
+  text-align: center;
+  @media #{$gt-gsm} {
+    padding-left: 290px;
+  }
+}
+.sommaire_blien {
+   display: inline-block;
+   width: 33%;
+   text-align: left;
+   color: #121311;
+   font-size: 0.8em;
+   font-weight: bold;
+   font-family:  monospace, serif;
+   text-shadow: 0 1px 0 #DDD;
+   color: #888888;
+   &:before {
+     content: "/";
+   }
+   a {
+     color: #888888;
+     outline: none;
+     text-decoration: none;
+   }
+   a:hover {
+     color: #BBAABB;
+   }
+}
+
+#side-bar {
+  text-align:center;
+  display: block;
+  width:100%;
+  height:auto;
+  text-rendering: optimizelegibility;
+  box-sizing: border-box;
+  background:#F5F6F5;
+  padding-top: 10px;
+
+  h1 {
+    font-family:  monospace, "Helvetica Neue", Arial, sans-serif;
+    /*font-family: "PT Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
+     */
+  }
+  svg { 
+    margin: 0 auto;
+    display: block;
+  }
+
+
+  @media #{$gt-gsm} {
+    position: fixed;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    height: 100%;
+    width: 290px;
+    transition: left 0.5s ease-in 0.25s;
+    text-align: center;
+    /*background: none repeat scroll 0% 0% #F5F6F5;*/
+    background:#FFF;
+    border-right: 3px solid rgba(51, 51, 51, 0.1);
+
+    &.hidden {
+      left: -290px;
+      transition: left 0.5s ease-out 0.15s;
+    }
+  }
+}
+#desc {
+  font-size: 90%;
+  margin-top: 15px;
+}
+#about {
+   font-size: 0.8em;
+   color: #666;
+}
+.about_bar {
+   display: inline-block;
+   width: 20%;
+   text-align: left;
+   color: #121311;
+   font-size: 0.8em;
+   font-weight: bold;
+   font-family:  monospace, serif;
+   text-shadow: 0 1px 0 #DDD;
+   margin:auto;
+}
+/*
+  <div id="sommaire">
+     <div id="sommaire_blien">Accueil</div>
+     <div id="sommaire_blien">Blog</div>
+     <div id="sommaire_blien">Liens</div>
+  </div>
+*/
diff --git a/src/css/_style.scss b/src/css/_style.scss
new file mode 100644
index 0000000..196ad46
--- /dev/null
+++ b/src/css/_style.scss
@@ -0,0 +1,124 @@
+.directory {
+    cursor: pointer;
+    list-style-type: disc;
+}
+.file {
+  list-style: circle;
+  a {
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+}
+
+.qcm_item p {margin: 0; padding: 0; display:inline;}
+.qcm_check, .qcm_radio {padding-left: 32px;}
+
+blockquote {
+    color: #777;
+    padding: 1px 2%;
+    border-left: 5px solid #ccc;
+}
+
+.special-box {
+    background: #eee7da;
+    margin: 12.5px 12.5px;
+    padding: 10px 0 10px 95px; 
+    color: #424242;
+    min-height: 60px;
+}
+.special-box::before{
+    content: "";
+    display: block;
+    width: 48px;
+    height: 48px;
+    background-repeat: no-repeat;
+    margin: 0px 0 -48px -70px;
+}
+@mixin box($name, $bg) {
+  #{$name} {
+    background: $bg;
+    &::before {
+      background-image: url("/s/img/ic_" + $bg + "_black_48px.svg");
+    }
+  }
+}
+@include box('information', #daeaee);
+@include box('comment', #eea);
+@include box('attention', #eee7da);
+@include box('question', #e2daee);
+@include box('good', #aea);
+@include box('bad', #eaa);
+
+.secret {
+    background: #eee;
+    padding: 10px 0 10px 15px;
+    min-height: 20px;
+}
+.hiden_block_quote {
+    display: none;
+}
+.special-box-content {
+    margin-top: 5px;
+}
+kbd {
+    background-color: #f8f6ea;
+    padding: 2px 6px;
+    border-radius: 3px;
+    border: 1px solid #e0dab6;
+    border-bottom-width: 3px;
+    text-shadow: 0 1px 0 #fff;
+    color: #5e551f;
+}
+.view {
+    position: relative;
+}
+.raw_button {
+  position: absolute;
+  top:10px;
+  right:0;
+
+  margin      : 0;
+  padding     : 0;
+  border      : 0;
+  background  : transparent;
+  font-family : inherit;
+  font-size   : 1em;
+  cursor      : pointer;
+  > div {
+    width       : 40px;
+    height      : 24px;
+    background  : #c0c0c0 url('image.png') no-repeat center center;
+    line-height : 24px;
+    border        : 1px solid rgba(27, 31, 35, 0.2);
+    border-radius : 3px;
+    font-size: 12px;
+
+    color: #24292e;
+    background-color: #eff3f6;
+    background-image: linear-gradient(-180deg, #fafbfc 0%, #eff3f6 90%);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  }
+  > div > div {
+    font-weight: bold;
+  }
+}
+.no-style {
+  text-decoration: none;
+}
+
+@mixin state($border, $border-c) {
+  border: 2px solid $border;
+  border-radius: 2px;
+  outline: none;
+  border-color: $border-c;
+  box-shadow: 0 0 5px $border-c;
+}
+.valid {
+  @include state(#c0392b, #9F9);
+}
+.invalid {
+  @include state(#c0392b, #f99);
+}
+.glowing {
+  @include state(#c0392b, #99F);
+}
diff --git a/src/css/design.scss b/src/css/design.scss
new file mode 100755
index 0000000..fc53bfb
--- /dev/null
+++ b/src/css/design.scss
@@ -0,0 +1,52 @@
+$gsm:     "screen and (max-width: 768px)";
+$tab:     "screen and (max-width: 1024px)";
+$gt-gsm:  "screen and (min-width: 768px)";
+
+@import 'contenu';
+@import 'sommaire';
+@import 'style';
+@import 'rainbow';
+
+body {
+  font-family: 'Noto Serif', Verdana, "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
+  margin: 0px;
+  background: #f1f1f1;
+  line-height: 1.6;
+  color: #333333;
+  word-wrap: break-word;
+  font-size: 16px;
+}
+#body_c {
+  background-repeat:no-repeat;
+  background-position:top left;
+}
+.fl {
+  float: left;
+}
+ache {
+  margin-left: auto;
+  margin-right: auto;
+}
+img {
+  display: block;
+  margin: 0 auto;
+  max-width: 100%;
+}
+table {
+  border-collapse: collapse;
+  padding: 7px 13px;
+}
+table, th, td {
+    border: 1px solid #dfe2e5;
+    padding: 7px 13px;
+}
+.suite {
+    color: #888888;
+    outline: none;
+    text-decoration: none;
+    font-size: 0.6em;
+    font-weight: bold;
+    font-family: monospace, serif;
+    text-shadow: 0 1px 0 #DDD;
+}
+
diff --git a/src/js/zen.js b/src/js/zen.js
new file mode 100644
index 0000000..4dca729
--- /dev/null
+++ b/src/js/zen.js
@@ -0,0 +1,27 @@
+'use strict';
+
+window.addEventListener('scroll', () => {
+  const articles = document.getElementsByTagName('article');
+  const header = document.getElementById('side-bar');
+
+  if (window.pageYOffset >= 500) {
+    if (header && !header.classList.contains('hidden')) {
+      console.log('Hide');
+      header.classList.add('hidden');
+
+      if (articles) {
+        [...articles].forEach(e => {
+          e.classList.add('zen-mode');
+        });
+      }
+    }
+  } else if (header && header.classList.contains('hidden')) {
+    console.log('Show');
+    header.classList.remove('hidden');
+    if (articles) {
+      [...articles].forEach(e => {
+        e.classList.remove('zen-mode');
+      });
+    }
+  }
+});