chore: rebase on blueskye
This commit is contained in:
Kazhnuz
parent
05e7857e89
commit
8bc72fdb78
54 changed files with 30516 additions and 477 deletions
688
LICENSE
688
LICENSE
File diff suppressed because one or more lines are too long
99
NEWS
Normal file
99
NEWS
Normal 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
color-test.html
Normal file
344
color-test.html
Normal 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> 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> 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> 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
css/bootstrap-grid.css
vendored
Normal file
1912
css/bootstrap-grid.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
1
css/bootstrap-grid.css.map
Normal file
1
css/bootstrap-grid.css.map
Normal file
File diff suppressed because one or more lines are too long
7
css/bootstrap-grid.min.css
vendored
Normal file
7
css/bootstrap-grid.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
css/bootstrap-grid.min.css.map
Normal file
1
css/bootstrap-grid.min.css.map
Normal file
File diff suppressed because one or more lines are too long
330
css/bootstrap-reboot.css
vendored
Normal file
330
css/bootstrap-reboot.css
vendored
Normal 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
css/bootstrap-reboot.css.map
Normal file
1
css/bootstrap-reboot.css.map
Normal file
File diff suppressed because one or more lines are too long
8
css/bootstrap-reboot.min.css
vendored
Normal file
8
css/bootstrap-reboot.min.css
vendored
Normal 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
css/bootstrap-reboot.min.css.map
Normal file
1
css/bootstrap-reboot.min.css.map
Normal file
File diff suppressed because one or more lines are too long
8981
css/bootstrap.css
vendored
Normal file
8981
css/bootstrap.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
1
css/bootstrap.css.map
Normal file
1
css/bootstrap.css.map
Normal file
File diff suppressed because one or more lines are too long
7
css/bootstrap.min.css
vendored
Normal file
7
css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
css/bootstrap.min.css.map
Normal file
1
css/bootstrap.min.css.map
Normal file
File diff suppressed because one or more lines are too long
257
css/clear-typography.css
Normal file
257
css/clear-typography.css
Normal 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
css/fork-awesome.css
Normal file
2501
css/fork-awesome.css
Normal file
File diff suppressed because it is too large
Load diff
12
css/fork-awesome.min.css
vendored
Normal file
12
css/fork-awesome.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
css/fork-awesome.min.css.map
Normal file
1
css/fork-awesome.min.css.map
Normal file
File diff suppressed because one or more lines are too long
943
css/style.css
Normal file
943
css/style.css
Normal 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
Normal file
BIN
fonts/OpenSans-Bold-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/OpenSans-BoldItalic-webfont.woff
Normal file
BIN
fonts/OpenSans-BoldItalic-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/OpenSans-ExtraBold-webfont.woff
Normal file
BIN
fonts/OpenSans-ExtraBold-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/OpenSans-ExtraBoldItalic-webfont.woff
Normal file
BIN
fonts/OpenSans-ExtraBoldItalic-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/OpenSans-Italic-webfont.woff
Normal file
BIN
fonts/OpenSans-Italic-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/OpenSans-Light-webfont.woff
Normal file
BIN
fonts/OpenSans-Light-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/OpenSans-LightItalic-webfont.woff
Normal file
BIN
fonts/OpenSans-LightItalic-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/OpenSans-Regular-webfont.woff
Normal file
BIN
fonts/OpenSans-Regular-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/OpenSans-Semibold-webfont.woff
Normal file
BIN
fonts/OpenSans-Semibold-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/OpenSans-SemiboldItalic-webfont.woff
Normal file
BIN
fonts/OpenSans-SemiboldItalic-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/forkawesome-webfont.eot
Normal file
BIN
fonts/forkawesome-webfont.eot
Normal file
Binary file not shown.
2760
fonts/forkawesome-webfont.svg
Normal file
2760
fonts/forkawesome-webfont.svg
Normal file
File diff suppressed because it is too large
Load diff
|
After Width: | Height: | Size: 455 KiB |
BIN
fonts/forkawesome-webfont.ttf
Normal file
BIN
fonts/forkawesome-webfont.ttf
Normal file
Binary file not shown.
BIN
fonts/forkawesome-webfont.woff
Normal file
BIN
fonts/forkawesome-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/forkawesome-webfont.woff2
Normal file
BIN
fonts/forkawesome-webfont.woff2
Normal file
Binary file not shown.
BIN
img/avatar.png
Normal file
BIN
img/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
img/background.png
Normal file
BIN
img/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
img/wmap.png
Normal file
BIN
img/wmap.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
342
index.html
342
index.html
|
|
@ -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>
|
||||
<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>
|
||||
|
||||
<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="#">Exemple de page</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>Blue Sky</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- contenu de ma page -->
|
||||
<div>
|
||||
<!-- article n°1 -->
|
||||
<section class="container">
|
||||
<div class="row">
|
||||
|
||||
|
||||
<div class="col-md-9">
|
||||
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Accueil</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">Contenus</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Article exemple</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<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 class="card card-success">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">Nom de l'article :</h2>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<ul>
|
||||
<li>1 - Titre de niveau 3
|
||||
<ul>
|
||||
<li>1.1 - Titre de niveau 4</li>
|
||||
<li>1.2 - Titre de niveau 4</li>
|
||||
<li>1.3 - Titre de niveau 4</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>2 - Titre de niveau 3</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-warning">Télécharger ce thème</a></p>
|
||||
|
||||
<h3>Titre de niveau 3</h3>
|
||||
<h4>Titre de niveau 4</h4>
|
||||
<h4>Titre de niveau 4</h4>
|
||||
<h4>Titre de niveau 4</h4>
|
||||
<h3>Titre de niveau 3</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="share-buttons 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>
|
||||
|
||||
|
||||
<section class="card card-noheader">
|
||||
<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>
|
||||
</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>
|
||||
<div class="previews-section prev-col-3">
|
||||
|
||||
<div class="preview-container">
|
||||
<article class="card card-preview">
|
||||
<a href="#" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></p></div>
|
||||
<div class="preview-overlay"><h1>Image Exemple</h1></div>
|
||||
</div>
|
||||
</a>
|
||||
<aside class="card-body">
|
||||
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
|
||||
<div class="align-left"><i class="fa fa-tags"></i> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
|
||||
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
|
||||
</aside>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<footer id="main-footer">
|
||||
<!-- menu du bas -->
|
||||
<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>
|
||||
<div class="preview-container">
|
||||
<article class="card card-preview">
|
||||
<a href="#" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. 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></div>
|
||||
<div class="preview-overlay"><h1>Text Exemple</h1></div>
|
||||
</div>
|
||||
</a>
|
||||
<aside class="card-body">
|
||||
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
|
||||
<div class="align-left"><i class="fa fa-tags"></i> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
|
||||
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
|
||||
</aside>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="preview-container">
|
||||
<article class="card card-preview">
|
||||
<a href="#" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. 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></div>
|
||||
<div class="preview-overlay"><h1>Text Exemple</h1></div>
|
||||
</div>
|
||||
</a>
|
||||
<aside class="card-body">
|
||||
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
|
||||
<div class="align-left"><i class="fa fa-tags"></i> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
|
||||
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
|
||||
</aside>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="preview-container">
|
||||
<article class="card card-preview">
|
||||
<a href="#" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. 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></div>
|
||||
<div class="preview-overlay"><h1>Text Exemple</h1></div>
|
||||
</div>
|
||||
</a>
|
||||
<aside class="card-body">
|
||||
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
|
||||
<div class="align-left"><i class="fa fa-tags"></i> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
|
||||
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
|
||||
</aside>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="commentaires">
|
||||
<h3>Commentaires :</h3>
|
||||
|
||||
<article class="card comment">
|
||||
<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><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>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>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="card comment">
|
||||
<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><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>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>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
<aside class="sidebar col-md-3">
|
||||
<section class="card card-primary">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Catégories</h3>
|
||||
</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">
|
||||
Objet de liste
|
||||
<span class="badge badge-primary badge-pill">14</span>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card card-warning">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title"> Archive</h3>
|
||||
</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">
|
||||
Objet de liste
|
||||
<span class="badge badge-primary badge-pill">14</span>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card card-danger">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Navigation</h3>
|
||||
</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">
|
||||
Objet de liste
|
||||
<span class="badge badge-primary badge-pill">14</span>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Objet de liste</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>
|
||||
</nav>
|
||||
|
||||
<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>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- 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>
|
||||
|
|
|
|||
6444
js/bootstrap.bundle.js
vendored
Normal file
6444
js/bootstrap.bundle.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
1
js/bootstrap.bundle.js.map
Normal file
1
js/bootstrap.bundle.js.map
Normal file
File diff suppressed because one or more lines are too long
7
js/bootstrap.bundle.min.js
vendored
Normal file
7
js/bootstrap.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
js/bootstrap.bundle.min.js.map
Normal file
1
js/bootstrap.bundle.min.js.map
Normal file
File diff suppressed because one or more lines are too long
3927
js/bootstrap.js
vendored
Normal file
3927
js/bootstrap.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
1
js/bootstrap.js.map
Normal file
1
js/bootstrap.js.map
Normal file
File diff suppressed because one or more lines are too long
7
js/bootstrap.min.js
vendored
Normal file
7
js/bootstrap.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
js/bootstrap.min.js.map
Normal file
1
js/bootstrap.min.js.map
Normal file
File diff suppressed because one or more lines are too long
277
preview.html
Normal file
277
preview.html
Normal file
|
|
@ -0,0 +1,277 @@
|
|||
<!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.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 style="margin:auto;text-align:center;">Previews</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="container">
|
||||
<div class="row">
|
||||
|
||||
<aside class="sidebar col-lg-3">
|
||||
|
||||
<section class="card card-info" style="margin-bottom:2em;">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-fw fa-info"></i> #Inktober2017
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Toutes les publications contenant le mot-clé « <a href="">Inktober2017</a> »</p>
|
||||
|
||||
<p>Un mot-clé peut servir à désigner soit l'univers dans laquelle la création se déroule, soit l'objectif dans lequel a été fait la publication (tel que le 100 Thème Challenge)</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card card-green" style="margin-bottom:2em;">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-fw fa-feed"></i> 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> 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-o"></i> Archive
|
||||
</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">
|
||||
2017
|
||||
<span class="badge badge-primary badge-pill">14</span>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
2016
|
||||
<span class="badge badge-primary badge-pill">2</span>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
2015
|
||||
<span class="badge badge-primary badge-pill">3</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</aside>
|
||||
|
||||
|
||||
<div class="col-lg-9">
|
||||
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#"><i class="fa fa-fw fa-home"></i> Accueil</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Catégorie</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="previews-section prev-col-3">
|
||||
<div class="preview-container">
|
||||
<article class="card card-preview">
|
||||
<a href="#" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></p></div>
|
||||
<div class="preview-overlay"><h1>#Inktober2017 - Day 27. Deep</h1></div>
|
||||
</div>
|
||||
</a>
|
||||
<aside class="card-body">
|
||||
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
|
||||
<div class="align-left"><i class="fa fa-tags"></i> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
|
||||
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
|
||||
</aside>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="preview-container">
|
||||
<article class="card card-preview">
|
||||
<a href="#" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></p></div>
|
||||
<div class="preview-overlay"><h1>#Inktober2017 - Day 27. Deep</h1></div>
|
||||
</div>
|
||||
</a>
|
||||
<aside class="card-body">
|
||||
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
|
||||
<div class="align-left"><i class="fa fa-tags"></i> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
|
||||
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
|
||||
</aside>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="preview-container">
|
||||
<article class="card card-preview">
|
||||
<a href="#" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p>Édeline regardait le gouffre qui se trouvait devant elle. Un trou béant dans le sol. Une crevasse dont le fond n’était pas visible. Des kilomètres de diamètres, et une profondeur inconnue. Une brume emplissait le gigantesque cratère, rendant impossible toute mesure. Seule l’ombre, l’obscurité la plus totale semblait se trouver au bout de la chute. Les bords étaient abrupts et impossibles à escalader, dans un sens comme dans l’autre, et même avec une corde ou un appareil volant, les vents violents qui s’engouffraient feraient se percuter violemment contre les murs quelqu’un qui tenterait une descente.</p>
|
||||
|
||||
<p>Personne ne savait ce qui se trouvait au fond de ce gouffre, derrière toute cette brume.</p></div>
|
||||
<div class="preview-overlay"><h1>#Inktober2017 - Day 27. Deep</h1></div>
|
||||
</div>
|
||||
</a>
|
||||
<aside class="card-body">
|
||||
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
|
||||
<div class="align-left"><i class="fa fa-tags"></i> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
|
||||
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
|
||||
</aside>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="preview-container">
|
||||
<article class="card card-preview">
|
||||
<a href="#" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p>Édeline regardait le gouffre qui se trouvait devant elle. Un trou béant dans le sol. Une crevasse dont le fond n’était pas visible. Des kilomètres de diamètres, et une profondeur inconnue. Une brume emplissait le gigantesque cratère, rendant impossible toute mesure. Seule l’ombre, l’obscurité la plus totale semblait se trouver au bout de la chute. Les bords étaient abrupts et impossibles à escalader, dans un sens comme dans l’autre, et même avec une corde ou un appareil volant, les vents violents qui s’engouffraient feraient se percuter violemment contre les murs quelqu’un qui tenterait une descente.</p>
|
||||
|
||||
<p>Personne ne savait ce qui se trouvait au fond de ce gouffre, derrière toute cette brume.</p></div>
|
||||
<div class="preview-overlay"><h1>#Inktober2017 - Day 27. Deep</h1></div>
|
||||
</div>
|
||||
</a>
|
||||
<aside class="card-body">
|
||||
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
|
||||
<div class="align-left"><i class="fa fa-tags"></i> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
|
||||
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
|
||||
</aside>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="preview-container">
|
||||
<article class="card card-preview">
|
||||
<a href="#" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p>Édeline regardait le gouffre qui se trouvait devant elle. Un trou béant dans le sol. Une crevasse dont le fond n’était pas visible. Des kilomètres de diamètres, et une profondeur inconnue. Une brume emplissait le gigantesque cratère, rendant impossible toute mesure. Seule l’ombre, l’obscurité la plus totale semblait se trouver au bout de la chute. Les bords étaient abrupts et impossibles à escalader, dans un sens comme dans l’autre, et même avec une corde ou un appareil volant, les vents violents qui s’engouffraient feraient se percuter violemment contre les murs quelqu’un qui tenterait une descente.</p>
|
||||
|
||||
<p>Personne ne savait ce qui se trouvait au fond de ce gouffre, derrière toute cette brume.</p></div>
|
||||
<div class="preview-overlay"><h1>#Inktober2017 - Day 27. Deep</h1></div>
|
||||
</div>
|
||||
</a>
|
||||
<aside class="card-body">
|
||||
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
|
||||
<div class="align-left"><i class="fa fa-tags"></i> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
|
||||
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
|
||||
</aside>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</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>
|
||||
225
scss/_colorize.scss
Normal file
225
scss/_colorize.scss
Normal file
|
|
@ -0,0 +1,225 @@
|
|||
/* ------------------ COULEURS ------------------- */
|
||||
|
||||
@mixin card-color($background-color, $text-color) {
|
||||
& > .card-header { background-color: $background-color; color:$text-color; }
|
||||
}
|
||||
|
||||
@mixin button-lighten($background-color, $text-color) {
|
||||
background-color: lighten($background-color, 10%);
|
||||
color:$text-color;
|
||||
}
|
||||
|
||||
@mixin button-color($background-color, $text-color) {
|
||||
background-color: $background-color;
|
||||
color: $text-color;
|
||||
&, &:not(.disabled):not(:disabled) {
|
||||
&:hover, &:active, &:focus {
|
||||
@include button-lighten($background-color, $text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin badge-color($background-color, $text-color) {
|
||||
background-color: $background-color;
|
||||
color: $text-color;
|
||||
&, &:not(.disabled):not(:disabled) {
|
||||
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
|
||||
@include button-lighten($background-color, $text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin background-color($background-color, $text-color) {
|
||||
background-color: $background-color!important;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
@mixin alert-color($background-color) {
|
||||
background-color: lighten($background-color, 35%);
|
||||
color: darken($background-color, 80%);
|
||||
}
|
||||
|
||||
@mixin text-color($text-color) {
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
a, a:hover, a:active {
|
||||
color: $color-link;
|
||||
}
|
||||
|
||||
::selection {
|
||||
@include background-color($color-selection, #FFF);
|
||||
}
|
||||
::-moz-selection {
|
||||
@include background-color($color-selection, #FFF);
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
|
||||
.card {
|
||||
&-blue { @include card-color($color-blue, #FFF); }
|
||||
&-violet { @include card-color($color-violet, #FFF); }
|
||||
&-purple { @include card-color($color-purple, #FFF); }
|
||||
&-red { @include card-color($color-red, #FFF); }
|
||||
&-orange { @include card-color($color-orange, #FFF); }
|
||||
&-green { @include card-color($color-green, #FFF); }
|
||||
&-skyblue { @include card-color($color-skyblue, #FFF); }
|
||||
&-dark { @include card-color($color-dark, #FFF); }
|
||||
&-light { @include card-color($color-light, #111); }
|
||||
&-turquoise { @include card-color($color-turquoise, #FFF); }
|
||||
&-yellow { @include card-color($color-yellow, #FFF); }
|
||||
&-brown { @include card-color($color-brown, #FFF); }
|
||||
&-grey { @include card-color($color-grey, #FFF); }
|
||||
|
||||
&-primary { @include card-color($color-primary, #FFF); }
|
||||
&-secondary { @include card-color($color-secondary, #FFF); }
|
||||
&-warning { @include card-color($color-warning, #FFF); }
|
||||
&-danger { @include card-color($color-danger, #FFF); }
|
||||
&-info { @include card-color($color-info, #FFF); }
|
||||
&-success { @include card-color($color-success, #FFF); }
|
||||
}
|
||||
|
||||
/* BUTTONS & BADGES */
|
||||
|
||||
.btn {
|
||||
&-blue { @include button-color($color-blue, #FFF); }
|
||||
&-violet { @include button-color($color-violet, #FFF); }
|
||||
&-purple { @include button-color($color-purple, #FFF); }
|
||||
&-red { @include button-color($color-red, #FFF); }
|
||||
&-orange { @include button-color($color-orange, #FFF); }
|
||||
&-green { @include button-color($color-green, #FFF); }
|
||||
&-skyblue { @include button-color($color-skyblue, #FFF); }
|
||||
&-dark { @include button-color($color-dark, #FFF); }
|
||||
&-light { @include button-color($color-light, #111); }
|
||||
&-turquoise { @include button-color($color-turquoise, #FFF); }
|
||||
&-yellow { @include button-color($color-yellow, #FFF); }
|
||||
&-brown { @include button-color($color-brown, #FFF); }
|
||||
&-grey { @include button-color($color-grey, #FFF); }
|
||||
|
||||
&-primary { @include button-color($color-primary, #FFF); }
|
||||
&-secondary { @include button-color($color-secondary, #FFF); }
|
||||
&-warning { @include button-color($color-warning, #FFF); }
|
||||
&-danger { @include button-color($color-danger, #FFF); }
|
||||
&-info { @include button-color($color-info, #FFF); }
|
||||
&-success { @include button-color($color-success, #FFF); }
|
||||
}
|
||||
|
||||
/* social */
|
||||
|
||||
.btn {
|
||||
&-facebook {@include button-color(#3B5998, #FFF);}
|
||||
&-twitter {@include button-color(#55ACEE, #FFF);}
|
||||
&-googleplus {@include button-color(#d34836, #FFF);}
|
||||
&-diaspora {@include button-color(#313739, #FFF);}
|
||||
&-mastodon {@include button-color(#282c37, #FFF);}
|
||||
}
|
||||
|
||||
/* BADGES */
|
||||
|
||||
.badge {
|
||||
&-blue { @include badge-color($color-blue, #FFF); }
|
||||
&-violet { @include badge-color($color-violet, #FFF); }
|
||||
&-purple { @include badge-color($color-purple, #FFF); }
|
||||
&-red { @include badge-color($color-red, #FFF); }
|
||||
&-orange { @include badge-color($color-orange, #FFF); }
|
||||
&-green { @include badge-color($color-green, #FFF); }
|
||||
&-skyblue { @include badge-color($color-skyblue, #FFF); }
|
||||
&-dark { @include badge-color($color-dark, #FFF); }
|
||||
&-light { @include badge-color($color-light, #111); }
|
||||
&-turquoise { @include badge-color($color-turquoise, #FFF); }
|
||||
&-yellow { @include badge-color($color-yellow, #FFF); }
|
||||
&-brown { @include badge-color($color-brown, #FFF); }
|
||||
&-grey { @include badge-color($color-grey, #FFF); }
|
||||
|
||||
&-primary { @include badge-color($color-primary, #FFF); }
|
||||
&-secondary { @include badge-color($color-secondary, #FFF); }
|
||||
&-warning { @include badge-color($color-warning, #FFF); }
|
||||
&-danger { @include badge-color($color-danger, #FFF); }
|
||||
&-info { @include badge-color($color-info, #FFF); }
|
||||
&-success { @include badge-color($color-success, #FFF); }
|
||||
}
|
||||
|
||||
/* BACKGROUNDS */
|
||||
|
||||
.bg {
|
||||
&-blue { @include background-color($color-blue, #FFF); }
|
||||
&-violet { @include background-color($color-violet, #FFF); }
|
||||
&-purple { @include background-color($color-purple, #FFF); }
|
||||
&-red { @include background-color($color-red, #FFF); }
|
||||
&-orange { @include background-color($color-orange, #FFF); }
|
||||
&-green { @include background-color($color-green, #FFF); }
|
||||
&-skyblue { @include background-color($color-skyblue, #FFF); }
|
||||
&-dark { @include background-color($color-dark, #FFF); }
|
||||
&-light { @include background-color($color-light, #111); }
|
||||
&-turquoise { @include background-color($color-turquoise, #FFF); }
|
||||
&-yellow { @include background-color($color-yellow, #FFF); }
|
||||
&-brown { @include background-color($color-brown, #FFF); }
|
||||
&-grey { @include background-color($color-grey, #FFF); }
|
||||
|
||||
&-primary { @include background-color($color-primary, #FFF); }
|
||||
&-secondary { @include background-color($color-secondary, #FFF); }
|
||||
&-warning { @include background-color($color-warning, #FFF); }
|
||||
&-danger { @include background-color($color-danger, #FFF); }
|
||||
&-info { @include background-color($color-info, #FFF); }
|
||||
&-success { @include background-color($color-success, #FFF); }
|
||||
}
|
||||
|
||||
/* ALERTS */
|
||||
|
||||
.alert {
|
||||
&-blue { @include alert-color($color-blue); }
|
||||
&-violet { @include alert-color($color-violet); }
|
||||
&-purple { @include alert-color($color-purple); }
|
||||
&-red { @include alert-color($color-red); }
|
||||
&-orange { @include alert-color($color-orange); }
|
||||
&-green { @include alert-color($color-green); }
|
||||
&-skyblue { @include alert-color($color-skyblue); }
|
||||
&-dark { @include alert-color($color-dark); }
|
||||
&-light { @include alert-color($color-light); }
|
||||
&-turquoise { @include alert-color($color-turquoise); }
|
||||
&-yellow { @include alert-color($color-yellow); }
|
||||
&-brown { @include alert-color($color-brown); }
|
||||
&-grey { @include alert-color($color-grey); }
|
||||
|
||||
&-primary { @include alert-color($color-primary); }
|
||||
&-secondary { @include alert-color($color-secondary); }
|
||||
&-warning { @include alert-color($color-warning); }
|
||||
&-danger { @include alert-color($color-danger); }
|
||||
&-info { @include alert-color($color-info); }
|
||||
&-success { @include alert-color($color-success); }
|
||||
}
|
||||
|
||||
/* TEXT */
|
||||
|
||||
.text {
|
||||
&-blue { @include text-color($color-blue); }
|
||||
&-violet { @include text-color($color-violet); }
|
||||
&-purple { @include text-color($color-purple); }
|
||||
&-red { @include text-color($color-red); }
|
||||
&-orange { @include text-color($color-orange); }
|
||||
&-green { @include text-color($color-green); }
|
||||
&-skyblue { @include text-color($color-skyblue); }
|
||||
&-dark { @include text-color($color-dark); }
|
||||
&-light { @include text-color($color-light); }
|
||||
&-turquoise { @include text-color($color-turquoise); }
|
||||
&-yellow { @include text-color($color-yellow); }
|
||||
&-brown { @include text-color($color-brown); }
|
||||
&-grey { @include text-color($color-grey); }
|
||||
|
||||
&-primary { @include text-color($color-primary); }
|
||||
&-secondary { @include text-color($color-secondary); }
|
||||
&-warning { @include text-color($color-warning); }
|
||||
&-danger { @include text-color($color-danger); }
|
||||
&-info { @include text-color($color-info); }
|
||||
&-success { @include text-color($color-success); }
|
||||
}
|
||||
|
||||
/* Clear-Typography overrides */
|
||||
|
||||
mark {
|
||||
background-color: lighten($color-mark, 30%)
|
||||
}
|
||||
|
||||
blockquote, pre {
|
||||
border-color: $color-primary;
|
||||
}
|
||||
425
scss/_commons.scss
Normal file
425
scss/_commons.scss
Normal file
|
|
@ -0,0 +1,425 @@
|
|||
/* ------------------ GLOBAL STYLE ------------------- */
|
||||
|
||||
@mixin li-no-margin() {
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.no-pills {
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
.align {
|
||||
&-center {text-align: center;}
|
||||
&-left {text-align: left;}
|
||||
&-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 rgba(0, 0, 0, 0);
|
||||
padding-bottom:0px;
|
||||
margin:auto;
|
||||
text-align:center;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
box-shadow: $large-shadow;
|
||||
@include borders();
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
ul {
|
||||
padding-bottom:0;
|
||||
}
|
||||
@include li-no-margin();
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
box-shadow: $narrow-shadow, $inset-shadow;
|
||||
}
|
||||
|
||||
|
||||
/* ------------------ FOOTER ------------------- */
|
||||
|
||||
footer {
|
||||
margin-top:40px;
|
||||
}
|
||||
|
||||
/* social media */
|
||||
|
||||
ul.social {
|
||||
font-size:1.5em;
|
||||
padding-bottom:1em;
|
||||
margin:auto;
|
||||
text-align:center;
|
||||
li {
|
||||
margin:0;
|
||||
list-style: none;
|
||||
display: inline;
|
||||
a {
|
||||
color:#FFFFFF;
|
||||
background-color:#000000;
|
||||
padding:0.3em;
|
||||
padding-left:0.36em;
|
||||
padding-right:0.36em;
|
||||
vertical-align:middle;
|
||||
border-radius:100%;
|
||||
&:hover {
|
||||
color:#000;
|
||||
background-color:#FFF
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ------------------ CARDS ------------------- */
|
||||
|
||||
.card {
|
||||
@include border-radius();
|
||||
box-shadow: $large-shadow;
|
||||
border: none;
|
||||
margin-bottom:1.2em;
|
||||
}
|
||||
|
||||
.card-shadow {
|
||||
box-shadow: $large-shadow, $inset-shadow;
|
||||
}
|
||||
|
||||
.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 rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
/* header and titles */
|
||||
|
||||
.card-header {
|
||||
@include borders();
|
||||
font-size:1.1em;
|
||||
box-shadow: $inset-relief;
|
||||
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
|
||||
font-weight:600;
|
||||
border-radius: 0;
|
||||
|
||||
&:first-child {
|
||||
@include border-radius();
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include border-radius();
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, h7, h8, h9, 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: $border-size solid rgba(0,0,0,0.2);
|
||||
|
||||
&.media {
|
||||
-ms-flex-align: center !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.media-left .media-object {
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
border-radius: 10px;
|
||||
margin-right:1em;
|
||||
}
|
||||
|
||||
|
||||
author {
|
||||
display:block;
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
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 {
|
||||
@include borders();
|
||||
@include border-radius();
|
||||
box-shadow: $large-shadow, $inset-shadow;
|
||||
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
position:relative;
|
||||
box-shadow: $narrow-shadow, $inset-shadow;
|
||||
top:1px;
|
||||
@include borders();
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
position:relative;
|
||||
box-shadow: $inset-shadow-inverted;
|
||||
top:2px;
|
||||
@include borders();
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
box-shadow: $large-shadow;
|
||||
}
|
||||
|
||||
.btn-group .btn {
|
||||
box-shadow: $inset-shadow;
|
||||
@include border-radius();
|
||||
&:not(:first-child) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group .btn:hover {
|
||||
position:relative;
|
||||
top:1px;
|
||||
box-shadow: $inset-shadow;
|
||||
}
|
||||
|
||||
.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-shadow-inverted!important;
|
||||
top:2px;
|
||||
@include borders();
|
||||
}
|
||||
|
||||
.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: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
|
||||
top:1px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* ------------------ ALERTS ------------------- */
|
||||
|
||||
.alert {
|
||||
@include borders();
|
||||
@include border-radius();
|
||||
color:rgba(0, 0, 0, 0.7);
|
||||
box-shadow: $large-shadow;
|
||||
}
|
||||
|
||||
.alert a, .alert-link {
|
||||
color:rgba(0, 0, 0, 0.7);
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
/* ------------------ BREADCRUMB ------------------- */
|
||||
|
||||
.breadcrumb {
|
||||
@include border-radius();
|
||||
box-shadow: $large-shadow, $inset-shadow;
|
||||
border: 0;
|
||||
background-color:#eeeeec;
|
||||
margin-bottom:1.2em;
|
||||
@include li-no-margin();
|
||||
}
|
||||
|
||||
/* ------------------ 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(max-width:767px){}
|
||||
@media(min-width:768px){}
|
||||
@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 {
|
||||
@include border-radius();
|
||||
width:100%;
|
||||
margin:auto;
|
||||
box-shadow: $large-shadow, $inset-shadow;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
0
scss/_overrides.scss
Normal file
0
scss/_overrides.scss
Normal file
|
|
@ -1,59 +1,18 @@
|
|||
/*
|
||||
* 1 - Global colors styling
|
||||
*
|
||||
* This part of the (s)css handle the colors of the page.
|
||||
*
|
||||
*/
|
||||
|
||||
$color-dark1: #002b36;
|
||||
$color-dark2: #073642;
|
||||
|
||||
$color-gray1: #586e75;
|
||||
$color-gray2: #657b83;
|
||||
$color-gray3: #839496;
|
||||
$color-gray4: #93a1a1;
|
||||
|
||||
$color-light1: #eee8d5;
|
||||
$color-light2: #fdf6e3;
|
||||
|
||||
$color-blue: #268bd2;
|
||||
$color-magenta: #d33682;
|
||||
$color-red: #dc322f;
|
||||
$color-orange: #cb4b16;
|
||||
$color-violet: #6c71c4;
|
||||
$color-yellow: #b58900;
|
||||
$color-cyan: #2aa198;
|
||||
$color-green: #859900;
|
||||
|
||||
$color-primary: $color-cyan;
|
||||
$color-secondary: $color-magenta;
|
||||
$color-blue: #4e63c9;
|
||||
$color-violet: #ce4dcd;
|
||||
$color-purple: #7951c0;
|
||||
$color-red: #e33d22;
|
||||
$color-orange: #eb790a;
|
||||
$color-green: #75b82d;
|
||||
$color-skyblue: #42a0f3;
|
||||
$color-dark: #2D2D2D;
|
||||
$color-light: #eeeeec;
|
||||
$color-turquoise: #46bd9e;
|
||||
$color-yellow: #f6d32d;
|
||||
$color-brown: #986a44;
|
||||
$color-grey: #77767b;
|
||||
|
||||
$color-warning: $color-orange;
|
||||
$color-danger: $color-red;
|
||||
$color-info: $color-cyan;
|
||||
$color-info: $color-skyblue;
|
||||
$color-success: $color-green;
|
||||
|
||||
$color-link: $color-magenta;
|
||||
$color-selection: $color-magenta;
|
||||
$color-mark: $color-yellow;
|
||||
|
||||
$color-category: $color-primary;
|
||||
$color-tag: $color-secondary;
|
||||
|
||||
$color-font: $color-dark2;
|
||||
$color-back: $color-light2;
|
||||
|
||||
body {
|
||||
background-color: $color-back;
|
||||
color:$color-font;
|
||||
}
|
||||
|
||||
a {
|
||||
color:$color-link;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
::selection { background: $color-selection; color: $color-light2; }
|
||||
::-moz-selection { background: $color-selection; color: $color-light2; }
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,36 @@
|
|||
/*
|
||||
Theme Name: Kazhnuz Space
|
||||
Theme URI:
|
||||
Author: Kazhnuz
|
||||
Author URI: https://kazhnuz.space
|
||||
Description: The default theme for Kazhnuz Space, my art blog
|
||||
Version: 0.1
|
||||
License: GNU General Public License v2 or later
|
||||
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
||||
Tags: blog, two-columns, right-sidebar, magazine
|
||||
Text Domain: kazhnuz-space-theme
|
||||
|
||||
This theme is licensed under the GPLv3.
|
||||
*/
|
||||
|
||||
@import 'palette';
|
||||
|
||||
@import 'normalized';
|
||||
/* ------------------ CUSTOM STYLE ------------------- */
|
||||
|
||||
$large-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
|
||||
$narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
|
||||
$inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
|
||||
$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0.2);
|
||||
$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0.1);
|
||||
|
||||
$border-radius: 3px;
|
||||
$border-size: 1px;
|
||||
|
||||
$color-primary: $color-purple;
|
||||
$color-secondary: $color-blue;
|
||||
$color-link: $color-blue;
|
||||
$color-selection: $color-blue;
|
||||
$color-mark: $color-yellow;
|
||||
|
||||
@mixin borders() {
|
||||
border: $border-size solid rgba(0, 0, 0, 0.3)
|
||||
}
|
||||
|
||||
@mixin border-radius() {
|
||||
border-radius: $border-radius $border-radius $border-radius $border-radius;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
background: #64b5f6 url('../img/background.png') center bottom repeat-x;
|
||||
}
|
||||
|
||||
@import 'commons';
|
||||
|
||||
@import 'colorize';
|
||||
|
||||
@import 'overrides';
|
||||
|
|
|
|||
340
style.css
340
style.css
|
|
@ -1,340 +0,0 @@
|
|||
/*
|
||||
Theme Name: Kazhnuz Space
|
||||
Theme URI:
|
||||
Author: Kazhnuz
|
||||
Author URI: https://kazhnuz.space
|
||||
Description: The default theme for Kazhnuz Space, my art blog
|
||||
Version: 0.1
|
||||
License: GNU General Public License v2 or later
|
||||
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
||||
Tags: blog, two-columns, right-sidebar, magazine
|
||||
Text Domain: kazhnuz-space-theme
|
||||
|
||||
This theme is licensed under the GPLv3.
|
||||
*/
|
||||
/*
|
||||
* 1 - Global colors styling
|
||||
*
|
||||
* This part of the (s)css handle the colors of the page.
|
||||
*
|
||||
*/
|
||||
body {
|
||||
background-color: #fdf6e3;
|
||||
color: #073642; }
|
||||
|
||||
a {
|
||||
color: #d33682;
|
||||
text-decoration: none; }
|
||||
|
||||
::selection {
|
||||
background: #d33682;
|
||||
color: #fdf6e3; }
|
||||
|
||||
::-moz-selection {
|
||||
background: #d33682;
|
||||
color: #fdf6e3; }
|
||||
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
/* Document
|
||||
========================================================================== */
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
html {
|
||||
line-height: 1.15;
|
||||
/* 1 */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* 2 */ }
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
body {
|
||||
margin: 0; }
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
main {
|
||||
display: block; }
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0; }
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
/* 1 */
|
||||
height: 0;
|
||||
/* 1 */
|
||||
overflow: visible;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
pre {
|
||||
font-family: monospace, monospace;
|
||||
/* 1 */
|
||||
font-size: 1em;
|
||||
/* 2 */ }
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
a {
|
||||
background-color: transparent; }
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
abbr[title] {
|
||||
border-bottom: none;
|
||||
/* 1 */
|
||||
text-decoration: underline;
|
||||
/* 2 */
|
||||
text-decoration: underline dotted;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder; }
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
/* 1 */
|
||||
font-size: 1em;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
small {
|
||||
font-size: 80%; }
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline; }
|
||||
|
||||
sub {
|
||||
bottom: -0.25em; }
|
||||
|
||||
sup {
|
||||
top: -0.5em; }
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
img {
|
||||
border-style: none; }
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
/* 1 */
|
||||
font-size: 100%;
|
||||
/* 1 */
|
||||
line-height: 1.15;
|
||||
/* 1 */
|
||||
margin: 0;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
button,
|
||||
input {
|
||||
/* 1 */
|
||||
overflow: visible; }
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
button,
|
||||
select {
|
||||
/* 1 */
|
||||
text-transform: none; }
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; }
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0; }
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText; }
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em; }
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
legend {
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
color: inherit;
|
||||
/* 2 */
|
||||
display: table;
|
||||
/* 1 */
|
||||
max-width: 100%;
|
||||
/* 1 */
|
||||
padding: 0;
|
||||
/* 3 */
|
||||
white-space: normal;
|
||||
/* 1 */ }
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
progress {
|
||||
vertical-align: baseline; }
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
textarea {
|
||||
overflow: auto; }
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
padding: 0;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto; }
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
/* 1 */
|
||||
outline-offset: -2px;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none; }
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
/* 1 */
|
||||
font: inherit;
|
||||
/* 2 */ }
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
details {
|
||||
display: block; }
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
summary {
|
||||
display: list-item; }
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
template {
|
||||
display: none; }
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
[hidden] {
|
||||
display: none; }
|
||||
Reference in a new issue