Commit 91bf0e73 authored by arpinux's avatar arpinux

testing website static 1

parent d869c9c7
Pipeline #16515 failed with stage
in 27 seconds
/* Les polices */
@font-face{
font-family: "DroidSans";
src: local('Droid Sans'), local('DroidSans'), url('/fonts/DroidSans.woff2') format('woff2');
}
@font-face{
font-family: "DroidSerif";
src: local('Droid Serif'), local('DroidSerif'), url('/fonts/DroidSerif.woff2') format('woff2');
}
@font-face{
font-family: "Poiret One";
src: url('/fonts/PoiretOne-Regular.ttf');
}
html {
font-size: 16px;
line-height: 1.5;
background-color: #222;
background-image: radial-gradient( hsl(200,80%,40%), hsl(50,0%,20%) );
background-repeat: no-repeat;
}
html, body {
margin: 0;
padding: 0;
min-height:100%;
}
body {
background: transparent;
font-family: "DroidSans", sans-serif;
color: #DCDCDC;
padding: 0 10px;
text-align: center;
}
a {
color: #fff;
text-decoration: none;
border-bottom: 1px dotted #DCDCDC;
}
a:active, a:focus {
text-decoration: none;
outline: 0;
}
a:hover {
text-decoration: none;
background-color: rgba(0, 0, 0, .4);
border-radius: 2px;
}
li {
padding: 0 3px;
margin-left: 15px;
}
li:hover {
background-color: rgba(0, 0, 0, .2);
border-radius: 2px;
}
h1 {
margin: 0 5px;
padding: 8px 52px;
font-size: 1.4em;
}
h2, #sources .spoiler h2, #mainprez .spoiler h2 {font-size: 1.25em; font-family: 'Poiret One', cursive; color:white; margin: 1.4em auto .3em auto;}
h3 {font-size: 1em; color:white;}
h4 {font-size: 0.875em;}
h5 {font-size: 0.75em;}
h6 {font-size: 0.625em;}
p {margin: 0 0 1em 0;}
hr {
background-image: linear-gradient(to left, rgba(51, 181, 228, 0.2), rgba(51, 181, 228, 1), rgba(51, 181, 228, 0.2));
display: block;
margin: 20px 0;
border: none;
height: 1px;
}
img {
vertical-align: middle;
max-width: 100%;
height: auto !important;
}
video { max-width: 100%; }
#trad {
position:absolute;
top:150px;
}
.center {text-align:center;}
.right {float:right;}
.left {text-align:left;}
.highlight { color:white; font-weight: bold; }
#main { background: rgba(0, 0, 0, 0.2) url('/img/les_cahiers_du_debutant.png') -20px -20px no-repeat; }
#main, #downloads, #mainprez, #about, #feedback, #footer {
margin: 20px auto;
padding: 20px;
max-width:890px;
text-align:center;
background-color: rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0px 0px 5px 0px #000;
-webkit-box-shadow: inset 0px 0px 5px 0px #000;
-o-box-shadow: inset 0px 0px 5px 0px #000;
box-shadow: inset 0px 0px 5px 0px #000;
}
/* Apparence de la page d'accueil */
#title-container {
text-align:center;
font-family: 'Poiret One', cursive;
margin:auto;
color:white;
}
#title-container h1, #title-container h2 { background:transparent; padding:0; }
#title-container h2 { margin: 0 0 .4em 0; }
#title-container a { border: none; }
#hltitle {
font-size: 3.7em;
/*font-weight:bold;
text-shadow: 1px 1px 3px rgba(255,255,255,0.5);*/
}
#subtitle { font-size: 1.6em; }
@keyframes mi {
0% {width:0px;}
100% {width:100%;}
}
/* contact & start */
.input-search img {
margin-right: 5px;
margin-bottom: 3px;
}
.input-search a { border: none; }
input, textarea {
font-size: 16px;
background-color: #ddd;
color: #000;
padding:5px;
border: none;
margin-top: 15px;
}
input[type="submit"], input[type="search"] {
background-color:transparent;
color:#eee;
border: 1px solid transparent;
font-weight: bold;
}
input[type="submit"]:hover {
border: 1px solid white;
}
input[type="search"] {
background-color:#ddd;
color:#000;
border: 1px solid white;
width: 32em;
max-width: 90%;
font-weight: bold;
}
textarea {
max-width: 90%;
}
/* Bulle d'indication au survol */
.tooltip {
position: relative;
display: inline-block;
border-bottom: none;
}
.tooltip .tooltiptext {
visibility: hidden;
background-color: #111;
color: #fff;
text-align: center;
padding: 6px;
border-radius: 6px;
white-space: pre;
width:120px;
position: absolute;
top:-32px;
left:-42px; /* width/4 + border + padding */
z-index: 1;
font-size:0.9em;
}
a.tooltip:hover {background-color:transparent;}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}
code {
font-size: 12px;
margin: 4px auto;
padding:2px;
background-color: rgba(0, 0, 0, 0.4);
display: inline-block;
}
/* Effet rebond au survol
* https://ianlunn.github.io/Hover/#
* */
.hvr-bounce-in {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
.dllinks {
width:90%;
margin:10px auto;
display:block;
font-family: 'DroidSans', sans-serif;
color:#ddd;
text-align:center;
}
* { transition: all 0.5s; }
.dllinks a.dlbtn {
display:block;
border: 3px solid #CFCFCF;
border-radius:2px;
padding:8px;
margin:12px;
background-color:#eee;
font-weight:bold;
}
.dllinks a.dlbtn:hover {
text-decoration:none;
box-shadow: 0 0 8px rgba(255,255,255,0.7);
}
img.bouton { max-width: 60px; opacity: .8;}
img.bouton:hover { opacity: 1;}
#downloads h2 {
background-color: rgba(0,0,0,0.2);
border: 2px solid #bbb;
border-radius: 2px;
padding: 10px;
margin: 0.5em;
overflow: hidden;
-moz-box-shadow: 0px 0px 5px 0px #000;
-webkit-box-shadow: 0px 0px 5px 0px #000;
-o-box-shadow: 0px 0px 5px 0px #000;
box-shadow: 0px 0px 5px 0px #000;
}
#downloads h2:hover {
background-color: rgba(0,0,0,0.4);
border-color: #eee;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
}
#footer {
margin: 10px auto;
font-size: 14px;
text-align: left;
}
#footer img {
max-width:24px;
height:auto;
margin: 0 4px;
}
#footer a {border-bottom: none; }
#news {
display: block;
width: 100%;
opacity: .6;
text-align: right;
margin: 0; padding: 0;
margin-bottom: -2em;
}
#news:hover { opacity: 1; }
#news img { width: 30px; height: auto }
#news a { border: none; }
#news a:hover { background-color: transparent; }
.exercice {
margin: 5px 15px;
padding: 5px;
}
/* spoiler -----------------------------------------------------------*/
#sources { margin: 0 auto; }
#sources h2, #mainprez h2 { margin: 0; }
#sources h2 a, #mainprez h2 a { border: none; }
.spoiler {
max-height: 0;
opacity: 0;
overflow: auto;
-webkit-transition: max-height 1s, opacity 1s;
-moz-transition: max-height 1s, opacity 1s;
transition: max-height 1s, opacity 1s;
}
.spoiler:target {
max-height: 9999px;
height: auto;
opacity: 1;
}
/* overlay nav -------------------------------------------------------*/
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
left: 0;
background: rgba(0, 0, 0, .6);
visibility: hidden;
opacity: 0;
}
.overlay .cancel {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: default;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 250px auto;
padding: 0 20px 5px 20px;
background-color: #222;
background-image: radial-gradient( hsl(200,80%,40%), hsl(50,0%,20%) );
background-repeat: no-repeat;
border: 2px solid #eee;
border-radius: 2px;
width: 400px;
max-width: 80%;
height: 120px;
max-height: 80%;
position: relative;
overflow: hidden;
}
.popup h2 { margin: .5em;}
.wide {
width: 700px;
height: 500px;
margin-top: 150px;
overflow: auto;
}
.popup .close {
position: absolute;
top: 5px;
right: 5px;
width: 20px;
height: 20px;
opacity: 0.6;
font-size: 24px;
font-weight: bold;
text-decoration: none;
}
.popup .close:hover {
opacity: 1;
}
.popup .content {
overflow: auto;
}
.popup a {
border: none;
}
.popup a:hover {
background: none;
}
img.hidden {
position: absolute;
max-height: 0;
opacity: 0;
overflow: auto;
-webkit-transition: max-height 1s, opacity 1s;
-moz-transition: max-height 1s, opacity 1s;
transition: max-height 1s, opacity 1s;
}
img.hidden:target {
max-height: 1200;
opacity: 1;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr-FR" xml:lang="fr-FR" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Les cahiers du débutant sur Debian</title>
<meta name="description" content="Bien débuter sur GNU/Linux : initiation simplifiée au système Debian" />
<link rel="stylesheet" href="/cahiers.css" />
<link rel="Shortcut Icon" href="/favicon.png" type="image/png" />
<link rel="stylesheet" href="/fonts/dflfonts.css">
</head>
<body>
<div id="main">
<div id="news"><a href="/news" title="suivez les actualités du projet DFLinux"><img src="/img/rss.png" alt="rss" /></a></div>
<div id="title-container">
<h1 id="hltitle">Les cahiers du débutant</h1>
<h2 id="subtitle">Ooops... <br/><a href="/index.html">&crarr; retour à l'accueil des cahiers</a></h2>
</div>
<div>
<div class="dllinks">
<p>
Si vous cherchez une page en ralation avec <span class="highlight">les cahiers du débutant</span>, vous pouvez cliquer sur le bouton ci-dessous afin rejoindre la page d'accueil des cahiers.
</p>
<p><a href="/"><img src="/img/minibanner.png" title="consultez les cahiers du débutant sur Debian" alt="logo cahiers"/></a></p>
<ul class="left">
<li><a href="/" title="page d'accueil des cahiers du débutant">les cahiers du débutant sur Debian</a></li>
<li><a href="/index-en.html" title="the beginner's handbook homepage">Debian beginner's handbook</a></li>
<li><a href="/src/doku.php/lescahiersdudebutant-jessie" title="wiki source des cahiers du débutant">Sources des cahiers du débutant</a></li>
<li><a href="/src/doku.php/lescahiersdudebutant-jessie-en" title="the beginner's handbook sources">Sources of the Debian beginner's handbook</a></li>
</ul>
</div>
<hr />
<div class="dllinks">
<p>
Si vous cherchez une page en ralation avec le <span class="highlight">Projet DFLinux</span>, vous pouvez cliquer sur le bouton ci-dessous afin de profiter des outils facilitants <i class="icon-emo-thumbsup"></i>.
</p>
<p><a href="/dflinux.html" title="rejoindre la section DFLinux"><img src="/img/minibanner-dflinux.png" alt="bouton dflinux" /></a></p>
</div>
<hr />
<div class="dllinks">
<p>
Si vous cherchez une page en ralation avec la distribution <span class="highlight">HandyLinux</span>, vous pouvez cliquer sur la main bleue et retrouver votre univers <i class="icon-emo-wink"></i>.
</p>
<p><a href="/handylinux/" title="rejoindre la section HandyLinux"><img src="/img/handylinux.png" alt="bouton handylinux" /></a></p>
<ul class="left">
<li><a href="/handylinux/" title="page d'accueil HandyLinux">Page d'accueil</a></li>
<li><a href="/handylinux/contact.php" title="page de contact HandyLinux">Page de contact</a></li>
<li><a href="/handylinux/download.php" title="page de téléchargement HandyLinux">Page de téléchargement</a></li>
<li><a href="/handylinux/start/" title="page de démarrage HandyLinux">Page de recherche personnalisée</a></li>
<li><a href="/handylinux/wiki2/" title="documentation HandyLinux v2">Documentation v2</a></li>
<li><a href="/handylinux/wiki1-fr/" title="wiki HandyLinux v1 français">Documentation v1-fr</a></li>
<li><a href="/handylinux/wiki1-en" title="english HandyLinux v1 wiki">Documentation v1-en</a></li>
<li><a href="/handylinux/repo/" title="miroir des dépôts debian HandyLinux">Dépôts Debian HandyLinux v1 &amp; v2</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<em>lescahiersdudebutant.fr &copy; 2016-2017 <a href="http://3hg.toile-libre.org/">3hg team</a></em>
</div>
</body>
</html>
Font license info
## Fontelico
Copyright (C) 2012 by Fontello project
Author: Crowdsourced, for Fontello project
License: SIL (http://scripts.sil.org/OFL)
Homepage: http://fontello.com
## Font Awesome
Copyright (C) 2016 by Dave Gandy
Author: Dave Gandy
License: SIL ()
Homepage: http://fortawesome.github.com/Font-Awesome/
This diff is collapsed.
@font-face {
font-family: 'dflfonts';
src: url('dflfonts.eot?54534001');
src: url('dflfonts.eot?54534001#iefix') format('embedded-opentype'),
url('dflfonts.woff2?54534001') format('woff2'),
url('dflfonts.woff?54534001') format('woff'),
url('dflfonts.ttf?54534001') format('truetype'),
url('dflfonts.svg?54534001#dflfonts') format('svg');
font-weight: normal;
font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'dflfonts';
src: url('../font/dflfonts.svg?54534001#dflfonts') format('svg');
}
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "dflfonts";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-emo-happy:before { content: '\e800'; } /* '' */
.icon-emo-wink:before { content: '\e801'; } /* '' */
.icon-emo-unhappy:before { content: '\e802'; } /* '' */
.icon-emo-sleep:before { content: '\e803'; } /* '' */
.icon-emo-thumbsup:before { content: '\e804'; } /* '' */
.icon-emo-devil:before { content: '\e805'; } /* '' */
.icon-emo-surprised:before { content: '\e806'; } /* '' */
.icon-emo-tongue:before { content: '\e807'; } /* '' */
.icon-emo-coffee:before { content: '\e808'; } /* '' */
.icon-emo-sunglasses:before { content: '\e809'; } /* '' */
.icon-emo-displeased:before { content: '\e80a'; } /* '' */
.icon-emo-beer:before { content: '\e80b'; } /* '' */
.icon-star:before { content: '\e80c'; } /* '' */
.icon-emo-angry:before { content: '\e80d'; } /* '' */
.icon-emo-saint:before { content: '\e80e'; } /* '' */
.icon-emo-cry:before { content: '\e80f'; } /* '' */
.icon-picture:before { content: '\e810'; } /* '' */
.icon-emo-squint:before { content: '\e811'; } /* '' */
.icon-emo-laugh:before { content: '\e812'; } /* '' */
.icon-emo-wink2:before { content: '\e813'; } /* '' */
.icon-ok:before { content: '\e814'; } /* '' */
.icon-cancel:before { content: '\e815'; } /* '' */
.icon-home:before { content: '\e816'; } /* '' */
.icon-link:before { content: '\e817'; } /* '' */
.icon-lock:before { content: '\e818'; } /* '' */
.icon-tag:before { content: '\e819'; } /* '' */
.icon-bookmark:before { content: '\e81a'; } /* '' */
.icon-download:before { content: '\e81b'; } /* '' */
.icon-upload:before { content: '\e81c'; } /* '' */
.icon-chat:before { content: '\e81d'; } /* '' */
.icon-attention:before { content: '\e81e'; } /* '' */
.icon-attention-circled:before { content: '\e81f'; } /* '' */
.icon-cog:before { content: '\e820'; } /* '' */
.icon-wrench:before { content: '\e821'; } /* '' */
.icon-globe:before { content: '\e822'; } /* '' */
.icon-book:before { content: '\e823'; } /* '' */
.icon-check:before { content: '\e824'; } /* '' */
.icon-chart-bar:before { content: '\e825'; } /* '' */
.icon-floppy:before { content: '\e826'; } /* '' */
.icon-megaphone:before { content: '\e827'; } /* '' */
.icon-firefox:before { content: '\e840'; } /* '' */
.icon-link-ext:before { content: '\f08e'; } /* '' */
.icon-check-empty:before { content: '\f096'; } /* '' */
.icon-rss:before { content: '\f09e'; } /* '' */
.icon-hdd:before { content: '\f0a0'; } /* '' */
.icon-mail-alt:before { content: '\f0e0'; } /* '' */
.icon-sitemap:before { content: '\f0e8'; } /* '' */
.icon-lightbulb:before { content: '\f0eb'; } /* '' */
.icon-beer:before { content: '\f0fc'; } /* '' */
.icon-keyboard:before { content: '\f11c'; } /* '' */
.icon-code:before { content: '\f121'; } /* '' */
.icon-shield:before { content: '\f132'; } /* '' */
.icon-doc-text-inv:before { content: '\f15c'; } /* '' */
.icon-linux:before { content: '\f17c'; } /* '' */
.icon-cube:before { content: '\f1b2'; } /* '' */
.icon-cubes:before { content: '\f1b3'; } /* '' */
.icon-file-pdf:before { content: '\f1c1'; } /* '' */
.icon-file-image:before { content: '\f1c5'; } /* '' */
.icon-file-archive:before { content: '\f1c6'; } /* '' */
.icon-file-code:before { content: '\f1c9'; } /* '' */
.icon-lifebuoy:before { content: '\f1cd'; } /* '' */
.icon-rebel:before { content: '\f1d0'; } /* '' */
.icon-git:before { content: '\f1d3'; } /* '' */
.icon-paper-plane:before { content: '\f1d8'; } /* '' */
.icon-chart-area:before { content: '\f1fe'; } /* '' */
.icon-chart-pie:before { content: '\f200'; } /* '' */
.icon-chart-line:before { content: '\f201'; } /* '' */
.icon-toggle-off:before { content: '\f204'; } /* '' */
.icon-toggle-on:before { content: '\f205'; } /* '' */
.icon-user-secret:before { content: '\f21b'; } /* '' */
.icon-mouse-pointer:before { content: '\f245'; } /* '' */
.icon-firefox-1:before { content: '\f269'; } /* '' */
.icon-gitlab:before { content: '\f296'; } /* '' */
This diff is collapsed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta HTTP-EQUIV="REFRESH" content="0; url=dflfonts-demo.html">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
</html>