Compare commits

...

3 Commits
2020 ... presse

  1. 2
      config.rb
  2. 219
      source/_dossier_presse.erb
  3. 16
      source/_toc_presse.erb
  4. 17
      source/layouts/layout.erb
  5. 25
      source/layouts/presse.erb
  6. 23
      source/presse.html.erb
  7. 210
      source/stylesheets/presse.css.scss
  8. 131
      source/stylesheets/site.css.scss

2
config.rb

@ -7,6 +7,7 @@ page 'index.html', layout: :content
page '/*.xml', layout: false
page '/*.json', layout: false
page '/*.txt', layout: false
page '/presse.html*', :layout => 'presse'
configure :development do
activate :livereload, host: 'localhost', apply_css_live: true, apply_js_live: true, no_swf: true
@ -22,6 +23,7 @@ end
activate :deploy do |deploy|
deploy.deploy_method = :rsync
deploy.host = 'rabbit.passageenseine.fr'
deploy.user = root
deploy.path = '/var/www/pses'
deploy.port = 2222
deploy.build_before = true

219
source/_dossier_presse.erb

@ -0,0 +1,219 @@
<h1>Dossier de presse</h1>
<h2 class="txtleft" id="tldr">00.&nbsp;TL;DR</h2>
<p>Pas Sage En Seine est un festival ouvert au grand public dont les sujets sont&nbsp;:</p>
<ul>
<li>la démocratie&nbsp;;</li>
<li>le développement&nbsp;;</li>
<li>la résistance&nbsp;;</li>
<li>la société&nbsp;;</li>
<li>la liberté&nbsp;;</li>
<li>Internet&nbsp;;</li>
<li>l’écologie&nbsp;;</li>
<li>le numériques&nbsp;;</li>
<li>le datalove&nbsp;;</li>
<li>l’hacktivisme&nbsp;;</li>
<li>les réseaux&nbsp;;</li>
<li>la réappropriation de l’espace&nbsp;;</li>
<li>la connaissance&nbsp;;</li>
<li>les jeux&nbsp;;</li>
<li>la culture&nbsp;;</li>
<li>la vie privé&nbsp;;</li>
<li>la sécurité&nbsp;;</li>
<li>le faire soi-même&nbsp;;</li>
<li>le partage&nbsp;;</li>
<li>le chiffrement…</li>
</ul>
<p>Il aura lieu à Choisy-le-Roi (94) du jeudi 2 au dimanche 5 juillet à la Médiathèque Aragon.</p>
<p>Au programme :</p>
<ul>
<li>Conférences&nbsp;;</li>
<li>Ateliers&nbsp;;</li>
<li>Village d'associations&nbsp;;</li>
<li>Tables rondes…</li>
</ul>
<p>Pour plus d'informations : <a href="https://www.passageenseine.fr">https://www.passageenseine.fr</a> ou <a href="mailto:contact@passageenseine.fr">contact@passageenseine.fr</a></p>
<h3>Les lieux du festival à Choisy-le-Roi</h3>
<h4>Médiathèque Louis ARAGON</h4>
<p>
Médiathèque orientée vers le logiciel et la culture du partage, elle accueillera une grande partie des conférences et le village associatif.
</p>
<address>
17 Rue Pierre Mendès France, 94&nbsp;600 Choisy-le-Roi, France
</address>
<h2 class="txtleft" id="presentation">01.&nbsp;Présentation Pas Sage En Seine</h2>
<p>Historiquement axé sur le hack et internet, le festival a pour vocation de faire se rencontrer des milieux différents dans un objectif commun de partage et d’échange où le numérique est un dénominateur commun.</p>
<h3>PSESHSF 2016</h3>
<dl class="table-display">
<dt>Équipe</dt>
<dd>7 membres actifs, participants : 600 personnes sur place, 30&nbsp;000 vues en ligne.</dd>
<dt>Description</dt>
<dd>En 2016, PSES s’est associé avec le /tmp/lab/ pour l’évènement conjoint PSESHSF tentant un rapprochement avec les hackerspaces et s’ouvrir sur de nouvelles thémarques et de nouveaux publics.</dd>
<dt>Lieu</dt>
<dd>4 lieux sur l’ensemble de la ville de Choisy-le-Roi</dd>
<dt>Réalisations</dt>
<dd>Quatre jours de conférences, tables rondes et ateliers. Captation vidéo avec livestreaming des conférences.</dd>
</dl>
<h3>Pas Sage En Seine 2015</h3>
<dl class="table-display">
<dt>Équipe</dt>
<dd>10 membres actifs, participants : 400 personnes sur place, 15&nbsp;000 vues en ligne.</dd>
<dt>Description</dt>
<dd>Événement annuel dédié à la culture du Hack et des Communs.</dd>
<dt>Lieu</dt>
<dd>NUMA (ex La Cantine) 75&nbsp;002</dd>
<dt>Réalisations</dt>
<dd>Quatre jours de conférences, tables rondes et ateliers. Captation vidéo avec livestreaming des conférences.</dd>
</dl>
<h3>Pas Sage En Seine 2014</h3>
<dl class="table-display">
<dt>Équipe</dt>
<dd>10 membres actifs, participants : 300 personnes sur place, 25&nbsp;000 vues en ligne.</dd>
<dt>Description</dt>
<dd>Événement annuel dédié à la culture du Hack et des Communs.</dd>
<dt>Lieu</dt>
<dd>NUMA (ex La Cantine) 75&nbsp;002</dd>
<dt>Réalisations</dt>
<dd>Quatre jours de conférences, tables rondes et ateliers. Captation vidéo avec livestreaming des conférences.</dd>
</dl>
<h3>Pas Sage En Seine 2012 - 2013 - 2014</h3>
<dl class="table-display">
<dt>Équipe</dt>
<dd>10 membres actifs, participants : 200 personnes sur place, +80&nbsp;000 vues en ligne.</dd>
<dt>Description</dt>
<dd>Événement annuel dédié à la culture du Hack et des Communs.</dd>
<dt>Lieu</dt>
<dd>La Cantine.</dd>
<dt>Réalisations</dt>
<dd>Quatre jours de conférences, tables rondes et ateliers. Captation vidéo avec livestreaming des conférences.</dd>
</dl>
<h3>Pas Sage En Seine 2008-2009-2010-2011</h3>
<dl class="table-display">
<dt>Équipe</dt>
<dd>10 membres actifs, participants : 200 personnes.</dd>
<dt>Description</dt>
<dd>Événement annuel dédié à la culture du Hack et des Communs.</dd>
<dt>Lieu</dt>
<dd>La Cantine.</dd>
<dt>Réalisations</dt>
<dd>Trois jours de conférences, tables rondes et ateliers. Captation vidéo des conférences.</dd>
</dl>
<p><em>Note : les vues en ligne sont indiquées en chiffre cumulés depuis la période de captation et toutes plateformes vidéo confondues.</em></p>
<h2 class="txtleft" id="dates">02.1&nbsp;Les dates</h2>
<table>
<tr>
<td class="txtright prm"><strong>15 avril</strong></td>
<td>Ouverture de l'appel à participation</td>
</tr>
<tr>
<td class="txtright prm"><strong>24 mai</strong></td>
<td>Date de clôture de l'appel à participation</td>
</tr>
<tr>
<td class="txtright prm"><strong>1er juin</strong></td>
<td>Annonce du programme</td>
</tr>
<tr>
<td class="txtright prm"><strong>29 juin</strong></td>
<td>Ouverture du Festival</td>
</tr>
<tr>
<td class="txtright prm"><strong>2 juillet</strong></td>
<td>Clôture du Festival</td>
</tr>
</table>
<h2 class="txtleft" id="programme">02.2&nbsp;Le programme</h2>
<p>Le programme sera disponible à compter du 1er juin.</p>
<h2 class="txtleft" id="participation">03.&nbsp;Participation</h2>
<p>La participation à l’ensemble de l’évènement est en accès libre et totalement gratuit.</p>
<h2 class="txtleft" id="mediakit">04.&nbsp;MediaKit</h2>
<p>Il contient&nbsp;:</p>
<ul>
<li>ce dossier de presse en format pdf&nbsp;</li>
<li>le logo&nbsp;</li>
<li>les visuels.</li>
</ul>
<h2 class="txtleft" id="glossaire">05.&nbsp;Glossaire</h2>
<dl class="table-display">
<dt>Hackerspace</dt>
<dd>
Désigne un lieu de loisir et de travail dont les membres se rattachent à la culture hacker, quelle que soit la nature de leurs centres d'intérêt qu'ils soient scientifiques, artistiques, techniques ou bien médiatiques.
</dd>
<dt>Hacker</dt>
<dd>
Contre-culture basée sur la création, le détournement, l'approfondissement des connaissances personnelles sur les objets et le code informatique.
</dd>
<dt>Hacking</dt>
<dd>
Expérimentation et création dans un but ludique et curieux, par opposition au piratage et au cracking qui se font dans un but nuisible ou mercantile.
</dd>
<dt>Communs</dt>
<dd>
Ensemble des ressources collectives qu'elles soient naturelles (eau,air), culturelles (œuvres du domaine public), informatique (logiciel libre).
</dd>
<dt>Logiciel Libre</dt>
<dd>
Désigne les logiciels qui donnent à leurs utilisateurs la liberté de les exécuter, de les étudier, de les modifier et de les distribuer. S'oppose au logiciel privateur qui restreint une ou plusieurs de ces libertés.
</dd>
</dl>
<h2 class="txtleft" id="presence">06.&nbsp;Présence Presse</h2>
<p>Quelques informations si vous souhaitez être présente ou présent à l'événement.</p>
<ul>
<li>
Nous vous prierons de respecter les règles qui seront mises en place concernant les prises de vue impliquant des personnes : Vous serez prié-e de demander l'autorisation des personnes qui pourraient apparaître sur vos photographies ou vidéos.
</li>
<li>
Merci de nous informer de votre présence et de votre intention de faire un article sur le Festival. Nous pourrons ainsi vous aider et aurons le plaisir de discuter avec vous de l'événement.
</li>
</ul>
<p>Après l'évènement, merci si possible de nous signaler tout article sur le Festival.</p>
<p>
Nous espérons que toutes les informations contenues dans ce dossier vous seront utiles, n'hésitez pas à nous signaler les erreurs, les manques que vous pourriez constater et à nous contacter en cas de besoins complémentaires.
</p>

