Browse Source

meta: use as a base the quarante-douze theme

main
Kazhnuz Klappsthul 5 months ago
parent
commit
7e8db4267c
82 changed files with 31060 additions and 0 deletions
  1. +8
    -0
      archive.php
  2. +17
    -0
      category.php
  3. +130
    -0
      comments.php
  4. +40
    -0
      components/featured.php
  5. +3
    -0
      components/logo.php
  6. +19
    -0
      components/navbar-category.php
  7. +24
    -0
      components/navbar-footer.php
  8. +28
    -0
      components/navbar-pages.php
  9. +15
    -0
      components/opengraph.php
  10. +25
    -0
      components/posts-list.php
  11. +5
    -0
      components/searchform.php
  12. +1912
    -0
      css/bootstrap-grid.css
  13. +1
    -0
      css/bootstrap-grid.css.map
  14. +7
    -0
      css/bootstrap-grid.min.css
  15. +1
    -0
      css/bootstrap-grid.min.css.map
  16. +330
    -0
      css/bootstrap-reboot.css
  17. +1
    -0
      css/bootstrap-reboot.css.map
  18. +8
    -0
      css/bootstrap-reboot.min.css
  19. +1
    -0
      css/bootstrap-reboot.min.css.map
  20. +8981
    -0
      css/bootstrap.css
  21. +1
    -0
      css/bootstrap.css.map
  22. +7
    -0
      css/bootstrap.min.css
  23. +1
    -0
      css/bootstrap.min.css.map
  24. +2501
    -0
      css/fork-awesome.css
  25. +12
    -0
      css/fork-awesome.min.css
  26. +1
    -0
      css/fork-awesome.min.css.map
  27. +360
    -0
      example.html
  28. BIN
      fonts/OpenSans-Bold-webfont.woff
  29. BIN
      fonts/OpenSans-BoldItalic-webfont.woff
  30. BIN
      fonts/OpenSans-ExtraBold-webfont.woff
  31. BIN
      fonts/OpenSans-ExtraBoldItalic-webfont.woff
  32. BIN
      fonts/OpenSans-Italic-webfont.woff
  33. BIN
      fonts/OpenSans-Light-webfont.woff
  34. BIN
      fonts/OpenSans-LightItalic-webfont.woff
  35. BIN
      fonts/OpenSans-Regular-webfont.woff
  36. BIN
      fonts/OpenSans-Semibold-webfont.woff
  37. BIN
      fonts/OpenSans-SemiboldItalic-webfont.woff
  38. BIN
      fonts/forkawesome-webfont.eot
  39. +2760
    -0
      fonts/forkawesome-webfont.svg
  40. BIN
      fonts/forkawesome-webfont.ttf
  41. BIN
      fonts/forkawesome-webfont.woff
  42. BIN
      fonts/forkawesome-webfont.woff2
  43. BIN
      fonts/teko-bold-webfont.woff
  44. BIN
      fonts/teko-light-webfont.woff
  45. BIN
      fonts/teko-medium-webfont.woff
  46. BIN
      fonts/teko-regular-webfont.woff
  47. BIN
      fonts/teko-semibold-webfont.woff
  48. +10
    -0
      footer.php
  49. +104
    -0
      functions.php
  50. +34
    -0
      header.php
  51. BIN
      img/avatar.png
  52. BIN
      img/background.png
  53. BIN
      img/brand-icon.png
  54. BIN
      img/default-preview.png
  55. BIN
      img/logo.png
  56. BIN
      img/wmap.png
  57. +360
    -0
      index.html
  58. +10
    -0
      index.php
  59. +6444
    -0
      js/bootstrap.bundle.js
  60. +1
    -0
      js/bootstrap.bundle.js.map
  61. +7
    -0
      js/bootstrap.bundle.min.js
  62. +1
    -0
      js/bootstrap.bundle.min.js.map
  63. +3927
    -0
      js/bootstrap.js
  64. +1
    -0
      js/bootstrap.js.map
  65. +7
    -0
      js/bootstrap.min.js
  66. +1
    -0
      js/bootstrap.min.js.map
  67. +5
    -0
      js/jquery.min.js
  68. +17
    -0
      page.php
  69. +199
    -0
      scss/_blog.scss
  70. +188
    -0
      scss/_buttons.scss
  71. +235
    -0
      scss/_cards.scss
  72. +137
    -0
      scss/_definitions.scss
  73. +155
    -0
      scss/_font-face.scss
  74. +123
    -0
      scss/_global.scss
  75. +18
    -0
      scss/_palette.scss
  76. +289
    -0
      scss/_typography.scss
  77. +28
    -0
      scss/style.scss
  78. +8
    -0
      search.php
  79. +3
    -0
      sidebar.php
  80. +49
    -0
      single.php
  81. +1484
    -0
      style.css
  82. +16
    -0
      tag.php

