imporvement: better layout
This commit is contained in:
Kazhnuz
parent
edf7b90b72
commit
6f5b37029d
13 changed files with 232 additions and 278 deletions
8
components/preview-grid.php
Normal file
8
components/preview-grid.php
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
<?php if(have_posts()) : ?>
|
||||||
|
<div class="previews-section preview-grid">
|
||||||
|
<?php include(TEMPLATEPATH . '/components/previews.php'); ?>
|
||||||
|
</div>
|
||||||
|
<div class="navigation">
|
||||||
|
<?php the_posts_pagination(); ?>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
@ -1,32 +1,6 @@
|
||||||
<?php if(have_posts()) : ?>
|
<?php if(have_posts()) : ?>
|
||||||
<div class="previews-section">
|
<div class="previews-section preview-list">
|
||||||
<?php while(have_posts()) : the_post(); ?>
|
<?php include(TEMPLATEPATH . '/components/previews.php'); ?>
|
||||||
<article class="card card-preview head-primary">
|
|
||||||
<a href="<?php the_permalink(); ?>" class="preview-link">
|
|
||||||
<div class="preview-item">
|
|
||||||
<div class="preview-content" aria-hidden="true"><?php the_excerpt(); ?></div>
|
|
||||||
<div class="preview-overlay">
|
|
||||||
<h1 class="card-header"><?php the_title(); ?></h1>
|
|
||||||
<div class="preview-metadata">
|
|
||||||
<div class="metadata-pills">
|
|
||||||
<div><?php
|
|
||||||
if (!has_category('chapters')) {
|
|
||||||
$category = get_the_category();
|
|
||||||
echo"<span class='btn-small btn-info small-text'>" . $category[0]->cat_name . "</span>";
|
|
||||||
} else {
|
|
||||||
$romans = get_the_terms($post->ID, 'roman');
|
|
||||||
echo"<span class='btn-small btn-info small-text'>" . $romans[0]->name . "</span>";
|
|
||||||
}
|
|
||||||
?></div>
|
|
||||||
<div><time><span class="btn-small btn-info small-text"><?php the_time('d/m/Y') ?></span></time></div>
|
|
||||||
</div>
|
|
||||||
<div class="comment-text"><?php comments_number('Pas de commentaire', 'Un commentaire', '% commentaires' );?></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</article>
|
|
||||||
<?php endwhile; ?>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="navigation">
|
<div class="navigation">
|
||||||
<?php the_posts_pagination(); ?>
|
<?php the_posts_pagination(); ?>
|
||||||
|
|
|
||||||
27
components/previews.php
Normal file
27
components/previews.php
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
<?php while(have_posts()) : the_post(); ?>
|
||||||
|
<div class="preview">
|
||||||
|
<div class="preview-thumbnail">
|
||||||
|
<a href="<?php the_permalink(); ?>">
|
||||||
|
<?php the_post_thumbnail( ); ?>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="preview-text">
|
||||||
|
<h2><a href="<?php the_permalink(); ?>" class="preview-title-link m-0 p-0"><?php the_title(); ?></a></h2>
|
||||||
|
|
||||||
|
<div class="flex-that">
|
||||||
|
<div>
|
||||||
|
<?php
|
||||||
|
if (!has_category('chapters')) {
|
||||||
|
$category = get_the_category();
|
||||||
|
echo"<span class='badge bg-primary small-text m-0'>" . $category[0]->cat_name . "</span>";
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<time><span class="badge bg-primary small-text m-0"><?php the_time('d/m/Y') ?></span></time>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="preview-excerpt" aria-excerpt="true"><?php the_excerpt(); ?></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php endwhile; ?>
|
||||||
2
home.php
2
home.php
|
|
@ -14,7 +14,7 @@
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
<h1 class="page-title">Publications</h1>
|
<h1 class="page-title">Publications</h1>
|
||||||
<?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
|
<?php include(TEMPLATEPATH . '/components/preview-grid.php'); ?>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
<?php get_footer(); ?>
|
<?php get_footer(); ?>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<?php get_header(); ?>
|
<?php get_header(); ?>
|
||||||
<main>
|
<main>
|
||||||
<h1 class="page-title">Publications</h1>
|
<h1 class="page-title">Publications</h1>
|
||||||
<?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
|
<?php include(TEMPLATEPATH . '/components/preview-grid.php'); ?>
|
||||||
</main>
|
</main>
|
||||||
<?php get_sidebar(); ?>
|
<?php get_sidebar(); ?>
|
||||||
<?php get_footer(); ?>
|
<?php get_footer(); ?>
|
||||||
|
|
|
||||||
|
|
@ -13,5 +13,5 @@
|
||||||
@import 'components/menus';
|
@import 'components/menus';
|
||||||
@import 'components/toasts';
|
@import 'components/toasts';
|
||||||
@import 'components/tables';
|
@import 'components/tables';
|
||||||
@import 'components/previews';
|
//@import 'components/previews';
|
||||||
@import 'components/sidebar';
|
@import 'components/sidebar';
|
||||||
|
|
|
||||||
|
|
@ -3,3 +3,4 @@
|
||||||
**/
|
**/
|
||||||
|
|
||||||
@import 'custom/global';
|
@import 'custom/global';
|
||||||
|
@import 'custom/previews';
|
||||||
|
|
@ -8,20 +8,24 @@ $preview-content-height:165px;
|
||||||
$comment-peek-height:0px;
|
$comment-peek-height:0px;
|
||||||
$comment-height:30px;
|
$comment-height:30px;
|
||||||
|
|
||||||
.previews-section {
|
.preview-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
grid-template-rows: auto;
|
grid-template-rows: auto;
|
||||||
grid-gap: $lineheight;
|
grid-gap: $lineheight;
|
||||||
padding-bottom: $lineheight;
|
padding-bottom: $lineheight;
|
||||||
|
|
||||||
@include xl() {
|
@include md() {
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include xxl() {
|
@include xl() {
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include xxl() {
|
||||||
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.preview-container {
|
.preview-container {
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
@mixin container-big() {
|
@mixin container-big() {
|
||||||
padding-left: $lineheight;
|
padding-left: $lineheight;
|
||||||
padding-right: $lineheight;
|
padding-right: $lineheight;
|
||||||
max-width: 1600px;
|
max-width: $container-size;
|
||||||
margin:auto;
|
margin:auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -42,7 +42,7 @@ header h1 {
|
||||||
font-style:oblique;
|
font-style:oblique;
|
||||||
padding:1.5rem;
|
padding:1.5rem;
|
||||||
line-height: 1rem;
|
line-height: 1rem;
|
||||||
max-width: 1600px;
|
max-width: $container-size;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
text-align:center;
|
text-align:center;
|
||||||
|
|
||||||
|
|
@ -98,7 +98,7 @@ header h1 {
|
||||||
"main"
|
"main"
|
||||||
"side";
|
"side";
|
||||||
|
|
||||||
@include lg() {
|
@include xl() {
|
||||||
grid-template-columns: auto 360px;
|
grid-template-columns: auto 360px;
|
||||||
grid-template-areas: "main side";
|
grid-template-areas: "main side";
|
||||||
}
|
}
|
||||||
|
|
@ -216,8 +216,3 @@ footer {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-article {
|
|
||||||
margin:auto;
|
|
||||||
width:800px;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
79
scss/custom/_previews.scss
Normal file
79
scss/custom/_previews.scss
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
.preview-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
grid-gap: $lineheight;
|
||||||
|
padding-bottom: $lineheight;
|
||||||
|
|
||||||
|
@include md() {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include xl() {
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include xxl() {
|
||||||
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-list {
|
||||||
|
@include sm() {
|
||||||
|
.preview-thumbnail a {
|
||||||
|
width: 240px;
|
||||||
|
margin-right: $lineheight /2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: $lineheight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@include lg() {
|
||||||
|
.preview-thumbnail a {
|
||||||
|
width: 320px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-thumbnail a {
|
||||||
|
display:block;
|
||||||
|
width: 100%;
|
||||||
|
background-color:transparent;
|
||||||
|
margin:auto;
|
||||||
|
object-fit: cover;
|
||||||
|
padding:0;
|
||||||
|
line-height:0;
|
||||||
|
img {
|
||||||
|
width:100%;
|
||||||
|
object-fit: cover;
|
||||||
|
height: auto;
|
||||||
|
aspect-ratio: 16/9;
|
||||||
|
border-radius: $card-radius;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview h2 {
|
||||||
|
font-size:1.25rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
font-family: $titlefont;
|
||||||
|
font-weight: 800;
|
||||||
|
height:3rem;
|
||||||
|
a {
|
||||||
|
background-color:transparent!important;
|
||||||
|
color:$color-font;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-excerpt {
|
||||||
|
margin-top: $lineheight / 2;
|
||||||
|
font-size:0.8rem;
|
||||||
|
line-height:1.25rem;
|
||||||
|
color:transparentize($color-font, 0.2);
|
||||||
|
}
|
||||||
|
|
@ -30,5 +30,5 @@ $screen-xl-min: 1200px;
|
||||||
$screen-xxl-min: 1600px;
|
$screen-xxl-min: 1600px;
|
||||||
|
|
||||||
// Containers size
|
// Containers size
|
||||||
$container-size: $screen-xxl-min;
|
$container-size: $screen-xl-min;
|
||||||
$container-size-large: $screen-xxl-min;
|
$container-size-large: $screen-xxl-min;
|
||||||
|
|
|
||||||
|
|
@ -48,14 +48,14 @@
|
||||||
|
|
||||||
.m {
|
.m {
|
||||||
@include addmargins("half", $lineheight * .5);
|
@include addmargins("half", $lineheight * .5);
|
||||||
@for $i from 1 through 4 {
|
@for $i from 0 through 4 {
|
||||||
@include addmargins($i, $lineheight*$i)
|
@include addmargins($i, $lineheight*$i)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.p {
|
.p {
|
||||||
@include addpaddings("half", $lineheight * .5);
|
@include addpaddings("half", $lineheight * .5);
|
||||||
@for $i from 1 through 4 {
|
@for $i from 0 through 4 {
|
||||||
@include addpaddings($i, $lineheight*$i)
|
@include addpaddings($i, $lineheight*$i)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
328
style.css
328
style.css
|
|
@ -537,7 +537,7 @@ code {
|
||||||
.container, .container-onecolumn {
|
.container, .container-onecolumn {
|
||||||
padding-left: 1.6rem;
|
padding-left: 1.6rem;
|
||||||
padding-right: 1.6rem;
|
padding-right: 1.6rem;
|
||||||
max-width: 1600px;
|
max-width: 1200px;
|
||||||
margin: auto; }
|
margin: auto; }
|
||||||
|
|
||||||
.columns {
|
.columns {
|
||||||
|
|
@ -1501,228 +1501,6 @@ th, td {
|
||||||
th {
|
th {
|
||||||
font-weight: 800; }
|
font-weight: 800; }
|
||||||
|
|
||||||
/*
|
|
||||||
* 4. Previews
|
|
||||||
* Special style for previews cards
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
.previews-section {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
grid-template-rows: auto;
|
|
||||||
grid-gap: 1.6rem;
|
|
||||||
padding-bottom: 1.6rem; }
|
|
||||||
@media (min-width: 1200px) {
|
|
||||||
.previews-section {
|
|
||||||
grid-template-columns: 1fr 1fr; } }
|
|
||||||
@media (min-width: 1600px) {
|
|
||||||
.previews-section {
|
|
||||||
grid-template-columns: 1fr 1fr 1fr; } }
|
|
||||||
.preview-container {
|
|
||||||
width: 100%; }
|
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
|
||||||
.prev-col-2 .preview-container {
|
|
||||||
width: 50%; }
|
|
||||||
.prev-col-3 .preview-container {
|
|
||||||
width: 33%; }
|
|
||||||
.prev-col-4 .preview-container {
|
|
||||||
width: 25%; } }
|
|
||||||
|
|
||||||
.card-preview {
|
|
||||||
padding: 0;
|
|
||||||
width: 100%;
|
|
||||||
margin: auto;
|
|
||||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0); }
|
|
||||||
|
|
||||||
.preview-link {
|
|
||||||
padding: 0;
|
|
||||||
background-color: transparent;
|
|
||||||
margin: 0 !important; }
|
|
||||||
|
|
||||||
.preview-item {
|
|
||||||
height: 12.8rem;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
line-height: 1.6rem !important;
|
|
||||||
text-align: justify;
|
|
||||||
background-color: rgba(0, 0, 0, 0);
|
|
||||||
color: rgba(33, 37, 41, 0.4);
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
-ms-flex-align: center !important;
|
|
||||||
align-items: center !important;
|
|
||||||
justify-content: center; }
|
|
||||||
.preview-item .preview-overlay {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
position: absolute;
|
|
||||||
padding-top: 0px;
|
|
||||||
backdrop-filter: none;
|
|
||||||
transition: background-color 0.3s;
|
|
||||||
border-radius: 8px 8px 8px 8px; }
|
|
||||||
.preview-item .preview-overlay h1, .preview-item .preview-overlay h2, .preview-item .preview-overlay h3, .preview-item .preview-overlay h4, .preview-item .preview-overlay h5, .preview-item .preview-overlay h6 {
|
|
||||||
color: #fefefe;
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1.6rem;
|
|
||||||
font-weight: 300; }
|
|
||||||
.preview-item .preview-overlay .card-header {
|
|
||||||
font-family: Open Sans, sans-serif;
|
|
||||||
font-size: 1rem;
|
|
||||||
font-size: 1.1em;
|
|
||||||
font-weight: 300;
|
|
||||||
padding: 0.4rem;
|
|
||||||
padding-left: 1.6rem;
|
|
||||||
padding-right: 1.6rem;
|
|
||||||
padding-bottom: 0.4rem !important;
|
|
||||||
margin: 0px;
|
|
||||||
margin-bottom: 0.8rem;
|
|
||||||
margin-top: 0.8rem;
|
|
||||||
line-height: 1.6rem;
|
|
||||||
white-space: nowrap;
|
|
||||||
position: relative;
|
|
||||||
left: 0px;
|
|
||||||
width: 100%;
|
|
||||||
border: 0px solid rgba(0, 0, 0, 0.3);
|
|
||||||
border-radius: 4px 4px 4px 4px;
|
|
||||||
background-color: transparent;
|
|
||||||
border-radius: 0;
|
|
||||||
background-color: #e33d22;
|
|
||||||
color: #fefefe;
|
|
||||||
font-weight: 300;
|
|
||||||
margin-top: 0px; }
|
|
||||||
.preview-item .preview-overlay .card-header:first-child {
|
|
||||||
border-top-left-radius: 8px;
|
|
||||||
border-top-right-radius: 8px; }
|
|
||||||
.preview-item .preview-overlay .card-header:last-child {
|
|
||||||
border-bottom-left-radius: 8px;
|
|
||||||
border-bottom-right-radius: 8px; }
|
|
||||||
.preview-item .preview-overlay .card-header h1, .preview-item .preview-overlay .card-header h2, .preview-item .preview-overlay .card-header h3, .preview-item .preview-overlay .card-header h4, .preview-item .preview-overlay .card-header h5, .preview-item .preview-overlay .card-header h6, .preview-item .preview-overlay .card-header h7, .preview-item .preview-overlay .card-header h8, .preview-item .preview-overlay .card-header h9, .preview-item .preview-overlay .card-header h10 {
|
|
||||||
font-family: Open Sans, sans-serif;
|
|
||||||
font-size: 1rem;
|
|
||||||
padding: 0px;
|
|
||||||
margin: 0px;
|
|
||||||
color: #fefefe;
|
|
||||||
font-weight: 300;
|
|
||||||
line-height: 1.6rem; }
|
|
||||||
.preview-item:hover .preview-overlay {
|
|
||||||
backdrop-filter: blur(2px);
|
|
||||||
background-color: rgba(0, 0, 0, 0.4); }
|
|
||||||
.preview-item:hover .preview-overlay .metadata-pills {
|
|
||||||
opacity: .9;
|
|
||||||
transition: opacity .5s, height .5s;
|
|
||||||
height: 135px; }
|
|
||||||
|
|
||||||
.preview-content {
|
|
||||||
max-height: 12.8rem;
|
|
||||||
overflow: hidden;
|
|
||||||
background-size: cover;
|
|
||||||
min-height: 100%;
|
|
||||||
min-width: 100%;
|
|
||||||
border-radius: 8px 8px 8px 8px;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
line-height: 1.25rem; }
|
|
||||||
.preview-content h1, .preview-content h2, .preview-content h3, .preview-content h4, .preview-content h5, .preview-content h6 {
|
|
||||||
margin-bottom: 0px;
|
|
||||||
max-width: 100%;
|
|
||||||
display: none; }
|
|
||||||
.preview-content > p {
|
|
||||||
width: 100%;
|
|
||||||
margin: auto; }
|
|
||||||
.preview-content > p > img {
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
vertical-align: middle;
|
|
||||||
margin: auto;
|
|
||||||
text-align: center; }
|
|
||||||
.preview-content > p.p-img {
|
|
||||||
text-align: center;
|
|
||||||
margin: auto;
|
|
||||||
padding: auto;
|
|
||||||
display: block;
|
|
||||||
width: 100%; }
|
|
||||||
|
|
||||||
.preview-metadata {
|
|
||||||
color: #fefefe;
|
|
||||||
height: 165px;
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 8px 8px 8px 8px; }
|
|
||||||
.preview-metadata .metadata-pills {
|
|
||||||
height: 165px;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity .3s, height .3s;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding-left: 0.8rem;
|
|
||||||
padding-right: 0.8rem;
|
|
||||||
font-size: 0.9em; }
|
|
||||||
|
|
||||||
.card-preview.head-info .comment-text {
|
|
||||||
background-color: #343a40; }
|
|
||||||
|
|
||||||
.card-preview.card-grey .comment-text {
|
|
||||||
background-color: #adb5bd; }
|
|
||||||
|
|
||||||
.comment-text {
|
|
||||||
color: #fefefe;
|
|
||||||
background-color: #e33d22;
|
|
||||||
text-align: center; }
|
|
||||||
|
|
||||||
.card-preview time {
|
|
||||||
margin-bottom: 0.4em;
|
|
||||||
display: block; }
|
|
||||||
|
|
||||||
.author-area {
|
|
||||||
display: flex; }
|
|
||||||
.author-area img.author-avatar, .author-area img.avatar {
|
|
||||||
display: block;
|
|
||||||
height: 4.8rem;
|
|
||||||
width: auto;
|
|
||||||
border-radius: 100%;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
margin-right: 1.6rem; }
|
|
||||||
.author-area .author-metadata {
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: flex-start; }
|
|
||||||
.author-area .author-date {
|
|
||||||
font-style: italic; }
|
|
||||||
.author-area:not(:last-child) {
|
|
||||||
margin-bottom: 1.6rem; }
|
|
||||||
|
|
||||||
.pigimg {
|
|
||||||
display: block;
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
margin: auto; }
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
background: transparent; }
|
|
||||||
|
|
||||||
.mwarea {
|
|
||||||
padding-bottom: 1.6rem; }
|
|
||||||
.mwarea .avatar {
|
|
||||||
width: 80%;
|
|
||||||
height: auto;
|
|
||||||
display: block;
|
|
||||||
margin: auto; }
|
|
||||||
|
|
||||||
.cover {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
border-radius: 8px 8px 8px 8px; }
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.roman {
|
|
||||||
width: 80%;
|
|
||||||
position: relative;
|
|
||||||
top: -240px;
|
|
||||||
margin: auto; } }
|
|
||||||
|
|
||||||
.sidebar-container {
|
.sidebar-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
@ -2565,6 +2343,21 @@ th {
|
||||||
.mt-half {
|
.mt-half {
|
||||||
margin-top: 0.8rem; }
|
margin-top: 0.8rem; }
|
||||||
|
|
||||||
|
.m-0 {
|
||||||
|
margin: 0rem; }
|
||||||
|
|
||||||
|
.mb-0 {
|
||||||
|
margin-bottom: 0rem; }
|
||||||
|
|
||||||
|
.mr-0 {
|
||||||
|
margin-right: 0rem; }
|
||||||
|
|
||||||
|
.ml-0 {
|
||||||
|
margin-left: 0rem; }
|
||||||
|
|
||||||
|
.mt-0 {
|
||||||
|
margin-top: 0rem; }
|
||||||
|
|
||||||
.m-1 {
|
.m-1 {
|
||||||
margin: 1.6rem; }
|
margin: 1.6rem; }
|
||||||
|
|
||||||
|
|
@ -2640,6 +2433,21 @@ th {
|
||||||
.pt-half {
|
.pt-half {
|
||||||
padding-top: 0.8rem; }
|
padding-top: 0.8rem; }
|
||||||
|
|
||||||
|
.p-0 {
|
||||||
|
padding: 0rem; }
|
||||||
|
|
||||||
|
.pb-0 {
|
||||||
|
padding-bottom: 0rem; }
|
||||||
|
|
||||||
|
.pr-0 {
|
||||||
|
padding-right: 0rem; }
|
||||||
|
|
||||||
|
.pl-0 {
|
||||||
|
padding-left: 0rem; }
|
||||||
|
|
||||||
|
.pt-0 {
|
||||||
|
padding-top: 0rem; }
|
||||||
|
|
||||||
.p-1 {
|
.p-1 {
|
||||||
padding: 1.6rem; }
|
padding: 1.6rem; }
|
||||||
|
|
||||||
|
|
@ -2759,7 +2567,7 @@ header h1 {
|
||||||
font-style: oblique;
|
font-style: oblique;
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
line-height: 1rem;
|
line-height: 1rem;
|
||||||
max-width: 1600px;
|
max-width: 1200px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
text-align: center; }
|
text-align: center; }
|
||||||
header h1 img {
|
header h1 img {
|
||||||
|
|
@ -2793,13 +2601,13 @@ header h1 {
|
||||||
.container-big {
|
.container-big {
|
||||||
padding-left: 1.6rem;
|
padding-left: 1.6rem;
|
||||||
padding-right: 1.6rem;
|
padding-right: 1.6rem;
|
||||||
max-width: 1600px;
|
max-width: 1200px;
|
||||||
margin: auto; }
|
margin: auto; }
|
||||||
|
|
||||||
.container-blog {
|
.container-blog {
|
||||||
padding-left: 1.6rem;
|
padding-left: 1.6rem;
|
||||||
padding-right: 1.6rem;
|
padding-right: 1.6rem;
|
||||||
max-width: 1600px;
|
max-width: 1200px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
|
|
@ -2807,7 +2615,7 @@ header h1 {
|
||||||
row-gap: 1.6rem;
|
row-gap: 1.6rem;
|
||||||
column-gap: 3rem;
|
column-gap: 3rem;
|
||||||
grid-template-areas: "main" "side"; }
|
grid-template-areas: "main" "side"; }
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 1200px) {
|
||||||
.container-blog {
|
.container-blog {
|
||||||
grid-template-columns: auto 360px;
|
grid-template-columns: auto 360px;
|
||||||
grid-template-areas: "main side"; } }
|
grid-template-areas: "main side"; } }
|
||||||
|
|
@ -2830,7 +2638,7 @@ ul.tag-list {
|
||||||
.container-preview {
|
.container-preview {
|
||||||
padding-left: 1.6rem;
|
padding-left: 1.6rem;
|
||||||
padding-right: 1.6rem;
|
padding-right: 1.6rem;
|
||||||
max-width: 1600px;
|
max-width: 1200px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
|
|
@ -2850,7 +2658,7 @@ ul.tag-list {
|
||||||
.container-personnage {
|
.container-personnage {
|
||||||
padding-left: 1.6rem;
|
padding-left: 1.6rem;
|
||||||
padding-right: 1.6rem;
|
padding-right: 1.6rem;
|
||||||
max-width: 1600px;
|
max-width: 1200px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(6, 1fr);
|
grid-template-columns: repeat(6, 1fr);
|
||||||
|
|
@ -2906,6 +2714,64 @@ footer {
|
||||||
footer .columns a:visited:visited {
|
footer .columns a:visited:visited {
|
||||||
color: #fefefe; }
|
color: #fefefe; }
|
||||||
|
|
||||||
.container-article {
|
.preview-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
grid-gap: 1.6rem;
|
||||||
|
padding-bottom: 1.6rem; }
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.preview-grid {
|
||||||
|
grid-template-columns: 1fr 1fr; } }
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.preview-grid {
|
||||||
|
grid-template-columns: 1fr 1fr 1fr; } }
|
||||||
|
@media (min-width: 1600px) {
|
||||||
|
.preview-grid {
|
||||||
|
grid-template-columns: 1fr 1fr 1fr 1fr; } }
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.preview-list .preview-thumbnail a {
|
||||||
|
width: 240px;
|
||||||
|
margin-right: 0.8rem; }
|
||||||
|
.preview-list .preview {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1.6rem; } }
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.preview-list .preview-thumbnail a {
|
||||||
|
width: 320px; } }
|
||||||
|
|
||||||
|
.preview {
|
||||||
|
font-size: 0.8rem; }
|
||||||
|
|
||||||
|
.preview-thumbnail a {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
background-color: transparent;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
width: 800px; }
|
object-fit: cover;
|
||||||
|
padding: 0;
|
||||||
|
line-height: 0; }
|
||||||
|
.preview-thumbnail a img {
|
||||||
|
width: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
height: auto;
|
||||||
|
aspect-ratio: 16/9;
|
||||||
|
border-radius: 8px; }
|
||||||
|
|
||||||
|
.preview h2 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
font-family: Teko, sans-serif;
|
||||||
|
font-weight: 800;
|
||||||
|
height: 3rem; }
|
||||||
|
.preview h2 a {
|
||||||
|
background-color: transparent !important;
|
||||||
|
color: #212529; }
|
||||||
|
|
||||||
|
.preview-excerpt {
|
||||||
|
margin-top: 0.8rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
color: rgba(33, 37, 41, 0.8); }
|
||||||
|
|
|
||||||
Reference in a new issue