meta: use as a base the quarante-douze theme

This commit is contained in:
Kazhnuz Klappsthul 2020-12-30 19:04:58 +01:00
parent 02a95de38b
commit 7e8db4267c
82 changed files with 31060 additions and 0 deletions

8
archive.php Normal file
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
category.php Normal file
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
comments.php Normal file
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
components/featured.php Normal file
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
components/logo.php Normal file
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>

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>

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>

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
components/opengraph.php Normal file
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
components/posts-list.php Normal file
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; ?>

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
css/bootstrap-grid.css vendored Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

7
css/bootstrap-grid.min.css vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

330
css/bootstrap-reboot.css vendored Normal file
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 */

File diff suppressed because one or more lines are too long

8
css/bootstrap-reboot.min.css vendored Normal file
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 */

File diff suppressed because one or more lines are too long

8981
css/bootstrap.css vendored Normal file

File diff suppressed because it is too large Load Diff

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

360
example.html Normal file
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>

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 455 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

10
footer.php Normal file
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
functions.php Normal file
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
header.php Normal file
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 Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
img/background.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
img/brand-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 251 B

BIN
img/default-preview.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
img/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

BIN
img/wmap.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

360
index.html Normal file
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>

10
index.php Normal file
View File

@ -0,0 +1,10 @@
<?php get_header(); ?>
<main class="col-md-8">
<h1 class="page-title"><i class="fa fa-fw fa-star"></i> À la une</h1>
<?php include(TEMPLATEPATH . '/components/featured.php'); ?>
<h1 class="page-title"><i class="fa fa-fw fa-clock-o"></i> Articles récents</h1>
<?php include(TEMPLATEPATH . '/components/posts-list.php'); ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

6444
js/bootstrap.bundle.js vendored Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

7
js/bootstrap.bundle.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

3927
js/bootstrap.js vendored Normal file

File diff suppressed because it is too large Load Diff

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

File diff suppressed because one or more lines are too long

1
js/bootstrap.min.js.map Normal file

File diff suppressed because one or more lines are too long

5
js/jquery.min.js vendored Normal file

File diff suppressed because one or more lines are too long

17
page.php Normal file
View File

@ -0,0 +1,17 @@
<?php get_header(); ?> <!-- ouvrir header,php -->
<main class="col-md-8">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<article class="article-content" id="post-<?php the_ID(); ?>">
<h1 class="page-title"><?php the_title(); ?></h1>
<div class="article-body">
<?php the_content(); ?>
</div>
</article>
<?php endwhile; ?>
<?php endif; ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

199
scss/_blog.scss Normal file
View File

@ -0,0 +1,199 @@
/*
* 6 - Blog Elements ( _blog.scss )
*
* All elements that are used for a blog (article previews, etc).
* "Commons" elements will be in other parts
*/
/* 1.1 - Comment area */
.comment {
margin-bottom: 1.333em;
}
/* 2.1 - Previews */
.preview-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
margin-bottom:1em;
padding: 0;
width:100%;
.preview {
width: 48%;
height:220px;
}
}
.preview {
margin:auto;
margin-bottom: 1em;
&-link {
display:block;
width:100%;
height:100%;
padding:0;
margin:0;
text-decoration:none!important;
&:hover .preview-item {
background-size: 133% auto;
background-position: center center;
}
}
&-item {
height: 100%;
width: 100%;
background-size: 100% auto;
background-position: center center;
transition: background-size .5s;
}
}
.preview-overlay {
height: 100%;
width: 100%;
opacity: 1;
padding: 0;
transition: background .5s;
color: #FFF;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
color: white!important;
background: linear-gradient(to top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 60%);
&:hover {
opacity: 1;
h1, h2 {
opacity: 1;
color: #FFF;
}
.badge {
background-color: lighten($color-category, 15%);
}
}
.badge {
background-color: $color-category;
}
h1, h2 {
max-width:100%;
margin:auto;
margin-bottom:0px;
text-align:left;
display:block;
font-size:2em;
transition: opacity .5s;
text-shadow: 1px 1px 0px rgba(0,0,0,1);
opacity: 0.6;
padding: 0.25em;
color: #FFF;
}
}
.preview-item {
.preview-content {
height: 100%;
width: 100%;
background-size: 100% auto;
background-position: center center;
transition: background-size .5s;
}
&:hover .preview-content {
background-size: 133% auto;
background-position: center center;
}
}
.preview-categories {
padding: 0.5em;
.badge {
font-size: 1em;
text-shadow: none;
}
}
/* 2.1.1 - Article list */
.list-article {
display: flex;
flex-direction: row;
&-thumbnail {
display: block;
padding-top: 1.5em;
max-width: 200px;
img {
max-width: 100%;
height: auto;
}
}
&-main {
width: 100%;
padding-left:1em;
}
&-title {
font-family: Teko;
font-weight: 600;
margin-bottom: 0em;
a {
color: #444;
}
}
&-metadata {
display:flex;
justify-content: space-between;
}
&-content {
font-style: italic;
}
}
.navigation {
.pagination {
padding-top: 2em;
display:flex;
flex-direction: row;
justify-content: flex-end;
}
}
/* 3. Article mixts */
.article-taxonomies {
display:flex;
flex-direction: row;
justify-content: space-between;
.badge:not(:last-child) {
margin-right:0.5em;
}
}
.wp-caption {
img {
max-width: 100%;
height: auto;
}
&-text {
font-size: 0.9em;
font-style: italic;
}
&.aligncenter {
margin: auto;
}
}