+ 8
- 0
archive.php View File

@ -0,0 +1,8 @@
<?php get_header(); ?> <!-- ouvrir header,php -->
<main class="col-md-8">
<h1 class="page-title"><?php echo get_the_archive_title(); ?></h1>
<?php include(TEMPLATEPATH . '/components/posts-list.php'); ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

+ 17
- 0
category.php View File

@ -0,0 +1,17 @@
<?php get_header(); ?> <!-- ouvrir header,php -->
<main class="col-md-8">
<h1 class="page-title page-title-flex">
<span><i class="fa fa-fw fa-folder"></i> <?php echo single_cat_title(); ?></span>
<?php
$category = get_category( get_query_var( 'cat' ) );
$cat_id = $category->cat_ID;
echo '<a href="' . get_category_link( $cat_id ) . 'feed/" title="RSS de la categorie" />' . '<i class="fa fa-fw fa-rss"></i></a>' ;
?>
</h1>
<?php include(TEMPLATEPATH . '/components/posts-list.php'); ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

+ 130
- 0
comments.php View File

@ -0,0 +1,130 @@
<?php // Do not delete these lines
if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) die ('Ne pas t&eacute;l&eacute;charger cette page directement, merci !');
if (!empty($post->post_password)) { // if there's a password
if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { // and it doesn't match the cookie
?>
<h2><?php _e('Prot&eacute;g&eacute; par mot de passe'); ?></h2>
<p><?php _e('Entrer le mot de passe pour voir les commentaires'); ?></p>
<?php return;
}
}
/* This variable is for alternating comment background */
$oddcomment = 'alt';
?>
<!-- You can start editing here. -->
<section class="comment-list">
<?php if ($comments) : ?>
<h1 class="page-title" id="comments"><i class="fa fa-fw fa-comments"></i> <?php comments_number('Pas de commentaire', 'Un commentaire', '% commentaires' );?></h1>
<?php foreach ($comments as $comment) : ?>
<article class="card card-comment <?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
<aside class="media card-meta">
<div class="media-left"> <? echo get_avatar( get_the_author_meta('user_email'), $size = '50'); ?></div>
<div class="media-body"><author class="media-heading">Post&eacute; par <?php comment_author_link() ?></author><time> Le <?php comment_date('j F, Y') ?> <?php _e('&agrave;');?> <?php comment_time() ?> </time></div>
</aside>
<?php if ($comment->comment_approved == '0') : ?>
<div class="alert alert-warning"><?php _e('Votre commentaire est en cours de mod&eacute;ration'); ?></div>
<?php endif; ?>
<div class="comment-body">
<?php comment_text() ?>
<p class="mb-0 align-right"><?php edit_comment_link('<i class="fa fa-fw fa-pencil"></i>','',''); ?></p>
</div>
</article>
<?php /* Changes every other comment to a different class */
if ('alt' == $oddcomment) $oddcomment = '';
else $oddcomment = 'alt';
?>
<?php endforeach; /* end for each comment */ ?>
<?php else : // this is displayed if there are no comments so far ?>
<?php if ('open' == $post->comment_status) : ?>
<!-- If comments are open, but there are no comments. -->
<?php else : // comments are closed ?>
<!-- If comments are closed. -->
<p class="nocomments alert alert-danger">Les commentaires sont fermŽs !</p>
<?php endif; ?>
<?php endif; ?>
<?php if ('open' == $post->comment_status) : ?>
<h1 id="respond" class="page-title"><i class="fa fa-fw fa-plus"></i> Laissez un commentaire</h1>
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">connect&eacute;</a> pour laisser un commentaire.</p>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( $user_ID ) : ?>
<div class="alert alert-info alert-flex" role="alert">
<p class="mb-0"><i class="fa fa-info fa-fw" ></i> Connect&eacute; en tant que <a class="alert-link" href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>.</p>
<p class="mb-0 align-right"><a class="alert-link" href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="D&eacute;connect&eacute; de ce compte"><i class="fa fa-fw fa-power-off"></i></a></p>
</div>
<?php else : ?>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fa fa-fw fa-user"></i></span>
</div>
<input type="text" class="form-control" name="author" id="author" placeholder="Nom <?php if ($req) echo "(requis)"; ?>" aria-label="Username" value="<?php echo $comment_author; ?>" size="40" tabindex="1" />
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fa fa-fw fa-envelope"></i></span>
</div>
<input type="text" class="form-control" name="email" id="email" placeholder="Courriel (ne sera pas publi&eacute;) <?php if ($req) echo "(requis)"; ?>" value="<?php echo $comment_author_email; ?>" size="40" tabindex="2" />
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fa fa-fw fa-globe"></i></span>
</div>
<input type="text" class="form-control" name="url" id="url" placeholder="Site Web" value="<?php echo $comment_author_url; ?>" size="40" tabindex="2" />
</div>
<?php endif; ?>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-fw fa-comment"></i></span>
</div>
<textarea class="form-control" name="comment" id="comment" aria-label="Contenu du commentaire" placeholder="Contenu du commentaire" tabindex="4"></textarea>
</div>
<p class="comment-info">Ce site utilise Akismet pour réduire les contenus indésirables (spam, etc). <a href="https://akismet.com/privacy/">En savoir plus sur la façon dont les données de vos commentaires sont traitées.</a></p>
<p class="align-right"><input name="submit" class="btn btn-primary" type="submit" id="submit" tabindex="5" value="Envoyer" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; // If registration required and not logged in ?>
</section>
<?php endif; // if you delete this the sky will fall on your head ?>

