@ -1,3 +1,6 @@ | |||
Ceci est la page WEB d'accueil des services [saty.Re](http://saty.re). | |||
Ceci est la page WEB d'accueil des services [saty.re](http://saty.re) générée pour l'instant grâce au logiciel Jekyll. | |||
Vous avez donc les fichiers de config pour générer la page, ainsi que la page générée dans le répertoire /_site | |||
Pour faire cette page, j'ai récupéré la configuration de mon blog [saimyx.fr](http://saimyx.fr), qui est basé sur le thème par défaut de Jekyll, et je l'ai adaptée. | |||
Licence : CC-BY 4.0 |
@ -0,0 +1,11 @@ | |||
# Site settings | |||
title: saty.re | |||
email: contact@saty.re | |||
description: > # this means to ignore newlines until "baseurl:" | |||
baseurl: "" # the subpath of your site, e.g. /blog | |||
url: "https://saty.re" # the base hostname & protocol for your site | |||
# Build settings | |||
markdown: kramdown |
@ -0,0 +1,22 @@ | |||
<footer class="site-footer"> | |||
<div class="wrapper"> | |||
<div class="footer-col-wrapper"> | |||
<div class="footer-col footer-col-1"> | |||
Mon blog perso : <a href="http://saimyx.fr">saimyx.fr</a><br/> | |||
Me contacter : <a href="mailto:{{ site.email }}">{{ site.email }}</a> | |||
</div> | |||
<div class="footer-col footer-col-2"> | |||
</div> | |||
<div class="footer-col footer-col-3"> | |||
<p>{{site.description}} Cette page est optimisée pour <a href="https://www.mozilla.org/fr/firefox/new/">Firefox</a>.</p> | |||
</div> | |||
</div> | |||
</div> | |||
</footer> |
@ -0,0 +1,12 @@ | |||
<head> | |||
<meta charset="utf-8"> | |||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||
<meta name="viewport" content="width=device-width, initial-scale=1"> | |||
<title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title> | |||
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}"> | |||
<link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}"> | |||
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}"> | |||
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}"> | |||
</head> |
@ -0,0 +1,19 @@ | |||
<header class="site-header"> | |||
<div class="wrapper"> | |||
<a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a> | |||
<nav class="site-nav"> | |||
<div class="trigger"> | |||
{% for my_page in site.pages %} | |||
{% if my_page.title %} | |||
<a class="page-link" href="{{ my_page.url | prepend: site.baseurl }}">{{ my_page.title }}</a> | |||
{% endif %} | |||
{% endfor %} | |||
</div> | |||
</nav> | |||
</div> | |||
</header> |
@ -0,0 +1,20 @@ | |||
<!DOCTYPE html> | |||
<html> | |||
{% include head.html %} | |||
<body> | |||
{% include header.html %} | |||
<div class="page-content"> | |||
<div class="wrapper"> | |||
{{ content }} | |||
</div> | |||
</div> | |||
{% include footer.html %} | |||
</body> | |||
</html> |
@ -0,0 +1,14 @@ | |||
--- | |||
layout: default | |||
--- | |||
<article class="post"> | |||
<header class="post-header"> | |||
<h1 class="post-title">{{ page.title }}</h1> | |||
</header> | |||
<div class="post-content"> | |||
{{ content }} | |||
</div> | |||
</article> |
@ -0,0 +1,14 @@ | |||
--- | |||
layout: default | |||
--- | |||
<article class="post" itemscope itemtype="http://schema.org/BlogPosting"> | |||
<header class="post-header"> | |||
<h1 class="post-title" itemprop="name headline">{{ page.title }}</h1> | |||
</header> | |||
<div class="post-content" itemprop="articleBody"> | |||
{{ content }} | |||
</div> | |||
</article> |
@ -0,0 +1,29 @@ | |||
--- | |||
layout: post | |||
title: "Mise à disposition de services" | |||
date: 2020-04-03 | |||
categories: [accueil] | |||
--- | |||
Être indépendant des grandes entreprises de l’Internet est quelque chose d’important à mes yeux. L’Internet ne s’est pas construit dans une optique de commerce, mais plutôt dans des ressources et services partagés. | |||
### Services disponibles ### | |||
La liste des services disponibles actuellement. | |||
- Un serveur [Firefox Sync](https://ffsync.saty.re/). Actif depuis longtemps :) | |||
- Un petit jeu de rapidité : [Hextris](https://hextris.saty.re/) | |||
- Un service de domaines de type : [example.saty.re](http://example.saty.re/) | |||
- La construction et l’hébergement de sites vitrines léger (type : [lespectaclelibre.saty.re](https://lespectaclelibre.saty.re/))<br/> | |||
*Pour les deux derniers, rien d’automatique, [contactez moi simplement](mailto:contact@saty.re) :)* | |||
### En réflexion ### | |||
Services que j’ai envie d’héberger. | |||
- Un gestionnaire de partage de texte. On en trouve facilement, mais j’aime bien et c’est léger. | |||
- Un gestionnaire de texte collaboratifs. On n’en trouve pas forcément très facilement. | |||
- Un gestionnaire de sondage. On n’en trouve pas trop non plus. | |||
- Une application de partage de fichiers. À la limite, là il faudrait un VPS dédié pour permettre l’envoi de gros fichiers | |||
- Un raccourcisseur d’URL. Il n’y en a pas trop de biens, mais il faudrait le mettre sur un domaine simple comme [saty.re](http://saty.re/) | |||
- Un émulateur de terminal WEB. À voir s’il y a moyen de l’utiliser avec un compte invité… | |||
Au fil du temps, des idées et des tests, je mettrai cet article à jour et le repartagerai :) |
@ -0,0 +1,206 @@ | |||
/** | |||
* Reset some basic elements | |||
*/ | |||
body, h1, h2, h3, h4, h5, h6, | |||
p, blockquote, pre, hr, | |||
dl, dd, ol, ul, figure { | |||
margin: 0; | |||
padding: 0; | |||
} | |||
/** | |||
* Basic styling | |||
*/ | |||
body { | |||
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family; | |||
color: $text-color; | |||
background-color: $background-color; | |||
-webkit-text-size-adjust: 100%; | |||
-webkit-font-feature-settings: "kern" 1; | |||
-moz-font-feature-settings: "kern" 1; | |||
-o-font-feature-settings: "kern" 1; | |||
font-feature-settings: "kern" 1; | |||
font-kerning: normal; | |||
} | |||
/** | |||
* Set `margin-bottom` to maintain vertical rhythm | |||
*/ | |||
h1, h2, h3, h4, h5, h6, | |||
p, blockquote, pre, | |||
ul, ol, dl, figure, | |||
%vertical-rhythm { | |||
margin-bottom: $spacing-unit / 2; | |||
} | |||
/** | |||
* Images | |||
*/ | |||
img { | |||
max-width: 100%; | |||
vertical-align: middle; | |||
} | |||
/** | |||
* Figures | |||
*/ | |||
figure > img { | |||
display: block; | |||
} | |||
figcaption { | |||
font-size: $small-font-size; | |||
} | |||
/** | |||
* Lists | |||
*/ | |||
ul, ol { | |||
margin-left: $spacing-unit; | |||
} | |||
li { | |||
> ul, | |||
> ol { | |||
margin-bottom: 0; | |||
} | |||
} | |||
/** | |||
* Headings | |||
*/ | |||
h1, h2, h3, h4, h5, h6 { | |||
font-weight: $base-font-weight; | |||
} | |||
/** | |||
* Links | |||
*/ | |||
a { | |||
color: $brand-color; | |||
text-decoration: none; | |||
&:visited { | |||
color: darken($brand-color, 15%); | |||
} | |||
&:hover { | |||
color: $text-color; | |||
text-decoration: underline; | |||
} | |||
} | |||
/** | |||
* Blockquotes | |||
*/ | |||
blockquote { | |||
color: $grey-color; | |||
border-left: 4px solid $grey-color-light; | |||
padding-left: $spacing-unit / 2; | |||
font-size: 18px; | |||
letter-spacing: -1px; | |||
font-style: italic; | |||
> :last-child { | |||
margin-bottom: 0; | |||
} | |||
} | |||
/** | |||
* Code formatting | |||
*/ | |||
pre, | |||
code { | |||
font-size: 15px; | |||
border: 1px solid $grey-color-light; | |||
border-radius: 3px; | |||
background-color: #eef; | |||
} | |||
code { | |||
padding: 1px 5px; | |||
} | |||
pre { | |||
padding: 8px 12px; | |||
overflow-x: auto; | |||
> code { | |||
border: 0; | |||
padding-right: 0; | |||
padding-left: 0; | |||
} | |||
} | |||
/** | |||
* Wrapper | |||
*/ | |||
.wrapper { | |||
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2)); | |||
max-width: calc(#{$content-width} - (#{$spacing-unit} * 2)); | |||
margin-right: auto; | |||
margin-left: auto; | |||
padding-right: $spacing-unit; | |||
padding-left: $spacing-unit; | |||
@extend %clearfix; | |||
@include media-query($on-laptop) { | |||
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit})); | |||
max-width: calc(#{$content-width} - (#{$spacing-unit})); | |||
padding-right: $spacing-unit / 2; | |||
padding-left: $spacing-unit / 2; | |||
} | |||
} | |||
/** | |||
* Clearfix | |||
*/ | |||
%clearfix { | |||
&:after { | |||
content: ""; | |||
display: table; | |||
clear: both; | |||
} | |||
} | |||
/** | |||
* Icons | |||
*/ | |||
.icon { | |||
> svg { | |||
display: inline-block; | |||
width: 16px; | |||
height: 16px; | |||
vertical-align: middle; | |||
path { | |||
fill: $grey-color; | |||
} | |||
} | |||
} |
@ -0,0 +1,249 @@ | |||
/** | |||
* Site header | |||
*/ | |||
.site-header { | |||
border-top: 5px solid $grey-color-dark; | |||
border-bottom: 1px solid $grey-color-light; | |||
min-height: 56px; | |||
// Positioning context for the mobile navigation icon | |||
position: relative; | |||
} | |||
.site-title { | |||
font-size: 26px; | |||
font-family: Chilanka; /*ajout*/ | |||
font-weight: 500; /*300*/ | |||
line-height: 56px; | |||
letter-spacing: -1px; | |||
margin-bottom: 0; | |||
float: left; | |||
&, | |||
&:visited { | |||
color: $grey-color-dark; | |||
} | |||
} | |||
.site-nav { | |||
float: right; | |||
line-height: 56px; | |||
.menu-icon { | |||
display: none; | |||
} | |||
.page-link { | |||
color: $text-color; | |||
line-height: $base-line-height; | |||
// Gaps between nav items, but not on the last one | |||
&:not(:last-child) { | |||
margin-right: 20px; | |||
} | |||
} | |||
@include media-query($on-palm) { | |||
position: absolute; | |||
top: 9px; | |||
right: $spacing-unit / 2; | |||
background-color: $background-color; | |||
border: 1px solid $grey-color-light; | |||
border-radius: 5px; | |||
text-align: right; | |||
.menu-icon { | |||
display: block; | |||
float: right; | |||
width: 36px; | |||
height: 26px; | |||
line-height: 0; | |||
padding-top: 10px; | |||
text-align: center; | |||
> svg { | |||
width: 18px; | |||
height: 15px; | |||
path { | |||
fill: $grey-color-dark; | |||
} | |||
} | |||
} | |||
.trigger { | |||
clear: both; | |||
display: none; | |||
} | |||
&:hover .trigger { | |||
display: block; | |||
padding-bottom: 5px; | |||
} | |||
.page-link { | |||
display: block; | |||
padding: 5px 10px; | |||
&:not(:last-child) { | |||
margin-right: 0; | |||
} | |||
margin-left: 20px; | |||
} | |||
} | |||
} | |||
/** | |||
* Site footer | |||
*/ | |||
.site-footer { | |||
border-top: 1px solid $grey-color-light; | |||
padding: $spacing-unit 0; | |||
} | |||
.footer-heading { | |||
font-size: 18px; | |||
margin-bottom: $spacing-unit / 2; | |||
} | |||
.contact-list, | |||
.social-media-list { | |||
list-style: none; | |||
margin-left: 0; | |||
} | |||
.rss-subscribe, | |||
.social-media-list { | |||
list-style: none; | |||
margin-left: 0; | |||
} | |||
.footer-col-wrapper { | |||
font-size: 15px; | |||
color: $grey-color; | |||
margin-left: -$spacing-unit / 2; | |||
@extend %clearfix; | |||
} | |||
.footer-col { | |||
float: left; | |||
margin-bottom: $spacing-unit / 2; | |||
padding-left: $spacing-unit / 2; | |||
} | |||
.footer-col-1 { | |||
width: -webkit-calc(35% - (#{$spacing-unit} / 2)); | |||
width: calc(35% - (#{$spacing-unit} / 2)); | |||
} | |||
.footer-col-2 { | |||
width: -webkit-calc(20% - (#{$spacing-unit} / 2)); | |||
width: calc(20% - (#{$spacing-unit} / 2)); | |||
} | |||
.footer-col-3 { | |||
width: -webkit-calc(45% - (#{$spacing-unit} / 2)); | |||
width: calc(45% - (#{$spacing-unit} / 2)); | |||
} | |||
@include media-query($on-laptop) { | |||
.footer-col-1, | |||
.footer-col-2 { | |||
width: -webkit-calc(50% - (#{$spacing-unit} / 2)); | |||
width: calc(50% - (#{$spacing-unit} / 2)); | |||
} | |||
.footer-col-3 { | |||
width: -webkit-calc(100% - (#{$spacing-unit} / 2)); | |||
width: calc(100% - (#{$spacing-unit} / 2)); | |||
} | |||
} | |||
@include media-query($on-palm) { | |||
.footer-col { | |||
float: none; | |||
width: -webkit-calc(100% - (#{$spacing-unit} / 2)); | |||
width: calc(100% - (#{$spacing-unit} / 2)); | |||
} | |||
} | |||
/** | |||
* Page content | |||
*/ | |||
.page-content { | |||
padding: $spacing-unit 0; | |||
} | |||
.page-heading { | |||
font-size: 20px; | |||
} | |||
.post-list { | |||
margin-left: 0; | |||
list-style: none; | |||
> li { | |||
margin-bottom: $spacing-unit; | |||
} | |||
} | |||
.post-meta { | |||
font-size: $small-font-size; | |||
color: $grey-color; | |||
} | |||
.post-link { | |||
display: block; | |||
font-size: 24px; | |||
} | |||
/** | |||
* Posts | |||
*/ | |||
.post-header { | |||
margin-bottom: $spacing-unit; | |||
} | |||
.post-title { | |||
font-size: 42px; | |||
letter-spacing: -1px; | |||
line-height: 1; | |||
@include media-query($on-laptop) { | |||
font-size: 36px; | |||
} | |||
} | |||
.post-content { | |||
margin-bottom: $spacing-unit; | |||
h2 { | |||
font-size: 32px; | |||
@include media-query($on-laptop) { | |||
font-size: 28px; | |||
} | |||
} | |||
h3 { | |||
font-size: 26px; | |||
@include media-query($on-laptop) { | |||
font-size: 22px; | |||
} | |||
} | |||
h4 { | |||
font-size: 20px; | |||
@include media-query($on-laptop) { | |||
font-size: 18px; | |||
} | |||
} | |||
} |
@ -0,0 +1,425 @@ | |||
/*! normalize.css v3.0.1 | 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, | |||
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: 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, | |||
input[type="number"]::-webkit-outer-spin-button { | |||
height: auto; | |||
} | |||
/** | |||
* 1. Address `appearance` set to `searchfield` in Safari and Chrome. | |||
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome | |||
* (include `-moz` to future-proof). | |||
*/ | |||
input[type="search"] { | |||
-webkit-appearance: textfield; /* 1 */ | |||
-moz-box-sizing: content-box; | |||
-webkit-box-sizing: content-box; /* 2 */ | |||
box-sizing: content-box; | |||
} | |||
/** | |||
* Remove inner padding and search cancel button in Safari and Chrome on OS X. | |||
* Safari (but not Chrome) clips the cancel button when the search input has | |||
* padding (and `textfield` appearance). | |||
*/ | |||
input[type="search"]::-webkit-search-cancel-button, | |||
input[type="search"]::-webkit-search-decoration { | |||
-webkit-appearance: none; | |||
} | |||
/** | |||
* Define consistent border, margin, and padding. | |||
*/ | |||
fieldset { | |||
border: 1px solid #c0c0c0; | |||
margin: 0 2px; | |||
padding: 0.35em 0.625em 0.75em; | |||
} | |||
/** | |||
* 1. Correct `color` not being inherited in IE 8/9/10/11. | |||
* 2. Remove padding so people aren't caught out if they zero out fieldsets. | |||
*/ | |||
legend { | |||
border: 0; /* 1 */ | |||
padding: 0; /* 2 */ | |||
} | |||
/** | |||
* Remove default vertical scrollbar in IE 8/9/10/11. | |||
*/ | |||
textarea { | |||
overflow: auto; | |||
} | |||
/** | |||
* Don't inherit the `font-weight` (applied by a rule above). | |||
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X. | |||
*/ | |||
optgroup { | |||
font-weight: bold; | |||
} | |||
/* Tables | |||
========================================================================== */ | |||
/** | |||
* Remove most spacing between table cells. | |||
*/ | |||
table { | |||
border-collapse: collapse; | |||
border-spacing: 0; | |||
} | |||
td, | |||
th { | |||
padding: 0; | |||
} |
@ -0,0 +1,71 @@ | |||
/** | |||
* Syntax highlighting styles | |||
*/ | |||
.highlight { | |||
background: #fff; | |||
@extend %vertical-rhythm; | |||
.highlighter-rouge & { | |||
background: #eef; | |||
} | |||
.c { color: #998; font-style: italic } // Comment | |||
.err { color: #a61717; background-color: #e3d2d2 } // Error | |||
.k { font-weight: bold } // Keyword | |||
.o { font-weight: bold } // Operator | |||
.cm { color: #998; font-style: italic } // Comment.Multiline | |||
.cp { color: #999; font-weight: bold } // Comment.Preproc | |||
.c1 { color: #998; font-style: italic } // Comment.Single | |||
.cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special | |||
.gd { color: #000; background-color: #fdd } // Generic.Deleted | |||
.gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific | |||
.ge { font-style: italic } // Generic.Emph | |||
.gr { color: #a00 } // Generic.Error | |||
.gh { color: #999 } // Generic.Heading | |||
.gi { color: #000; background-color: #dfd } // Generic.Inserted | |||
.gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific | |||
.go { color: #888 } // Generic.Output | |||
.gp { color: #555 } // Generic.Prompt | |||
.gs { font-weight: bold } // Generic.Strong | |||
.gu { color: #aaa } // Generic.Subheading | |||
.gt { color: #a00 } // Generic.Traceback | |||
.kc { font-weight: bold } // Keyword.Constant | |||
.kd { font-weight: bold } // Keyword.Declaration | |||
.kp { font-weight: bold } // Keyword.Pseudo | |||
.kr { font-weight: bold } // Keyword.Reserved | |||
.kt { color: #458; font-weight: bold } // Keyword.Type | |||
.m { color: #099 } // Literal.Number | |||
.s { color: #d14 } // Literal.String | |||
.na { color: #008080 } // Name.Attribute | |||
.nb { color: #0086B3 } // Name.Builtin | |||
.nc { color: #458; font-weight: bold } // Name.Class | |||
.no { color: #008080 } // Name.Constant | |||
.ni { color: #800080 } // Name.Entity | |||
.ne { color: #900; font-weight: bold } // Name.Exception | |||
.nf { color: #900; font-weight: bold } // Name.Function | |||
.nn { color: #555 } // Name.Namespace | |||
.nt { color: #000080 } // Name.Tag | |||
.nv { color: #008080 } // Name.Variable | |||
.ow { font-weight: bold } // Operator.Word | |||
.w { color: #bbb } // Text.Whitespace | |||
.mf { color: #099 } // Literal.Number.Float | |||
.mh { color: #099 } // Literal.Number.Hex | |||
.mi { color: #099 } // Literal.Number.Integer | |||
.mo { color: #099 } // Literal.Number.Oct | |||
.sb { color: #d14 } // Literal.String.Backtick | |||
.sc { color: #d14 } // Literal.String.Char | |||
.sd { color: #d14 } // Literal.String.Doc | |||
.s2 { color: #d14 } // Literal.String.Double | |||
.se { color: #d14 } // Literal.String.Escape | |||
.sh { color: #d14 } // Literal.String.Heredoc | |||
.si { color: #d14 } // Literal.String.Interpol | |||
.sx { color: #d14 } // Literal.String.Other | |||
.sr { color: #009926 } // Literal.String.Regex | |||
.s1 { color: #d14 } // Literal.String.Single | |||
.ss { color: #990073 } // Literal.String.Symbol | |||
.bp { color: #999 } // Name.Builtin.Pseudo | |||
.vc { color: #008080 } // Name.Variable.Class | |||
.vg { color: #008080 } // Name.Variable.Global | |||
.vi { color: #008080 } // Name.Variable.Instance | |||
.il { color: #099 } // Literal.Number.Integer.Long | |||
} |
@ -0,0 +1,6 @@ | |||
Ceci est la page WEB d'accueil des services [saty.re](http://saty.re) générée pour l'instant grâce au logiciel Jekyll. | |||
Vous avez donc les fichiers de config pour générer la page, ainsi que la page générée dans le répertoire /_site | |||
Pour faire cette page, j'ai récupéré la configuration de mon blog [saimyx.fr](http://saimyx.fr), qui est basé sur le thème par défaut de Jekyll, et je l'ai adaptée. | |||
Licence : CC-BY 4.0 |
@ -0,0 +1,112 @@ | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<meta charset="utf-8"> | |||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||
<meta name="viewport" content="width=device-width, initial-scale=1"> | |||
<title>Mise à disposition de services</title> | |||
<meta name="description" content="Être indépendant des grandes entreprises de l’Internet est quelque chose d’important à mes yeux. L’Internet ne s’est pas construit dans une optique de commer..."> | |||
<link rel="stylesheet" href="/css/main.css"> | |||
<link rel="canonical" href="https://saty.re/accueil/2020/04/03/"> | |||
<link rel="alternate" type="application/rss+xml" title="saty.re" href="https://saty.re/feed.xml"> | |||
</head> | |||
<body> | |||
<header class="site-header"> | |||
<div class="wrapper"> | |||
<a class="site-title" href="/">saty.re</a> | |||
<nav class="site-nav"> | |||
<div class="trigger"> | |||
</div> | |||
</nav> | |||
</div> | |||
</header> | |||
<div class="page-content"> | |||
<div class="wrapper"> | |||
<article class="post" itemscope itemtype="http://schema.org/BlogPosting"> | |||
<header class="post-header"> | |||
<h1 class="post-title" itemprop="name headline">Mise à disposition de services</h1> | |||
</header> | |||
<div class="post-content" itemprop="articleBody"> | |||
<p>Être indépendant des grandes entreprises de l’Internet est quelque chose d’important à mes yeux. L’Internet ne s’est pas construit dans une optique de commerce, mais plutôt dans des ressources et services partagés.</p> | |||
<h3 id="services-disponibles">Services disponibles</h3> | |||
<p>La liste des services disponibles actuellement.</p> | |||
<ul> | |||
<li>Un serveur <a href="https://ffsync.saty.re/">Firefox Sync</a>. Actif depuis longtemps :)</li> | |||
<li>Un petit jeu de rapidité : <a href="https://hextris.saty.re/">Hextris</a></li> | |||
<li>Un service de domaines de type : <a href="http://example.saty.re/">example.saty.re</a></li> | |||
<li>La construction et l’hébergement de sites vitrines léger (type : <a href="https://lespectaclelibre.saty.re/">lespectaclelibre.saty.re</a>)<br /> | |||
<em>Pour les deux derniers, rien d’automatique, <a href="mailto:contact@saty.re">contactez moi simplement</a> :)</em></li> | |||
</ul> | |||
<h3 id="en-réflexion">En réflexion</h3> | |||
<p>Services que j’ai envie d’héberger.</p> | |||
<ul> | |||
<li>Un gestionnaire de partage de texte. On en trouve facilement, mais j’aime bien et c’est léger.</li> | |||
<li>Un gestionnaire de texte collaboratifs. On n’en trouve pas forcément très facilement.</li> | |||
<li>Un gestionnaire de sondage. On n’en trouve pas trop non plus.</li> | |||
<li>Une application de partage de fichiers. À la limite, là il faudrait un VPS dédié pour permettre l’envoi de gros fichiers</li> | |||
<li>Un raccourcisseur d’URL. Il n’y en a pas trop de biens, mais il faudrait le mettre sur un domaine simple comme <a href="http://saty.re/">saty.re</a></li> | |||
<li>Un émulateur de terminal WEB. À voir s’il y a moyen de l’utiliser avec un compte invité…</li> | |||
</ul> | |||
<p>Au fil du temps, des idées et des tests, je mettrai cet article à jour et le repartagerai :)</p> | |||
</div> | |||
</article> | |||
</div> | |||
</div> | |||
<footer class="site-footer"> | |||
<div class="wrapper"> | |||
<div class="footer-col-wrapper"> | |||
<div class="footer-col footer-col-1"> | |||
Mon blog perso : <a href="http://saimyx.fr">saimyx.fr</a><br/> | |||
Me contacter : <a href="mailto:contact@saty.re">contact@saty.re</a> | |||
</div> | |||
<div class="footer-col footer-col-2"> | |||
</div> | |||
<div class="footer-col footer-col-3"> | |||
<p> Cette page est optimisée pour <a href="https://www.mozilla.org/fr/firefox/new/">Firefox</a>.</p> | |||
</div> | |||
</div> | |||
</div> | |||
</footer> | |||
</body> | |||
</html> |
@ -0,0 +1,465 @@ | |||
/** | |||
* Reset some basic elements | |||
*/ | |||
body, h1, h2, h3, h4, h5, h6, | |||
p, blockquote, pre, hr, | |||
dl, dd, ol, ul, figure { | |||
margin: 0; | |||
padding: 0; } | |||
/** | |||
* Basic styling | |||
*/ | |||
body { | |||
font: 400 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; | |||
color: #111; | |||
background-color: #fdfdfd; | |||
-webkit-text-size-adjust: 100%; | |||
-webkit-font-feature-settings: "kern" 1; | |||
-moz-font-feature-settings: "kern" 1; | |||
-o-font-feature-settings: "kern" 1; | |||
font-feature-settings: "kern" 1; | |||
font-kerning: normal; } | |||
/** | |||
* Set `margin-bottom` to maintain vertical rhythm | |||
*/ | |||
h1, h2, h3, h4, h5, h6, | |||
p, blockquote, pre, | |||
ul, ol, dl, figure, | |||
.highlight { | |||
margin-bottom: 15px; } | |||
/** | |||
* Images | |||
*/ | |||
img { | |||
max-width: 100%; | |||
vertical-align: middle; } | |||
/** | |||
* Figures | |||
*/ | |||
figure > img { | |||
display: block; } | |||
figcaption { | |||
font-size: 14px; } | |||
/** | |||
* Lists | |||
*/ | |||
ul, ol { | |||
margin-left: 30px; } | |||
li > ul, | |||
li > ol { | |||
margin-bottom: 0; } | |||
/** | |||
* Headings | |||
*/ | |||
h1, h2, h3, h4, h5, h6 { | |||
font-weight: 400; } | |||
/** | |||
* Links | |||
*/ | |||
a { | |||
color: #2a7ae2; | |||
text-decoration: none; } | |||
a:visited { | |||
color: #1756a9; } | |||
a:hover { | |||
color: #111; | |||
text-decoration: underline; } | |||
/** | |||
* Blockquotes | |||
*/ | |||
blockquote { | |||
color: #828282; | |||
border-left: 4px solid #e8e8e8; | |||
padding-left: 15px; | |||
font-size: 18px; | |||
letter-spacing: -1px; | |||
font-style: italic; } | |||
blockquote > :last-child { | |||
margin-bottom: 0; } | |||
/** | |||
* Code formatting | |||
*/ | |||
pre, | |||
code { | |||
font-size: 15px; | |||
border: 1px solid #e8e8e8; | |||
border-radius: 3px; | |||
background-color: #eef; } | |||
code { | |||
padding: 1px 5px; } | |||
pre { | |||
padding: 8px 12px; | |||
overflow-x: auto; } | |||
pre > code { | |||
border: 0; | |||
padding-right: 0; | |||
padding-left: 0; } | |||
/** | |||
* Wrapper | |||
*/ | |||
.wrapper { | |||
max-width: -webkit-calc(800px - (30px * 2)); | |||
max-width: calc(800px - (30px * 2)); | |||
margin-right: auto; | |||
margin-left: auto; | |||
padding-right: 30px; | |||
padding-left: 30px; } | |||
@media screen and (max-width: 800px) { | |||
.wrapper { | |||
max-width: -webkit-calc(800px - (30px)); | |||
max-width: calc(800px - (30px)); | |||
padding-right: 15px; | |||
padding-left: 15px; } } | |||
/** | |||
* Clearfix | |||
*/ | |||
.wrapper:after, .footer-col-wrapper:after { | |||
content: ""; | |||
display: table; | |||
clear: both; } | |||
/** | |||
* Icons | |||
*/ | |||
.icon > svg { | |||
display: inline-block; | |||
width: 16px; | |||
height: 16px; | |||
vertical-align: middle; } | |||
.icon > svg path { | |||
fill: #828282; } | |||
/** | |||
* Site header | |||
*/ | |||
.site-header { | |||
border-top: 5px solid #424242; | |||
border-bottom: 1px solid #e8e8e8; | |||
min-height: 56px; | |||
position: relative; } | |||
.site-title { | |||
font-size: 26px; | |||
font-family: Chilanka; | |||
/*ajout*/ | |||
font-weight: 500; | |||
/*300*/ | |||
line-height: 56px; | |||
letter-spacing: -1px; | |||
margin-bottom: 0; | |||
float: left; } | |||
.site-title, .site-title:visited { | |||
color: #424242; } | |||
.site-nav { | |||
float: right; | |||
line-height: 56px; } | |||
.site-nav .menu-icon { | |||
display: none; } | |||
.site-nav .page-link { | |||
color: #111; | |||
line-height: 1.5; } | |||
.site-nav .page-link:not(:last-child) { | |||
margin-right: 20px; } | |||
@media screen and (max-width: 600px) { | |||
.site-nav { | |||
position: absolute; | |||
top: 9px; | |||
right: 15px; | |||
background-color: #fdfdfd; | |||
border: 1px solid #e8e8e8; | |||
border-radius: 5px; | |||
text-align: right; } | |||
.site-nav .menu-icon { | |||
display: block; | |||
float: right; | |||
width: 36px; | |||
height: 26px; | |||
line-height: 0; | |||
padding-top: 10px; | |||
text-align: center; } | |||
.site-nav .menu-icon > svg { | |||
width: 18px; | |||
height: 15px; } | |||
.site-nav .menu-icon > svg path { | |||
fill: #424242; } | |||
.site-nav .trigger { | |||
clear: both; | |||
display: none; } | |||
.site-nav:hover .trigger { | |||
display: block; | |||
padding-bottom: 5px; } | |||
.site-nav .page-link { | |||
display: block; | |||
padding: 5px 10px; | |||
margin-left: 20px; } | |||
.site-nav .page-link:not(:last-child) { | |||
margin-right: 0; } } | |||
/** | |||
* Site footer | |||
*/ | |||
.site-footer { | |||
border-top: 1px solid #e8e8e8; | |||
padding: 30px 0; } | |||
.footer-heading { | |||
font-size: 18px; | |||
margin-bottom: 15px; } | |||
.contact-list, | |||
.social-media-list { | |||
list-style: none; | |||
margin-left: 0; } | |||
.rss-subscribe, | |||
.social-media-list { | |||
list-style: none; | |||
margin-left: 0; } | |||
.footer-col-wrapper { | |||
font-size: 15px; | |||
color: #828282; | |||
margin-left: -15px; } | |||
.footer-col { | |||
float: left; | |||
margin-bottom: 15px; | |||
padding-left: 15px; } | |||
.footer-col-1 { | |||
width: -webkit-calc(35% - (30px / 2)); | |||
width: calc(35% - (30px / 2)); } | |||
.footer-col-2 { | |||
width: -webkit-calc(20% - (30px / 2)); | |||
width: calc(20% - (30px / 2)); } | |||
.footer-col-3 { | |||
width: -webkit-calc(45% - (30px / 2)); | |||
width: calc(45% - (30px / 2)); } | |||
@media screen and (max-width: 800px) { | |||
.footer-col-1, | |||
.footer-col-2 { | |||
width: -webkit-calc(50% - (30px / 2)); | |||
width: calc(50% - (30px / 2)); } | |||
.footer-col-3 { | |||
width: -webkit-calc(100% - (30px / 2)); | |||
width: calc(100% - (30px / 2)); } } | |||
@media screen and (max-width: 600px) { | |||
.footer-col { | |||
float: none; | |||
width: -webkit-calc(100% - (30px / 2)); | |||
width: calc(100% - (30px / 2)); } } | |||
/** | |||
* Page content | |||
*/ | |||
.page-content { | |||
padding: 30px 0; } | |||
.page-heading { | |||
font-size: 20px; } | |||
.post-list { | |||
margin-left: 0; | |||
list-style: none; } | |||
.post-list > li { | |||
margin-bottom: 30px; } | |||
.post-meta { | |||
font-size: 14px; | |||
color: #828282; } | |||
.post-link { | |||
display: block; | |||
font-size: 24px; } | |||
/** | |||
* Posts | |||
*/ | |||
.post-header { | |||
margin-bottom: 30px; } | |||
.post-title { | |||
font-size: 42px; | |||
letter-spacing: -1px; | |||
line-height: 1; } | |||
@media screen and (max-width: 800px) { | |||
.post-title { | |||
font-size: 36px; } } | |||
.post-content { | |||
margin-bottom: 30px; } | |||
.post-content h2 { | |||
font-size: 32px; } | |||
@media screen and (max-width: 800px) { | |||
.post-content h2 { | |||
font-size: 28px; } } | |||
.post-content h3 { | |||
font-size: 26px; } | |||
@media screen and (max-width: 800px) { | |||
.post-content h3 { | |||
font-size: 22px; } } | |||
.post-content h4 { | |||
font-size: 20px; } | |||
@media screen and (max-width: 800px) { | |||
.post-content h4 { | |||
font-size: 18px; } } | |||
/** | |||
* Syntax highlighting styles | |||
*/ | |||
.highlight { | |||
background: #fff; } | |||
.highlighter-rouge .highlight { | |||
background: #eef; } | |||
.highlight .c { | |||
color: #998; | |||
font-style: italic; } | |||
.highlight .err { | |||
color: #a61717; | |||
background-color: #e3d2d2; } | |||
.highlight .k { | |||
font-weight: bold; } | |||
.highlight .o { | |||
font-weight: bold; } | |||
.highlight .cm { | |||
color: #998; | |||
font-style: italic; } | |||
.highlight .cp { | |||
color: #999; | |||
font-weight: bold; } | |||
.highlight .c1 { | |||
color: #998; | |||
font-style: italic; } | |||
.highlight .cs { | |||
color: #999; | |||
font-weight: bold; | |||
font-style: italic; } | |||
.highlight .gd { | |||
color: #000; | |||
background-color: #fdd; } | |||
.highlight .gd .x { | |||
color: #000; | |||
background-color: #faa; } | |||
.highlight .ge { | |||
font-style: italic; } | |||
.highlight .gr { | |||
color: #a00; } | |||
.highlight .gh { | |||
color: #999; } | |||
.highlight .gi { | |||
color: #000; | |||
background-color: #dfd; } | |||
.highlight .gi .x { | |||
color: #000; | |||
background-color: #afa; } | |||
.highlight .go { | |||
color: #888; } | |||
.highlight .gp { | |||
color: #555; } | |||
.highlight .gs { | |||
font-weight: bold; } | |||
.highlight .gu { | |||
color: #aaa; } | |||
.highlight .gt { | |||
color: #a00; } | |||
.highlight .kc { | |||
font-weight: bold; } | |||
.highlight .kd { | |||
font-weight: bold; } | |||
.highlight .kp { | |||
font-weight: bold; } | |||
.highlight .kr { | |||
font-weight: bold; } | |||
.highlight .kt { | |||
color: #458; | |||
font-weight: bold; } | |||
.highlight .m { | |||
color: #099; } | |||
.highlight .s { | |||
color: #d14; } | |||
.highlight .na { | |||
color: #008080; } | |||
.highlight .nb { | |||
color: #0086B3; } | |||
.highlight .nc { | |||
color: #458; | |||
font-weight: bold; } | |||
.highlight .no { | |||
color: #008080; } | |||
.highlight .ni { | |||
color: #800080; } | |||
.highlight .ne { | |||
color: #900; | |||
font-weight: bold; } | |||
.highlight .nf { | |||
color: #900; | |||
font-weight: bold; } | |||
.highlight .nn { | |||
color: #555; } | |||
.highlight .nt { | |||
color: #000080; } | |||
.highlight .nv { | |||
color: #008080; } | |||
.highlight .ow { | |||
font-weight: bold; } | |||
.highlight .w { | |||
color: #bbb; } | |||
.highlight .mf { | |||
color: #099; } | |||
.highlight .mh { | |||
color: #099; } | |||
.highlight .mi { | |||
color: #099; } | |||
.highlight .mo { | |||
color: #099; } | |||
.highlight .sb { | |||
color: #d14; } | |||
.highlight .sc { | |||
color: #d14; } | |||
.highlight .sd { | |||
color: #d14; } | |||
.highlight .s2 { | |||
color: #d14; } | |||
.highlight .se { | |||
color: #d14; } | |||
.highlight .sh { | |||
color: #d14; } | |||
.highlight .si { | |||
color: #d14; } | |||
.highlight .sx { | |||