commit 03621521734ecfb01212494bf00301396dcb803f Author: tierce (Thierry Fenasse) Date: Mon Jun 20 15:56:22 2022 +0200 remise en ordre des dossiers diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..123ea6f --- /dev/null +++ b/.gitmodules @@ -0,0 +1,12 @@ +[submodule "computhings/dependances/fork-awesome"] + path = computhings/dependances/fork-awesome + url = https://github.com/ForkAwesome/Fork-Awesome.git +[submodule "nomdedom/simple.css"] + path = nomdedom/simple.css + url = https://github.com/kevquirk/simple.css.git +[submodule "gnuragistes/dependances/fork-awesome"] + path = gnuragistes/dependances/fork-awesome + url = https://github.com/ForkAwesome/Fork-Awesome.git +[submodule "nomdedom/dependances/fork-awesome"] + path = nomdedom/dependances/fork-awesome + url = https://github.com/ForkAwesome/Fork-Awesome.git diff --git a/README.md b/README.md new file mode 100644 index 0000000..c4aac55 --- /dev/null +++ b/README.md @@ -0,0 +1,16 @@ +# Labo html css etc. + +Dans l'idée d'en faire un jour des squelettes SPIP. + +C'est à chaque fois… + +- un fichier `index.html` qui sert de maquette +- un dossier `dependances` qui contient des répo externes comme ForkAwsome, Simple css, etc. +- un dossier `images` avec le favicon ou d'autres images +- un dossier `polices` pour les polices de caractère +- un dossier `js` pour les bouts de Javascripts. + +## Remarque + +Pou `computhings`, c'est basé sur PureCSS qui a été bidouillé parce que c'était avant d'intégrér le concepte de `dependances` liées à des répo git extenes *(sub-modules)*. + diff --git a/computhings/css/layouts/print.css b/computhings/css/layouts/print.css new file mode 100755 index 0000000..6a73188 --- /dev/null +++ b/computhings/css/layouts/print.css @@ -0,0 +1,7 @@ +@media print +{ + .no-print, .no-print *{ + display: none !important; + height: 0; + } +} diff --git a/computhings/css/layouts/side-menu-old-ie.css b/computhings/css/layouts/side-menu-old-ie.css new file mode 100755 index 0000000..b126c88 --- /dev/null +++ b/computhings/css/layouts/side-menu-old-ie.css @@ -0,0 +1,255 @@ +body { + color: #777; +} + +.pure-img-responsive { + max-width: 100%; + height: auto; +} + +/* +Add transition to containers so they can push in and out. +*/ + +#layout, +#menu, +.menu-link { + -webkit-transition: all 0.2s ease-out; + -moz-transition: all 0.2s ease-out; + -ms-transition: all 0.2s ease-out; + -o-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +/* +This is the parent `
` that contains the menu and the content area. +*/ + +#layout { + position: relative; + left: 0; + padding-left: 0; +} + +#layout.active #menu { + left: 150px; + width: 150px; +} + +#layout.active .menu-link { + left: 150px; +} + +/* +The content `
` is where all your content goes. +*/ + +.content { + margin: 0 auto; + padding: 0 2em; + max-width: 800px; + margin-bottom: 50px; + line-height: 1.6em; +} + +.header { + margin: 0; + color: #333; + text-align: center; + padding: 2.5em 2em 0; + border-bottom: 1px solid #eee; +} + +.header h1 { + margin: 0.2em 0; + font-size: 3em; + font-weight: 300; +} + +.header h2 { + font-weight: 300; + color: #ccc; + padding: 0; + margin-top: 0; +} + +.subheader { + margin: 50px 0 20px 0; + font-weight: 300; + color: #888; +} + +/* +The `#menu` `
` is the parent `
` that contains the `.pure-menu` that +appears on the left side of the page. +*/ + +#menu { + margin-left: -150px; + /* "#menu" width */ + width: 150px; + position: fixed; + top: 0; + left: 0; + bottom: 0; + z-index: 1000; + /* so the menu or its navicon stays above all content */ + background: #191818; + overflow-y: auto; + -webkit-overflow-scrolling: touch; +} + +/* + All anchors inside the menu should be styled like this. + */ + +#menu a { + color: #999; + border: none; + padding: 0.6em 0 0.6em 0.6em; +} + +/* + Remove all background/borders, since we are applying them to #menu. + */ + +#menu .pure-menu, +#menu .pure-menu ul { + border: none; + background: transparent; +} + +/* + Add that light border to separate items into groups. + */ + +#menu .pure-menu ul, +#menu .pure-menu .menu-item-divided { + border-top: 1px solid #333; +} + +/* + Change color of the anchor links on hover/focus. + */ + +#menu .pure-menu li a:hover, +#menu .pure-menu li a:focus { + background: #333; +} + +/* + This styles the selected menu item `
  • `. + */ + +#menu .pure-menu-selected, +#menu .pure-menu-heading { + background: #1f8dd6; +} + +/* + This styles a link within a selected menu item `
  • `. + */ + +#menu .pure-menu-selected a { + color: #fff; +} + +/* + This styles the menu heading. + */ + +#menu .pure-menu-heading { + font-size: 110%; + color: #fff; + margin: 0; +} + +/* -- Dynamic Button For Responsive Menu -------------------------------------*/ + +/* +The button to open/close the Menu is custom-made and not part of Pure. Here's +how it works: +*/ + +/* +`.menu-link` represents the responsive menu toggle that shows/hides on +small screens. +*/ + +.menu-link { + position: fixed; + display: block; + /* show this only on small screens */ + top: 0; + left: 0; + /* "#menu width" */ + background: #000; + background: rgba(0,0,0,0.7); + font-size: 10px; + /* change this value to increase/decrease button size */ + z-index: 10; + width: 2em; + height: auto; + padding: 2.1em 1.6em; +} + +.menu-link:hover, +.menu-link:focus { + background: #000; +} + +.menu-link span { + position: relative; + display: block; +} + +.menu-link span, +.menu-link span:before, +.menu-link span:after { + background-color: #fff; + width: 100%; + height: 0.2em; +} + +.menu-link span:before, +.menu-link span:after { + position: absolute; + margin-top: -0.6em; + content: " "; +} + +.menu-link span:after { + margin-top: 0.6em; +} + +/* -- Responsive Styles (Media Queries) ------------------------------------- */ + +/* +Hides the menu at `48em`, but modify this based on your app's needs. +*/ + +.header, +.content { + padding-left: 2em; + padding-right: 2em; +} + +#layout { + padding-left: 150px; + /* left col width "#menu" */ + left: 0; +} + +#menu { + left: 150px; +} + +.menu-link { + position: fixed; + left: 150px; + display: none; +} + +#layout.active .menu-link { + left: 150px; +} diff --git a/computhings/css/layouts/side-menu.css b/computhings/css/layouts/side-menu.css new file mode 100755 index 0000000..04e836f --- /dev/null +++ b/computhings/css/layouts/side-menu.css @@ -0,0 +1,349 @@ +body { + color: #777; +} + +.pure-img-responsive { + max-width: 100%; + height: auto; + max-height: 200px; +} + +/* +Add transition to containers so they can push in and out. +*/ +#layout, +#menu, +.menu-link { + -webkit-transition: all 0.2s ease-out; + -moz-transition: all 0.2s ease-out; + -ms-transition: all 0.2s ease-out; + -o-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; +} + +/* +This is the parent `
    ` that contains the menu and the content area. +*/ +#layout { + position: relative; + left: 0; + padding-left: 0; +} +#layout.active #menu { + left: 150px; + width: 150px; +} + +#layout.active .menu-link { + left: 150px; +} + +/* +The header `
    ` that contains the title, subtitle and description +*/ + +.header { + margin: 0; + color: #333; + text-align: center; + padding: 2.5em 2em 0; + border-bottom: 1px solid #eee; + } + +.header h1 { + margin: 0.2em 0; + font-size: 3em; + font-weight: 300; + color: #fe1976; +} + +.header h2 { + font-weight: 300; + color: #777; + padding: 0; + margin-top: 0; +} + +/* +The content `
    ` is where all your content goes. +*/ +.content { + margin: 0 auto; + padding: 0 2em; + max-width: 800px; + margin-bottom: 50px; + line-height: 1.6em; +} + +.content a{ + color: #fe1976; + text-decoration: none; + background-color: #EEE; +} + +.content a:hover{ + background-color:#96D321; + color:white; +} + + +/* +The subheader `div` is where meta data is displayed (date, tags, ...) +*/ +.subheader { + margin: 2px 10px 20px 0px; + color: #888; + text-align: right; + font-style: italic; + font-size: small; +} + +.subheader a { + color: #84bb1D; + text-decoration: none; +} + +.content h2 { + /* border-bottom: 10px solid black; */ + /* box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black */ + /* color: #fe1976; */ + color: #96D321; +} + +.fiche-client { + display: block; +} +/* +The footer `
    ` that contains the bottom licences, and other links +*/ + +.footer { + font-size: smaller; + text-align: center; +} + +.footer a{ + color: #fe1976; + text-decoration: none; +} + +.footer hr{ + color: #E8FFD2; + margin: 60px 0px 10px; +} + +/* +About using some img alignement with markdown and pure-g +*/ + +.center { + margin: auto; +} + +.right { + float: right; + margin: 0px 0px 10px 10px +} + +.avatar { + float: right; + max-width: 120px; + margin: 0px 0px 10px 0px +} + +/* +The `#menu` `
    ` is the parent `
    ` that contains the `.pure-menu` that +appears on the left side of the page. +*/ + +#menu { + margin-left: -150px; /* "#menu" width */ + width: 150px; + position: fixed; + top: 0; + left: 0; + bottom: 0; + z-index: 1000; /* so the menu or its navicon stays above all content */ + background: #191818; + overflow-y: auto; + -webkit-overflow-scrolling: touch; +} +/* +All anchors inside the menu should be styled like this. +*/ +#menu a { + color: #999; + border: none; + padding: 0.6em 0 0.6em 0.6em; +} + +/* +Remove all background/borders, since we are applying them to #menu. +*/ +#menu .pure-menu, +#menu .pure-menu ul { + border: none; + background: transparent; +} + +/* +Add that light border to separate items into groups. +*/ +#menu .pure-menu ul, +#menu .pure-menu .menu-item-divided { + border-top: 1px solid #333; +} +/* +Change color of the anchor links on hover/focus. +*/ +#menu .pure-menu li a:hover, +#menu .pure-menu li a:focus { + background: #333; + color: #fff; +} + +/* +This styles the selected menu item `
  • `. +*/ +#menu .pure-menu-selected, +#menu .pure-menu-heading { + background: #96D321; +} +/* +This styles a link within a selected menu item `
  • `. +*/ + +#menu .pure-menu-active a { + color: #96D321; +} + +/* +This styles the menu heading. +*/ +#menu .pure-menu-heading { + font-size: 110%; + color: #fff; + margin: 0; +} + +/* -- Dynamic Button For Responsive Menu -------------------------------------*/ + +/* +The button to open/close the Menu is custom-made and not part of Pure. Here's +how it works: +*/ + +/* +`.menu-link` represents the responsive menu toggle that shows/hides on +small screens. +*/ +.menu-link { + position: fixed; + display: block; /* show this only on small screens */ + top: 0; + left: 0; /* "#menu width" */ + background: #000; + background: rgba(0,0,0,0.7); + font-size: 10px; /* change this value to increase/decrease button size */ + z-index: 10; + width: 2em; + height: auto; + padding: 2.1em 1.6em; +} + +.menu-link:hover, +.menu-link:focus { +background: #000; +} + +.menu-link span { +position: relative; +display: block; +} + +.menu-link span, +.menu-link span:before, +.menu-link span:after { +background-color: #fff; +width: 100%; +height: 0.2em; +} + +.menu-link span:before, +.menu-link span:after { + position: absolute; + margin-top: -0.6em; + content: " "; +} + +.menu-link span:after { + margin-top: 0.6em; +} + +/* content tuning */ +blockquote { + background-color: ghostwhite; + border-left-color: rgb(214, 214, 214); + border-left-style: solid; + border-left-width: 5px; + line-height: 25.6px; + margin-bottom: 16px; + margin-left: 0px; + margin-right: 0px; + margin-top: 0px; + overflow-wrap: break-word; + padding-bottom: 0px; + padding-left: 15px; + padding-right: 15px; + padding-top: 0px; +} + +code { + color: #333; + font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; +} + +/* -- Responsive Styles (Media Queries) ------------------------------------- */ + +/* +Hides the menu at `48em`, but modify this based on your app's needs. +*/ +@media (min-width: 48em) { + + .header, + .content { + padding-left: 2em; + padding-right: 2em; + } + + #layout { + padding-left: 150px; /* left col width "#menu" */ + left: 0; + } + #menu { + left: 150px; + } + + .menu-link { + position: fixed; + left: 150px; + display: none; + } + + #layout.active .menu-link { + left: 150px; + } +} + +@media (max-width: 48em) { + /* Only apply this when the window is small. Otherwise, the following + case results in extra padding on the left: + * Make the window small. + * Tap the menu to trigger the active state. + * Make the window large again. + */ + #layout.active { + position: relative; + left: 150px; + } +} diff --git a/computhings/css/main.css b/computhings/css/main.css new file mode 100755 index 0000000..fbcd6f0 --- /dev/null +++ b/computhings/css/main.css @@ -0,0 +1,1006 @@ +/*! +Pure v0.6.2 +Copyright 2013 Yahoo! +Licensed under the BSD License. +https://github.com/yahoo/pure/blob/master/LICENSE.md +*/ +/*! +normalize.css v^3.0 | MIT License | git.io/normalize +Copyright (c) Nicolas Gallagher and Jonathan Neal +*/ +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ + +.pure-button:focus,a:active,a:hover{ + outline:0; + } + +.pure-table,table{ + border-collapse:collapse; + border-spacing:0 + } + +html{ + font-family:sans-serif; + -ms-text-size-adjust:100%; + -webkit-text-size-adjust:100% + } + +body{ + margin:0; + } + +article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{ + display:block + } + +audio,canvas,progress,video{ + display:inline-block; + vertical-align:baseline + } + +audio:not([controls]){ + display:none;height:0 + } + +[hidden],template{ + display:none + } + +a{ + background-color:transparent + } + +abbr[title]{ + border-bottom:1px dotted + } + +b,optgroup,strong{ + font-weight:700 + } + +dfn{ + font-style:italic + } + +h1{ + font-size:2em; + margin:.67em 0 + } + +mark{ + background:#ff0; + color:#000 + } + +small{ + font-size:80% + } + +sub,sup{ + font-size:75%; + line-height:0; + position:relative; + vertical-align:baseline + } + +sup{ + top:-.5em + } + +sub{ + bottom:-.25em + } + +img{ + border:0 + } + +svg:not(:root){ + overflow:hidden + } + +figure{ + margin:1em 40px + } + +hr{ + box-sizing:content-box; + height:0 + } + +pre,textarea{ + overflow:auto + } + +code,kbd,pre,samp{ + font-family:monospace,monospace; + font-size:1em + } + +button,input,optgroup,select,textarea{ + color:inherit;font:inherit;margin:0 + } + +.pure-button,input{ + line-height:normal + } + +button{ + overflow:visible + } + +button,select{ + text-transform:none + } + +button,html input[type=button],input[type=reset],input[type=submit]{ + -webkit-appearance:button; + cursor:pointer + } + +button[disabled],html input[disabled]{ + cursor:default + } + +button::-moz-focus-inner,input::-moz-focus-inner{ + border:0; + padding:0 + } + +input[type=checkbox],input[type=radio]{ + box-sizing:border-box; + padding:0 + } + +input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{ + height:auto + } + +input[type=search]{ + -webkit-appearance:textfield; + box-sizing:content-box + } + +.pure-button,.pure-form input:not([type]),.pure-menu{ + box-sizing:border-box; + /*background-image: url("assets/background.png")*/ + } + +input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{ + -webkit-appearance:none + } + +fieldset{ + border:1px solid silver; + margin:0 2px; + padding:.35em .625em .75em + } + +legend,td,th{ + padding:0 + } + +legend{ + border:0 + } + +.hidden,[hidden]{ + display:none!important + } + +.pure-img{ + max-width:100%; + height:auto; + display:block + } + +.pure-g{ + letter-spacing:-.31em; + text-rendering:optimizespeed; + font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif; + display:-webkit-box; + display:-webkit-flex; + display:-ms-flexbox; + display:flex; + -webkit-flex-flow:row wrap; + -ms-flex-flow:row wrap; + flex-flow:row wrap; + -webkit-align-content:flex-start; + -ms-flex-line-pack:start; + align-content:flex-start + } + +@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){ + table .pure-g{display:block} + } + +.opera-only :-o-prefocus,.pure-g{ + word-spacing:-.43em + } + +.pure-u,.pure-u-1,.pure-u-1-1,.pure-u-1-12, +.pure-u-1-2,.pure-u-1-24,.pure-u-1-3,.pure-u-1-4, +.pure-u-1-5,.pure-u-1-6,.pure-u-1-8,.pure-u-10-24, +.pure-u-11-12,.pure-u-11-24,.pure-u-12-24,.pure-u-13-24, +.pure-u-14-24,.pure-u-15-24,.pure-u-16-24,.pure-u-17-24, +.pure-u-18-24,.pure-u-19-24,.pure-u-2-24,.pure-u-2-3,.pure-u-2-5, +.pure-u-20-24,.pure-u-21-24,.pure-u-22-24,.pure-u-23-24,.pure-u-24-24, +.pure-u-3-24,.pure-u-3-4,.pure-u-3-5,.pure-u-3-8,.pure-u-4-24,.pure-u-4-5, +.pure-u-5-12,.pure-u-5-24,.pure-u-5-5,.pure-u-5-6,.pure-u-5-8,.pure-u-6-24, +.pure-u-7-12,.pure-u-7-24,.pure-u-7-8,.pure-u-8-24,.pure-u-9-24{ + letter-spacing:normal; + word-spacing:normal; + vertical-align:top; + text-rendering:auto; + display:inline-block; + zoom:1 + } + +.pure-g [class*=pure-u]{ + font-family:sans-serif + } + +.pure-u-1-24{ + width:4.1667% + } + +.pure-u-1-12,.pure-u-2-24{ + width:8.3333% + } + +.pure-u-1-8,.pure-u-3-24{ + width:12.5% + } + +.pure-u-1-6,.pure-u-4-24{ + width:16.6667% + } + +.pure-u-1-5{ + width:20% + } + +.pure-u-5-24{ + width:20.8333% + } + +.pure-u-1-4,.pure-u-6-24{ + width:25% + } + +.pure-u-7-24{ + width:29.1667% + } + +.pure-u-1-3,.pure-u-8-24{ + width:33.3333% + } + +.pure-u-3-8,.pure-u-9-24{ + width:37.5% + } + +.pure-u-2-5{ + width:40% + } + +.pure-u-10-24,.pure-u-5-12{ + width:41.6667% + } + +.pure-u-11-24{ + width:45.8333% + } + +.pure-u-1-2,.pure-u-12-24{ + width:50% + } + +.pure-u-13-24{ + width:54.1667% + } + +.pure-u-14-24,.pure-u-7-12{ + width:58.3333% + } + +.pure-u-3-5{ + width:60% + } + +.pure-u-15-24,.pure-u-5-8{ + width:62.5% + } + +.pure-u-16-24,.pure-u-2-3{ + width:66.6667% + } + +.pure-u-17-24{ + width:70.8333% + } + +.pure-u-18-24,.pure-u-3-4{ + width:75% + } + +.pure-u-19-24{ + width:79.1667% + } + +.pure-u-4-5{ + width:80% + } + +.pure-u-20-24,.pure-u-5-6{ + width:83.3333% + } + +.pure-u-21-24,.pure-u-7-8{ + width:87.5% + } + +.pure-u-11-12,.pure-u-22-24{ + width:91.6667% + } + +.pure-u-23-24{ + width:95.8333% + } + +.pure-u-1,.pure-u-1-1,.pure-u-24-24,.pure-u-5-5{ + width:100% + } + +.pure-button{ + display:inline-block; + zoom:1; + white-space:nowrap; + vertical-align:middle; + text-align:center; + cursor:pointer; + -webkit-user-drag:none; + -webkit-user-select:none; + -moz-user-select:none; + -ms-user-select:none; + user-select:none + } + +.pure-button::-moz-focus-inner{ + padding:0; + border:0 + } + +.pure-button-group{ + letter-spacing:-.31em; + text-rendering:optimizespeed + } + +.opera-only :-o-prefocus,.pure-button-group{ + word-spacing:-.43em + } + +.pure-button{ + font-family:inherit; + font-size:100%; + padding:.5em 1em; + color:#444; + color:rgba(0,0,0,.8); + border:1px solid #999; + border:transparent; + background-color:#E6E6E6; + text-decoration:none; + border-radius:2px + } + +.pure-button-hover,.pure-button:focus,.pure-button:hover{ + filter:alpha(opacity=90); + background-image:-webkit-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1)); + background-image:linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1)) + } + +.pure-button-active,.pure-button:active{ + box-shadow:0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset; + border-color:#000/9 + } + +.pure-button-disabled,.pure-button-disabled:active,.pure-button-disabled:focus,.pure-button-disabled:hover,.pure-button[disabled]{ + border:none; + background-image:none; + filter:alpha(opacity=40); + opacity:.4; + cursor:not-allowed; + box-shadow:none;pointer-events:none + } + +.pure-button-hidden{ + display:none + } + +.pure-button-primary,.pure-button-selected,a.pure-button-primary,a.pure-button-selected{ + background-color:#0078e7; + color:#fff + } + +.pure-button-group .pure-button{ + letter-spacing:normal; + word-spacing:normal; + vertical-align:top; + text-rendering:auto; + margin:0; + border-radius:0; + border-right:1px solid #111; + border-right:1px solid rgba(0,0,0,.2) + } + +.pure-button-group .pure-button:first-child{ + border-top-left-radius:2px; + border-bottom-left-radius:2px + } + +.pure-button-group .pure-button:last-child{ + border-top-right-radius:2px; + border-bottom-right-radius:2px; + border-right:none + } + +.pure-form input[type=password], +.pure-form input[type=email], +.pure-form input[type=url], +.pure-form input[type=date], +.pure-form input[type=month], +.pure-form input[type=time], +.pure-form input[type=datetime], +.pure-form input[type=datetime-local], +.pure-form input[type=week], +.pure-form input[type=tel], +.pure-form input[type=color], +.pure-form input[type=number], +.pure-form input[type=search], +.pure-form input[type=text], +.pure-form select, +.pure-form textarea{ + padding:.5em .6em; + display:inline-block; + border:1px solid #ccc; + box-shadow:inset 0 1px 3px #ddd; + border-radius:4px; + vertical-align:middle; + box-sizing:border-box + } + +.pure-form input:not([type]){ + padding:.5em .6em; + display:inline-block; + border:1px solid #ccc; + box-shadow:inset 0 1px 3px #ddd; + border-radius:4px + } + +.pure-form input[type=color]{ + padding:.2em .5em + } + +.pure-form input:not([type]):focus, +.pure-form input[type=password]:focus, +.pure-form input[type=email]:focus, +.pure-form input[type=url]:focus, +.pure-form input[type=date]:focus, +.pure-form input[type=month]:focus, +.pure-form input[type=time]:focus, +.pure-form input[type=datetime]:focus, +.pure-form input[type=datetime-local]:focus, +.pure-form input[type=week]:focus, +.pure-form input[type=tel]:focus, +.pure-form input[type=color]:focus, +.pure-form input[type=number]:focus, +.pure-form input[type=search]:focus, +.pure-form input[type=text]:focus, +.pure-form select:focus, +.pure-form textarea:focus{ + outline:0; + border-color:#129FEA + } + +.pure-form input[type=file]:focus, +.pure-form input[type=checkbox]:focus, +.pure-form input[type=radio]:focus{ + outline:#129FEA auto 1px + } + +.pure-form .pure-checkbox,.pure-form .pure-radio{ + margin:.5em 0; + display:block + } + +.pure-form input:not([type])[disabled], +.pure-form input[type=password][disabled], +.pure-form input[type=email][disabled], +.pure-form input[type=url][disabled], +.pure-form input[type=date][disabled], +.pure-form input[type=month][disabled], +.pure-form input[type=time][disabled], +.pure-form input[type=datetime][disabled], +.pure-form input[type=datetime-local][disabled], +.pure-form input[type=week][disabled], +.pure-form input[type=tel][disabled], +.pure-form input[type=color][disabled], +.pure-form input[type=number][disabled], +.pure-form input[type=search][disabled], +.pure-form input[type=text][disabled], +.pure-form select[disabled], +.pure-form textarea[disabled]{ + cursor:not-allowed; + background-color:#eaeded; + color:#cad2d3 + } + +.pure-form input[readonly], +.pure-form select[readonly], +.pure-form textarea[readonly]{ + background-color:#eee; + color:#777; + border-color:#ccc + } + +.pure-form input:focus:invalid, +.pure-form select:focus:invalid, +.pure-form textarea:focus:invalid{ + color:#b94a48; + border-color:#e9322d + } + +.pure-form input[type=file]:focus:invalid:focus, +.pure-form input[type=checkbox]:focus:invalid:focus, +.pure-form input[type=radio]:focus:invalid:focus{ + outline-color:#e9322d + } + +.pure-form select{ + height:2.25em; + border:1px solid #ccc; + background-color:#fff + } + +.pure-form select[multiple]{ + height:auto + } + +.pure-form label{ + margin:.5em 0 .2em + } + +.pure-form fieldset{ + margin:0; + padding:.35em 0 .75em; + border:0 + } + +.pure-form legend{ + display:block; + width:100%; + padding:.3em 0; + margin-bottom:.3em; + color:#333; + border-bottom:1px solid #e5e5e5 + } + +.pure-form-stacked input:not([type]), +.pure-form-stacked input[type=password], +.pure-form-stacked input[type=email], +.pure-form-stacked input[type=url], +.pure-form-stacked input[type=date], +.pure-form-stacked input[type=month], +.pure-form-stacked input[type=time], +.pure-form-stacked input[type=datetime], +.pure-form-stacked input[type=datetime-local], +.pure-form-stacked input[type=week], +.pure-form-stacked input[type=tel], +.pure-form-stacked input[type=color], +.pure-form-stacked input[type=file], +.pure-form-stacked input[type=number], +.pure-form-stacked input[type=search], +.pure-form-stacked input[type=text], +.pure-form-stacked label, +.pure-form-stacked select, +.pure-form-stacked textarea{ + display:block; + margin:.25em 0 + } + +.pure-form-aligned .pure-help-inline, +.pure-form-aligned input, +.pure-form-aligned select, +.pure-form-aligned textarea, +.pure-form-message-inline{ + display:inline-block; + vertical-align:middle + } + +.pure-form-aligned textarea{ + vertical-align:top + } + +.pure-form-aligned .pure-control-group{ + margin-bottom:.5em + } + +.pure-form-aligned .pure-control-group label{ + text-align:right; + display:inline-block; + vertical-align:middle; + width:10em; + margin:0 1em 0 0 + } + +.pure-form-aligned .pure-controls{ + margin:1.5em 0 0 11em + } + +.pure-form .pure-input-rounded, +.pure-form input.pure-input-rounded{ + border-radius:2em; + padding:.5em 1em + } + +.pure-form .pure-group fieldset{ + margin-bottom:10px + } + +.pure-form .pure-group input, +.pure-form .pure-group textarea{ + display:block; + padding:10px; + margin:0 0 -1px; + border-radius:0; + position:relative; + top:-1px + } + +.pure-form .pure-group input:focus, +.pure-form .pure-group textarea:focus{ + z-index:3 + } + +.pure-form .pure-group input:first-child, +.pure-form .pure-group textarea:first-child{ + top:1px; + border-radius:4px 4px 0 0; + margin:0 + } + +.pure-form .pure-group input:first-child:last-child, +.pure-form .pure-group textarea:first-child:last-child{ + top:1px; + border-radius:4px; + margin:0 + } + +.pure-form .pure-group input:last-child, +.pure-form .pure-group textarea:last-child{ + top:-2px; + border-radius:0 0 4px 4px; + margin:0 + } + +.pure-form .pure-group button{ + margin:.35em 0 + } + +.pure-form .pure-input-1{ + width:100% + } + +.pure-form .pure-input-3-4{ + width:75% + } + +.pure-form .pure-input-2-3{ + width:66% + } + +.pure-form .pure-input-1-2{ + width:50% + } + +.pure-form .pure-input-1-3{ + width:33% + } + +.pure-form .pure-input-1-4{ + width:25% + } + +.pure-form .pure-help-inline, +.pure-form-message-inline{ + display:inline-block; + padding-left:.3em; + color:#666; + vertical-align:middle; + font-size:.875em + } + +.pure-form-message{ + display:block; + color:#666; + font-size:.875em + } + +@media only screen and (max-width :480px){ + .pure-form button[type=submit]{ + margin:.7em 0 0 + } + .pure-form input:not([type]), + .pure-form input[type=password], + .pure-form input[type=email], + .pure-form input[type=url], + .pure-form input[type=date], + .pure-form input[type=month], + .pure-form input[type=time], + .pure-form input[type=datetime], + .pure-form input[type=datetime-local], + .pure-form input[type=week], + .pure-form input[type=tel], + .pure-form input[type=color], + .pure-form input[type=number], + .pure-form input[type=search], + .pure-form input[type=text], + .pure-form label{ + margin-bottom:.3em; + display:block + } + .pure-group input:not([type]), + .pure-group input[type=password], + .pure-group input[type=email], + .pure-group input[type=url], + .pure-group input[type=date], + .pure-group input[type=month], + .pure-group input[type=time], + .pure-group input[type=datetime], + .pure-group input[type=datetime-local], + .pure-group input[type=week], + .pure-group input[type=tel], + .pure-group input[type=color], + .pure-group input[type=number], + .pure-group input[type=search], + .pure-group input[type=text]{ + margin-bottom:0 + } + .pure-form-aligned .pure-control-group label{ + margin-bottom:.3em; + text-align:left; + display:block; + width:100% + } + .pure-form-aligned .pure-controls{ + margin:1.5em 0 0 + } + .pure-form .pure-help-inline, + .pure-form-message, + .pure-form-message-inline{ + display:block; + font-size:.75em; + padding:.2em 0 .8em + } + } + +.pure-menu-fixed{ + position:fixed; + left:0; + top:0; + z-index:3 + } + +.pure-menu-item, +.pure-menu-list{ + position:relative + } + +.pure-menu-list{ + list-style:none; + margin:0; + padding:0 + } + +.pure-menu-item{ + padding:0; + margin:0; + height:100% + } + +.pure-menu-heading, +.pure-menu-link{ + display:block; + text-decoration:none; + white-space:nowrap + } + +.pure-menu-horizontal{ + width:100%; + white-space:nowrap + } + +.pure-menu-horizontal .pure-menu-list{ + display:inline-block + } + +.pure-menu-horizontal .pure-menu-heading, +.pure-menu-horizontal .pure-menu-item, +.pure-menu-horizontal .pure-menu-separator{ + display:inline-block; + zoom:1; + vertical-align:middle + } + +.pure-menu-item .pure-menu-item{ + display:block + } + +.pure-menu-children{ + display:none; + position:absolute; + left:100%; + top:0; + margin:0; + padding:0; + z-index:3 + } + +.pure-menu-horizontal .pure-menu-children{ + left:0; + top:auto; + width:inherit + } + +.pure-menu-active>.pure-menu-children,.pure-menu-allow-hover:hover>.pure-menu-children{ + display:block; + position:absolute + } + +.pure-menu-has-children>.pure-menu-link:after{ + padding-left:.5em; + content:"\25B8"; + font-size:small + } + +.pure-menu-horizontal .pure-menu-has-children>.pure-menu-link:after{ + content:"\25BE" + } + +.pure-menu-scrollable{ + overflow-y:scroll; + overflow-x:hidden + } + +.pure-menu-scrollable .pure-menu-list{ + display:block + } + +.pure-menu-horizontal.pure-menu-scrollable .pure-menu-list{ + display:inline-block + } + +.pure-menu-horizontal.pure-menu-scrollable{ + white-space:nowrap; + overflow-y:hidden; + overflow-x:auto; + -ms-overflow-style:none; + -webkit-overflow-scrolling:touch; + padding:.5em 0 + } + +.pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar{ + display:none + } + +.pure-menu-horizontal .pure-menu-children .pure-menu-separator,.pure-menu-separator{ + background-color:#ccc; + height:1px; + margin:.3em 0 + } + +.pure-menu-horizontal .pure-menu-separator{ + width:1px; + height:1.3em; + margin:0 .3em + } + +.pure-menu-horizontal .pure-menu-children .pure-menu-separator{ + display:block; + width:auto + } + +.pure-menu-heading{ + text-transform:uppercase; + color:#565d64 + } + +.pure-menu-link{ + color:#777 + } + +a.pure-menu-link::first-letter { + color: #fe1976; +} + + +.pure-menu-children{ + background-color:#fff + } + +.pure-menu-disabled,.pure-menu-heading,.pure-menu-link{ + padding:.5em 1em + } + +.pure-menu-disabled{ + opacity:.5 + } + +.pure-menu-disabled .pure-menu-link:hover{ + background-color:transparent + } + +.pure-menu-active>.pure-menu-link,.pure-menu-link:focus,.pure-menu-link:hover{ + background-color:#333 + } + +.pure-menu-selected .pure-menu-link,.pure-menu-selected .pure-menu-link:visited{ + color:#000 + } + +.pure-table{ + empty-cells:show; + border:1px solid #cbcbcb + } + +.pure-table caption{ + color:#000; + font:italic 85%/1 arial,sans-serif; + padding:1em 0; + text-align:center + } + +.pure-table td,.pure-table th{ + border-left:1px solid #cbcbcb; + border-width:0 0 0 1px; + font-size:inherit; + margin:0; + overflow:visible; + padding:.5em 1em + } + +.pure-table td:first-child,.pure-table th:first-child{ + border-left-width:0 + } + +.pure-table thead{ + background-color:#e0e0e0; + color:#000; + text-align:left; + vertical-align:bottom + } + +.pure-table td{ + background-color:transparent + } + +.pure-table-odd td,.pure-table-striped tr:nth-child(2n-1) td{ + background-color:#f2f2f2 + } + +.pure-table-bordered td{ + border-bottom:1px solid #cbcbcb + } + +.pure-table-bordered tbody>tr:last-child>td{ + border-bottom-width:0 + } + +.pure-table-horizontal td,.pure-table-horizontal th{ + border-width:0 0 1px; + border-bottom:1px solid #cbcbcb + } + +.pure-table-horizontal tbody>tr:last-child>td{ + border-bottom-width:0 + } diff --git a/computhings/dependances/fork-awesome b/computhings/dependances/fork-awesome new file mode 160000 index 0000000..a99579a --- /dev/null +++ b/computhings/dependances/fork-awesome @@ -0,0 +1 @@ +Subproject commit a99579ae3e735ee70e51ed62dfcee3172b5b2db7 diff --git a/computhings/images/favicon.png b/computhings/images/favicon.png new file mode 100644 index 0000000..9a88c58 Binary files /dev/null and b/computhings/images/favicon.png differ diff --git a/computhings/index.html b/computhings/index.html new file mode 100644 index 0000000..a669b8b --- /dev/null +++ b/computhings/index.html @@ -0,0 +1,216 @@ + + + + + Titre de la page de travail | Labo html + + + + + + + + + + + + +
    + + + + + + + + +
    + +
    +

    Titre principal de ma page (setction header, h1)

    +

    Titre secondaire de ma page - (section header, h2)

    +

    Titre ternaire de ma page - (section header, h3)

    +
    + +
    + 01 avril 1069 - auteur,auteur +
    + +
    + + +

    An h1 header

    +

    Paragraphs are separated by a blank line.

    +

    2nd paragraph. Italic, bold, and monospace. Itemized lists + look like:

    +
      +
    • this one
      • +
    • that one
      • +
    • the other one
      • +
    +

    Note that --- not considering the asterisk --- the actual text + content starts at 4-columns in.

    +
    +

    Block quotes are + written like so.

    +

    They can span multiple paragraphs, + if you like.

    +
    +

    Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all + in chapters 12--14"). Three dots ... will be converted to an ellipsis. + Unicode is supported. ☺

    +

    An h2 header

    +

    Here's a numbered list:

    +
      +
    1. first item
      2. +
    2. second item
      3. +
    3. third item
      4. +
    +

    Note again how the actual text starts at 4 columns in (4 characters + from the left side). Here's a code sample:

    + 
    # Let me re-iterate ...
+            for i in 1 .. 10 { do-something(i) }
+
    + + +

    As you probably guessed, indented 4 spaces. By the way, instead of + indenting the block, you can use delimited blocks, if you like:

    + 
    define foobar() {
+                print "Welcome to flavor country!";
+            }
+
    + + +

    (which makes copying & pasting easier). You can optionally mark the + delimited block for Pandoc to syntax highlight it:

    + 
    import time
+            # Quick, count to ten!
+            for i in range(10):
+                # (but not *too* quick)
+                time.sleep(0.5)
+                print i
+
    + + +

    An h3 header

    +

    Now a nested list:

    +
      +
    1. +

      First, get these ingredients:

      +
        +
      • carrots
        • +
      • celery
        • +
      • lentils
        • +
      +
      2. +
    2. +

      Boil some water.

      +
      3. +
    3. +

      Dump everything in the pot and follow + this algorithm:

      + 
      find wooden spoon
+            uncover pot
+            stir
+            cover pot
+            balance wooden spoon precariously on pot handle
+            wait 10 minutes
+            goto first step (or shut off burner when done)
+
      + + +

      Do not bump wooden spoon or it will fall.

      +
      4. +
    +

    Notice again how text always lines up on 4-space indents (including + that last line which continues item 3 above).

    +

    Here's a link to a website, to a local + doc, and to a section heading in the current + doc. Here's a footnote 1.

    +

    Tables can look like this:

    +

    size material color

    +
    +

    9 leather brown + 10 hemp canvas natural + 11 glass transparent

    +

    Table: Shoes, their sizes, and what they're made of

    +

    (The above is the caption for the table.) Pandoc also supports + multi-line tables:

    +
    +

    keyword text

    +
    +

    red Sunsets, apples, and + other red or reddish + things.

    +

    green Leaves, grass, frogs + and other things it's + not easy being.

    +
    +

    A horizontal rule follows.

    +
    +

    Here's a definition list:

    +
    +
    apples
    +
    +
    +
    Good for making applesauce.
    +
    oranges
    +
    +
    +
    Citrus!
    +
    tomatoes
    +
    There's no "e" in tomatoe.
    +
    +
    +
    +
    +
    +

    Again, text is indented 4 spaces. (Put a blank line between each + term/definition pair to spread things out more.)

    +

    Here's a "line block":

    +

    | Line one + | Line too + | Line tree

    +

    and images can be specified like so:

    +

    example image

    +

    Inline math equations go in like so: $\omega = d\phi / dt$. Display + math should get its own line and be put in in double-dollarsigns:

    +

    $$I = \int \rho R^{2} dV$$

    +

    And note that you can backslash-escape any punctuation characters + which you wish to be displayed literally, ex.: `foo`, *bar*, etc.

    +
    +
    +
      +
    1. +

      Footnote text goes here. ↩ + + +

    + +
    + +
    + Moteur: Pelican, Carosserie: Pure v0.6.2, Auto-hébergé grâce à Yunohost.
    + CC-BY 4.0 ☺ {{ COPYLEFT }} - {{ FOOTER_TITLE }} + +
    + + + +
    + + diff --git a/computhings/js/ui.js b/computhings/js/ui.js new file mode 100755 index 0000000..6d7c20b --- /dev/null +++ b/computhings/js/ui.js @@ -0,0 +1,46 @@ +(function (window, document) { + + var layout = document.getElementById('layout'), + menu = document.getElementById('menu'), + menuLink = document.getElementById('menuLink'), + content = document.getElementById('main'); + + function toggleClass(element, className) { + var classes = element.className.split(/\s+/), + length = classes.length, + i = 0; + + for(; i < length; i++) { + if (classes[i] === className) { + classes.splice(i, 1); + break; + } + } + // The className is not found + if (length === classes.length) { + classes.push(className); + } + + element.className = classes.join(' '); + } + + function toggleAll(e) { + var active = 'active'; + + e.preventDefault(); + toggleClass(layout, active); + toggleClass(menu, active); + toggleClass(menuLink, active); + } + + menuLink.onclick = function (e) { + toggleAll(e); + }; + + content.onclick = function(e) { + if (menu.className.indexOf('active') !== -1) { + toggleAll(e); + } + }; + +}(this, this.document)); diff --git a/default/index.html b/default/index.html new file mode 100644 index 0000000..cc6e5d5 --- /dev/null +++ b/default/index.html @@ -0,0 +1,243 @@ + + + + + + + Titre de la page de travail | Labo html + + + + + + + + + + + + + +
    + + + +