mirror of
https://github.com/zamentur/libreto.git
synced 2025-11-11 16:29:55 +05:30
New homepage
This commit is contained in:
Ventricule
parent
9f9482a0bb
commit
20694a8f41
7 changed files with 205 additions and 58 deletions
14
libreto/assets/script-home.js
Normal file
14
libreto/assets/script-home.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
$(document ).ready( function() {
|
||||
|
||||
var $url = $('.url');
|
||||
|
||||
$('#custom_instance').change(function() {
|
||||
if($(this).is(":checked")) {
|
||||
$url.addClass('custom_instance');
|
||||
return;
|
||||
}
|
||||
$url.removeClass('custom_instance');
|
||||
});
|
||||
$('#custom_instance').change();
|
||||
|
||||
});
|
||||
|
|
@ -61,11 +61,15 @@ Jean-Luc typeface Copyright (c) 2010 Atelier Carvalho Bernau
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "HKGrotesk";
|
||||
font-size: 16pt;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #8ed1ff;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -75,7 +79,7 @@ p {
|
|||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration-color: #ccc;
|
||||
text-decoration-color: rgba(0,0,0,.15);
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -110,45 +114,157 @@ img {
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
article {
|
||||
max-width: 35rem;
|
||||
padding: 6rem;
|
||||
.introduction {
|
||||
position: fixed;
|
||||
top: 5rem;
|
||||
left: 5rem;
|
||||
display: flex;
|
||||
right: 5rem;
|
||||
}
|
||||
|
||||
.introduction > p,
|
||||
.introduction > div {
|
||||
max-width: 15rem;
|
||||
min-width: 10rem;
|
||||
margin-right: 5rem;
|
||||
}
|
||||
|
||||
.colophon {
|
||||
position: fixed;
|
||||
bottom: 0rem;
|
||||
right: 6rem;
|
||||
font-size: .8rem;
|
||||
bottom: 5rem;
|
||||
right: 5rem;
|
||||
width: 15rem;
|
||||
}
|
||||
|
||||
.create_libreto {
|
||||
margin-bottom: 6rem;
|
||||
.instance {
|
||||
position: fixed;
|
||||
left: 5rem;
|
||||
bottom: 5rem;
|
||||
width: 15rem;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.url {
|
||||
text-align: center;
|
||||
font-size: 3rem;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
transform: translateY(-60%);
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 2rem 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type=input] {
|
||||
font-family: "HKGrotesk";
|
||||
font-size: 16pt;
|
||||
font-size: 3rem;
|
||||
background: none;
|
||||
border: 1px solid #000;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
border: 0;
|
||||
border-bottom: .2rem solid rgba(0,0,0,.5);
|
||||
width: 30rem;
|
||||
text-transform: lowercase;
|
||||
margin: 0 .5rem;
|
||||
}
|
||||
|
||||
input[type=input]::placeholder {
|
||||
color: rgba(0,0,0,.5);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
button[type=submit] {
|
||||
font-family: "HKGrotesk";
|
||||
font-size: 16pt;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
border: 0px solid #ccc;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 3rem;
|
||||
background: none;
|
||||
color: #000;
|
||||
border: .2rem solid;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 2rem;
|
||||
padding: 0 1rem;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 15rem;
|
||||
background: none;
|
||||
border: 0;
|
||||
font-size: 3rem;
|
||||
font-family: "HKGrotesk";
|
||||
margin-right: -2rem;
|
||||
cursor: pointer;
|
||||
text-overflow: ellipsis;
|
||||
color: rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
.url .subdomain,
|
||||
.url .dot {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.url.custom_instance .subdomain,
|
||||
.url.custom_instance .dot {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.subdomain {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
vertical-align: text-top;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding-right: 2rem;
|
||||
border-bottom: .2rem solid rgba(0,0,0,.5);
|
||||
margin: 0 .5rem;
|
||||
}
|
||||
|
||||
.subdomain .select {
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
.subdomain::after {
|
||||
content: "›";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: 3rem;
|
||||
pointer-events: none;
|
||||
transform: rotate(90deg);
|
||||
color: rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-ms-appearance: none;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
height: .8rem;
|
||||
width: .8rem;
|
||||
background: none;
|
||||
border: 1px solid;
|
||||
vertical-align: baseline;
|
||||
line-height: .8rem;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked::before {
|
||||
content: '×';
|
||||
display: block;
|
||||
color: #000;
|
||||
font-size: 13px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: .55rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -83,16 +83,15 @@ a {
|
|||
|
||||
hr {
|
||||
border: none;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-bottom: 1px solid rgba(0,0,0,.15);;
|
||||
margin: 1rem 0 ;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: .8rem;
|
||||
padding: .1rem .3rem;
|
||||
background: #eee;
|
||||
background: rgba(0,0,0,.15);
|
||||
font-family: 'whoismono', monospace;
|
||||
border: .5px solid #ddd;
|
||||
margin: .1rem 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -248,9 +247,14 @@ header.close div.full {
|
|||
display: none;
|
||||
}
|
||||
|
||||
header.open {
|
||||
background-color: #8ed1ff;
|
||||
}
|
||||
|
||||
header.close {
|
||||
flex: none;
|
||||
padding: 1rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
header.close div {
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
title: Libreto
|
||||
|
||||
logo : http://libreto.net/assets/images/libretonet.png
|
||||
introduction: >
|
||||
Libreto is a collaborative notebook based on [framapad](https://framapad.org).
|
||||
|
||||
introduction: |
|
||||
Libreto is a collaborative notebook based on [etherpad](http://etherpad.org/).
|
||||
|
||||
It can become a mini-website, a workshop logbook or the tool to write a collective book.
|
||||
|
||||
It can become a mini-website, a workshop logbook or a collective book writing tool.
|
||||
|
||||
Libreto is free and minimal.
|
||||
|
||||
No registration, no connection, anyone can write a Libreto.
|
||||
instance: |
|
||||
<input type="checkbox" id="custom_instance"> Utiliser une instance personnalisé pour héberger les pads.
|
||||
|
||||
create: Create libreto
|
||||
name: Libreto name
|
||||
|
||||
colophon: >
|
||||
create: Create
|
||||
|
||||
colophon: |
|
||||
Libreto is under [GNU/GPLv3 License](https://www.gnu.org/licenses/gpl-3.0.en.html)
|
||||
|
||||
Use and modify on [GitHub](https://github.com/Ventricule/libreto)
|
||||
|
||||
A project initiated by [Pierre Tandille](http://lecollecteur.fr)
|
||||
|
|
|
|||
|
|
@ -2,25 +2,21 @@ title: Libreto
|
|||
|
||||
logo : http://libreto.net/assets/images/libretonet.png
|
||||
|
||||
introduction: >
|
||||
introduction: |
|
||||
Libreto est un carnet de note collaboratif fondé sur [etherpad](http://etherpad.org/).
|
||||
|
||||
|
||||
Il peut devenir un mini-site, le carnet de bord d'un workshop ou le support de rédaction d'un livre collectif.
|
||||
|
||||
Pas d'inscription, pas de connexion, tout le monde peut utiliser et modifier un Libreto.
|
||||
|
||||
Libreto est libre, gratuit, et minimaliste.
|
||||
instance: |
|
||||
<input type="checkbox" id="custom_instance"> Utiliser une instance personnalisé pour héberger les pads.
|
||||
|
||||
name: Titre
|
||||
|
||||
Pas d'inscription, pas de connexion, tout le monde peut écrire un Libreto.
|
||||
|
||||
|
||||
create: Créer un Libreto
|
||||
|
||||
colophon: >
|
||||
create: Créer
|
||||
|
||||
colophon: |
|
||||
Libreto est sous [licence GNU/GPLv3](https://www.gnu.org/licenses/gpl-3.0.en.html).
|
||||
|
||||
N'hésitez pas à participer sur [GitHub](https://github.com/Ventricule/libreto).
|
||||
|
||||
Un projet initié par [Pierre Tandille](http://lecollecteur.fr).
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@ export: Export
|
|||
download: Download
|
||||
update: Update
|
||||
credits: |
|
||||
**Crédits**
|
||||
Graphisme & programmation : [Pierre Tandille](http://lecollecteur.fr)
|
||||
**Credits**
|
||||
Libreto : [Pierre Tandille](http://lecollecteur.fr)
|
||||
Typographies : [HK Grotesk](https://hanken.co), [Spun Gold](http://www.co-bay.com/dasein), [Jean-Luc](http://www.carvalho-bernau.com)
|
||||
Pads : [Etherpad](http://etherpad.org/), [Framapad](http://framapad.org), [Fairkom Board](https://board.net/)
|
||||
about: |
|
||||
|
|
|
|||
|
|
@ -17,21 +17,38 @@ endif;
|
|||
<title>Libreto</title>
|
||||
|
||||
<link rel="stylesheet" href="/libreto/assets/style-index.css">
|
||||
|
||||
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
|
||||
<script type="text/javascript" src="/libreto/assets/script-home.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<article>
|
||||
<div class="introduction">
|
||||
<?= l('introduction') ?>
|
||||
<div class="create_libreto">
|
||||
<form action="" method="POST">
|
||||
<input type="input" autofocus="autofocus" onfocus="this.select()" name="new_name" />
|
||||
<button type="submit" /><?= l("create", false) ?></button>
|
||||
</form>
|
||||
</div>
|
||||
</article>
|
||||
<div class="colophon" markdown="1">
|
||||
</div>
|
||||
|
||||
<div class="instance small">
|
||||
<?= l('instance') ?>
|
||||
</div>
|
||||
|
||||
<div class="colophon small">
|
||||
<?= l('colophon') ?>
|
||||
</div>
|
||||
|
||||
<div class="url">
|
||||
<form action="" method="POST">
|
||||
<span class="subdomain">
|
||||
<span class="select">
|
||||
<select id="instance">
|
||||
<option value="framapad">framapad</option>
|
||||
<option value="board" selected>board</option>
|
||||
<option value="etherpad">etherpad</option>
|
||||
</select>
|
||||
</span>
|
||||
</span><span class="dot">.</span><span class="domain">libreto.net/</span><span class="directory"><input type="input" autofocus="autofocus" onfocus="this.select()" name="new_name" placeholder="<?= l('name', false) ?>" /></span>
|
||||
<button type="submit" /><?= l("create", false) ?></button>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue