From f0f758803cc2b142853579586c5cebc12e223a97 Mon Sep 17 00:00:00 2001 From: ache Date: Sat, 29 Dec 2018 02:10:04 +0100 Subject: =?UTF-8?q?Add=20stark=E2=9D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/.design.css.swp | Bin 0 -> 12288 bytes src/css/.sommaire.css.swp | Bin 0 -> 12288 bytes src/css/_contenu.scss | 94 +++++++++++++++++++++++++++++++++++ src/css/_rainbow.scss | 85 +++++++++++++++++++++++++++++++ src/css/_sommaire.scss | 97 ++++++++++++++++++++++++++++++++++++ src/css/_style.scss | 124 ++++++++++++++++++++++++++++++++++++++++++++++ src/css/design.scss | 52 +++++++++++++++++++ src/js/zen.js | 27 ++++++++++ 8 files changed, 479 insertions(+) create mode 100755 src/css/.design.css.swp create mode 100755 src/css/.sommaire.css.swp create mode 100755 src/css/_contenu.scss create mode 100644 src/css/_rainbow.scss create mode 100755 src/css/_sommaire.scss create mode 100644 src/css/_style.scss create mode 100755 src/css/design.scss create mode 100644 src/js/zen.js (limited to 'src') diff --git a/src/css/.design.css.swp b/src/css/.design.css.swp new file mode 100755 index 0000000..89e9e74 Binary files /dev/null and b/src/css/.design.css.swp differ diff --git a/src/css/.sommaire.css.swp b/src/css/.sommaire.css.swp new file mode 100755 index 0000000..7a61c4d Binary files /dev/null and b/src/css/.sommaire.css.swp differ 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; +} +/* +
+
Accueil
+
Blog
+
Liens
+
+*/ 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'); + }); + } + } +}); -- cgit v1.2.3