Various smalls improvements

css/content.css

@@ -40,61 +40,6 @@ Global vars
         --disabled: #d8dee9;
     }
 }
-
-/**
-Layout
- */
-.wp-site-blocks > .alignleft {
-    float: left;
-    margin-right: 2em;
-}
-.wp-site-blocks > .alignright {
-    float: right;
-    margin-left: 2em;
-}
-.wp-site-blocks > .aligncenter {
-    justify-content: center;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-main#primary,
-.editor-styles-wrapper {
-    padding: 0 1em;
-}
-
-main#primary > * {
-    max-width: 580px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-main#primary > *.alignwide {
-    max-width: 880px;
-}
-
-main#primary > *.alignfull {
-    width: calc(100% + 20px);
-    margin: 0 -10px;
-    max-width: unset;
-}
-
-.has-text-align-center {
-    text-align: center;
-}
-
-.page-header {
-    max-width: 600px;
-    width: calc(100% - 10px);
-    margin: 0 auto;
-    text-align: center;
-}
-
-img {
-    max-width: 100%;
-    height: auto;
-}
-
 /**
 Typography
  */
@@ -168,15 +113,22 @@ p {
     margin-top: 0;
     margin-bottom: 1em;
 }
+
+.entry-content p,
+.edit-post-visual-editor p {
+    text-align: justify;
+}
+
 ol,
 ul {
     margin-bottom: 1em;
 }
 
