diff options
author | Ache <ache@ache.one> | 2016-08-07 20:21:53 +0200 |
---|---|---|
committer | Ache <ache@ache.one> | 2016-08-07 20:21:53 +0200 |
commit | dfb7ec15b5f20ea7a5c47f625fb731ce148b184d (patch) | |
tree | 4f33e4d032fb4ffdb1db26ec969a062d138932d6 /design |
Init commit
Diffstat (limited to 'design')
-rwxr-xr-x | design/.design.css.swp | bin | 0 -> 12288 bytes | |||
-rwxr-xr-x | design/.sommaire.css.swp | bin | 0 -> 12288 bytes | |||
-rwxr-xr-x | design/cloud.svg | 17 | ||||
-rwxr-xr-x | design/commentaire.css | 47 | ||||
-rwxr-xr-x | design/confirmation.css | 96 | ||||
-rwxr-xr-x | design/contenu.css | 174 | ||||
-rwxr-xr-x | design/design.css | 57 | ||||
-rwxr-xr-x | design/sommaire.css | 104 |
8 files changed, 495 insertions, 0 deletions
diff --git a/design/.design.css.swp b/design/.design.css.swp Binary files differnew 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 Binary files differnew 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> +*/ |