188
scss/_buttons.scss Normal file
View File

@ -0,0 +1,188 @@
/*
* 5 - Buttons ( _buttons.scss )
*
* This part of the (s)css handle the style of buttons-like and badges.
*
*/
@mixin button-lighten($background-color, $text-color) {
background-color: lighten($background-color, 15%);
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);
}
}
}
.btn {
@include borders();
@include border-radius();
box-shadow: $large-shadow, $inset-shadow;
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
@include button-color($color-light, #111);
font-weight: 600;
&:hover {
box-shadow: $narrow-shadow, $inset-shadow;
@include borders();
text-decoration: none;
}
&:active {
box-shadow: $inset-shadow-inverted;
@include borders();
text-decoration: none;
}
}
.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); }
}
.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 {
box-shadow: $inset-shadow;
}
.btn-group .btn:active, .btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active,
.show > .btn.dropdown-toggle {
box-shadow: $inset-shadow-inverted!important;
@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 {
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
outline: none;
}
.page-numbers {
@extend .btn;
@extend .btn-grey;
padding: 0.5em 1em 0.5em 1em;
margin-top: 0.1em;
color: #FFF;
&.dots {
border: none;
background-color: transparent!important;
box-shadow: none;
color: #444;
text-shadow: none;
}
}
/* 5.1 - Réseaux sociaux */
.share-buttons {
margin:15px;
}
.reagir {
text-align:right;
.btn {
margin-right:0.5em;
}
}
.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);}
&-whatsapp {@include button-color(#43d854, #FFF);}
&-linkedin {@include button-color(#0074A1, #FFF);}
&-buffer {@include button-color(#444, #FFF);}
&-pinterest {@include button-color(#bd081c, #FFF);}
}
/* 5.2 - Badges */
@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);
}
}
}
.badge {
@include borders();
@include border-radius();
text-decoration: none!important;
&-pill {
border-radius: 10rem;
}
}
.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); }
&-category { @include badge-color($color-category, #FFF); }
&-tag { @include badge-color($color-tag, #FFF); }
}

235
scss/_cards.scss Normal file
View File

@ -0,0 +1,235 @@
/*
* 4 - Cards( _cards.scss )
*
* This part of the (s)css handle the style of cards-like elements,
* elements that are supposed to handle contents inside a box.
*
* Elements like alerts, breadcrumb are considered as "card-like".
*
*/
@mixin card-color($background-color, $text-color) {
& > .card-header { background-color: $background-color; color:$text-color; }
}
.card {
@include border-radius();
box-shadow: $large-shadow;
border: none;
margin-bottom:1.2em;
}
.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); }
}
.card-shadow {
box-shadow: $large-shadow, $inset-shadow;
}
/* 4.1 - 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-family: 'OpenSans';
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;
}
}
/* 4.2 - Cards meta */
.card-meta {
@include border-radius();
padding:1em;
box-shadow: $large-shadow, $inset-shadow;
border: 0;
background-color:#eeeeec;
margin-bottom:1.2em;
@include li-no-margin();
&.media {
-ms-flex-align: center !important;
align-items: center !important;
}
.media-left .media-object {
height: 64px;
width: 64px;
border-radius: 100%;
margin-right:1em;
}
img.avatar {
border-radius: 100%;
margin-right:1em;
}
author {
display:block;
font-weight:600;
}
time {
display:block;
font-style:italic;
}
@include li-no-margin();
}
/* 4.3 - Cards list-groups */
section.widget {
ul {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
li {
list-style: none;
padding: 0;
margin: 0;
&.recentcomments {
position: relative;
display: block;
padding: .75rem 1.25rem;
margin-bottom: -1px;
background-color: #fff;
border: 0px solid rgba(0,0,0,.125);
list-style: none;
}
a {
position: relative;
display: block;
padding: .75rem 1.25rem;
margin-bottom: -1px;
background-color: #fff;
border: 0px solid rgba(0,0,0,.125);
list-style: none;
&:hover {
background-color: #eee;
text-decoration: none;
}
}
}
}
}
.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);
}
/* 4.4 - Cards list-groups */
@mixin alert-color($background-color) {
background-color: lighten($background-color, 35%);
color: darken($background-color, 80%);
}
.alert {
@include borders();
@include border-radius();
color:rgba(0, 0, 0, 0.7);
box-shadow: $large-shadow;
&-flex {
display: flex;
flex-direction: row;
justify-content: space-between;
& > p {
padding-bottom: 0;
}
}
}
.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); }
}
.alert a, .alert-link {
color:rgba(0, 0, 0, 0.7);
font-weight:bold;
}
/* 4.5 - Breadcrumbs */
.breadcrumb {
@include border-radius();
box-shadow: $large-shadow, $inset-shadow;
border: 0;
background-color:#eeeeec;
margin-bottom:1.2em;
@include li-no-margin();
}

