Browse Source

chore: rebase on blueskye

master
Kazhnuz 10 months ago
parent
commit
8bc72fdb78
54 changed files with 30518 additions and 479 deletions
  1. 675
    15
      LICENSE
  2. 99
    0
      NEWS
  3. 344
    0
      color-test.html
  4. 1912
    0
      css/bootstrap-grid.css
  5. 1
    0
      css/bootstrap-grid.css.map
  6. 7
    0
      css/bootstrap-grid.min.css
  7. 1
    0
      css/bootstrap-grid.min.css.map
  8. 330
    0
      css/bootstrap-reboot.css
  9. 1
    0
      css/bootstrap-reboot.css.map
  10. 8
    0
      css/bootstrap-reboot.min.css
  11. 1
    0
      css/bootstrap-reboot.min.css.map
  12. 8981
    0
      css/bootstrap.css
  13. 1
    0
      css/bootstrap.css.map
  14. 7
    0
      css/bootstrap.min.css
  15. 1
    0
      css/bootstrap.min.css.map
  16. 257
    0
      css/clear-typography.css
  17. 2501
    0
      css/fork-awesome.css
  18. 12
    0
      css/fork-awesome.min.css
  19. 1
    0
      css/fork-awesome.min.css.map
  20. 943
    0
      css/style.css
  21. BIN
      fonts/OpenSans-Bold-webfont.woff
  22. BIN
      fonts/OpenSans-BoldItalic-webfont.woff
  23. BIN
      fonts/OpenSans-ExtraBold-webfont.woff
  24. BIN
      fonts/OpenSans-ExtraBoldItalic-webfont.woff
  25. BIN
      fonts/OpenSans-Italic-webfont.woff
  26. BIN
      fonts/OpenSans-Light-webfont.woff
  27. BIN
      fonts/OpenSans-LightItalic-webfont.woff
  28. BIN
      fonts/OpenSans-Regular-webfont.woff
  29. BIN
      fonts/OpenSans-Semibold-webfont.woff
  30. BIN
      fonts/OpenSans-SemiboldItalic-webfont.woff
  31. BIN
      fonts/forkawesome-webfont.eot
  32. 2760
    0
      fonts/forkawesome-webfont.svg
  33. BIN
      fonts/forkawesome-webfont.ttf
  34. BIN
      fonts/forkawesome-webfont.woff
  35. BIN
      fonts/forkawesome-webfont.woff2
  36. BIN
      img/avatar.png
  37. BIN
      img/background.png
  38. BIN
      img/wmap.png
  39. 311
    53
      index.html
  40. 6444
    0
      js/bootstrap.bundle.js
  41. 1
    0
      js/bootstrap.bundle.js.map
  42. 7
    0
      js/bootstrap.bundle.min.js
  43. 1
    0
      js/bootstrap.bundle.min.js.map
  44. 3927
    0
      js/bootstrap.js
  45. 1
    0
      js/bootstrap.js.map
  46. 7
    0
      js/bootstrap.min.js
  47. 1
    0
      js/bootstrap.min.js.map
  48. 277
    0
      preview.html
  49. 225
    0
      scss/_colorize.scss
  50. 425
    0
      scss/_commons.scss
  51. 0
    0
      scss/_overrides.scss
  52. 14
    55
      scss/_palette.scss
  53. 34
    16
      scss/style.scss
  54. 0
    340
      style.css

+ 675
- 15
LICENSE
File diff suppressed because it is too large
View File


+ 99
- 0
NEWS View File

@@ -0,0 +1,99 @@
# NEWS

## BlueSky 3.x

### BlueSky 3.1.x

### BlueSky 3.1.1

- Bump Fork-Awesome to 1.1.3

- Bump Clear-Typography to 1.2

### BlueSky 3.1

- Use Clear-Typography 1.1

- Port everything to SCSS !

- Transform the palette in one of the style submodules
- Use submodules to make the scss easier to modify
- Use SCSS variables to handle palette and modifiable elements
- New Features

- Background Colors fully supported (.bg-<color_name>)
- Text color (.text-<color_name>)
- Customizable link color (via SCSS variable)
- Customizable selection color (via SCSS variable)
- Three new colors in palette : yellow, brown, grey

- Styles changes

- Borders and shadow streamlined
- Slight color changes due to the new way of working of the palette
- Inset shadow in navbar removed
- Darker "$color-dark" color

- Bugfixes

- Badge hover/focus styling fixed
- Every fixes and improvement coming from Clear-Typography 1.1

### BlueSky 3.0

- Removed Comic Neue font

- Replaced Font-Awesome by Fork-Awesome

- Switched bootstrap version to bootstrap4

- Components :

- Adopted a triple-collumn layout for the footer

- New components : social media links

- New style for card headers

- New style for buttons

- New style for alerts

- New style for breadcrumb

- New style for navbar

- New Palette based on a work by Tobias Bernard for the Fractal application

- Color that aren't based on semantics

- Branding colors for social networks

## BlueSky 2.x

### BlueSky 2.1

- Removed unused classes

- Renamed misleading classes

- Some style fixes

- Reorganized stylesheet

### BlueSky 2.0

- Remade the style entirely

- Used material design palette

+ 344
- 0
color-test.html View File

@@ -0,0 +1,344 @@
<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="utf-8">
<title>Kazhnuz Space</title>

<!-- meta -->
<meta name="description" content="">
<meta name="author" content="">

<!-- mon icon -->
<link rel="shortcut icon" href="img/favicon.png">

<!-- framework utilisés -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/fork-awesome.css" rel="stylesheet">
<link href="css/clear-typography.css" rel="stylesheet">

<link href="css/style.css" rel="stylesheet">
</head>

<body>
<div id="wrapper">

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">kazhnuz.space</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ma philosophie</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Galleries
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Truc 1</a>
<a class="dropdown-item" href="#">Truc 2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Voir gallerie entière</a>
</div>
</li>
</ul>
</div>
</nav>


<header class="container">
<div class="row">
<h1> Test des couleurs</h1>
</div>
</header>

<section class="container">
<div class="row">


<div class="col-md-9">

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>

<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

<article>

<section class="card">
<div class="card-header">

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-danger">3</button>
<button type="button" class="btn btn-info">4</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-dark">5</button>
<button type="button" class="btn btn-success">6</button>
<button type="button" class="btn btn-turquoise">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-violet">8</button>
</div>
</div>

</div>

<div class="card-body">
<ul>
<li>1 - Filmographie de Joachim du Poulet
<ul>
<li>1.1 - Pour une poignée de Poulet</li>
<li>1.2 - Pour quelques Poulet de plus</li>
<li>1.3 - Le bon, la brute et le Poulet</li>
</ul>
</li>
<li>2 - Les Cocotes : Etude de leur Violence</li>
</ul>

<h3>Introduction : Lorem Ipsum</h3>

<p><em>Lorem ipsum dolor sit amet<sup><a href="#1">[1]</a></sup>, consectetur adipiscing elit. Praesent varius ullamcorper diam, non sagittis lectus rutrum id. Integer eros urna, egestas et libero a, finibus egestas odio. Nunc vel hendrerit quam, eget malesuada sem. Sed hendrerit ligula pharetra leo aliquam volutpat. Integer auctor urna ac convallis laoreet. Nunc vestibulum ipsum sed tortor aliquam porta. Cras nunc est, lobortis in est at, rhoncus auctor nunc. Sed dignissim erat non sollicitudin ultricies. Integer vel consectetur urna. Etiam fermentum ligula vitae nunc viverra, a fringilla sem aliquam. Suspendisse potenti. Morbi sem mi, malesuada quis odio vitae, suscipit congue metus. Sed ut ullamcorper urna, eget molestie est. Sed pulvinar justo ac urna consectetur fringilla. Donec tristique eget leo sit amet mollis.</em></p>

<p class="align-center"><a href="#" class="btn btn-primary">Télécharger ce thème</a></p>

<h3>Filmographie de Joachim du Poulet</h3>
<h4>Pour une poignée de poulets</h4>
<h4>Pour quelques Poulet de plus</h4>
<h4>Le bon, la brute et le Poulet</h4>
<h3>Les Cocotes : Etude de leur Violence</h3>