-.wp-block-image figcaption {
+figcaption {
     text-align: center;
-    font-size: .9em;
+    font-size: .6em;
     color: var(--text-light);
+    opacity: .8;
 }
 
 .has-small-font-size {
@@ -192,56 +144,69 @@ ul {
     font-size: 2rem !important;
 }
 .has-text-font-family {
-    font-family: var(--sans-font) !important;
-}
-.has-title-font-family {
     font-family: var(--serif-font) !important;
 }
+.has-title-font-family {
+    font-family: var(--sans-font) !important;
+}
+
+
 /**
-Colors
+Layout
  */
-.has-red-color {
+
-    color: var(--ise-red) !important;
+.alignleft {
+    float: left;
 }
-.has-blue-color {
+figure.alignleft {
-    color: var(--ise-blue) !important;
+    margin-right: 2em;
 }
-.has-dark-grey-color {
+
-    color: var(--ise-dark-grey) !important;
+.alignright {
+    float: right;
 }
-.has-grey-color {
+figure.alignright {
-    color: var(--ise-grey) !important;
+    margin-left: 2em;
 }
-.has-light-grey-color {
+.aligncenter {
-    color: var(--ise-light-grey) !important;
+    justify-content: center;
+    margin-left: auto;
+    margin-right: auto;
 }
-.has-red-background-color {
+
-    background-color: var(--ise-red) !important;
+main#primary,
+.editor-styles-wrapper {
+    padding: 0 1em;
 }
-.has-blue-background-color {
+
-    background-color: var(--ise-blue) !important;
+main#primary > * {
+    max-width: 748px;
+    margin-left: auto;
+    margin-right: auto;
 }
-.has-dark-grey-background-color {
+
-    background-color: var(--ise-dark-grey) !important;
+main#primary > *.alignwide {
+    max-width: 880px;
 }
-.has-grey-background-color {
+
-    background-color: var(--ise-grey) !important;
+main#primary > *.alignfull {
+    width: calc(100% + 20px);
+    margin: 0 -10px;
+    max-width: unset;
 }
-.has-light-grey-background-color {
+
-    background-color: var(--ise-light-grey) !important;
+.has-text-align-center {
+    text-align: center;
 }
-.has-red-border-color {
+
-    border-color: var(--ise-red) !important;
+.page-header {
+    max-width: 768px;
+    width: calc(100% - 10px);
+    margin: 0 auto;
+    text-align: center;
 }
-.has-blue-border-color {
+
-    border-color: var(--ise-blue) !important;
+img {
-}
+    max-width: 100%;
-.has-dark-grey-border-color {
+    height: auto;
-    border-color: var(--ise-dark-grey) !important;
-}
-.has-grey-border-color {
-    border-color: var(--ise-grey) !important;
-}
-.has-light-grey-border-color {
-    border-color: var(--ise-light-grey) !important;
 }

functions.php

@@ -20,6 +20,8 @@ if ( ! defined( 'MATT_VERSION' ) ) {
  */
 function matt_setup() {
 
+	add_theme_support( 'editor-styles' ); // if you don't add this line, your stylesheet won't be added
+	add_editor_style( 'css/content.css' ); // tries to include style-editor.css directly from your theme folder
 
 	// Add default posts and comments RSS feed links to head.
 	add_theme_support( 'automatic-feed-links' );
@@ -71,7 +73,6 @@ function matt_scripts() {
 
 	// Ajout des CSS du thèmes
 	wp_enqueue_style('matt-normalize', get_template_directory_uri(). '/css/normalize.css', array(), MATT_VERSION);
-	wp_enqueue_style('matt-fonts', get_template_directory_uri(). '/css/fonts.css', array(), MATT_VERSION);
 	wp_enqueue_style('matt-content', get_template_directory_uri(). '/css/content.css', array(), MATT_VERSION);
 
     // Suppression des styles Gutenberg de base

inc/template-tags.php

@@ -96,15 +96,31 @@ if (!function_exists('matt_entry_header')):
 		}
 
 		// Hide meta information on pages.
-		if ( ! is_single() ) {
+		if ( ! is_page() ) {
 			if ( has_category() ) {
-				/* translators: Used between list items, there is a space after the comma. */
+
-				$categories_list = get_the_category_list( ' • ' );
+                // Get the categories keep herarchical order
-				if ( $categories_list ) {
+				$taxonomy = 'category';
+
+                // Get the term IDs assigned to post.
+				$post_terms = wp_get_object_terms( get_the_ID(), 'category', array( 'fields' => 'ids' ) );
+
+				if ( ! empty( $post_terms ) && ! is_wp_error( $post_terms ) ) {
+					$term_ids = implode( ',' , $post_terms );
+					$terms = wp_list_categories( array(
+						'title_li' => '',
+						'style'    => 'none',
+						'echo'     => false,
+						'taxonomy' => $taxonomy,
+						'include'  => $term_ids
+					) );
+					$terms = rtrim( trim( str_replace( '<br />',  ' • ', $terms ) ), ' • ' );
+
+					// Display post categories.
 					printf(
 					/* translators: %s: List of categories. */
 						'<p class="cat-links">' . esc_html__( '%s', 'matt' ) . ' </p>',
-						$categories_list // phpcs:ignore WordPress.Security.EscapeOutput
+						$terms // phpcs:ignore WordPress.Security.EscapeOutput
 					);
 				}
 			}

style.css

@@ -324,6 +324,28 @@ aside#comments ol.comment-list .comment-meta a {
 	color: var(--text-light);
 }
 
+
+header .cat-links {
+	margin: 0 0 .6em 0;
+	padding: 0;
+}
+
+header .cat-links a {
+	color: var(--text);
+	text-transform: uppercase;
+	letter-spacing: -1px;
+	font-weight: 100;
+	text-decoration: none;
+}
+
+header .posted-on {
+	font-style: italic;
+	font-size: .9em;
+	opacity: .6;
+	margin-bottom: -2.8em;
+}
+
+	
 /* Archives
 --------------------------------------------- */
 
@@ -359,27 +381,6 @@ aside#comments ol.comment-list .comment-meta a {
 	 text-decoration: none;
 }
 
-.blog article > header .cat-links,
-.archive article > header .cat-links {
-	margin: 0 0 1.5em 0;
-	padding: 0;
-}
-
-.blog article > header .cat-links a,
-.archive article > header .cat-links a {
-	color: var(--text);
-	text-transform: uppercase;
-	letter-spacing: -1px;
-	font-weight: 100;
-}
-
-.blog article > header .posted-on,
-.archive article > header .posted-on {
-	font-style: italic;
-	font-size: .9em;
-	opacity: .6;
-	margin-bottom: -3em;
-}
 
 .blog article > footer .post-meta-comments,
 .archive article > footer .post-meta-comments {
@@ -405,6 +406,23 @@ aside#comments ol.comment-list .comment-meta a {
 	margin: 1em auto 3em;
 }
 
+/* Single
+--------------------------------------------- */
+
+.single main article {
+	padding-bottom: 2em;
+	border-bottom: 1px solid var(--accent);
+	margin-bottom: 2em;
+}
+
+.single header {
+	margin-top: 2em;
+}
+
+.single header .posted-on {
+	margin-bottom: 0;
+}
+
 /* Footer
 --------------------------------------------- */
 

theme.json

@@ -38,8 +38,8 @@
       "defaultGradients": false
     },
     "layout": {
-      "contentSize": "900px",
+      "contentSize": "768px",
-      "wideSize": "1200px"
+      "wideSize": "900px"
     },
     "typography": {
       "fontFamilies": [