+ 40
- 0
components/featured.php View File

@ -0,0 +1,40 @@
<div id="featured-articles" class="preview-container">
<?php
query_posts(array(
'post_type' => 'post',
'tax_query' => array(
array(
'taxonomy' => 'niveau',
'terms' => 'featured',
'field' => 'slug',
)
),
'orderby' => 'date',
'post_count' => '2',
'order' => 'DESC'
));
if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<article class="preview">
<a href="<?php the_permalink(); ?>" class="preview-link">
<div class="preview-item" style="background-image:url('<?php echo get_the_post_thumbnail_url(); ?>');">
<div class="preview-overlay">
<div class="preview-categories">
<?php $category = get_the_category();
echo"<span class='badge badge-category'>" . $category[0]->cat_name . "</span>"; ?>
</div>
<h2 class="preview-title"><?php the_title();/*3*/ ?></h2>
</div>
</div>
</a>
</article>
<?php endwhile; ?> <?php wp_reset_query(); /*4*/ ?>
</div>

+ 3
- 0
components/logo.php View File

@ -0,0 +1,3 @@
<section class="container-fluid">
<h1><a href="<?php echo site_url(); ?>"><img src="<?php echo get_template_directory_uri();?>/img/logo.png"></a></h1>
</section>

+ 19
- 0
components/navbar-category.php View File

@ -0,0 +1,19 @@
<nav class="navbar navbar-expand-lg navbar-dark bg-grey" id="navbar-category">
<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 nav-justified w-100">
<?php
$categories = get_categories( array(
'orderby' => 'name',
'order' => 'ASC'
) );
foreach( $categories as $category ) {
echo '<li class="nav-item"><a class="nav-link" href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
}?>
</ul>
</div>
</nav>

+ 24
- 0
components/navbar-footer.php View File

@ -0,0 +1,24 @@
<footer class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#SecondNavbar" aria-controls="SecondNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="SecondNavbar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item inactive">
CC BY-SA 2013-<?php print(date(Y)); ?> <strong><?php bloginfo('name'); ?></strong>
</li>
</ul>
<ul class="navbar-nav my-2 my-lg-0">
<li class="nav-item active">
<a class="nav-link" href="feed:<?php bloginfo('rss2_url'); ?>"><i class="fa fa-fw fa-rss"></i></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="https://twitter.com/qdouze_blog/"><i class="fa fa-fw fa-twitter"></i></a>
</li>
</ul>
</div>
</div>
</footer>