<p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. <mark>Sed posuere lectus eu orci tristique maximus</mark>. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p>

<blockquote><p>Cras malesuada, metus at viverra molestie, mi ligula sodales tellus, vitae facilisis ante est vitae dolor. Donec feugiat non est eget elementum. Nullam in erat et arcu tincidunt maximus. Nullam nibh orci, egestas eu ex non, viverra pretium magna. Proin convallis, risus eu condimentum luctus, ante dui mattis eros, a varius risus diam sed nisl. Ut malesuada ipsum in augue accumsan ullamcorper. Phasellus efficitur augue in venenatis sollicitudin. Integer at consectetur arcu.</p></blockquote>

<pre><code>Vivamus tincidunt dolor quis consectetur dapibus.
Ut metus risus, lobortis non venenatis in, ultricies a orci.
In suscipit ante et aliquet pretium.
Integer diam dui, rutrum vitae risus ultricies, varius vulputate magna.
In id suscipit elit.</code></pre>


<p id="1">[1] : Sed et odio volutpat, convallis est et, interdum sapien.</p>
</div>
</section>

<section class="partager" style="text-align:right;">
<a href="#" class="btn btn-facebook"><i class="fa fa-fw fa-facebook"></i></a>
<a href="#" class="btn btn-twitter"><i class="fa fa-fw fa-twitter"></i></a>
<a href="#" class="btn btn-googleplus"><i class="fa fa-fw fa-google-plus"></i></a>
<a href="#" class="btn btn-diaspora"><i class="fa fa-fw fa-diaspora"></i></a>
<a href="#" class="btn btn-mastodon"><i class="fa fa-fw fa-mastodon"></i></a>
<a href="#" class="btn btn-light"><i class="fa fa-fw fa-envelope"></i></a>
</section>

</article>

<section class="commentaires">
<h3>Commentaires :</h3>

<article class="card">
<div class="media card-meta">
<div class="media-left"><a href="#"><img class="media-object" src="img/avatar.png" alt="..."></a></div>
<div class="media-body"><author class="media-heading">Écrit par <a href="" >Pseudo</a></author><time> Le vendredi 19 septembre 2014 à 07:16 </time></div>
</div>
<div class="card-body">

<p>Lorum Ipsem…</p>

</div>
</article>

<article class="card">
<div class="media card-meta">
<div class="media-left"><a href="#"><img class="media-object" src="img/avatar.png" alt="..."></a></div>
<div class="media-body"><author class="media-heading">Écrit par <a href="" >Pseudo</a></author><time> Le vendredi 19 septembre 2014 à 07:16 </time></div>
</div>
<div class="card-body">

<p>Lorum Ipsem…</p>

</div>
</article>

<article class="card">
<div class="media card-meta">
<div class="media-left"><a href="#"><img class="media-object" src="img/avatar.png" alt="..."></a></div>
<div class="media-body"><author class="media-heading">Écrit par <a href="" >Pseudo</a></author><time> Le vendredi 19 septembre 2014 à 07:16 </time></div>
</div>
<div class="card-body">

<p>Lorum Ipsem…</p>

</div>
</article>

</div>
<aside class="sidebar col-md-3">

<section class="card card-green" style="margin-bottom:2em;">
<div class="card-header">
<i class="fa fa-fw fa-calendar"></i>&nbsp; Dernières publications
</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
#Inktober2017 - Test
</a>
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
#Inktober2017 - Test
</a>
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
#Inktober2017 - Test
</a>
</div>
</section>

<section class="card card-secondary" style="margin-bottom:2em;">
<div class="card-header">
<i class="fa fa-fw fa-folder-open"></i>&nbsp; Catégories
</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</a>
<a href="#" class="list-group-item list-group-item-action">Images</a>
<a href="#" class="list-group-item list-group-item-action">Canard</a>
<a href="#" class="list-group-item list-group-item-action">Test</a>
<a href="#" class="list-group-item list-group-item-action">Fak u garon</a>
</div>
</section>

<section class="card card-orange" style="margin-bottom:2em;">
<div class="card-header">
<i class="fa fa-fw fa-calendar"></i>&nbsp; Badge colors
</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
Primary / Purple
<span class="badge badge-primary badge-pill">:)</span>
</a>

<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
Secondary / Blue
<span class="badge badge-blue badge-pill">:)</span>
</a>

<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
Success / Green
<span class="badge badge-green badge-pill">:)</span>
</a>

<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
Violet
<span class="badge badge-violet badge-pill">:)</span>
</a>

<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
Turquoise
<span class="badge badge-turquoise badge-pill">:)</span>
</a>

<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
Warning / Orange
<span class="badge badge-orange badge-pill">:)</span>
</a>

<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
Danger / Red
<span class="badge badge-red badge-pill">:)</span>
</a>

<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
Dark
<span class="badge badge-dark badge-pill">:)</span>
</a>


</div>
</section>


</aside>

</div>
</section>


</div>

<footer class="container">

<ul class="social">
<li class="social-li"><a class="social-link" href="https://twitter.com/kazhnuz" alt="Twitter"><i class="fa fa-fw fa-twitter"></i></a></li>
<li class="social-li"><a class="social-link" href="https://octodon.social/users/kazhnuz" alt="Mastodon"><i class="fa fa-fw fa-mastodon"></i></a></li>
<li class="social-li"><a class="social-link" href="#" alt="Diaspora"><i class="fa fa-fw fa-diaspora"></i></a></li>
<li class="social-li"><a class="social-link" href="#" alt="DeviantART"><i class="fa fa-fw fa-deviantart"></i></a></li>
<li class="social-li"><a class="social-link" href="#" alt="Github"><i class="fa fa-fw fa-github"></i></a></li>
<li class="social-li"><a class="social-link" href="#" alt="Gitlab"><i class="fa fa-fw fa-gitlab"></i></a></li>
</ul>

<div class="row">
<div class="col-md-4">
<p>Ce theme est diffusé sous licence <strong>Creative Common Attribution - Partage à l'Identique 4.0</strong> - hors mention contraire.</p>
<p>Cette licence vous autorise à partager et copier mes travaux, tant que vous me citiez en source, et que vous autorisez la même chose pour les travaux qui en seraient dérivés. N'hésitez pas à partager ! <i style="color:#FF0000" class="fa fa-heart"></i></p>
</div>

<div class="col-md-4">
<p>Theme réalisé avec le quadriciel <a href="https://getbootstrap.com/">Bootstrap4</a> et la banque d'icone <a href="https://forkawesome.github.io/Fork-Awesome/">Fork-Awesome</a>.</p>
</div>

<div class="col-md-4">
<p>Lorem Ipsum.</p>
</div>
</div>
</footer>





<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

+ 1912
- 0
css/bootstrap-grid.css
File diff suppressed because it is too large
View File


+ 1
- 0
css/bootstrap-grid.css.map
File diff suppressed because it is too large
View File


+ 7
- 0
css/bootstrap-grid.min.css
File diff suppressed because it is too large
View File


+ 1
- 0
css/bootstrap-grid.min.css.map
File diff suppressed because it is too large
View File


+ 330
- 0
css/bootstrap-reboot.css View File

