Init commit

8 files changed, 495 insertions, 0 deletions

diff --git a/design/.design.css.swp b/design/.design.css.swp
new file mode 100755
index 0000000..89e9e74
--- /dev/null
+++ b/design/.design.css.swp
diff --git a/design/.sommaire.css.swp b/design/.sommaire.css.swp
new file mode 100755
index 0000000..7a61c4d
--- /dev/null
+++ b/design/.sommaire.css.swp
diff --git a/design/cloud.svg b/design/cloud.svg
new file mode 100755
index 0000000..5bace14
--- /dev/null
+++ b/design/cloud.svg
@@ -0,0 +1,17 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+  
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1169 160" xml:space="preserve">
+
+  <title>SVG Animation - A New Cloud</title>
+  <g id="screen" transform="translate(0, 0)">
+      <linearGradient id="degrade" gradientUnits="userSpaceOnUse" x1="585" x2="585" y1="0" y2="175">
+        <stop offset="0%" stop-color="#FFF" />
+        <stop offset="100%" stop-color="#888" />
+      </linearGradient>
+  <path d="M0,75 Q30,90 52,118Q61,119 68,124Q90,95 118,90Q140,51 188,68Q265,-20 340,75Q375,80 375,110Q395,115 408,128Q440,110 470,122Q535,64 608,113Q620,112 630,110Q650,70 700,88Q780,30 853,97L867,100Q879,60 917,68Q943,20 988,45Q1066,-20 1140,55Q1160,50 1170,75L1170,175L0,175L0,175"
+        fill="none" stroke="grey" stroke-width="1" style="fill:url(#degrade)" /> 
+         </g>
+
+</svg>
+
diff --git a/design/commentaire.css b/design/commentaire.css
new file mode 100755
index 0000000..5c8bdec
--- /dev/null
+++ b/design/commentaire.css
@@ -0,0 +1,47 @@
+#commentaires
+{
+    background-color: #c9cbce;
+   -moz-border-radius: 10px;
+   -webkit-border-radius: 10px;
+    border-radius: 10px;
+    width: 90%; height: auto;
+    margin: auto;
+    padding-bottom: 10px;
+}
+#c_intro
+{
+    font-style: oblique;
+    padding-top: 10px;
+    line-height: 250%;
+    padding-left: 25px;
+    text-indent: 10px;
+    font-size: 0.95em;
+    color: #944040;
+}
+#c_contenu
+{
+    text-indent: 100px;
+    font-size: 0.67em; 
+    width: 70%;  height: auto; 
+    padding-left: 15px;
+}
+#c_contenu:after
+{
+    color: #FFF;
+    content: "_______________";
+}
+#c_post
+{
+    width: 70%;  height: auto; 
+    padding-left: 15px;
+}
+#c_post p
+{
+    font-size: 0.7em; 
+    padding-left: 25px;
+
+}
+#c_titre
+{
+    color: #6b633e;
+}
diff --git a/design/confirmation.css b/design/confirmation.css
new file mode 100755
index 0000000..d7e1f97
--- /dev/null
+++ b/design/confirmation.css
@@ -0,0 +1,96 @@
+#boutons
+{
+  float: right;
+  margin: 2px 2px 2px 2px;
+}
+#bouton
+{
+   position: relative;
+   width: 20px; height: 16px;
+   background-color: #819fbc;
+   border: 1px solid #4a6a8b;
+  -moz-border-radius: 2px;
+}
+#bouton:hover
+{
+ -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
+ -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
+  box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
+}
+#reduire
+{
+   position: relative;
+   margin: 1px 0px 0px 1px;
+   width: 18px; height: 14px;
+   background-color: #5a81a8;
+}
+#reduire div
+{
+   position: absolute;
+   margin: 9px 0px 0px 2px; 
+   width: 14px; height: 2px; 
+   background-color: #dfe5ed;
+  -moz-border-radius: 1px;
+}
+#close
+{
+   position: relative;
+   margin: 1px 0px 0px 1px;
+   width: 18px; height: 14px;
+   background-color: #5a81a8;
+}
+#close div
+{
+   border: 1px solid #486480;
+  -moz-border-radius: 1px;
+  -webkit-border-radius: 1px;
+   background-color: #dfe5ed;
+   position: absolute;
+   margin: 5px 0px 0px 1px; 
+   width: 14px; height: 2px; 
+}
+#close div:first-child
+{
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+   transform: rotate(45deg);
+}
+#close div:last-child
+{
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+   transform: rotate(-45deg);
+}
+#confirmation
+{
+   margin: auto;
+   width: 600px; height: 250px; 
+   background-color: #517aa3;
+   border: 1px solid #8ba7c2;
+  -moz-border-radius: 10px;
+}
+#confirmation_mes
+{
+   width: 594px; height: 222px; 
+   border: 1px solid #395572;
+   background-color: #e7e7e7;
+   margin: 23px 0px 0px 2px;
+  -moz-border-radius: 10px;
+}
+/*
+  <div id="confirmation">
+     <div id="boutons">
+        <div id="bouton">
+            <div id="close"><div></div><div></div></div>
+        </div>
+     </div>
+     <div id="boutons">
+        <div id="bouton">
+            <div id="reduire"><div></div></div>
+        </div>
+     </div>
+     <div id="confirmation_mes"><br/>
+     Voulez confirmez l'envoye de ce commentaire ? 
+     </div>
+  </div>
+*/
diff --git a/design/contenu.css b/design/contenu.css
new file mode 100755
index 0000000..38695a7
--- /dev/null
+++ b/design/contenu.css
@@ -0,0 +1,174 @@
+
+#article {
+  border-top: 3px solid #eaeaea;
+  border-top: 3px solid rgba(51, 51, 51, 0.1);                                                        
+  padding: 1.6em 0;                            
+  border-color: #eaeaea !important; /* Make sure color schemes don't affect to print */    
+  margin-left: 10px;
+}
+#contenu_top
+{
+    font-size: 1.5em;
+    font-weight: bold;
+    font-family:  OpenSymbol, "Vemana2000", serif;
+    text-shadow: 0 2px 0 #FFF;
+    line-height: 250%;
+    color: #121311;
+}
+#info_article {
+  margin-right: 2%;
+  margin-left: 3%;
+  text-indent: 3%;
+  float: left;
+  width: 95%;
+}
+#autres_articles a
+{ 
+  display: inline-block;
+  text-indent: 30px;
+  text-decoration: none;
+  font-style: italic;
+  font-size: 0.9em;
+  outline: none;
+  color: #3322F0;
+}
+#autres_articles a:hover
+{ 
+  color: #222299;
+}
+#autres_articles:before {
+  content: "______________________________";
+}
+#autres_articles a:before {
+  //content: ">_";
+}
+#autres_articles h4
+{
+  text-indent: 10px;
+  font-style: italic;
+}
+#autres_articles
+{
+  float: left;
+
+  width: 100%;
+  top: 0px;
+    text-align: center;
+  margin-bottom: 20px;
+}
+#contenu
+{
+  margin-right: 2%;
+  margin-left: 3%;
+  text-indent: 3%;
+  float: left;
+  width: 83%;
+  background: #FFF;
+  padding-right:0%;
+  padding-left:0%;
+  padding: 1.6em 1.6em;                            
+
+
+}
+@media only screen and (min-width: 768px) {
+  #autres_articles
+  {
+    float: none;
+    width: auto;
+    background: #f1f1f1;
+  }
+  #contenu {
+    float: none;
+    margin-right: 7%;
+    margin-left: 390px;
+    width: auto;
+
+    font-size:1.3em;
+    padding-right:5%;
+    padding-left:5%;
+
+    border: 1px solid #eaeaea;
+    border: 1px solid rgba(51, 51, 51, 0.1);                                                        
+    border-color: #eaeaea !important;
+    margin-top: 50px;
+  }
+  #info_article {
+    padding-left: 290px;
+  }
+}
+#contenu_
+{
+    height: auto; 
+}
+#contenu_ p
+{
+    font-size: 1em; 
+}
+#contenu_ h3
+{
+    color: #6b633e;
+}
+@media only screen and (min-width: 768px) {
+#contenu_ h3 {font-size: 1.4em;}
+#contenu_top2 {font-size: 1.5em;}
+}
+#intro
+{
+    margin-top: 2.5%;
+    padding-left: 6%;
+    text-indent: 5%;
+    font-size: 0.65em;
+    color: #944040;
+}
+#intro:first-letter
+{
+    font-size: 1.3em;
+    color: #bf5353;
+    font-weight: bold;
+}
+#conclusion
+{
+    margin-top: 2.5%;
+    padding-left: 6%;
+    text-indent: 5%;
+    font-size: 0.9em;
+    color: #575883;
+}
+#contenu_ p
+{
+  text-indent: 6%;
+}
+#contenu_ a
+{
+    text-decoration: none;
+    outline: none;
+}
+#contenu_ a:hover
+{
+    font-style: italic;
+}
+#foot
+{
+    
+}
+#foot_cloud
+{
+    background-image: url(../cloud.svg);
+    position: absolute;
+    background-position:bottom left;
+    width: 100%;  height: 150px; 
+    position: absolute;
+    margin: 45px 0px 0px 0px;
+}
+/*
+  <div id="contenu">
+     <div id="Titre"/>
+     <div id="contenu_top"><div id="contenu_top2"></div>
+     </div>
+     <div id="contenu_"><br/>
+     Voulez confirmez l'envoye de ce commentaire ? 
+     </div>
+     <div id="commentaires">
+     </div>
+  </div>
+*/
diff --git a/design/design.css b/design/design.css
new file mode 100755
index 0000000..9179437
--- /dev/null
+++ b/design/design.css
@@ -0,0 +1,57 @@
+@import url("contenu.css");
+@import url("sommaire.css");
+@import url("confirmation.css");
+@import url("commentaire.css");
+
+@font-face {
+  font-family: 'Noto Serif';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Noto Serif'), local('NotoSerif'), url(../font/notoserif.woff) format('woff') ;
+}
+@font-face {
+  font-family: 'Noto Serif';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Noto Serif Bold'), local('NotoSerif-Bold'),  url(../font/notoserifbold.woff) format('woff') ;
+}
+@font-face {
+  font-family: 'Noto Serif';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Noto Serif Italic'), local('NotoSerif-Italic'),  url(../font/notoserifitalic.woff) format('woff') ;
+}
+
+
+
+body
+{
+  font-family: 'Noto Serif', Verdana, sans-serif;
+  width: 100%;
+  margin: 0px;
+  background: #f1f1f1;
+  color: #333333;
+
+}
+#body_c
+{
+  background-repeat:no-repeat;
+  background-position:top left;
+}
+.fr
+{
+  float: right;
+}
+.fl
+{
+  float: left;
+}
+ache {
+  margin-left: auto;
+  margin-right: auto;
+}
+img {
+  display: block;
+  margin: 0 auto;
+  max-width: 100%;
+}
diff --git a/design/sommaire.css b/design/sommaire.css
new file mode 100755
index 0000000..50fbdfe
--- /dev/null
+++ b/design/sommaire.css
@@ -0,0 +1,104 @@
+
+#sommaire
+{
+     height: 40px; 
+     width: auto;
+    text-align: center;
+}
+
+@media only screen and (min-width: 768px) {
+  #sommaire {
+    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;
+}
+.sommaire_blien:before {
+  content: "/";
+}
+.sommaire_blien a
+{
+    color: #888888;
+    outline: none;
+    text-decoration: none;
+}
+.sommaire_blien a:hover
+{
+    color: #BBAABB;
+}
+
+  #side-bar{
+    text-align:center;
+    display: block;
+    /*background: none repeat scroll 0% 0% #F5F6F5;*/
+    position:relative;
+    width:100%;
+    height:auto;
+    text-rendering: optimizelegibility;
+    box-sizing: border-box;
+    background:#F5F6F5;
+    padding-top: 10px;
+  }
+
+@media screen and (min-width: 768px) {
+  #side-bar {
+    position: fixed;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    height: 100%;
+    width: 290px;
+    text-align: center;
+    /*background: none repeat scroll 0% 0% #F5F6F5;*/
+    background:#FFF;
+    border-right: 3px solid rgba(51, 51, 51, 0.1);
+
+  }
+}
+#side-bar h1 {
+   font-family:  monospace, "Helvetica Neue", Arial, sans-serif;
+  /*font-family: "PT Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
+*/
+}
+#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;
+}
+.side-bar svg {  margin: 0 auto;
+  display:block;
+}
+
+/*
+  <div id="sommaire">
+     <div id="sommaire_blien">Accueil</div>
+     <div id="sommaire_blien">Blog</div>
+     <div id="sommaire_blien">Liens</div>
+  </div>
+*/