137
scss/_definitions.scss Normal file
View File

@ -0,0 +1,137 @@
/*
* 1 - Definitions
*
* This part of the (s)css contain every definitions, mixins,
* and differents unilities that can be used everywhere in the code.
*
*/
$large-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
$narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0);
$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: 0px;
$border-size: 1px;
$color-primary: $color-red;
$color-secondary: $color-dark;
$color-link: $color-blue;
$color-selection: $color-blue;
$color-mark: $color-yellow;
$color-category: $color-blue;
$color-tag: $color-grey;
$color-font: #444;
@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;
}
@mixin li-no-margin() {
li {
margin: 0;
}
}
/* 1.1 - Utils */
.no-pills {
list-style:none;
}
.align {
&-center, &center {text-align: center;}
&-left, &left {text-align: left;}
&-right, &right {text-align: right;}
}
/* 1.2 - Background colors */
@mixin background-color($background-color, $text-color) {
background-color: $background-color!important;
color: $text-color;
}
.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); }
}
/* 1.3 - Screen Reader */
@media screen {
.screen-reader-text {
display: none;
}
}
/* 2. Forms elements */
select {
@include borders();
@include border-radius();
display: block;
width: 100%;
height: calc(2.25rem + 2px);
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5em;
color: $color-font;
background-color: #fff;
background-clip: padding-box;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
margin-top: 0.75rem;
}
.input-group {
border-color: $color-dark;
&-prepend {
background-color: $color-grey;
@include borders();
@include border-radius();
}
&-text {
background-color: transparent;
color: #FFF;
border: none;
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
}
.form-control {
@include borders();
@include border-radius();
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.1);
&:focus {
box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 2px lighten($color-primary, 20%) ;
}
}
}

155
scss/_font-face.scss Normal file
View File

@ -0,0 +1,155 @@
/* 2.1 - Font Face */
/* 2.1.1 - OpenSans */
@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;
}
/* 2.1.2 - Teko */
@font-face {
font-family: 'Teko';
src: url('fonts/teko-light-webfont.woff');
font-weight: 300;
}
@font-face {
font-family: 'Teko';
src: url('fonts/teko-regular-webfont.woff');
font-weight: 400;
}
@font-face {
font-family: 'Teko';
src: url('fonts/teko-medium-webfont.woff');
font-weight: 500;
}
@font-face {
font-family: 'Teko';
src: url('fonts/teko-semibold-webfont.woff');
font-weight: 600;
}
@font-face {
font-family: 'Teko';
src: url('fonts/teko-bold-webfont.woff');
font-weight: 700;
}

123
scss/_global.scss Normal file
View File