@@ -0,0 +1,330 @@
/*!
* Bootstrap Reboot v4.1.1 (https://getbootstrap.com/)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/
*,
*::before,
*::after {
box-sizing: border-box;
}

html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent;
}

@-ms-viewport {
width: device-width;
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}

[tabindex="-1"]:focus {
outline: 0 !important;
}

hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem;
}

p {
margin-top: 0;
margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
cursor: help;
border-bottom: 0;
}

address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}

ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}

dt {
font-weight: 700;
}

dd {
margin-bottom: .5rem;
margin-left: 0;
}

blockquote {
margin: 0 0 1rem;
}

dfn {
font-style: italic;
}

b,
strong {
font-weight: bolder;
}

small {
font-size: 80%;
}

sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}

sub {
bottom: -.25em;
}

sup {
top: -.5em;
}

a {
color: #007bff;
text-decoration: none;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}

a:hover {
color: #0056b3;
text-decoration: underline;
}

a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none;
}

a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
color: inherit;
text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
outline: 0;
}

pre,
code,
kbd,
samp {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 1em;
}

pre {
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
-ms-overflow-style: scrollbar;
}

figure {
margin: 0 0 1rem;
}

img {
vertical-align: middle;
border-style: none;
}

svg:not(:root) {
overflow: hidden;
}

table {
border-collapse: collapse;
}

caption {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
color: #6c757d;
text-align: left;
caption-side: bottom;
}

th {
text-align: inherit;
}

label {
display: inline-block;
margin-bottom: 0.5rem;
}

button {
border-radius: 0;
}

button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}

input,
button,
select,
optgroup,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}

button,
input {
overflow: visible;
}

button,
select {
text-transform: none;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
padding: 0;
border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
box-sizing: border-box;
padding: 0;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
-webkit-appearance: listbox;
}

textarea {
overflow: auto;
resize: vertical;
}

fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}

legend {
display: block;
width: 100%;
max-width: 100%;
padding: 0;
margin-bottom: .5rem;
font-size: 1.5rem;
line-height: inherit;
color: inherit;
white-space: normal;
}

progress {
vertical-align: baseline;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}

[type="search"] {
outline-offset: -2px;
-webkit-appearance: none;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}

::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button;
}

output {
display: inline-block;
}

summary {
display: list-item;
cursor: pointer;
}

template {
display: none;
}

[hidden] {
display: none !important;
}
/*# sourceMappingURL=bootstrap-reboot.css.map */

+ 1
- 0
css/bootstrap-reboot.css.map
File diff suppressed because it is too large
View File


+ 8
- 0
css/bootstrap-reboot.min.css View File

@@ -0,0 +1,8 @@
/*!
* Bootstrap Reboot v4.1.1 (https://getbootstrap.com/)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
*/*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}@-ms-viewport{width:device-width}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg:not(:root){overflow:hidden}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}
/*# sourceMappingURL=bootstrap-reboot.min.css.map */

+ 1
- 0
css/bootstrap-reboot.min.css.map
File diff suppressed because it is too large
View File


+ 8981
- 0
css/bootstrap.css
File diff suppressed because it is too large
View File


+ 1
- 0
css/bootstrap.css.map
File diff suppressed because it is too large
View File


+ 7
- 0
css/bootstrap.min.css
File diff suppressed because it is too large
View File


+ 1
- 0
css/bootstrap.min.css.map
File diff suppressed because it is too large
View File


+ 257
- 0
css/clear-typography.css View File

@@ -0,0 +1,257 @@
/* ------------------ FONT LOADING ------------------- */
@font-face {
font-family: 'OpenSans';
src: url("../fonts/OpenSans-Light-webfont.eot");
src: url("../fonts/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Light-webfont.woff2") format("woff2"), url("../fonts/OpenSans-Light-webfont.woff") format("woff"), url("../fonts/OpenSans-Light-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Light-webfont.svg#open_sansbold") format("svg");
font-weight: 300;
font-style: normal; }

@font-face {
font-family: 'OpenSans';
src: url("../fonts/OpenSans-LightItalic-webfont.eot");
src: url("../fonts/OpenSans-LightItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-LightItalic-webfont.woff2") format("woff2"), url("../fonts/OpenSans-LightItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-LightItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-LightItalic-webfont.svg#open_sansbold") format("svg");
font-weight: 300;
font-style: italic; }

