Commit eeb7f403 authored by Marianne's avatar Marianne

workshop style

parent de67a814
@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
* {
box-sizing: border-box; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-decoration: none;
box-sizing: border-box;
font-style: normal;
font-weight: normal; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
a {
color: inherit;
cursor: pointer; }
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0; }
select::-ms-expand {
display: none; }
@font-face {
font-family: "linuxLib";
src: url("../fonts/linux-libertine/LinLibertine_R.otf");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: "archivo";
src: url("../fonts/archivo/ArchivoBlack-Regular.otf");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: "courr";
src: url("../fonts/not-courrier/NotCourierSans.otf");
font-weight: normal;
font-style: normal; }
html {
font-size: 32px; }
body {
font-family: "linuxLib";
font-size: 1rem;
padding: 1rem 2rem 1rem 1rem;
line-height: 38px; }
.code {
font-family: "courr";
color: magenta; }
strong {
font-family: "archivo"; }
.pink {
color: magenta; }
a {
color: blue;
text-decoration: underline; }
header {
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0 0 6rem 0; }
header h1 {
font-family: "archivo";
width: 40%; }
header h2, header h3, header h4 {
width: 20%;
font-size: 0.7rem; }
header nav {
width: 100%;
margin: 2rem 0 0 0; }
header nav li .sign {
color: magenta; }
main {
counter-reset: def; }
main section {
margin: 0 0 2rem 0; }
main section.list {
display: flex;
flex-wrap: wrap;
max-width: 80%; }
main section.list h2 {
width: 100%;
padding: 0 0 0 6rem; }
main section.list h3 {
width: 6rem; }
main section.list ul {
width: calc(100% - 6rem); }
main section.list h2::before {
content: "*◡*"; }
main section.list h2::after {
content: "*◡*";
text-align: right; }
main h2 {
margin: 0 0 1rem 0;
font-family: "archivo"; }
main h2::before,
main h2::after {
color: magenta;
font-family: "linuxLib";
display: inline-block;
width: 2rem; }
main h3 {
color: magenta;
font-size: 0.7rem;
font-family: "courr"; }
main h3::before {
content: "["; }
main h3::after {
content: "]"; }
main ul.tech li .sign::before {
content: "◡"; }
main ul.design li .sign::before {
content: "↪"; }
main ul {
margin: 0 0 1rem 0; }
main ul li {
display: flex; }
main ul li .sign::before {
display: inline-block;
width: 2rem;
content: "◠";
color: magenta; }
main ul li .item {
width: calc(100% - 2rem); }
main p {
width: 75%; }
main .defRef {
counter-increment: def; }
main .def::before {
display: inline-block; }
main .def::before,
main .defRef::after {
content: "(" counter(def) ")";
vertical-align: super;
line-height: 0;
font-size: 0.5rem;
width: 1rem; }
main .def::before {
margin: 0 0 0 -1rem; }
main .def {
display: inline-block;
position: absolute;
right: 2rem;
width: calc((100% - 3rem) / 5);
font-size: 0.7rem;
line-height: 1rem; }
main table tr:nth-child(even) {
border-bottom: dashed 1px magenta; }
main table tr td:first-of-type,
main table tr td:nth-child(2) {
width: 15%;
font-size: 0.7rem;
font-family: "courr"; }
main table tr td:first-of-type {
color: magenta; }
@media only screen and (max-width: 1300px) {
html {
font-size: 28px; }
body {
line-height: 34px; } }
@import "reset";
@font-face{
font-family: "linuxLib";
src:url("../fonts/linux-libertine/LinLibertine_R.otf");
font-weight: normal;
font-style: normal;
}
@font-face{
font-family: "archivo";
src:url("../fonts/archivo/ArchivoBlack-Regular.otf");
font-weight: normal;
font-style: normal;
}
@font-face{
font-family: "courr";
src:url("../fonts/not-courrier/NotCourierSans.otf");
font-weight: normal;
font-style: normal;
}
html{
font-size: 32px;
}
body{
font-family: "linuxLib";
font-size: 1rem;
padding: 1rem 2rem 1rem 1rem;
line-height: 38px;
}
.code{
font-family: "courr";
color: magenta;
}
strong{
font-family: "archivo";
}
.pink{
color: magenta;
}
a{
color: blue;
text-decoration: underline;
}
header{
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0 0 6rem 0;
h1{
font-family: "archivo";
width: 40%;
}
h2, h3, h4{
width: 20%;
font-size: 0.7rem;
}
nav{
width: 100%;
margin: 2rem 0 0 0;
li{
.sign{
color: magenta;
}
}
}
}
main{
counter-reset: def;
section{
margin: 0 0 2rem 0;
}
section:first-of-type{
h2{
}
}
section.list{
display: flex;
flex-wrap: wrap;
max-width: 80%;
h2{
width: 100%;
padding: 0 0 0 6rem;
}
h3{
width: 6rem;
}
ul{
width: calc(100% - 6rem);
}
h2::before{
content: "*◡*";
}
h2::after{
content: "*◡*";
text-align: right;
}
}
h2{
margin: 0 0 1rem 0;
font-family: "archivo";
}
h2::before,
h2::after{
color: magenta;
font-family: "linuxLib";
display: inline-block;
width: 2rem;
}
h3{
color: magenta;
font-size: 0.7rem;
font-family: "courr";
}
h3::before{
content: "[";
}
h3::after{
content: "]";
}
ul.tech{
li{
.sign::before{
content: "◡";
}
}
}
ul.design{
li{
.sign::before{
content: "↪";
}
}
}
ul{
margin: 0 0 1rem 0;
li{
display: flex;
.sign::before{
display: inline-block;
width: 2rem;
content: "◠";
color: magenta;
}
.item{
width: calc(100% - 2rem);
}
}
}
p{
width: 75%;
}
.defRef{
counter-increment: def;
}
.def::before{
display: inline-block;
}
.def::before,
.defRef::after{
content: "(" counter(def) ")";
vertical-align: super;
line-height: 0;
font-size: 0.5rem;
width: 1rem;
}
.def::before{
margin: 0 0 0 -1rem;
}
.def{
display: inline-block;
position: absolute;
right: 2rem;
width: calc((100% - 3rem) / 5);
font-size: 0.7rem;
line-height: 1rem;
}
table{
tr:nth-child(even){
border-bottom: dashed 1px magenta;
}
tr{
td:first-of-type,
td:nth-child(2){
width: 15%;
font-size: 0.7rem;
font-family: "courr";
}
td:first-of-type{
color: magenta;
}
}
}
}
@media only screen and (max-width: 1300px){
html{
font-size: 28px;
}
body{
line-height: 34px;
}
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
<title>Workshop karaoPrint</title>
</head>
<body>
<header>
<h1><span class="pink">karaoPr</span>int.js</h1>
<h2>Workshop Luuse</h2>
<h3>11.3.19 → 15.3.19</h3>
<h4>Esa Pyrenées — Pau</h4>
</header>
<main>
<section>
<h2>Brief</h2>
<p>
À partir d’un son au choix, création d'une <strong>page web karaoké interactive</strong> et d’un <strong>catalogue de karaokés</strong> en web to print, à partir de <span class="code defRef">karaoPrint.js</span>.
<span class="def">Petit script maison permettant de créer facilement un karaoke animé, à base de <span class="code">html</span>/<span class="code">css</span>.</span>
</p>
</section>
<section class="list">
<h2>Objets</h2>
<h3>Web</h3>
<ul class="objects">
<li>
<span class="sign"></span>
<span class="item">
1 karaoké par personne (1 <span class="code">page html</span> + 1 <span class="code">feuille css</span>)
</span>
</li>
<li>
<span class="sign"></span>
<span class="item">
1 site global (sorte de «&thinsp;compil’ / banque de données&thinsp;»), avec une page d'accueil commune rassemblant tous les karaokés
</span>
</li>
</ul>
<h3>Print</h3>
<ul>
<li>
<span class="sign"></span>
<span class="item">
1 catalogue papier format A4, rassemblant tous les sons
</span>
</li>
</ul>
</section>
<section class="list">
<h2>Notions</h2>
<h3>Technique</h3>
<ul class="tech">
<li>
<span class="sign"></span>
<span class="item">
Les <span class="code">media queries</span>, ou comment gérer du print depuis le web
</span>
</li>
<li>
<span class="sign"></span>
<span class="item">
Les <span class="code">animations css</span> (<span class="code">javascript</span> ≠ toujours nécéssaire <span class="code"></span>)
</span>
</li>
<li>
<span class="sign"></span>
<span class="item">
L'outil <span class="code">Git</span>, ou le travail collectif façon programmation
</span>
</li>
</ul>
<h3>Design</h3>
<ul class="design">
<li>
<span class="sign"></span>
<span class="item">
Montrer l'aspect plurimédia du web, qui permet ici de générer à la fois une page animée et un print à partir du même code
</span>
</li>
<li>
<span class="sign"></span>
<span class="item">
Penser le passage d'un média à l'autre, les besoins de chacun et la variation de contenu que celui-ci peut impliquer
</span>
</li>
</ul>
</section>
<section>
<h2>Déroulé</h2>
<table>
<tr>
<td>Lundi</td>
<td>Matin</td>
<td>Présentation du workshop [références, background] + initiation à <span class="code">karaoPrint.js</span></td>
</tr>
<tr>
<td></td>
<td>Aprem</td>
<td>Démarrage du web karaoké → balisage <span class="code">html</span> + début de style <span class="code">css</span> si le temps</td>
</tr>
<tr>
<td>Mardi</td>
<td>Matin</td>
<td>Point sur les animations <span class="code">css</span></td>
</tr>
<tr>
<td></td>
<td>Aprem</td>
<td>Suite du web karaoké → style <span class="code">css</span></td>
</tr>
<tr>
<td>Mercredi</td>
<td>Matin</td>
<td>Initiation aux <span class="code">media queries</span></br>Démarrage du catalogue (chacun sa page)</td>
</tr>
<tr>
<td></td>
<td>Aprem</td>
<td>Finalisation web karaoké + page du catalogue</td>
</tr>
<tr>
<td>Jeudi</td>
<td>Matin</td>
<td>Initiation à <span class="code">Git</span></br>Fusion des pages <span class="code">html</span> en un seul site</br>Rédaction de la page d'accueil</br></td>
</tr>
<tr>
<td></td>
<td>Aprem</td>
<td>Réalisation de la couverture + index</td>
</tr>
<tr>
<td>Vendredi</td>
<td>Matin</td>
<td>Impression <span class="code">RISO</span></br>Reliure (si possible spirale = top)</td>
</tr>
<tr>
<td></td>
<td>Aprem</td>
<td>Réstitution</td>
</tr>
</table>
</section>
</main>
</body>
</html>
\ No newline at end of file
No preview for this file type
......@@ -2,13 +2,132 @@
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="assets/css/docs.css">
<title>☆☆ karaoPrint / Docs ☆☆</title>