16
source/_toc_presse.erb

@ -0,0 +1,16 @@
<nav class="toc" role="navigation">
<input type="checkbox" id="button" class="menu">
<label for="button" class="menu" onclick></label>
<strong>Sommaire&nbsp;:</strong>
<ul class="unstyled">
<li><a href="#tldr">00. TL;DR</a></li>
<li><a href="#presentation">01. Présentation Pas Sage En Seine</a></li>
<li><a href="#dates">02.1 Les dates</a></li>
<li><a href="#programme">02.2 Le programme</a></li>
<li><a href="#participation">03. Participation</a></li>
<li><a href="#mediakit">04. MediaKit</a></li>
<li><a href="#glossaire">05. Glossaire</a></li>
<li><a href="#presence">06. Présence Presse</a></li>
</ul>
</nav>

17
source/layouts/layout.erb

@ -10,13 +10,14 @@
</head>
<body>
<%= yield %>
<footer class="pam txtcenter">
<small>Site conçu avec le moteur de site statique
<a href="https://middlemanapp.com/" title="Aller sur la page du projet Middleman">Middleman</a>
et le mini-framework CSS <a href="http://knacss.com/" title="Aller sur la page de KNACSS">KNACSS</a>.</small>
<br>
<small>Toute contribution à l’amélioration du site est la bienvenue sur notre page
<a href="https://github.com/pas-sage-en-seine/site" title="Aller à la page GitHub du site du festival">GitHub</a> !</small>
</footer>
</body>
<footer class="mam txtcenter">
<small>Site conçu avec le moteur de site statique
<a href="https://middlemanapp.com/" title="Aller sur la page du projet Middleman">Middleman</a>
et le mini-framework CSS <a href="http://knacss.com/" title="Aller sur la page de KNACSS">KNACSS</a>.</small>
<br>
<small>Toute contribution à l’amélioration du site est la bienvenue sur notre page
<a href="https://github.com/pas-sage-en-seine/site" title="Aller à la page GitHub du site du festival">GitHub</a> !</small>
</footer>
</html>