@font-face {
font-family: 'OpenSans';
src: url("../fonts/OpenSans-Regular-webfont.eot");
src: url("../fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("../fonts/OpenSans-Regular-webfont.woff") format("woff"), url("../fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Regular-webfont.svg#open_sansbold") format("svg");
font-weight: 400;
font-style: normal; }

@font-face {
font-family: 'OpenSans';
src: url("../fonts/OpenSans-Italic-webfont.eot");
src: url("../fonts/OpenSans-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Italic-webfont.woff2") format("woff2"), url("../fonts/OpenSans-Italic-webfont.woff") format("woff"), url("../fonts/OpenSans-Italic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Italic-webfont.svg#open_sansbold") format("svg");
font-weight: 400;
font-style: italic; }

@font-face {
font-family: 'OpenSans';
src: url("../fonts/OpenSans-Semibold-webfont.eot");
src: url("../fonts/OpenSans-Semibold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Semibold-webfont.woff2") format("woff2"), url("../fonts/OpenSans-Semibold-webfont.woff") format("woff"), url("../fonts/OpenSans-Semibold-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Semibold-webfont.svg#open_sansbold") format("svg");
font-weight: 600;
font-style: normal; }

@font-face {
font-family: 'OpenSans';
src: url("../fonts/OpenSans-SemiboldItalic-webfont.eot");
src: url("../fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-SemiboldItalic-webfont.woff2") format("woff2"), url("../fonts/OpenSans-SemiboldItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-SemiboldItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-SemiboldItalic-webfont.svg#open_sansbold") format("svg");
font-weight: 600;
font-style: italic; }

@font-face {
font-family: 'OpenSans';
src: url("../fonts/OpenSans-Bold-webfont.eot");
src: url("../fonts/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Bold-webfont.woff2") format("woff2"), url("../fonts/OpenSans-Bold-webfont.woff") format("woff"), url("../fonts/OpenSans-Bold-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Bold-webfont.svg#open_sansbold") format("svg");
font-weight: 700;
font-style: normal; }

@font-face {
font-family: 'OpenSans';
src: url("../fonts/OpenSans-BoldItalic-webfont.eot");
src: url("../fonts/OpenSans-BoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-BoldItalic-webfont.woff2") format("woff2"), url("../fonts/OpenSans-BoldItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-BoldItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-BoldItalic-webfont.svg#open_sansbold") format("svg");
font-weight: 700;
font-style: italic; }

@font-face {
font-family: 'OpenSans';
src: url("../fonts/OpenSans-ExtraBold-webfont.eot");
src: url("../fonts/OpenSans-ExtraBold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-ExtraBold-webfont.woff2") format("woff2"), url("../fonts/OpenSans-ExtraBold-webfont.woff") format("woff"), url("../fonts/OpenSans-ExtraBold-webfont.ttf") format("truetype"), url("../fonts/OpenSans-ExtraBold-webfont.svg#open_sansbold") format("svg");
font-weight: 800;
font-style: normal; }

@font-face {
font-family: 'OpenSans';
src: url("../fonts/OpenSans-ExtraBoldItalic-webfont.eot");
src: url("../fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-ExtraBoldItalic-webfont.woff2") format("woff2"), url("../fonts/OpenSans-ExtraBoldItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-ExtraBoldItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-ExtraBoldItalic-webfont.svg#open_sansbold") format("svg");
font-weight: 800;
font-style: italic; }

/* ------------------ GLOBAL STYLE ------------------- */
body {
font-family: OpenSans, sans-serif;
text-align: left;
font-size: 4mm;
line-height: 1.5em;
color: #444;
font-weight: 400; }

.night-mode {
color: #BBB; }

strong {
font-weight: 600; }

em {
font-style: italic; }

a {
color: #2484c1;
text-decoration: none; }

p {
padding: 0;
padding-bottom: 1.5em;
margin: 0; }
p:last-child {
padding-bottom: 0; }

ul {
padding: 0;
padding-bottom: 1.5em;
margin: 0; }
ul ul {
padding-bottom: 0; }
ul li {
margin-left: 1.5em; }

ol {
padding: 0;
padding-bottom: 1.5em;
margin: 0; }
ol ol {
padding-bottom: 0; }
ol li {
margin-left: 1.5em; }

::selection {
background: #2484c1;
color: #fff; }

::-moz-selection {
background: #2484c1;
color: #fff; }

/* ------------------ WRAPPERS ------------------- */
.text-wrapper {
font-size: calc(2.5mm + 1vw);
margin: auto;
line-height: 1.5em; }
.text-wrapper.debug {
background-image: -webkit-linear-gradient(transparent 95%, rgba(159, 96, 96, 0.5) 95%);
background-image: -moz-linear-gradient(transparent 95%, rgba(159, 96, 96, 0.5) 95%);
background-image: -ms-linear-gradient(transparent 95%, rgba(159, 96, 96, 0.5) 95%);
background-image: -o-linear-gradient(transparent 95%, rgba(159, 96, 96, 0.5) 95%);
background-image: linear-gradient(transparent 95%, rgba(159, 96, 96, 0.5) 95%);
background-position: 50% 0;
background-size: 1.5em 1.5em; }

@media screen and (min-width: 640px) {
.text-wrapper.size-640 {
max-width: 640px;
font-size: calc(2.5mm + 6.4px); } }

@media screen and (min-width: 800px) {
.text-wrapper.size-800 {
font-size: calc(2.5mm + 8.0px);
max-width: 800px; } }

@media screen and (min-width: 920px) {
.text-wrapper.size-920 {
font-size: calc(2.5mm + 9.2px);
max-width: 800px; } }

@media screen and (min-width: 1200px) {
.text-wrapper.size-1200 {
font-size: calc(2.5mm + 12px);
max-width: 800px; } }

/* ------------------ TITLES ------------------- */
h1, h2, h3, h4, h5, h6, h7 {
text-align: left;
font-size: 1em;
line-height: 1.5em;
padding: 0;
margin: 0;
font-weight: 400; }

h1 {
font-size: 2.33333em;
line-height: 1em;
padding: 0.33333em 0 0.6em 0;
font-weight: 700; }

h2 {
font-size: 2em;
line-height: 1.5em;
padding: 0.33333em 0 0.4em 0;
font-weight: 700; }

h3 {
font-size: 1.5em;
line-height: 1em;
padding: 0em 0 1em 0;
font-weight: 700; }

h4 {
font-size: 1.5em;
line-height: 1em;
padding: 0em 0 1em 0;
font-weight: 600; }

h5 {
font-size: 1.33333em;
line-height: 1em;
padding: 0.1em 0 1.13333em 0;
font-weight: 600; }

h6 {
font-size: 1.1em;
line-height: 1.4em;
padding: 0.1em 0 1.2em 0;
font-weight: 600; }

/* ------------------ HR ------------------- */
hr {
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-bottom: 1px;
border-color: rgba(1, 1, 1, 0.15);
border-style: solid;
margin: 1.5em; }

/* ------------------ QUOTE ------------------- */
blockquote {
border-width: 0 0 0 0.2em;
border-style: solid;
border-radius: 3px;
margin: -0.75em -0.2em 0.75em -0.2em;
padding: 0.75em 1em 0.75em 1em;
max-width: 100%;
border-color: rgba(1, 1, 1, 0.15); }
.night-mode blockquote {
border-color: rgba(255, 255, 255, 0.15); }

pre {
border-width: 0 0 0 0.2em;
border-style: solid;
border-radius: 3px;
margin: -0.75em -0.2em 0.75em -0.2em;
padding: 0.75em 1em 0.75em 1em;
max-width: 100%;
border-color: rgba(1, 1, 1, 0.2);
background-color: #EEE;
overflow-x: scroll; }
.night-mode pre {
background-color: #222;
border-color: rgba(255, 255, 255, 0.2); }

/* ------------------ SPECIAL STYLING ------------------- */
mark {
border-radius: 0.2em;
padding: 0 0.2em 0 0.2em;
background-color: rgba(255, 255, 0, 0.33);
color: inherit; }

.night-mode mark {
background-color: rgba(128, 128, 0, 0.66); }

/* ------------------ SPECIAL STYLING ------------------- */
.time {
font-style: italic;
text-align: right;
width: 100%;
display: block; }

+ 2501
- 0
css/fork-awesome.css
File diff suppressed because it is too large
View File


+ 12
- 0
css/fork-awesome.min.css
File diff suppressed because it is too large
View File


+ 1
- 0
css/fork-awesome.min.css.map
File diff suppressed because it is too large
View File


+ 943
- 0
css/style.css View File

@@ -0,0 +1,943 @@
/* ------------------ CUSTOM STYLE ------------------- */
#wrapper {
background: #64b5f6 url("../img/background.png") center bottom repeat-x; }

/* ------------------ GLOBAL STYLE ------------------- */
.no-pills {
list-style: none; }

.align-center {
text-align: center; }

.align-left {
text-align: left; }

.align-right {
text-align: right; }

h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
color: white;
text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4); }

/* ------------------ HEADERS ------------------- */
header h1 {
border-style: none !important;
color: #FFF;
font-weight: 700;
font-size: 5.4em;
font-style: oblique;
text-shadow: 0px 2px 12px transparent;
padding-bottom: 0px;
margin: auto;
text-align: center;
line-height: 1.5em; }

.navbar {
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(0, 0, 0, 0.3);
border-left: 0;
border-right: 0; }
.navbar ul {
padding-bottom: 0; }
.navbar li {
margin: 0; }

.dropdown-menu {
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }

/* ------------------ FOOTER ------------------- */
footer {
margin-top: 40px; }

/* social media */
ul.social {
font-size: 1.5em;
padding-bottom: 1em;
margin: auto;
text-align: center; }
ul.social li {
margin: 0;
list-style: none;
display: inline; }
ul.social li a {
color: #FFFFFF;
background-color: #000000;
padding: 0.3em;
padding-left: 0.36em;
padding-right: 0.36em;
vertical-align: middle;
border-radius: 100%; }
ul.social li a:hover {
color: #000;
background-color: #FFF; }

/* ------------------ CARDS ------------------- */
.card {
border-radius: 3px 3px 3px 3px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
border: none;
margin-bottom: 1.2em; }

.card-shadow {
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }

.card h1, .card h2, .card h3, .card h4, .card h5, .card h6, .card h7, .card h8, .card h9, .card h10 {
color: #333;
text-shadow: 0px 0px 0px transparent; }

/* header and titles */
.card-header {
border: 1px solid rgba(0, 0, 0, 0.3);
font-size: 1.1em;
box-shadow: inset 0px 2px 0px rgba(255, 255, 255, 0.1);
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
font-weight: 600;
border-radius: 0; }
.card-header:first-child {
border-radius: 3px 3px 3px 3px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.card-header:last-child {
border-radius: 3px 3px 3px 3px;
border-top-left-radius: 0;
border-top-right-radius: 0; }
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6, .card-header h7, .card-header h8, .card-header h9, .card-header h10 {
font-size: 1em;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
padding: 0px;
margin: 0px;
color: #FFF;
font-weight: 600;
line-height: 1.5em; }

/* meta */
.card-meta {
padding: 1em;
border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
.card-meta.media {
-ms-flex-align: center !important;
align-items: center !important; }
.card-meta .media-left .media-object {
height: 64px;
width: 64px;
border-radius: 10px;
margin-right: 1em; }
.card-meta author {
display: block;
font-weight: 600; }
.card-meta time {
display: block;
font-style: italic; }

/* lists */
.list-group-item {
border: none;
background-color: transparent; }

a.list-group-item:hover {
border-style: none;
border-width: 0px;
border-radius: 0px;
background-color: rgba(0, 0, 0, 0.1); }

/* ------------------ BUTTONS ------------------- */
.btn {
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 3px 3px 3px 3px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3); }

.btn:hover {
position: relative;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
top: 1px;
border: 1px solid rgba(0, 0, 0, 0.3); }

.btn:active {
position: relative;
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2);
top: 2px;
border: 1px solid rgba(0, 0, 0, 0.3); }

.btn-group {
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); }

.btn-group .btn {
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
border-radius: 3px 3px 3px 3px; }
.btn-group .btn:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.btn-group .btn:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0; }

.btn-group .btn:hover {
position: relative;
top: 1px;
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2); }

.btn-group .btn:active, .btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active,
.show > .btn.dropdown-toggle {
position: relative;
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2) !important;
top: 2px;
border: 1px solid rgba(0, 0, 0, 0.3); }

.btn:focus, .btn-primary:focus, .btn-secondary:focus, .btn-danger:focus, .btn-warning:focus, .btn-success:focus, .btn-info:focus, .btn-dark:focus, .btn-light:focus {
position: relative;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
top: 1px;
outline: none; }

/* ------------------ ALERTS ------------------- */
.alert {
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 3px 3px 3px 3px;
color: rgba(0, 0, 0, 0.7);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); }

.alert a, .alert-link {
color: rgba(0, 0, 0, 0.7);
font-weight: bold; }