@ -0,0 +1,123 @@
/*
* 3 - Global elements ( _global.scss )
*
* This part of the (s)css handle the style of "global" elements
* like the wrapper, the navbars, the header.
*
*/
body {
background: #666 url('img/background.png');
padding: 30px;
background-attachment: fixed;
}
@media (max-width: 767.98px) {
body {
background: none;
padding: 0;
}
}
#wrapper {
background-color: #FFF
}
/* 3.1 - Header */
header {
background: #EEE url('img/background.png');
margin-bottom:30px;
h1 {
border-style:none !important;
font-weight:700;
font-size:1em;
line-height:1em;
padding-bottom:0px;
padding:2.33333em;
margin:auto;
text-align:center;
img {
max-width: 100%;
height: auto;
}
}
}
.navbar {
box-shadow: $large-shadow;
@include borders();
border-left: 0;
border-right: 0;
ul {
padding-bottom:0;
}
@include li-no-margin();
.form-control {
opacity: 0.3;
background-color: rgba(0, 0, 0, 0.3);
color: white;
border: none;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color, opacity .15s ease-in-out, background-color .15s ease-in-out, color .15s ease-in-out;
@include border-radius();
&::placeholder {
color: #FFF;
transition: color .15s ease-in-out;
}
&:hover {
opacity: 0.7;
background-color: #FFF;
color: #444;
&::placeholder {
color: #444;
}
}
&:focus, &:hover:focus {
opacity: 1;
background-color: #FFF;
color: #444;
box-shadow: $inset-shadow-inverted;
&::placeholder {
color: #444;
}
}
}
}
.dropdown-menu {
box-shadow: $narrow-shadow, $inset-shadow;
}
/* 3.2 - Footer */
footer {
margin-top:40px;
}
/* 3.2.1 - Social Network Buttons */
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
}
}
}
}

18
scss/_palette.scss Normal file
View File

@ -0,0 +1,18 @@
$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-skyblue;
$color-success: $color-green;

289
scss/_typography.scss Normal file
View File

@ -0,0 +1,289 @@
/*
* 2 - Typography ( _typography.scss )
*
* This part of the (s)css handle everything related to the typography
* like paragraphs, blockquote, etc.
*
*/
@import 'font-face';
/* 2.2 - Global Typography */
@mixin paragraph() {
padding:0;
padding-bottom:1.5em;
margin: 0;
}
body {
font-family: OpenSans, sans-serif;
text-align: left;
font-size: 4mm;
line-height: 1.5em;
color: $color-font;
font-weight: 400;
}
.night-mode {
color:#BBB;
}
strong {
font-weight: 600;
}
em {
font-style: italic;
}
a {
color: $color-link;
text-decoration:none;
&:hover, &:active {
color: $color-link;
}
}
p {
@include paragraph();
&:last-child {
padding-bottom:0;
}
}
ul {
@include paragraph();
ul {
padding-bottom:0;
}
li {
margin-left:1.5em;
}
}
ol {
@include paragraph();
ol {
padding-bottom:0;
}
li {
margin-left:1.5em;
}
}
::selection { background: $color-selection; color: #fff; }
::-moz-selection { background: $color-selection; color: #fff; }
/* 2.2 - Text Wrapper */
.article-content {
font-size: calc(4mm + 0.4vw);
line-height: 1.5em;
padding: 1em;
font-weight:300;
p, em, p em {
font-weight:300;
}
img {
max-width: 100%;
height: auto;
}
.article-thumbnail {
padding-bottom: 1em;
text-align: center;
img {
max-width: 100%;
height: auto;
}
}
.article-excerpt {
padding: 0.5em 0.5em 0.5em 0.5em;
font-style: italic;
font-size: calc(3.5mm + 0.4vw);
}
.article-author {
margin:0;
padding:0;
.card-meta {
margin:0;
}
}
.bypass-flex-fontsize {
font-size: 4mm;
line-height: 1.5em;
}
}
/* 2.3 - Titles */
@mixin title($size, $height, $top, $bottom, $weight) {
font-size: $size;
line-height: $height;
padding: $top 0 $bottom 0;
font-weight: $weight;
}
h1, h2, h3, h4, h5, h6, h7 {
font-family: 'Teko';
text-align: left;
font-size: 1em;
line-height: 1.5em;
padding:0;
margin:0;
font-weight:400;
&.page-title {
font-family: Teko;
color: $color-primary;
border-bottom: 3px solid $color-primary;
font-weight: 600;
text-shadow: 2px 2px 0px rgba(0,0,0,.2);
box-shadow: 0px 2px 0px rgba(0,0,0,.2);
margin-bottom: 0.5em;
padding: 0;
i {
font-size: 0.55em;
position: relative;
top: -0.175em;
}
&-flex {
display: flex;
flex-direction: row;
justify-content: space-between;
& > span, & > i, & > a {
display: block;
}
& > a {
color: $color-primary;
&:hover, &:focus, &:active {
color: darken($color-primary, 10%);
}
}
}
}
}
h1 {
@include title(2.3333333em, 1em, 0.333333em, 0.6em, 700);
}
h2 {
@include title(2em, 1.5em, 0.333333em, 0.4em, 700);
}
h3 {
@include title(1.5em, 1em, 0em, 1em, 700);
}
h4 {
@include title(1.5em, 1em, 0em, 1em, 600);
}
h5 {
@include title(1.333333em, 1em, 0.1em, 1.133333em, 600);
}
h6 {
@include title(1.1em, 1.4em, 0.1em, 1.2em, 600);
}
/* 2.4 - 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;
}
/* 2.5 - Wells and quotes */
@mixin well() {
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: $color-primary;
}
blockquote, .quote, .well {
@include well();
}
pre, .pre, .well-pre {
@include well();
background-color:#EEE;
overflow-x: scroll;
.night-mode & {
background-color:#222;
border-color:rgba(255,255,255,0.20);
}
}
/* 2.6 - Special styling */
mark {
border-radius: 0.2em;
padding:0 0.2em 0 0.2em;
background-color: lighten($color-mark, 30%);
color: inherit;
}
.night-mode mark {
background-color: $color-primary;
}
.time {
font-style: italic;
text-align: right;
width: 100%;
display: block;
}
/* 2.6.1 - Colored texts */
@mixin text-color($text-color) {
color: $text-color;
}
.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); }
}