25
source/layouts/presse.erb

@ -0,0 +1,25 @@
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title><%= current_page.data.title || "Festival Pas Sage en Seine 2020" %></title>
<%= stylesheet_link_tag "presse" %>
<%= javascript_include_tag "presse" %>
</head>
<body>
<%= yield %>
<footer class="pam txtcenter">
<small>Site conçu avec le moteur de site statique
<a href="https://middlemanapp.com/" title="Aller sur la page du projet Middleman">Middleman</a>
et le mini-framework CSS <a href="http://knacss.com/" title="Aller sur la page de KNACSS">KNACSS</a>.</small>
<br>
<small>Toute contribution à l’amélioration du site est la bienvenue sur notre page
<a href="https://github.com/pas-sage-en-seine/site" title="Aller à la page GitHub du site du festival">GitHub</a> !</small>
</footer>
</body>
</html>

23
source/presse.html.erb

@ -0,0 +1,23 @@
---
title: Pas Sage en Seine - Dossier de presse
---
<header>
<div class="w80 center autogrid">
<div class="brand">
<a href="/" title="Accueil du site">PSES</a>
</div>
</div>
</header>
<div class="flex-container content">
<div class="w20 pal txtleft">
<%= partial '_toc_presse' %>
</div>
<div class="w50 center pal">
<%= partial '_dossier_presse' %>
</div>
<div class="w20 pal txtright">
</div>
</div>

