meta: use as a base the quarante-douze theme
This commit is contained in:
Kazhnuz
parent
02a95de38b
commit
7e8db4267c
82 changed files with 31060 additions and 0 deletions
8
archive.php
Normal file
8
archive.php
Normal 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
17
category.php
Normal 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
130
comments.php
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
<?php // Do not delete these lines
|
||||
if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) die ('Ne pas télé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égé 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é par <?php comment_author_link() ?></author><time> Le <?php comment_date('j F, Y') ?> <?php _e('à');?> <?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é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 ferms !</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é</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é 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éconnecté 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é) <?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
40
components/featured.php
Normal 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
3
components/logo.php
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<section class="container-fluid">
|
||||
<h1><a href="<?php echo site_url(); ?>"><img src="<?php echo get_template_directory_uri();?>/img/logo.png"></a></h1>
|
||||
</section>
|
||||
19
components/navbar-category.php
Normal file
19
components/navbar-category.php
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<nav class="navbar navbar-expand-lg navbar-dark bg-grey" id="navbar-category">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav nav-justified w-100">
|
||||
<?php
|
||||
$categories = get_categories( array(
|
||||
'orderby' => 'name',
|
||||
'order' => 'ASC'
|
||||
) );
|
||||
|
||||
foreach( $categories as $category ) {
|
||||
echo '<li class="nav-item"><a class="nav-link" href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
|
||||
}?>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
24
components/navbar-footer.php
Normal file
24
components/navbar-footer.php
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<footer class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container-fluid">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#SecondNavbar" aria-controls="SecondNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="SecondNavbar">
|
||||
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
|
||||
<li class="nav-item inactive">
|
||||
CC BY-SA 2013-<?php print(date(Y)); ?> <strong><?php bloginfo('name'); ?></strong>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="navbar-nav my-2 my-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="feed:<?php bloginfo('rss2_url'); ?>"><i class="fa fa-fw fa-rss"></i></a>
|
||||
</li>
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="https://twitter.com/qdouze_blog/"><i class="fa fa-fw fa-twitter"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
28
components/navbar-pages.php
Normal file
28
components/navbar-pages.php
Normal 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
15
components/opengraph.php
Normal 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
25
components/posts-list.php
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
|
||||
<article class="list-article" id="post-<?php the_ID(); ?>">
|
||||
<aside class="list-article-thumbnail">
|
||||
<?php the_post_thumbnail( ); ?>
|
||||
</aside>
|
||||
|
||||
<div class="list-article-main">
|
||||
<h2 class="list-article-title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>""><?php the_title(); ?></a></h2>
|
||||
<div class="list-article-metadata">
|
||||
<p class="categories">
|
||||
<?php $category = get_the_category();
|
||||
echo"<a href= '" . esc_url( get_category_link( $category[0]->term_id ) ) . "' class='badge badge-blue badge-category'>" . $category[0]->cat_name . "</a>"; ?>
|
||||
</p>
|
||||
<p class="author-time"><?php the_time('j F Y') ?> par <?php the_author() ?></p>
|
||||
</div>
|
||||
<div class="list-article-content"><?php the_excerpt(); ?></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<?php endwhile; ?>
|
||||
|
||||
<div class="navigation">
|
||||
<?php the_posts_pagination(); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
5
components/searchform.php
Normal file
5
components/searchform.php
Normal 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
1912
css/bootstrap-grid.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
1
css/bootstrap-grid.css.map
Normal file
1
css/bootstrap-grid.css.map
Normal file
File diff suppressed because one or more lines are too long
7
css/bootstrap-grid.min.css
vendored
Normal file
7
css/bootstrap-grid.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
css/bootstrap-grid.min.css.map
Normal file
1
css/bootstrap-grid.min.css.map
Normal file
File diff suppressed because one or more lines are too long
330
css/bootstrap-reboot.css
vendored
Normal file
330
css/bootstrap-reboot.css
vendored
Normal file
|
|
@ -0,0 +1,330 @@
|
|||
/*!
|
||||
* Bootstrap Reboot v4.1.1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2018 The Bootstrap Authors
|
||||
* Copyright 2011-2018 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||
*/
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.15;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-ms-overflow-style: scrollbar;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
@-ms-viewport {
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #212529;
|
||||
text-align: left;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
[tabindex="-1"]:focus {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
abbr[title],
|
||||
abbr[data-original-title] {
|
||||
text-decoration: underline;
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: .5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -.5em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
-webkit-text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #0056b3;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]):focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
-ms-overflow-style: scrollbar;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
color: #6c757d;
|
||||
text-align: left;
|
||||
caption-side: bottom;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
button,
|
||||
html [type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
-webkit-appearance: listbox;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: .5rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
outline-offset: -2px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
/*# sourceMappingURL=bootstrap-reboot.css.map */
|
||||
1
css/bootstrap-reboot.css.map
Normal file
1
css/bootstrap-reboot.css.map
Normal file
File diff suppressed because one or more lines are too long
8
css/bootstrap-reboot.min.css
vendored
Normal file
8
css/bootstrap-reboot.min.css
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
/*!
|
||||
* Bootstrap Reboot v4.1.1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2018 The Bootstrap Authors
|
||||
* Copyright 2011-2018 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||
*/*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}@-ms-viewport{width:device-width}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg:not(:root){overflow:hidden}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}
|
||||
/*# sourceMappingURL=bootstrap-reboot.min.css.map */
|
||||
1
css/bootstrap-reboot.min.css.map
Normal file
1
css/bootstrap-reboot.min.css.map
Normal file
File diff suppressed because one or more lines are too long
8981
css/bootstrap.css
vendored
Normal file
8981
css/bootstrap.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
1
css/bootstrap.css.map
Normal file
1
css/bootstrap.css.map
Normal file
File diff suppressed because one or more lines are too long
7
css/bootstrap.min.css
vendored
Normal file
7
css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
css/bootstrap.min.css.map
Normal file
1
css/bootstrap.min.css.map
Normal file
File diff suppressed because one or more lines are too long
2501
css/fork-awesome.css
Normal file
2501
css/fork-awesome.css
Normal file
File diff suppressed because it is too large
Load diff
12
css/fork-awesome.min.css
vendored
Normal file
12
css/fork-awesome.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
css/fork-awesome.min.css.map
Normal file
1
css/fork-awesome.min.css.map
Normal file
File diff suppressed because one or more lines are too long
360
example.html
Normal file
360
example.html
Normal 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> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
|
||||
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
|
||||
</aside>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="preview-container">
|
||||
<article class="card card-preview">
|
||||
<a href="#" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
|
||||
<div class="preview-overlay"><h1>Text Exemple</h1></div>
|
||||
</div>
|
||||
</a>
|
||||
<aside class="card-body">
|
||||
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
|
||||
<div class="align-left"><i class="fa fa-tags"></i> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
|
||||
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
|
||||
</aside>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="preview-container">
|
||||
<article class="card card-preview">
|
||||
<a href="#" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
|
||||
<div class="preview-overlay"><h1>Text Exemple</h1></div>
|
||||
</div>
|
||||
</a>
|
||||
<aside class="card-body">
|
||||
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
|
||||
<div class="align-left"><i class="fa fa-tags"></i> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
|
||||
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
|
||||
</aside>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="preview-container">
|
||||
<article class="card card-preview">
|
||||
<a href="#" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
|
||||
<div class="preview-overlay"><h1>Text Exemple</h1></div>
|
||||
</div>
|
||||
</a>
|
||||
<aside class="card-body">
|
||||
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
|
||||
<div class="align-left"><i class="fa fa-tags"></i> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
|
||||
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
|
||||
</aside>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="commentaires">
|
||||
<h3>Commentaires :</h3>
|
||||
|
||||
<article class="comment">
|
||||
<div class="media card-meta">
|
||||
<div class="media-left"><a href="#"><img class="media-object" src="img/avatar.png" alt="..."></a></div>
|
||||
<div class="media-body"><author class="media-heading">Écrit par <a href="" >Pseudo</a></author><time> Le vendredi 19 septembre 2014 à 07:16 </time></div>
|
||||
</div>
|
||||
<div class="article-content">
|
||||
<p><em>Lorem ipsum dolor sit amet<sup><a href="#1">[1]</a></sup>, consectetur adipiscing elit. Praesent varius ullamcorper diam, non sagittis lectus rutrum id. Integer eros urna, egestas et libero a, finibus egestas odio. Nunc vel hendrerit quam, eget malesuada sem. Sed hendrerit ligula pharetra leo aliquam volutpat. Integer auctor urna ac convallis laoreet. Nunc vestibulum ipsum sed tortor aliquam porta. Cras nunc est, lobortis in est at, rhoncus auctor nunc. Sed dignissim erat non sollicitudin ultricies. Integer vel consectetur urna. Etiam fermentum ligula vitae nunc viverra, a fringilla sem aliquam. Suspendisse potenti. Morbi sem mi, malesuada quis odio vitae, suscipit congue metus. Sed ut ullamcorper urna, eget molestie est. Sed pulvinar justo ac urna consectetur fringilla. Donec tristique eget leo sit amet mollis.</em></p>
|
||||
|
||||
<p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. <mark>Sed posuere lectus eu orci tristique maximus</mark>. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="comment">
|
||||
<div class="media card-meta">
|
||||
<div class="media-left"><a href="#"><img class="media-object" src="img/avatar.png" alt="..."></a></div>
|
||||
<div class="media-body"><author class="media-heading">Écrit par <a href="" >Pseudo</a></author><time> Le vendredi 19 septembre 2014 à 07:16 </time></div>
|
||||
</div>
|
||||
<div class="article-content">
|
||||
<p><em>Lorem ipsum dolor sit amet<sup><a href="#1">[1]</a></sup>, consectetur adipiscing elit. Praesent varius ullamcorper diam, non sagittis lectus rutrum id. Integer eros urna, egestas et libero a, finibus egestas odio. Nunc vel hendrerit quam, eget malesuada sem. Sed hendrerit ligula pharetra leo aliquam volutpat. Integer auctor urna ac convallis laoreet. Nunc vestibulum ipsum sed tortor aliquam porta. Cras nunc est, lobortis in est at, rhoncus auctor nunc. Sed dignissim erat non sollicitudin ultricies. Integer vel consectetur urna. Etiam fermentum ligula vitae nunc viverra, a fringilla sem aliquam. Suspendisse potenti. Morbi sem mi, malesuada quis odio vitae, suscipit congue metus. Sed ut ullamcorper urna, eget molestie est. Sed pulvinar justo ac urna consectetur fringilla. Donec tristique eget leo sit amet mollis.</em></p>
|
||||
|
||||
<p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. <mark>Sed posuere lectus eu orci tristique maximus</mark>. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
<aside class="sidebar col-md-3">
|
||||
<section class="card card-primary">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Catégories</h3>
|
||||
</div>
|
||||
<div class="list-group list-group-flush">
|
||||
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
Objet de liste
|
||||
<span class="badge badge-primary badge-pill">14</span>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card card-primary">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title"> Archive</h3>
|
||||
</div>
|
||||
<div class="list-group list-group-flush">
|
||||
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
Objet de liste
|
||||
<span class="badge badge-primary badge-pill">14</span>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card card-primary">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Navigation</h3>
|
||||
</div>
|
||||
<div class="list-group list-group-flush">
|
||||
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
Objet de liste
|
||||
<span class="badge badge-primary badge-pill">14</span>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Objet de liste</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container-fluid">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#SecondNavbar" aria-controls="SecondNavbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="SecondNavbar">
|
||||
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
|
||||
<li class="nav-item inactive">
|
||||
CC BY-SA 2018 <strong>Quarante-Douze</strong>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="navbar-nav my-2 my-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#"><i class="fa fa-fw fa-rss"></i></a>
|
||||
</li>
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#"><i class="fa fa-fw fa-twitter"></i></a>
|
||||
</li>
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#"><i class="fa fa-fw fa-facebook"></i></a>
|
||||
</li>
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#"><i class="fa fa-fw fa-diaspora"></i></a>
|
||||
</li>
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#"><i class="fa fa-fw fa-mastodon"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
||||
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
fonts/OpenSans-Bold-webfont.woff
Normal file
BIN
fonts/OpenSans-Bold-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/OpenSans-BoldItalic-webfont.woff
Normal file
BIN
fonts/OpenSans-BoldItalic-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/OpenSans-ExtraBold-webfont.woff
Normal file
BIN
fonts/OpenSans-ExtraBold-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/OpenSans-ExtraBoldItalic-webfont.woff
Normal file
BIN
fonts/OpenSans-ExtraBoldItalic-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/OpenSans-Italic-webfont.woff
Normal file
BIN
fonts/OpenSans-Italic-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/OpenSans-Light-webfont.woff
Normal file
BIN
fonts/OpenSans-Light-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/OpenSans-LightItalic-webfont.woff
Normal file
BIN
fonts/OpenSans-LightItalic-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/OpenSans-Regular-webfont.woff
Normal file
BIN
fonts/OpenSans-Regular-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/OpenSans-Semibold-webfont.woff
Normal file
BIN
fonts/OpenSans-Semibold-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/OpenSans-SemiboldItalic-webfont.woff
Normal file
BIN
fonts/OpenSans-SemiboldItalic-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/forkawesome-webfont.eot
Normal file
BIN
fonts/forkawesome-webfont.eot
Normal file
Binary file not shown.
2760
fonts/forkawesome-webfont.svg
Normal file
2760
fonts/forkawesome-webfont.svg
Normal file
File diff suppressed because it is too large
Load diff
|
After Width: | Height: | Size: 455 KiB |
BIN
fonts/forkawesome-webfont.ttf
Normal file
BIN
fonts/forkawesome-webfont.ttf
Normal file
Binary file not shown.
BIN
fonts/forkawesome-webfont.woff
Normal file
BIN
fonts/forkawesome-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/forkawesome-webfont.woff2
Normal file
BIN
fonts/forkawesome-webfont.woff2
Normal file
Binary file not shown.
BIN
fonts/teko-bold-webfont.woff
Normal file
BIN
fonts/teko-bold-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/teko-light-webfont.woff
Normal file
BIN
fonts/teko-light-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/teko-medium-webfont.woff
Normal file
BIN
fonts/teko-medium-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/teko-regular-webfont.woff
Normal file
BIN
fonts/teko-regular-webfont.woff
Normal file
Binary file not shown.
BIN
fonts/teko-semibold-webfont.woff
Normal file
BIN
fonts/teko-semibold-webfont.woff
Normal file
Binary file not shown.
10
footer.php
Normal file
10
footer.php
Normal 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
104
functions.php
Normal 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.'&url='.$mypost_URL.'&via=mypost_';
|
||||
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$mypost_URL;
|
||||
$bufferURL = 'https://bufferapp.com/add?url='.$mypost_URL.'&text='.$mypost_Title;
|
||||
$whatsappURL = 'whatsapp://send?text='.$mypost_Title . ' ' . $mypost_URL;
|
||||
$linkedInURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$mypost_URL.'&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.'&media='.$mypost_Thumbnail[0].'&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
34
header.php
Normal 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
BIN
img/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
img/background.png
Normal file
BIN
img/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
img/brand-icon.png
Normal file
BIN
img/brand-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 251 B |
BIN
img/default-preview.png
Normal file
BIN
img/default-preview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
img/logo.png
Normal file
BIN
img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
BIN
img/wmap.png
Normal file
BIN
img/wmap.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
360
index.html
Normal file
360
index.html
Normal 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> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
|
||||
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
|
||||
</aside>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="preview-container">
|
||||
<article class="card card-preview">
|
||||
<a href="#" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
|
||||
<div class="preview-overlay"><h1>Text Exemple</h1></div>
|
||||
</div>
|
||||
</a>
|
||||
<aside class="card-body">
|
||||
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
|
||||
<div class="align-left"><i class="fa fa-tags"></i> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
|
||||
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
|
||||
</aside>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="preview-container">
|
||||
<article class="card card-preview">
|
||||
<a href="#" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
|
||||
<div class="preview-overlay"><h1>Text Exemple</h1></div>
|
||||
</div>
|
||||
</a>
|
||||
<aside class="card-body">
|
||||
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
|
||||
<div class="align-left"><i class="fa fa-tags"></i> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
|
||||
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
|
||||
</aside>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="preview-container">
|
||||
<article class="card card-preview">
|
||||
<a href="#" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
|
||||
<div class="preview-overlay"><h1>Text Exemple</h1></div>
|
||||
</div>
|
||||
</a>
|
||||
<aside class="card-body">
|
||||
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
|
||||
<div class="align-left"><i class="fa fa-tags"></i> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-primary">categorie</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> <a href="" class="badge badge-info">mot-clef</a> </div>
|
||||
<div class="align-center comment-text"><a href="#">3 commentaires</a></div>
|
||||
</aside>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<section class="commentaires">
|
||||
<h3>Commentaires :</h3>
|
||||
|
||||
<article class="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
10
index.php
Normal 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
6444
js/bootstrap.bundle.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
1
js/bootstrap.bundle.js.map
Normal file
1
js/bootstrap.bundle.js.map
Normal file
File diff suppressed because one or more lines are too long
7
js/bootstrap.bundle.min.js
vendored
Normal file
7
js/bootstrap.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
js/bootstrap.bundle.min.js.map
Normal file
1
js/bootstrap.bundle.min.js.map
Normal file
File diff suppressed because one or more lines are too long
3927
js/bootstrap.js
vendored
Normal file
3927
js/bootstrap.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
1
js/bootstrap.js.map
Normal file
1
js/bootstrap.js.map
Normal file
File diff suppressed because one or more lines are too long
7
js/bootstrap.min.js
vendored
Normal file
7
js/bootstrap.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
js/bootstrap.min.js.map
Normal file
1
js/bootstrap.min.js.map
Normal file
File diff suppressed because one or more lines are too long
5
js/jquery.min.js
vendored
Normal file
5
js/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
17
page.php
Normal file
17
page.php
Normal 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
199
scss/_blog.scss
Normal 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
188
scss/_buttons.scss
Normal 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
235
scss/_cards.scss
Normal 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
137
scss/_definitions.scss
Normal 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, ¢er {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
155
scss/_font-face.scss
Normal 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
123
scss/_global.scss
Normal 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
18
scss/_palette.scss
Normal 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
289
scss/_typography.scss
Normal 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
28
scss/style.scss
Normal 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
8
search.php
Normal 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
3
sidebar.php
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<aside class="sidebar col-md-4">
|
||||
<?php dynamic_sidebar(); ?>
|
||||
</aside>
|
||||
49
single.php
Normal file
49
single.php
Normal 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(); ?>
|
||||
16
tag.php
Normal file
16
tag.php
Normal 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(); ?>
|
||||
Reference in a new issue