/* ------------------ BREADCRUMB ------------------- */
.breadcrumb {
border-radius: 3px 3px 3px 3px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
border: 0;
background-color: #eeeeec;
margin-bottom: 1.2em; }
.breadcrumb li {
margin: 0; }

/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
.share-buttons {
margin: 15px; }

.reagir {
text-align: right; }

/* ------------------ PREVIEWS ------------------- */
.previews-section {
display: flex;
align-content: flex-start;
flex-wrap: wrap; }

.preview-container {
margin-bottom: 1em;
padding: 0.4em;
width: 100%; }

@media (min-width: 992px) {
.prev-col-2 .preview-container {
width: 50%; }
.prev-col-3 .preview-container {
width: 33%; }
.prev-col-4 .preview-container {
width: 25%; } }

.card-preview {
border-radius: 3px 3px 3px 3px;
width: 100%;
margin: auto;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }

.preview-link:hover {
text-decoration: none !important; }

.preview-item {
height: 200px;
overflow: hidden;
font-size: 0.9em;
line-height: 1.5em !important;
padding: 0.2em;
text-align: justify;
background-color: rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.4);
position: relative;
display: flex;
-ms-flex-align: center !important;
align-items: center !important;
justify-content: center; }

.preview-content {
max-height: 200px; }

.preview-content > p {
width: 100%;
margin: auto; }

.preview-content > p.p-img {
text-align: center;
margin: auto;
padding: auto;
display: block;
width: 100%; }

.preview-content > p > img {
max-width: 100%;
height: auto;
vertical-align: middle;
margin: auto;
text-align: center; }

.preview-item h1, .preview-item h2, .preview-item h3, .preview-item h4, .preview-item h5, .preview-item h6, .preview-item h7 {
margin-bottom: 0px;
max-width: 100%;
display: none; }

.preview-item h1 {
display: none; }

.preview-overlay {
height: 100%;
width: 100%;
opacity: 0;
top: 0;
left: 0;
position: absolute;
padding: 0;
transition: opacity .5s;
color: #FFF;
background-color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7);
backdrop-filter: none; }

.preview-overlay h1 {
max-width: 100%;
padding-top: 0.3em;
margin: auto;
margin-bottom: 0px;
text-align: center;
display: block;
font-size: 2em;
color: white; }

.preview-overlay h1, .preview-overlay h2, .preview-overlay h3, .preview-overlay h4, .preview-overlay h5, .preview-overlay h6, .preview-overlay h7, .preview-overlay h8, .preview-overlay h9, .preview-overlay h10 {
color: white;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7); }

.preview-item:hover .preview-overlay {
opacity: .9;
transition: opacity .5s;
backdrop-filter: blur(2px); }

.comment-text {
margin-top: 0.8em; }

.card-preview time {
margin-bottom: 0.4em;
display: block; }

