Unverified Commit cf185796 authored by iGor milhit's avatar iGor milhit 🐑
Browse files

Layout: version 2



* NEW: change fonts
* NEW: use SASS
* NEW: use fork awesome
* NEW: use flexbox and grid
Signed-off-by: iGor milhit's avatariGor milhit <igor@milhit.ch>
parent c96060fb
......@@ -5,3 +5,7 @@
Session.vim
.netrwhist
*~
### Sass ###
*.map
.sass-cache
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>à propos</title>
<meta name="description" content="À propos d'id-libre">
<meta name="keywords" content="iGor milhit, id-libre.org, id-libre, auto-hébergement, à propos">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body id="top">
<section>
<div class="content">
<div class="full-width">
<article>
<header>
<h1>À propos d'id-libre</h1>
</header>
<section>
<p><em>id-libre</em> est un espace pour apprendre et exercer la liberté d'expression, concrètement, peu importe l'échelle. Un espace où, modestement, maladroitement, se construit une infinitésimale portion des <em>interwebz</em>.</p>
<p>Le nom de domaine <em>id-libre</em> pointe sur mon petit réseau local, dans lequel une machine particulière sert les ressources demandées, du moins si elles sont disponibles. Une petite machine relativement silencieuse au bas de l'étagère qui jouxte mon bureau.</p>
<p>Parmi les ressources desservies, certaines sont privées et d'autres publiques. Dans la première catégorie, on trouve un <em>nuage</em> sous la forme d'une instance du fameux <a href="http://owncloud.org/"><em>ownCloud</em></a>, les agrégateurs de flux <a href="http://tontof.net/kriss/feed/"><em>KrISS Feed</em></a> et <a href="http://freshrss.org/"><em>Fresh RSS</em></a>, l'application de lecture différée et de sauvegarde d'articles <a href="http://wallabag.org/"><em>Wallabag</em></a> et un accès en <em>streaming</em> à ma collection musicale numérique, grâce à <a href="http://subsonic.org/"><em>Subsonic</em></a>.<br />Dans la seconde catégorie, tu peux accéder à deux blogs : mon blog personnel, <a href="../blogiGor"><em>blogiGor</em></a> et un blog hébergé, <a href="../variations"><em>Variations photographiques</em></a>, mais aussi <a href="../shaarli"><em>ShaarliGor</em></a> où je diffuse une partie de ma veille au moyen du génial logiciel initié par Sebsauvage qu'est <a href="http://sebsauvage.net/wiki/doku.php?id=php:shaarli"><em>Shaarli</em></a>, une ébauche de galerie photo servie par <a href="https://github.com/sebsauvage/MinigalNano"><em>MiniGal Nano</em></a>, un <a href="http://dokuwiki.org/"><em>DokuWiki</em></a> où je prends une partie de mes <a href="../notes"><em>Notes</em></a> et documente comme je peux mon utilisation de l'informatique, et quelques autres petits trucs.</p>
<p>Tu auras remarqué que tous ces outils sont des logiciels libres, le plus souvent servis par <a href="http://apache.org/"><em>Apache</em></a> tournant sur une bonne vieille <a href="http://debian.org/"><em>Debian</em></a>. Ce n'est certes pas un hasard. D'abord, ils ont le mérite d'exister, d'être relativement simples à mettre en place et à maintenir. Mais surtout, ils sont reliés à une <em>philosophie</em> respectant les droits des <em>utilisateurs</em>.<br />C'est tellement vrai qu'en réalité j'ai commencé à apprendre quelque chose en informatique dès le moment que j'ai installé une <em>Ubuntu</em> sur mon ordinateur de bureau, il y a six ans. Je ne dis pas qu'il n'est pas possible d'apprendre en travaillant sous <em>Windows</em> ou <em>Mac OS X</em>, mais dans mon cas du moins, la découverte des distributions <em>GNU/Linux</em> a été l'élément déclencheur. Et c'est en découvrant le logiciel libre que j'ai pris conscience qu'il était possible de faire des petits bouts d'Internet, chez soi. Tout seul.</p>
<p>Tout seul, vraiment ? Non, il y a eu beaucoup de personnes qui m'ont aidé sur le chemin, certaines que j'ai rencontrés physiquement, d'autres que j'ai fréquentés par l'entremise des réseaux, et d'autres enfin dont je n'ai fait que lire les informations généreusement publiées sur le Web.</p>
</section>
</article>
</div>
</div>
</section>
<aside>
<header role="banner">
<div class="content">
<h1>
<a class="maintitle" href="/" title="id-libre">id-libre</a>
</h1>
<h2>
self-hosted
</h2>
</div>
</header>
<nav role="navigation">
<div class="content">
<ul>
<li><a href="https://igor.milhit.ch" title="mon ePortfolio">iGor milhit</a></li>
<li><a href="blogigor" title="blogiGor : le blog d'iGor milhit">blogiGor</a></li>
<li><a href="imagiGor" title="imagiGor : les photos d'iGor milhit'">imagiGor</a></li>
<li><a href="variations" title="variations photographiques">variations</a></li>
<li><a href="shaarli" title="le partage de liens d'iGor">iGor's shaarli</a></li>
<li><a href="listening" title="">!listening</a></li>
</ul>
</div>
</nav>
<footer role="contentinfo">
<div class="content">
<small>
<a href="mailto:webmaster@id-libre.org" title="écrire au 'webmaster'">écrire au 'webmaster'</a>
</small>
</div>
</footer>
</aside>
</body>
</html>
<head>
<meta charset="utf-8">
<title>à propos | id-libre</title>
<meta name="description" content="Page d'accueil d'id-libre">
<meta name="keywords" content="iGor milhit, id-libre.org, id-libre, auto-hébergement">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/forkawesome.css">
</head>
<body>
<header class="banner">
<div class="container">
<h1>
<a href="./" title="Page d'accueil du site id-libre.org">id-libre</a>
</h1>
<h2>
<a href="apropos.html" title="à propos d'id-libre"><i class="fa fa-info-circle"></i> à propos</a>
</h2>
</div>
</header>
<main class="apropos container">
<article class="text-container">
<header>
<h1>À propos d'id-libre</h1>
</header>
<section>
<p><em>id-libre</em> est un espace pour apprendre et exercer la liberté d'expression, concrètement, peu importe l'échelle. Un espace où, modestement, maladroitement, se construit une infinitésimale portion des <em>interwebz</em>.</p>
<p>Le nom de domaine <em>id-libre</em> pointe sur mon petit réseau local, dans lequel une machine particulière sert les ressources demandées, du moins si elles sont disponibles. Une petite machine relativement silencieuse au bas de l'étagère qui jouxte mon bureau.</p>
<p>Parmi les ressources desservies, certaines sont privées et d'autres publiques. Dans la première catégorie, on trouve un <em>nuage</em> sous la forme d'une instance du fameux <a href="https://nextcloud.org/"><em>nextCloud</em></a>, l'agrégateur de flux <a href="http://freshrss.org/"><em>Fresh RSS</em></a>, l'application de lecture différée et de sauvegarde d'articles <a href="http://wallabag.org/"><em>Wallabag</em></a> et un accès en <em>streaming</em> à ma collection musicale numérique, grâce à <a href="http://airsonic.github.io/"><em>Airsonic</em></a>.<br />Dans la seconde catégorie, tu peux accéder à deux blogs : mon blog personnel, <a href="../blogiGor"><em>blogiGor</em></a> et un blog hébergé, <a href="../variations"><em>Variations photographiques</em></a>, mais aussi <a href="../shaarli"><em>ShaarliGor</em></a> où je diffuse une partie de ma veille au moyen du génial logiciel initié par Sebsauvage qu'est <a href="https://github.com/shaarli/Shaarli"><em>Shaarli</em></a>, une ébauche de galerie photo servie par <a href="https://github.com/sebsauvage/MinigalNano"><em>MiniGal Nano</em></a>, un <a href="http://dokuwiki.org/"><em>DokuWiki</em></a> où je prends une partie de mes <a href="../notes"><em>Notes</em></a> et documente comme je peux mon utilisation de l'informatique, et quelques autres petits trucs.</p>
<p>Tu auras remarqué que tous ces outils sont des logiciels libres, le plus souvent servis par <a href="http://apache.org/"><em>Apache</em></a> tournant sur une bonne vieille <a href="http://debian.org/"><em>Debian</em></a>. Ce n'est certes pas un hasard. D'abord, ils ont le mérite d'exister, d'être relativement simples à mettre en place et à maintenir. Mais surtout, ils sont reliés à une <em>philosophie</em> respectant les droits des <em>utilisateurs</em>.<br />C'est tellement vrai qu'en réalité j'ai commencé à apprendre quelque chose en informatique dès le moment que j'ai installé une <em>Ubuntu</em> sur mon ordinateur de bureau, il y a six ans. Je ne dis pas qu'il n'est pas possible d'apprendre en travaillant sous <em>Windows</em> ou <em>Mac OS X</em>, mais dans mon cas du moins, la découverte des distributions <em>GNU/Linux</em> a été l'élément déclencheur. Et c'est en découvrant le logiciel libre que j'ai pris conscience qu'il était possible de faire des petits bouts d'Internet, chez soi. Tout seul.</p>
<p>Tout seul, vraiment ? Non, il y a eu beaucoup de personnes qui m'ont aidé sur le chemin, certaines que j'ai rencontrés physiquement, d'autres que j'ai fréquentés par l'entremise des réseaux, et d'autres enfin dont je n'ai fait que lire les informations généreusement publiées sur le Web.</p>
</section>
</article>
</main>
<footer class="banner">
<div class="container">
<ul>
<li>
<a href="https://framagit.org/iGormilhit/indexiGor/tag/v2.0.0"><i class="fa fa-tag"></i> v.2.0.0</a>
</li>
<li>
<a href="https://framagit.org/iGormilhit/indexiGor" title="Les sources sur framagit"><i class="fa fa-gitlab"></i> Sources</a>
</li>
</ul>
</div>
</footer>
</body>
</html>
\ No newline at end of file
/* --------------------------
* Feuille de style pour la
* page d'accueil d'id-libre.
*
* date : 2015-04-22
* igor@id-libre.org
* -------------------------*/
@import url('../fonts/fonts.css');
body {
color: rgba(0, 0, 0, .8);
font-family: "merriweatherlight", serif;
}
a {
text-decoration: none;
}
#accueil {
margin: 4% auto 0 auto;
width: 98%;
max-width: 960px;
}
.entree {
margin: 15px;
width: 205px;
line-height: 205px;
overflow: hidden;
text-align: center;
background-color: rgba(34, 34, 34, .8);
color: rgba(231, 231, 231, .7);
font-size: 1.7em;
display: inline-block;
vertical-align: middle;
border-radius: 5px;
}
.entree:hover {
color: rgba(231, 231, 231, .7);
background-color: rgba(34, 34, 34, .5);
}
.entree a {
display: block;
width: 100%;
height: 100%;
color: rgba(231, 231, 231, .7);
}
#apropos {
background-color: rgba(216, 216, 216, .8);
color: rgba(34, 34, 34, .8);
}
#apropos a {
color: rgba(34, 34, 34, .8);
}
#apropos.entree:hover {
background-color: rgba(34, 34, 34, .5);
}
#apropos.entree a:hover {
color: rgba(231, 231, 231, .7);
}
#perso {
background-color: rgba(103, 83, 108, 1);
}
#perso:hover {
background-color: rgba(103, 83, 108, .7);
}
#perso a {
color: rgba(238, 215, 244, .7);
}
#perso a.hover {
color: rgba(238, 215, 244, 1);
}
/* ------------------------------------------------------
* ---------- Responsive --------------
* ----------------------------------------------------*/
@media (max-width:979px) {
#accueil {
margin-top: 2%;
max-width: 660px;
}
.entree {
margin: 10px;
width: 197px;
line-height: 197px;
font-size: 1.5em;
}
}
@media (max-width:670px) {
#accueil {
max-width: 640px
}
.entree {
margin: 2% auto;
padding: 2%;
width: 90%;
line-height: 2em;
font-size: 2em;
display: block;
}
}
This diff is collapsed.
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,