+ 28
- 0
components/navbar-pages.php View File

@ -0,0 +1,28 @@
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="<?php echo site_url(); ?>" id="" ><img src="<?php echo get_template_directory_uri();?>/img/brand-icon.png" alt="Quarante-Douze"></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">
<?php $pages = get_pages();
if ( $pages ) {
foreach( $pages as $page ) {
echo '<li class="nav-item">';
echo '<a class="nav-link" href="' . get_page_link( $page->ID ) . '">'. $page->post_title .'</a>';
echo '</li>';
}
}?>
</ul>
<ul class="navbar-nav my-2 my-lg-0">
<li class="form">
<?php include(TEMPLATEPATH . '/components/searchform.php'); ?>
</li>
</ul>
</div>
</div>
</nav>

+ 15
- 0
components/opengraph.php View File

@ -0,0 +1,15 @@
<?php if ( is_single() ) { ?>
<?php if(!has_post_thumbnail( $post->ID )) {
$image = get_template_directory_uri() . "/img/default-preview.png";
} else {
$image = get_the_post_thumbnail_url();
}
?>
<meta property='og:url' content='<?php echo get_permalink(); ?>'/>
<meta property='og:type' content='article'/>
<meta property='og:title' content='<?php wp_title(''); ?>'/>
<meta property='og:site_name' content='<?php bloginfo('name'); ?>'/>
<meta property='og:image' content='<?php echo $image ?>'/>
<meta property='og:description' content='<?php the_excerpt(); ?>'/>
<?php } ?>

+ 25
- 0
components/posts-list.php View File

@ -0,0 +1,25 @@
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<article class="list-article" id="post-<?php the_ID(); ?>">
<aside class="list-article-thumbnail">
<?php the_post_thumbnail( ); ?>
</aside>
<div class="list-article-main">
<h2 class="list-article-title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>""><?php the_title(); ?></a></h2>
<div class="list-article-metadata">
<p class="categories">
<?php $category = get_the_category();
echo"<a href= '" . esc_url( get_category_link( $category[0]->term_id ) ) . "' class='badge badge-blue badge-category'>" . $category[0]->cat_name . "</a>"; ?>
</p>
<p class="author-time"><?php the_time('j F Y') ?> par <?php the_author() ?></p>
</div>
<div class="list-article-content"><?php the_excerpt(); ?></div>
</div>
</article>
<?php endwhile; ?>
<div class="navigation">
<?php the_posts_pagination(); ?>
</div>
<?php endif; ?>

+ 5
- 0
components/searchform.php View File

@ -0,0 +1,5 @@
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
<div>
<input class="form-control" type="search" placeholder="Chercher" aria-label="Chercher" value="<?php the_search_query(); ?>" name="s" id="s" />
</div>
</form>

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


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


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


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


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

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

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


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

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

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


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


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


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


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


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


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


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


+ 360
- 0
example.html View File

@ -0,0 +1,360 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Blue Sky, by Kazhnuz</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="style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper" class="card">
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#" id="" ><img src="img/brand-icon.png" alt="Quarante-Douze"></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">
<a class="nav-link" href="#">À propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="container-fluid">
<h1><a href="https://quarante-douze.net/"><img src="img/logo.png"></a></h1>
</section>
<nav class="navbar navbar-expand-lg navbar-dark bg-grey" id="navbar-category">
<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 nav-justified w-100">
<li class="nav-item active">
<a class="nav-link" href="#">La vie du blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contenus Culturels</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Fandoms</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tribunes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Libreries</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Internet et Numérique</a>
</li>
</ul>
</div>
</nav>
</header>
<section class="container-fluid">
<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>
<section class="article-content">
<h1 class="card-title">Nom de l'article :</h1>
<div><em>test</em></div>
<hr />
<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>
</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-darker">
<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>
<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>&nbsp; <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>&nbsp; <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>&nbsp; <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>&nbsp; <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="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="article-content">
<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="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="article-content">
<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-primary">
<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-primary">
<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>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#SecondNavbar" aria-controls="SecondNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="SecondNavbar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item inactive">
CC BY-SA 2018 <strong>Quarante-Douze</strong>
</li>
</ul>
<ul class="navbar-nav my-2 my-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-fw fa-rss"></i></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-fw fa-twitter"></i></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-fw fa-facebook"></i></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-fw fa-diaspora"></i></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-fw fa-mastodon"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- 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>

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


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


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


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


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


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


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


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


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


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