210
source/stylesheets/presse.css.scss

@ -0,0 +1,210 @@
@import "variables";
@import "KNACSS";
@import "fonts";
body {
font-family: 'Ubuntu';
color: $text;
background-color: $bg;
}
header {
padding-top: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid $bg;
position: sticky;
top: 0;
width: 100%;
background: $text;
color: $bg;
font-size: 2rem;
a {
color: $bg;
text-decoration: underline dashed;
text-decoration-thickness: 1px;
&:hover, &:focus {
color: darken($bg, 20%);
text-decoration: underline dashed;
text-decoration-thickness: 1px;
}
}
div.brand, nav {
padding: 1rem;
}
}
footer {
padding-bottom: 1rem;
padding-top: 1rem;
border-top: 1px solid $bg;
background-color: $text;
color: $bg;
a {
color: $bg;
text-decoration: underline dotted;
text-decoration-thickness: 1px;
&:hover, &:focus {
color: darken($bg, 20%);
text-decoration: underline dashed;
text-decoration-thickness: 1px;
}
}
}
/* Navigation */
nav[role="navigation"] input[type="checkbox"].menu {
position: absolute;
top: -9999px;
left: -9999px;
}
nav[role="navigation"] label.menu {
display: none;
cursor: pointer;
user-select: none;
}
.content {
min-height: 100vh;
padding-top: 5rem;
&:nth-child(even) {
background-color: $bg;
color: $text;
a {
color: $text;
&:focus, &:hover {
color: lighten($text, 20%);
}
}
}
p, ul, address, dd, td {
color: #111;
}
dl.table-display {
display: flex;
flex-flow: row wrap;
dt
{
flex-basis: 25%;
margin: 0 0 0 0;
padding: .5em;
font-weight: bold;
}
dd
{
flex-basis: 75%;
flex-grow: 1;
width: auto;
margin: 0 0 0 0;
padding: .5em;
}
}
:target:before {
content: "";
display: block;
height: 8rem; /* fixed header height*/
margin: -8rem 0 0; /* negative fixed header height */
}
}
nav.toc {
font-size: 1.5rem;
position: sticky;
top: 7rem;
right: 0;
}
/* Gestion des mobiles */
@media screen and (max-width: 800px) {
html, body {
margin: 0;
}
nav[role="navigation"] ul,
nav[role="navigation"] strong {
display: none;
}
nav[role="navigation"] label.menu {
display: inline;
width: 100%;
margin-top: 0rem;
margin-left: 1.5rem;
}
nav[role="navigation"] label.menu:before {
position: absolute;
left: 0rem;
top: 0rem;
content: "\2261";
}
nav[role="navigation"] input[type=checkbox].menu:checked ~ label:before {
content: "\203A";
}
nav[role="navigation"] input[type=checkbox].menu:checked ~ ul,
nav[role="navigation"] input[type=checkbox].menu:checked ~ strong {
display: block;
font-size: 1.5rem;
background-color: $bg;
color: $text;
}
.w50, .w60 {
width: 90%;
}
.w20 {
width: 40%;
}
.pal {
padding: 1rem;
}
.content {
min-height: 100vh;
padding-top: 7rem;
&:nth-child(even) {
background-color: $bg;
color: $text;
a {
color: $text;
&:focus, &:hover {
color: lighten($text, 20%);
}
}
p, ul, address, dd {
color: #111;
}
}
dl.table-display {
display: flex;
flex-flow: row wrap;
dt
{
flex-basis: 30%;
margin: 0 0 0 0;
padding: .5em;
font-weight: bold;
}
dd
{
flex-basis: 70%;
flex-grow: 1;
width: auto;
margin: 0 0 0 0;
padding: .5em;
}
}
}
nav.toc {
position: fixed;
font-size: 1.5rem;
top: 7rem;
left: .5rem;
}
}