/* ------------------ COULEURS ------------------- */
a, a:hover, a:active {
color: #4e63c9; }

::selection {
background-color: #4e63c9 !important;
color: #FFF; }

::-moz-selection {
background-color: #4e63c9 !important;
color: #FFF; }

/* CARDS */
.card-blue > .card-header {
background-color: #4e63c9;
color: #FFF; }

.card-violet > .card-header {
background-color: #ce4dcd;
color: #FFF; }

.card-purple > .card-header {
background-color: #7951c0;
color: #FFF; }

.card-red > .card-header {
background-color: #e33d22;
color: #FFF; }

.card-orange > .card-header {
background-color: #eb790a;
color: #FFF; }

.card-green > .card-header {
background-color: #75b82d;
color: #FFF; }

.card-skyblue > .card-header {
background-color: #42a0f3;
color: #FFF; }

.card-dark > .card-header {
background-color: #2D2D2D;
color: #FFF; }

.card-light > .card-header {
background-color: #eeeeec;
color: #111; }

.card-turquoise > .card-header {
background-color: #46bd9e;
color: #FFF; }

.card-yellow > .card-header {
background-color: #f6d32d;
color: #FFF; }

.card-brown > .card-header {
background-color: #986a44;
color: #FFF; }

.card-grey > .card-header {
background-color: #77767b;
color: #FFF; }

.card-primary > .card-header {
background-color: #7951c0;
color: #FFF; }

.card-secondary > .card-header {
background-color: #4e63c9;
color: #FFF; }

.card-warning > .card-header {
background-color: #eb790a;
color: #FFF; }

.card-danger > .card-header {
background-color: #e33d22;
color: #FFF; }

.card-info > .card-header {
background-color: #42a0f3;
color: #FFF; }

.card-success > .card-header {
background-color: #75b82d;
color: #FFF; }

/* BUTTONS & BADGES */
.btn-blue {
background-color: #4e63c9;
color: #FFF; }
.btn-blue:hover, .btn-blue:active, .btn-blue:focus, .btn-blue:not(.disabled):not(:disabled):hover, .btn-blue:not(.disabled):not(:disabled):active, .btn-blue:not(.disabled):not(:disabled):focus {
background-color: #7585d5;
color: #FFF; }

.btn-violet {
background-color: #ce4dcd;
color: #FFF; }
.btn-violet:hover, .btn-violet:active, .btn-violet:focus, .btn-violet:not(.disabled):not(:disabled):hover, .btn-violet:not(.disabled):not(:disabled):active, .btn-violet:not(.disabled):not(:disabled):focus {
background-color: #d975d8;
color: #FFF; }

.btn-purple {
background-color: #7951c0;
color: #FFF; }
.btn-purple:hover, .btn-purple:active, .btn-purple:focus, .btn-purple:not(.disabled):not(:disabled):hover, .btn-purple:not(.disabled):not(:disabled):active, .btn-purple:not(.disabled):not(:disabled):focus {
background-color: #9676ce;
color: #FFF; }

.btn-red {
background-color: #e33d22;
color: #FFF; }
.btn-red:hover, .btn-red:active, .btn-red:focus, .btn-red:not(.disabled):not(:disabled):hover, .btn-red:not(.disabled):not(:disabled):active, .btn-red:not(.disabled):not(:disabled):focus {
background-color: #e9654f;
color: #FFF; }

.btn-orange {
background-color: #eb790a;
color: #FFF; }
.btn-orange:hover, .btn-orange:active, .btn-orange:focus, .btn-orange:not(.disabled):not(:disabled):hover, .btn-orange:not(.disabled):not(:disabled):active, .btn-orange:not(.disabled):not(:disabled):focus {
background-color: #f69332;
color: #FFF; }

.btn-green {
background-color: #75b82d;
color: #FFF; }
.btn-green:hover, .btn-green:active, .btn-green:focus, .btn-green:not(.disabled):not(:disabled):hover, .btn-green:not(.disabled):not(:disabled):active, .btn-green:not(.disabled):not(:disabled):focus {
background-color: #8fd246;
color: #FFF; }

.btn-skyblue {
background-color: #42a0f3;
color: #FFF; }
.btn-skyblue:hover, .btn-skyblue:active, .btn-skyblue:focus, .btn-skyblue:not(.disabled):not(:disabled):hover, .btn-skyblue:not(.disabled):not(:disabled):active, .btn-skyblue:not(.disabled):not(:disabled):focus {
background-color: #72b8f6;
color: #FFF; }

.btn-dark {
background-color: #2D2D2D;
color: #FFF; }
.btn-dark:hover, .btn-dark:active, .btn-dark:focus, .btn-dark:not(.disabled):not(:disabled):hover, .btn-dark:not(.disabled):not(:disabled):active, .btn-dark:not(.disabled):not(:disabled):focus {
background-color: #474747;
color: #FFF; }

.btn-light {
background-color: #eeeeec;
color: #111; }
.btn-light:hover, .btn-light:active, .btn-light:focus, .btn-light:not(.disabled):not(:disabled):hover, .btn-light:not(.disabled):not(:disabled):active, .btn-light:not(.disabled):not(:disabled):focus {
background-color: white;
color: #111; }

.btn-turquoise {
background-color: #46bd9e;
color: #FFF; }
.btn-turquoise:hover, .btn-turquoise:active, .btn-turquoise:focus, .btn-turquoise:not(.disabled):not(:disabled):hover, .btn-turquoise:not(.disabled):not(:disabled):active, .btn-turquoise:not(.disabled):not(:disabled):focus {
background-color: #6ccab2;
color: #FFF; }

.btn-yellow {
background-color: #f6d32d;
color: #FFF; }
.btn-yellow:hover, .btn-yellow:active, .btn-yellow:focus, .btn-yellow:not(.disabled):not(:disabled):hover, .btn-yellow:not(.disabled):not(:disabled):active, .btn-yellow:not(.disabled):not(:disabled):focus {
background-color: #f8dd5e;
color: #FFF; }

.btn-brown {
background-color: #986a44;
color: #FFF; }
.btn-brown:hover, .btn-brown:active, .btn-brown:focus, .btn-brown:not(.disabled):not(:disabled):hover, .btn-brown:not(.disabled):not(:disabled):active, .btn-brown:not(.disabled):not(:disabled):focus {
background-color: #b5835a;
color: #FFF; }

.btn-grey {
background-color: #77767b;
color: #FFF; }
.btn-grey:hover, .btn-grey:active, .btn-grey:focus, .btn-grey:not(.disabled):not(:disabled):hover, .btn-grey:not(.disabled):not(:disabled):active, .btn-grey:not(.disabled):not(:disabled):focus {
background-color: #919094;
color: #FFF; }

.btn-primary {
background-color: #7951c0;
color: #FFF; }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:not(.disabled):not(:disabled):hover, .btn-primary:not(.disabled):not(:disabled):active, .btn-primary:not(.disabled):not(:disabled):focus {
background-color: #9676ce;
color: #FFF; }

.btn-secondary {
background-color: #4e63c9;
color: #FFF; }
.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus, .btn-secondary:not(.disabled):not(:disabled):hover, .btn-secondary:not(.disabled):not(:disabled):active, .btn-secondary:not(.disabled):not(:disabled):focus {
background-color: #7585d5;
color: #FFF; }

.btn-warning {
background-color: #eb790a;
color: #FFF; }
.btn-warning:hover, .btn-warning:active, .btn-warning:focus, .btn-warning:not(.disabled):not(:disabled):hover, .btn-warning:not(.disabled):not(:disabled):active, .btn-warning:not(.disabled):not(:disabled):focus {
background-color: #f69332;
color: #FFF; }

.btn-danger {
background-color: #e33d22;
color: #FFF; }
.btn-danger:hover, .btn-danger:active, .btn-danger:focus, .btn-danger:not(.disabled):not(:disabled):hover, .btn-danger:not(.disabled):not(:disabled):active, .btn-danger:not(.disabled):not(:disabled):focus {
background-color: #e9654f;
color: #FFF; }

.btn-info {
background-color: #42a0f3;
color: #FFF; }
.btn-info:hover, .btn-info:active, .btn-info:focus, .btn-info:not(.disabled):not(:disabled):hover, .btn-info:not(.disabled):not(:disabled):active, .btn-info:not(.disabled):not(:disabled):focus {
background-color: #72b8f6;
color: #FFF; }

.btn-success {
background-color: #75b82d;
color: #FFF; }
.btn-success:hover, .btn-success:active, .btn-success:focus, .btn-success:not(.disabled):not(:disabled):hover, .btn-success:not(.disabled):not(:disabled):active, .btn-success:not(.disabled):not(:disabled):focus {
background-color: #8fd246;
color: #FFF; }

/* social */
.btn-facebook {
background-color: #3B5998;
color: #FFF; }
.btn-facebook:hover, .btn-facebook:active, .btn-facebook:focus, .btn-facebook:not(.disabled):not(:disabled):hover, .btn-facebook:not(.disabled):not(:disabled):active, .btn-facebook:not(.disabled):not(:disabled):focus {
background-color: #4c70ba;
color: #FFF; }

.btn-twitter {
background-color: #55ACEE;
color: #FFF; }
.btn-twitter:hover, .btn-twitter:active, .btn-twitter:focus, .btn-twitter:not(.disabled):not(:disabled):hover, .btn-twitter:not(.disabled):not(:disabled):active, .btn-twitter:not(.disabled):not(:disabled):focus {
background-color: #83c3f3;
color: #FFF; }

.btn-googleplus {
background-color: #d34836;
color: #FFF; }
.btn-googleplus:hover, .btn-googleplus:active, .btn-googleplus:focus, .btn-googleplus:not(.disabled):not(:disabled):hover, .btn-googleplus:not(.disabled):not(:disabled):active, .btn-googleplus:not(.disabled):not(:disabled):focus {
background-color: #dc6e60;
color: #FFF; }

.btn-diaspora {
background-color: #313739;
color: #FFF; }
.btn-diaspora:hover, .btn-diaspora:active, .btn-diaspora:focus, .btn-diaspora:not(.disabled):not(:disabled):hover, .btn-diaspora:not(.disabled):not(:disabled):active, .btn-diaspora:not(.disabled):not(:disabled):focus {
background-color: #495154;
color: #FFF; }

.btn-mastodon {
background-color: #282c37;
color: #FFF; }
.btn-mastodon:hover, .btn-mastodon:active, .btn-mastodon:focus, .btn-mastodon:not(.disabled):not(:disabled):hover, .btn-mastodon:not(.disabled):not(:disabled):active, .btn-mastodon:not(.disabled):not(:disabled):focus {
background-color: #3d4455;
color: #FFF; }

/* BADGES */
.badge-blue {
background-color: #4e63c9;
color: #FFF; }
.badge-blue:hover, .badge-blue:active, .badge-blue:focus, a:hover > .badge-blue, a:active > .badge-blue, a:focus > .badge-blue, .badge-blue:not(.disabled):not(:disabled):hover, .badge-blue:not(.disabled):not(:disabled):active, .badge-blue:not(.disabled):not(:disabled):focus, a:hover > .badge-blue:not(.disabled):not(:disabled), a:active > .badge-blue:not(.disabled):not(:disabled), a:focus > .badge-blue:not(.disabled):not(:disabled) {
background-color: #7585d5;
color: #FFF; }

.badge-violet {
background-color: #ce4dcd;
color: #FFF; }
.badge-violet:hover, .badge-violet:active, .badge-violet:focus, a:hover > .badge-violet, a:active > .badge-violet, a:focus > .badge-violet, .badge-violet:not(.disabled):not(:disabled):hover, .badge-violet:not(.disabled):not(:disabled):active, .badge-violet:not(.disabled):not(:disabled):focus, a:hover > .badge-violet:not(.disabled):not(:disabled), a:active > .badge-violet:not(.disabled):not(:disabled), a:focus > .badge-violet:not(.disabled):not(:disabled) {
background-color: #d975d8;
color: #FFF; }

.badge-purple {
background-color: #7951c0;
color: #FFF; }
.badge-purple:hover, .badge-purple:active, .badge-purple:focus, a:hover > .badge-purple, a:active > .badge-purple, a:focus > .badge-purple, .badge-purple:not(.disabled):not(:disabled):hover, .badge-purple:not(.disabled):not(:disabled):active, .badge-purple:not(.disabled):not(:disabled):focus, a:hover > .badge-purple:not(.disabled):not(:disabled), a:active > .badge-purple:not(.disabled):not(:disabled), a:focus > .badge-purple:not(.disabled):not(:disabled) {
background-color: #9676ce;
color: #FFF; }

.badge-red {
background-color: #e33d22;
color: #FFF; }
.badge-red:hover, .badge-red:active, .badge-red:focus, a:hover > .badge-red, a:active > .badge-red, a:focus > .badge-red, .badge-red:not(.disabled):not(:disabled):hover, .badge-red:not(.disabled):not(:disabled):active, .badge-red:not(.disabled):not(:disabled):focus, a:hover > .badge-red:not(.disabled):not(:disabled), a:active > .badge-red:not(.disabled):not(:disabled), a:focus > .badge-red:not(.disabled):not(:disabled) {
background-color: #e9654f;
color: #FFF; }

.badge-orange {
background-color: #eb790a;
color: #FFF; }
.badge-orange:hover, .badge-orange:active, .badge-orange:focus, a:hover > .badge-orange, a:active > .badge-orange, a:focus > .badge-orange, .badge-orange:not(.disabled):not(:disabled):hover, .badge-orange:not(.disabled):not(:disabled):active, .badge-orange:not(.disabled):not(:disabled):focus, a:hover > .badge-orange:not(.disabled):not(:disabled), a:active > .badge-orange:not(.disabled):not(:disabled), a:focus > .badge-orange:not(.disabled):not(:disabled) {
background-color: #f69332;
color: #FFF; }

.badge-green {
background-color: #75b82d;
color: #FFF; }
.badge-green:hover, .badge-green:active, .badge-green:focus, a:hover > .badge-green, a:active > .badge-green, a:focus > .badge-green, .badge-green:not(.disabled):not(:disabled):hover, .badge-green:not(.disabled):not(:disabled):active, .badge-green:not(.disabled):not(:disabled):focus, a:hover > .badge-green:not(.disabled):not(:disabled), a:active > .badge-green:not(.disabled):not(:disabled), a:focus > .badge-green:not(.disabled):not(:disabled) {
background-color: #8fd246;
color: #FFF; }

.badge-skyblue {
background-color: #42a0f3;
color: #FFF; }
.badge-skyblue:hover, .badge-skyblue:active, .badge-skyblue:focus, a:hover > .badge-skyblue, a:active > .badge-skyblue, a:focus > .badge-skyblue, .badge-skyblue:not(.disabled):not(:disabled):hover, .badge-skyblue:not(.disabled):not(:disabled):active, .badge-skyblue:not(.disabled):not(:disabled):focus, a:hover > .badge-skyblue:not(.disabled):not(:disabled), a:active > .badge-skyblue:not(.disabled):not(:disabled), a:focus > .badge-skyblue:not(.disabled):not(:disabled) {
background-color: #72b8f6;
color: #FFF; }

.badge-dark {
background-color: #2D2D2D;
color: #FFF; }
.badge-dark:hover, .badge-dark:active, .badge-dark:focus, a:hover > .badge-dark, a:active > .badge-dark, a:focus > .badge-dark, .badge-dark:not(.disabled):not(:disabled):hover, .badge-dark:not(.disabled):not(:disabled):active, .badge-dark:not(.disabled):not(:disabled):focus, a:hover > .badge-dark:not(.disabled):not(:disabled), a:active > .badge-dark:not(.disabled):not(:disabled), a:focus > .badge-dark:not(.disabled):not(:disabled) {
background-color: #474747;
color: #FFF; }

.badge-light {
background-color: #eeeeec;
color: #111; }
.badge-light:hover, .badge-light:active, .badge-light:focus, a:hover > .badge-light, a:active > .badge-light, a:focus > .badge-light, .badge-light:not(.disabled):not(:disabled):hover, .badge-light:not(.disabled):not(:disabled):active, .badge-light:not(.disabled):not(:disabled):focus, a:hover > .badge-light:not(.disabled):not(:disabled), a:active > .badge-light:not(.disabled):not(:disabled), a:focus > .badge-light:not(.disabled):not(:disabled) {
background-color: white;
color: #111; }

.badge-turquoise {
background-color: #46bd9e;
color: #FFF; }
.badge-turquoise:hover, .badge-turquoise:active, .badge-turquoise:focus, a:hover > .badge-turquoise, a:active > .badge-turquoise, a:focus > .badge-turquoise, .badge-turquoise:not(.disabled):not(:disabled):hover, .badge-turquoise:not(.disabled):not(:disabled):active, .badge-turquoise:not(.disabled):not(:disabled):focus, a:hover > .badge-turquoise:not(.disabled):not(:disabled), a:active > .badge-turquoise:not(.disabled):not(:disabled), a:focus > .badge-turquoise:not(.disabled):not(:disabled) {
background-color: #6ccab2;
color: #FFF; }

.badge-yellow {
background-color: #f6d32d;
color: #FFF; }
.badge-yellow:hover, .badge-yellow:active, .badge-yellow:focus, a:hover > .badge-yellow, a:active > .badge-yellow, a:focus > .badge-yellow, .badge-yellow:not(.disabled):not(:disabled):hover, .badge-yellow:not(.disabled):not(:disabled):active, .badge-yellow:not(.disabled):not(:disabled):focus, a:hover > .badge-yellow:not(.disabled):not(:disabled), a:active > .badge-yellow:not(.disabled):not(:disabled), a:focus > .badge-yellow:not(.disabled):not(:disabled) {
background-color: #f8dd5e;
color: #FFF; }

.badge-brown {
background-color: #986a44;
color: #FFF; }
.badge-brown:hover, .badge-brown:active, .badge-brown:focus, a:hover > .badge-brown, a:active > .badge-brown, a:focus > .badge-brown, .badge-brown:not(.disabled):not(:disabled):hover, .badge-brown:not(.disabled):not(:disabled):active, .badge-brown:not(.disabled):not(:disabled):focus, a:hover > .badge-brown:not(.disabled):not(:disabled), a:active > .badge-brown:not(.disabled):not(:disabled), a:focus > .badge-brown:not(.disabled):not(:disabled) {
background-color: #b5835a;
color: #FFF; }

.badge-grey {
background-color: #77767b;
color: #FFF; }
.badge-grey:hover, .badge-grey:active, .badge-grey:focus, a:hover > .badge-grey, a:active > .badge-grey, a:focus > .badge-grey, .badge-grey:not(.disabled):not(:disabled):hover, .badge-grey:not(.disabled):not(:disabled):active, .badge-grey:not(.disabled):not(:disabled):focus, a:hover > .badge-grey:not(.disabled):not(:disabled), a:active > .badge-grey:not(.disabled):not(:disabled), a:focus > .badge-grey:not(.disabled):not(:disabled) {
background-color: #919094;
color: #FFF; }

.badge-primary {
background-color: #7951c0;
color: #FFF; }
.badge-primary:hover, .badge-primary:active, .badge-primary:focus, a:hover > .badge-primary, a:active > .badge-primary, a:focus > .badge-primary, .badge-primary:not(.disabled):not(:disabled):hover, .badge-primary:not(.disabled):not(:disabled):active, .badge-primary:not(.disabled):not(:disabled):focus, a:hover > .badge-primary:not(.disabled):not(:disabled), a:active > .badge-primary:not(.disabled):not(:disabled), a:focus > .badge-primary:not(.disabled):not(:disabled) {
background-color: #9676ce;
color: #FFF; }

.badge-secondary {
background-color: #4e63c9;
color: #FFF; }
.badge-secondary:hover, .badge-secondary:active, .badge-secondary:focus, a:hover > .badge-secondary, a:active > .badge-secondary, a:focus > .badge-secondary, .badge-secondary:not(.disabled):not(:disabled):hover, .badge-secondary:not(.disabled):not(:disabled):active, .badge-secondary:not(.disabled):not(:disabled):focus, a:hover > .badge-secondary:not(.disabled):not(:disabled), a:active > .badge-secondary:not(.disabled):not(:disabled), a:focus > .badge-secondary:not(.disabled):not(:disabled) {
background-color: #7585d5;
color: #FFF; }

.badge-warning {
background-color: #eb790a;
color: #FFF; }
.badge-warning:hover, .badge-warning:active, .badge-warning:focus, a:hover > .badge-warning, a:active > .badge-warning, a:focus > .badge-warning, .badge-warning:not(.disabled):not(:disabled):hover, .badge-warning:not(.disabled):not(:disabled):active, .badge-warning:not(.disabled):not(:disabled):focus, a:hover > .badge-warning:not(.disabled):not(:disabled), a:active > .badge-warning:not(.disabled):not(:disabled), a:focus > .badge-warning:not(.disabled):not(:disabled) {
background-color: #f69332;
color: #FFF; }

.badge-danger {
background-color: #e33d22;
color: #FFF; }
.badge-danger:hover, .badge-danger:active, .badge-danger:focus, a:hover > .badge-danger, a:active > .badge-danger, a:focus > .badge-danger, .badge-danger:not(.disabled):not(:disabled):hover, .badge-danger:not(.disabled):not(:disabled):active, .badge-danger:not(.disabled):not(:disabled):focus, a:hover > .badge-danger:not(.disabled):not(:disabled), a:active > .badge-danger:not(.disabled):not(:disabled), a:focus > .badge-danger:not(.disabled):not(:disabled) {
background-color: #e9654f;
color: #FFF; }

.badge-info {
background-color: #42a0f3;
color: #FFF; }
.badge-info:hover, .badge-info:active, .badge-info:focus, a:hover > .badge-info, a:active > .badge-info, a:focus > .badge-info, .badge-info:not(.disabled):not(:disabled):hover, .badge-info:not(.disabled):not(:disabled):active, .badge-info:not(.disabled):not(:disabled):focus, a:hover > .badge-info:not(.disabled):not(:disabled), a:active > .badge-info:not(.disabled):not(:disabled), a:focus > .badge-info:not(.disabled):not(:disabled) {
background-color: #72b8f6;
color: #FFF; }

.badge-success {
background-color: #75b82d;
color: #FFF; }
.badge-success:hover, .badge-success:active, .badge-success:focus, a:hover > .badge-success, a:active > .badge-success, a:focus > .badge-success, .badge-success:not(.disabled):not(:disabled):hover, .badge-success:not(.disabled):not(:disabled):active, .badge-success:not(.disabled):not(:disabled):focus, a:hover > .badge-success:not(.disabled):not(:disabled), a:active > .badge-success:not(.disabled):not(:disabled), a:focus > .badge-success:not(.disabled):not(:disabled) {
background-color: #8fd246;
color: #FFF; }

/* BACKGROUNDS */
.bg-blue {
background-color: #4e63c9 !important;
color: #FFF; }

.bg-violet {
background-color: #ce4dcd !important;
color: #FFF; }

.bg-purple {
background-color: #7951c0 !important;
color: #FFF; }

.bg-red {
background-color: #e33d22 !important;
color: #FFF; }

.bg-orange {
background-color: #eb790a !important;
color: #FFF; }

.bg-green {
background-color: #75b82d !important;
color: #FFF; }

.bg-skyblue {
background-color: #42a0f3 !important;
color: #FFF; }

.bg-dark {
background-color: #2D2D2D !important;
color: #FFF; }

.bg-light {
background-color: #eeeeec !important;
color: #111; }

.bg-turquoise {
background-color: #46bd9e !important;
color: #FFF; }

.bg-yellow {
background-color: #f6d32d !important;
color: #FFF; }

.bg-brown {
background-color: #986a44 !important;
color: #FFF; }

.bg-grey {
background-color: #77767b !important;
color: #FFF; }

.bg-primary {
background-color: #7951c0 !important;
color: #FFF; }

.bg-secondary {
background-color: #4e63c9 !important;
color: #FFF; }

.bg-warning {
background-color: #eb790a !important;
color: #FFF; }

.bg-danger {
background-color: #e33d22 !important;
color: #FFF; }

.bg-info {
background-color: #42a0f3 !important;
color: #FFF; }

.bg-success {
background-color: #75b82d !important;
color: #FFF; }

/* ALERTS */
.alert-blue {
background-color: #d7dcf3;
color: black; }

.alert-violet {
background-color: #f5d9f4;
color: black; }

.alert-purple {
background-color: #ded4ef;
color: black; }

.alert-red {
background-color: #f7c8c0;
color: black; }

.alert-orange {
background-color: #fbd3ac;
color: black; }

.alert-green {
background-color: #cdebad;
color: black; }

.alert-skyblue {
background-color: #eaf4fe;
color: black; }

.alert-dark {
background-color: #868686;
color: black; }

.alert-light {
background-color: white;
color: #23231f; }

.alert-turquoise {
background-color: #caece3;
color: black; }

.alert-yellow {
background-color: #fdf7d8;
color: black; }

.alert-brown {
background-color: #ddc5b2;
color: black; }

.alert-grey {
background-color: #d1d1d3;
color: black; }

.alert-primary {
background-color: #ded4ef;
color: black; }

.alert-secondary {
background-color: #d7dcf3;
color: black; }

.alert-warning {
background-color: #fbd3ac;
color: black; }

.alert-danger {
background-color: #f7c8c0;
color: black; }

.alert-info {
background-color: #eaf4fe;
color: black; }

.alert-success {
background-color: #cdebad;
color: black; }

/* TEXT */
.text-blue {
color: #4e63c9; }

.text-violet {
color: #ce4dcd; }

.text-purple {
color: #7951c0; }

.text-red {
color: #e33d22; }

.text-orange {
color: #eb790a; }

.text-green {
color: #75b82d; }

.text-skyblue {
color: #42a0f3; }

.text-dark {
color: #2D2D2D; }

.text-light {
color: #eeeeec; }

.text-turquoise {
color: #46bd9e; }

.text-yellow {
color: #f6d32d; }

.text-brown {
color: #986a44; }

.text-grey {
color: #77767b; }

.text-primary {
color: #7951c0; }

.text-secondary {
color: #4e63c9; }

.text-warning {
color: #eb790a; }

.text-danger {
color: #e33d22; }

.text-info {
color: #42a0f3; }

.text-success {
color: #75b82d; }

/* Clear-Typography overrides */
mark {
background-color: #fcf2c0; }

blockquote, pre {
border-color: #7951c0; }

BIN
fonts/OpenSans-Bold-webfont.woff View File


BIN
fonts/OpenSans-BoldItalic-webfont.woff View File


BIN
fonts/OpenSans-ExtraBold-webfont.woff View File


BIN
fonts/OpenSans-ExtraBoldItalic-webfont.woff View File


BIN
fonts/OpenSans-Italic-webfont.woff View File


BIN
fonts/OpenSans-Light-webfont.woff View File


BIN
fonts/OpenSans-LightItalic-webfont.woff View File


BIN
fonts/OpenSans-Regular-webfont.woff View File


BIN
fonts/OpenSans-Semibold-webfont.woff View File


BIN
fonts/OpenSans-SemiboldItalic-webfont.woff View File


BIN
fonts/forkawesome-webfont.eot View File


+ 2760
- 0
fonts/forkawesome-webfont.svg
File diff suppressed because it is too large
View File


BIN
fonts/forkawesome-webfont.ttf View File


BIN
fonts/forkawesome-webfont.woff View File


BIN
fonts/forkawesome-webfont.woff2 View File


BIN
img/avatar.png View File


BIN
img/background.png View File


BIN
img/wmap.png View File


+ 311
- 53
index.html View File

@@ -3,73 +3,331 @@

<head>
<meta charset="utf-8">
<title>titre de la page</title>
<title>Blue Sky, by Kazhnuz</title>

<!-- meta -->
<meta name="description" content="">
<meta name="author" content="">

<!-- mon icon -->
<link rel="shortcut icon" href="favicon.ico">
<link rel="shortcut icon" href="img/favicon.png">

<!-- mon template.css -->
<link rel="stylesheet" href="style.css" media="screen">
<!-- framework utilisés -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/fork-awesome.css" rel="stylesheet">
<link href="css/clear-typography.css" rel="stylesheet">

<link href="css/style.css" rel="stylesheet">
</head>

<body>
<div id="wrapper">

<header id="page-header">
<!-- menu du haut -->
<nav>
<ul>
<li><a href="mon-url" title="titre-du-lien">nom de mon lien</a></li>
<li><a href="mon-url" title="titre-du-lien">nom de mon lien</a></li>
<li><a href="mon-url" title="titre-du-lien">nom de mon lien</a></li>
</ul>
</nav>
</header>

<!-- contenu de ma page -->
<div>
<!-- article n°1 -->
<article>
<h1>titre de mon article</h1>
<p>texte de mon article</p>
<section>
<h2>sous-titre mon article</h2>
<p>texte de mon sous-titre</p>
<figure>
<a href="mon-url"><img src="url-de-mon-image" alt="nom-de-mon-image"></a>
</figure>
</section>
</article>

<!-- article n°2 -->
<article>
<h1>titre de mon article</h1>
<p>texte de mon article</p>
<section>
<h2>sous-titre mon article</h2>
<p>texte de mon sous-titre</p>
<figure>
<a href="mon-url"><img src="url-de-mon-image" alt="nom-de-mon-image"></a>
</figure>
</section>
</article>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Blue Sky</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>