BIN
fonts/forkawesome-webfont.eot View File


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


BIN
fonts/forkawesome-webfont.ttf View File


BIN
fonts/forkawesome-webfont.woff View File


BIN
fonts/forkawesome-webfont.woff2 View File


BIN
fonts/teko-bold-webfont.woff View File


BIN
fonts/teko-light-webfont.woff View File


BIN
fonts/teko-medium-webfont.woff View File


BIN
fonts/teko-regular-webfont.woff View File


BIN
fonts/teko-semibold-webfont.woff View File


+ 10
- 0
footer.php View File

@ -0,0 +1,10 @@
</div>
</section>
<?php include(TEMPLATEPATH . '/components/navbar-footer.php'); ?>
</div>
<?php wp_footer(); ?>
<script src="<?php echo get_template_directory_uri();?>/js/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri();?>/js/bootstrap.min.js"></script>
</body>
</html>

+ 104
- 0
functions.php View File

@ -0,0 +1,104 @@
<?php
/* functions.php
*
* All the function of Quarante-Douze
*
*/
/* 1. Sidebar support */
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<section id="%1$s" class="widget %2$s card card-secondary">',
'after_widget' => '</section>',
'before_title' => '<div class="section card-header"><h1>',
'after_title' => '</h1></div>',
));
/* 2. Niveau support (for featured posts) */
register_taxonomy(
'niveau',
'post',
array(
'label' => 'Niveau',
'labels' => array(
'name' => 'Niveaux',
'singular_name' => 'Niveaux',
'all_items' => 'Tous les niveaux',
'edit_item' => 'Éditer le niveau',
'view_item' => 'Voir le niveau',
'update_item' => 'Mettre à jour le niveau',
'add_new_item' => 'Ajouter un niveau',
'new_item_name' => 'Nouveau niveau',
'search_items' => 'Rechercher parmi les niveaux',
'popular_items' => 'Niveaux les plus utilisés'
),
'hierarchical' => false
)
);
register_taxonomy_for_object_type( 'niveau', 'post' );
/* 3. Excerpt and thumbnail support */
function wpqdouze_post_supports() {
add_post_type_support( 'post', 'excerpt');
}
add_action( 'init', 'wpqdouze_post_supports' );
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 825, 510, true );
/* 4. Social Network */
function mypost_social_sharing_buttons($content) {
// Fork of mypost_social_sharing_buttons
// You can find the original at the following url:
// https://mypost_.com/how-to-create-social-sharing-button-without-any-plugin-and-script-loading-wordpress-speed-optimization-goal/
global $post;
if(is_singular() || is_home()){
// Get current page URL
$mypost_URL = urlencode(get_permalink());
// Get current page title
$mypost_Title = htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')), ENT_COMPAT, 'UTF-8');
// $mypost_Title = str_replace( ' ', '%20', get_the_title());
// Get Post Thumbnail for pinterest
$mypost_Thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
// Construct sharing URL without using any script
$twitterURL = 'https://twitter.com/intent/tweet?text='.$mypost_Title.'&amp;url='.$mypost_URL.'&amp;via=mypost_';
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$mypost_URL;
$bufferURL = 'https://bufferapp.com/add?url='.$mypost_URL.'&amp;text='.$mypost_Title;
$whatsappURL = 'whatsapp://send?text='.$mypost_Title . ' ' . $mypost_URL;
$linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$mypost_URL.'&amp;title='.$mypost_Title;
$diasporaURL = 'http://sharetodiaspora.github.io/?title=' . $mypost_Title . '&url=' . $mypost_URL;
// Based on popular demand added Pinterest too
$pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$mypost_URL.'&amp;media='.$mypost_Thumbnail[0].'&amp;description='.$mypost_Title;
// Add sharing button at the end of page/page content
$content .= '<!-- based on crunchify social sharing. Get your copy here: http://crunchify.me/1VIxAsz -->';
$content .= '<div class="reagir share-buttons">';
$content .= '<a class="btn btn-twitter" href="'. $twitterURL .'" target="_blank"><i alt="twitter" class="fa fa-fw fa-twitter"></i></a>';
$content .= '<a class="btn btn-facebook" href="'.$facebookURL.'" target="_blank"><i alt="facebook" class="fa fa-fw fa-facebook"></i></a>';
$content .= '<a title="Share to Diaspora*" class="btn btn-social btn-diaspora" href="'.$diasporaURL.'" target="_blank"><i class="fa fa-fw fa-diaspora"></i></a>';
$content .= '<a class="btn btn-whatsapp" href="'.$whatsappURL.'" target="_blank"><i alt="whatsapp" class="fa fa-fw fa-whatsapp"></i></a>';
// $content .= '<a class="btn btn-buffer" href="'.$bufferURL.'" target="_blank"><i alt="buffer" class="fa fa-fw fa-buffer"></i></a>';
$content .= '<a class="btn btn-linkedin" href="'.$linkedInURL.'" target="_blank"><i alt="linkedin" class="fa fa-fw fa-linkedin"></i></a>';
$content .= '<a class="btn btn-pinterest" href="'.$pinterestURL.'" data-pin-custom="true" target="_blank"><i alt="Pin It" class="fa fa-fw fa-pinterest"></i></a>';
$content .= '</div>';
return $content;
}else{
// if not a post/page then don't include sharing button
return $content;
}
};
add_filter( 'the_content', 'mypost_social_sharing_buttons');

