imporvement: better layout

main
Kazhnuz Klappsthul 2 months ago
parent edf7b90b72
commit 6f5b37029d
  1. 8
      components/preview-grid.php
  2. 30
      components/preview-list.php
  3. 27
      components/previews.php
  4. 2
      home.php
  5. 2
      index.php
  6. 2
      scss/_drawing.scss
  7. 3
      scss/_global.scss
  8. 10
      scss/components/_previews.scss
  9. 11
      scss/custom/_global.scss
  10. 79
      scss/custom/_previews.scss
  11. 2
      scss/definitions/_sizing.scss
  12. 4
      scss/utils/_sizing.scss
  13. 328
      style.css

@ -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()) : ?>
<div class="previews-section">
<?php while(have_posts()) : the_post(); ?>
<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 class="previews-section preview-list">
<?php include(TEMPLATEPATH . '/components/previews.php'); ?>
</div>
<div class="navigation">
<?php the_posts_pagination(); ?>

@ -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; ?>

@ -14,7 +14,7 @@
}
?>
<h1 class="page-title">Publications</h1>
<?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
<?php include(TEMPLATEPATH . '/components/preview-grid.php'); ?>
</main>
<?php get_footer(); ?>

@ -1,7 +1,7 @@
<?php get_header(); ?>
<main>
<h1 class="page-title">Publications</h1>
<?php include(TEMPLATEPATH . '/components/preview-list.php'); ?>
<?php include(TEMPLATEPATH . '/components/preview-grid.php'); ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

@ -13,5 +13,5 @@
@import 'components/menus';
@import 'components/toasts';
@import 'components/tables';
@import 'components/previews';
//@import 'components/previews';
@import 'components/sidebar';

@ -2,4 +2,5 @@
* Styles that are custom to this particular theme
**/
@import 'custom/global';
@import 'custom/global';
@import 'custom/previews';

@ -8,19 +8,23 @@ $preview-content-height:165px;
$comment-peek-height:0px;
$comment-height:30px;
.previews-section {
.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;
grid-template-columns: 1fr 1fr 1fr;
}
@include xxl() {
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}

@ -14,7 +14,7 @@
@mixin container-big() {
padding-left: $lineheight;
padding-right: $lineheight;
max-width: 1600px;
max-width: $container-size;
margin:auto;
}
@ -42,7 +42,7 @@ header h1 {
font-style:oblique;
padding:1.5rem;
line-height: 1rem;
max-width: 1600px;
max-width: $container-size;
margin: auto;
text-align:center;
@ -98,7 +98,7 @@ header h1 {
"main"
"side";
@include lg() {
@include xl() {
grid-template-columns: auto 360px;
grid-template-areas: "main side";
}
@ -216,8 +216,3 @@ footer {
}
}
}
.container-article {
margin:auto;
width:800px;
}

@ -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;
// Containers size
$container-size: $screen-xxl-min;
$container-size: $screen-xl-min;
$container-size-large: $screen-xxl-min;

@ -48,14 +48,14 @@
.m {
@include addmargins("half", $lineheight * .5);
@for $i from 1 through 4 {
@for $i from 0 through 4 {
@include addmargins($i, $lineheight*$i)
}
}
.p {
@include addpaddings("half", $lineheight * .5);
@for $i from 1 through 4 {
@for $i from 0 through 4 {
@include addpaddings($i, $lineheight*$i)
}
}

@ -537,7 +537,7 @@ code {
.container, .container-onecolumn {
padding-left: 1.6rem;
padding-right: 1.6rem;
max-width: 1600px;
max-width: 1200px;
margin: auto; }
.columns {
@ -1501,228 +1501,6 @@ th, td {
th {
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 {
width: 100%;
display: grid;
@ -2565,6 +2343,21 @@ th {
.mt-half {
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 {
margin: 1.6rem; }
@ -2640,6 +2433,21 @@ th {
.pt-half {
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 {
padding: 1.6rem; }
@ -2759,7 +2567,7 @@ header h1 {
font-style: oblique;
padding: 1.5rem;
line-height: 1rem;
max-width: 1600px;
max-width: 1200px;
margin: auto;
text-align: center; }
header h1 img {
@ -2793,13 +2601,13 @@ header h1 {
.container-big {
padding-left: 1.6rem;
padding-right: 1.6rem;
max-width: 1600px;
max-width: 1200px;
margin: auto; }
.container-blog {
padding-left: 1.6rem;
padding-right: 1.6rem;
max-width: 1600px;
max-width: 1200px;
margin: auto;
display: grid;
grid-template-columns: 1fr;
@ -2807,7 +2615,7 @@ header h1 {
row-gap: 1.6rem;
column-gap: 3rem;
grid-template-areas: "main" "side"; }
@media (min-width: 992px) {
@media (min-width: 1200px) {
.container-blog {
grid-template-columns: auto 360px;
grid-template-areas: "main side"; } }
@ -2830,7 +2638,7 @@ ul.tag-list {
.container-preview {
padding-left: 1.6rem;
padding-right: 1.6rem;
max-width: 1600px;
max-width: 1200px;
margin: auto;
display: grid;
grid-template-columns: 1fr;
@ -2850,7 +2658,7 @@ ul.tag-list {
.container-personnage {
padding-left: 1.6rem;
padding-right: 1.6rem;
max-width: 1600px;
max-width: 1200px;
margin: auto;
display: grid;
grid-template-columns: repeat(6, 1fr);
@ -2906,6 +2714,64 @@ footer {
footer .columns a:visited:visited {
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;
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); }

Loading…
Cancel
Save