131
source/stylesheets/site.css.scss

@ -37,6 +37,27 @@ header {
}
}
footer {
padding-bottom: 1rem;
padding-top: 1rem;
border-top: 1px solid $bg;
background: $text;
color: $bg;
a {
color: $bg;
text-decoration: underline dotted;
text-decoration-thickness: 1px;
&:hover, &:focus {
color: darken($bg, 20%);
text-decoration: underline dashed;
text-decoration-thickness: 1px;
}
}
}
/* Navigation */
nav[role="navigation"] input[type="checkbox"].menu {
position: absolute;
@ -50,43 +71,6 @@ nav[role="navigation"] label.menu {
user-select: none;
}
@media screen and (max-width: 800px) {
html, body {
margin: 0;
header .brand {
font-size: 1.5rem;
}
}
nav[role="navigation"] a {
display: none;
}
nav[role="navigation"] label.menu {
display: inline;
width: 100%;
margin-top: .5rem;
}
nav[role="navigation"] label.menu:after {
position: absolute;
right: 1.5rem;
top: 1.5rem;
content: "\2261";
}
nav[role="navigation"] input[type=checkbox].menu:checked ~ label:after {
content: "\203A";
}
nav[role="navigation"] input[type=checkbox].menu:checked ~ a {
display: block;
font-size: 1.5rem;
}
.w50, .w60 {
width: 90%;
}
.pal {
padding: 1rem;
}
}
section div.descriptions {
border-radius: 2rem;
}
@ -281,23 +265,6 @@ progress {
}
}
@media screen and (max-width: 800px) {
#festival {
font-size: inherit;
}
[data-modal] {
border-radius: 2rem;
padding: 2rem;
padding-top: 4rem;
}
#contact svg, #sponsors img {
max-width: 10rem;
max-height: 10rem;
padding: 1rem;
border-radius: 1rem;
}
}
#needs {
.list {
display: flex;
@ -314,7 +281,63 @@ progress {
}
}
div.toc {
font-size: 1.5rem;
position: sticky;
top: 0;
right: 0;
}
/* Gestion des mobiles */
@media screen and (max-width: 800px) {
html, body {
margin: 0;
header .brand {
font-size: 1.5rem;
}
}
nav[role="navigation"] a {
display: none;
}
nav[role="navigation"] label.menu {
display: inline;
width: 100%;
margin-top: .5rem;
}
nav[role="navigation"] label.menu:after {
position: absolute;
right: 1.5rem;
top: 1.5rem;
content: "\2261";
}
nav[role="navigation"] input[type=checkbox].menu:checked ~ label:after {
content: "\203A";
}
nav[role="navigation"] input[type=checkbox].menu:checked ~ a {
display: block;
font-size: 1.5rem;
}
.w50, .w60 {
width: 90%;
}
.pal {
padding: 1rem;
}
#festival {
font-size: inherit;
}
[data-modal] {
border-radius: 2rem;
padding: 2rem;
padding-top: 4rem;
}
#contact svg, #sponsors img {
max-width: 10rem;
max-height: 10rem;
padding: 1rem;
border-radius: 1rem;
}
#needs {
.list {
display: block;

Loading…
Cancel
Save