+ 34
- 0
header.php View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php bloginfo('name'); ?><?php wp_title(' - '); ?></title>
<meta name="description" content="<?php bloginfo('name'); echo " - "; bloginfo('description');?>" />
<?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php endif; ?>
<?php wp_head(); ?>
<?php include(TEMPLATEPATH . '/components/opengraph.php'); ?>
<!-- mon icon -->
<link rel="shortcut icon" href="img/favicon.png">
<!-- framework utilisés -->
<link href="<?php echo get_template_directory_uri() . "/css/bootstrap.min.css"; ?>" rel="stylesheet"/>
<link href="<?php echo get_template_directory_uri() . "/css/fork-awesome.min.css"; ?>" rel="stylesheet"/>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet"/>
</head>
<body>
<div id="wrapper" class="card">
<header>
<?php include(TEMPLATEPATH . '/components/navbar-pages.php'); ?>
<?php include(TEMPLATEPATH . '/components/logo.php'); ?>
<?php include(TEMPLATEPATH . '/components/navbar-category.php'); ?>
</header>
<section class="container-fluid">
<div class="row">

BIN
img/avatar.png View File

Before After
Width: 132  |  Height: 132  |  Size: 1.2 KiB

BIN
img/background.png View File

Before After
Width: 1068  |  Height: 672  |  Size: 15 KiB

BIN
img/brand-icon.png View File

Before After
Width: 32  |  Height: 32  |  Size: 251 B

BIN
img/default-preview.png View File

Before After
Width: 1365  |  Height: 768  |  Size: 22 KiB

BIN
img/logo.png View File

Before After
Width: 908  |  Height: 169  |  Size: 100 KiB

BIN
img/wmap.png View File

Before After
Width: 480  |  Height: 272  |  Size: 27 KiB

+ 360
- 0
index.html View File

@ -0,0 +1,360 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Blue Sky, by Kazhnuz</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="style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper" class="card">
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#" id="" ><img src="img/brand-icon.png" alt="Quarante-Douze"></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">
<a class="nav-link" href="#">À propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="container-fluid">
<h1><a href="https://quarante-douze.net/"><img src="img/logo.png"></a></h1>
</section>
<nav class="navbar navbar-expand-lg navbar-dark bg-grey" id="navbar-category">
<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 nav-justified w-100">
<li class="nav-item active">
<a class="nav-link" href="#">La vie du blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contenus Culturels</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Fandoms</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tribunes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Libreries</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Internet et Numérique</a>
</li>
</ul>
</div>
</nav>
</header>
<section class="container-fluid">
<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>
<section class="article-content">
<h1 class="card-title">Nom de l'article :</h1>
<div><em>test</em></div>
<hr />
<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>
</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-darker">
<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>
<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>