28
scss/style.scss Normal file
View File

@ -0,0 +1,28 @@
/*
Theme Name: Dimension Quarante-Douze
Theme URI: https://github.com/Quarante-Douze/qdouze-wordpress-theme
Author: Kazhnuz
Author URI: https://kazhnuz.space
Description: The default theme for Quarante-Douze, my tech blog. Made using bootstrap
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: qdouze-wordpress-theme
This theme is licensed under the GPLv3.
*/
@import 'palette';
@import 'definitions';
@import 'typography';
@import 'global';
@import 'cards';
@import 'buttons';
@import 'blog';

8
search.php Normal file
View File

@ -0,0 +1,8 @@
<?php get_header(); ?> <!-- ouvrir header,php -->
<main class="col-md-8">
<h1 class="page-title"><i class="fa fa-fw fa-search"></i><?php _e('', 'sandbox') ?> Recherche pour le terme « <?php echo get_search_query(); ?> »</h1>
<?php include(TEMPLATEPATH . '/components/posts-list.php'); ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

3
sidebar.php Normal file
View File

@ -0,0 +1,3 @@
<aside class="sidebar col-md-4">
<?php dynamic_sidebar(); ?>
</aside>

49
single.php Normal file
View File

@ -0,0 +1,49 @@
<?php get_header(); ?> <!-- ouvrir header,php -->
<main class="col-md-8">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<article class="article-content" id="post-<?php the_ID(); ?>">
<h1 class="page-title"><i class="fa fa-fw fa-file-text"></i> <?php the_title(); ?></h1>
<aside class="article-metadata">
<div class="article-thumbnail" ><?php the_post_thumbnail(); ?></div>
<aside class="card card-darker article-author bypass-flex-fontsize">
<div 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">Écrit par <?php the_author() ?></author><time> Le <?php the_time('l j F Y à H:i') ?> </time></div>
</div>
</aside>
<div class="article-excerpt"><?php the_excerpt(); ?></div>
<section class="article-taxonomies">
<div class="article-categories article-taxonomies-container">
<?php $categories = get_the_category();
foreach( $categories as $category ) {
echo "<a href= '" . esc_url( get_category_link( $category->term_id ) ) . "' class='badge badge-category'>" . $category->cat_name . "</a>";
} ?>
</div>
<div class="article-tags article-taxonomies-container">
<?php $tags = get_the_tags();
if ($tags) {
foreach( $tags as $tag ) {
echo "<a href= '" . esc_url( get_tag_link( $tag->term_id ) ) . "' class='badge badge-tag'>" . $tag->name . "</a>";
}
} ?>
</div>
</section>
<hr />
</aside>
<div class="article-body">
<?php the_content(); ?>
</div>
</article>
<?php comments_template(); ?>
<?php endwhile; ?>
<?php endif; ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

1484
style.css Normal file

File diff suppressed because it is too large Load Diff

16
tag.php Normal file
View File

@ -0,0 +1,16 @@
<?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-tag"></i> <?php echo single_cat_title(); ?></span>
<?php
$tag = get_category( get_query_var( 'tag' ) );
$tag_id = $tag->ID;
echo '<a href="' . get_tag_link( $tag_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(); ?>