update page structure

Author: gasparnagy

_layouts/page.html

@@ -2,11 +2,11 @@
 layout: base
 ---
 <article class="page">
-  <div class="wp-block-group alignfull has-surface-background-color has-background has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="margin-top:0px;padding-top:var(--wp--preset--spacing--xx-large);padding-bottom:var(--wp--preset--spacing--xx-large)">
-    <h1 class="has-text-align-center wp-block-post-title">{{ page.title | escape }}</h1>
-  </div>
+  <header class="content-header">
+    <h1>{{ page.title | escape }}</h1>
+  </header>
   {% include featured_image.html %}
-  <div class="entry-content wp-block-post-content is-layout-flow wp-block-post-content-is-layout-flow">
+  <div class="content-body">
     {{ content }}
-  </div>
+  </div>  
 </article>

_layouts/post.html

@@ -2,13 +2,13 @@
 layout: base
 ---
 <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
-  <header class="post-header">
+  <header class="content-header">
     <h1>{{ page.title | escape }}</h1>
 
-    <div class="post-attributes">
-      <div class="post-author"><a href="{{ site.data["authors"][page.author].url }}">{{ site.data["authors"][page.author].name }}</a></div>
+    <div class="content-attributes">
+      <div class="content-author"><a href="{{ site.data["authors"][page.author].url }}">{{ site.data["authors"][page.author].name }}</a></div>
       <p>·</p>
-      <div class="post-date">
+      <div class="content-date">
         {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
         {% assign pdate = page.date | date_to_xmlschema %}
         <time class="dt-published" datetime="{{ pdate }}" itemprop="datePublished">{{ pdate | date: date_format }}</time>
@@ -20,28 +20,28 @@ <h1>{{ page.title | escape }}</h1>
         </div>
       <p>·</p>
       {% for category in page.categories %}
-        <div class="post-category"><a href="{{ site.url }}/{{ category | downcase }}/" rel="tag">{{category}}</a></div>
+        <div class="content-category"><a href="{{ site.url }}/{{ category | downcase }}/" rel="tag">{{category}}</a></div>
         {% if forloop.last == false %}<p>·</p>{% endif %}
       {% endfor %}
     </div>
   </header>
   {% include featured_image.html %}
-  <div class="post-content e-content" itemprop="articleBody">
+  <div class="content-body e-content" itemprop="articleBody">
     {{ content }}
   </div>
-  <footer class="post-footer">
-    <div class="post-tags">
+  <footer class="content-footer">
+    <div class="content-tags">
       <h3>Tags:</h3>
-      <div class="post-tag-list">
+      <div class="content-tag-list">
         {% for tag in page.tags %}
         <a href="{{ site.url }}/tag/{{ tag | slugify }}" rel="tag">{{ tag }}</a>{% if forloop.last == false %}<span class="separator">, </span>{% endif %}
         {% endfor %}
       </div>
 
     </div>
-    <div class="post-sharing">
+    <div class="content-sharing">
       <h3>Share this:</h3>
-      <div class="post-sharing-list">
+      <div class="content-sharing-list">
         {% share_group name='default' icon_size='medium' %}
       </div>
     </div>

_sass/pages.scss

@@ -44,18 +44,104 @@ body {
   }
 }
 
-.post-title {
+.content-title {
   box-sizing: border-box;
   word-break: break-word;
 }
 
-.post-author {
+.content-author {
   box-sizing: border-box;
 }
 
-.post-date {
+.content-date {
   @extend .centered-flex;
 
   box-sizing: border-box;
   gap: var(--wp--preset--spacing--xxx-small);
-}
+}
+
+.content-header {
+  @extend .alignfull;
+  @extend .is-layout-constrained;
+
+  padding-top: var(--wp--preset--spacing--xx-large);
+  padding-bottom: var(--wp--preset--spacing--xx-large);
+  background-color: var(--wp--preset--color--surface);
+
+  >h1 {
+    @extend .content-title;
+
+    text-align: center;
+  }
+
+  >.content-attributes {
+    @extend .centered-flex;
+
+    color: var(--wp--preset--color--neutral);
+    font-size: var(--wp--preset--font-size--x-small);
+
+    flex-wrap: nowrap;
+    gap: var(--wp--preset--spacing--xx-small);
+    justify-content: center;
+
+    a {
+      text-decoration: none;
+    }
+  }
+}
+
+.content-body {
+  @extend .flow-document;
+}
+
+.content-footer {
+  * {
+    margin-bottom: var(--wp--preset--spacing--x-small);
+  }
+
+  h3 {
+    margin: 0 0 var(--wp--preset--spacing--x-small) 0;
+    display: inline-block;
+    line-height: 1.2;
+    font-size: 9pt;
+    font-weight: 700;
+  }
+
+  .content-tag-list {
+    font-size: var(--wp--preset--font-size--x-small);
+
+    a {
+      text-decoration: none;
+    }
+  }
+
+  .content-sharing-list {
+    ul {
+      padding: 0 !important;
+      margin: 0 !important;
+      list-style: none !important;
+
+      li {
+        display: inline-block;
+        margin: 0 var(--wp--preset--spacing--xx-small) var(--wp--preset--spacing--x-small) 0;
+        padding: 0;
+      }
+    }
+  }
+}
+
+@media print {
+  .content-sharing {
+    display: none;
+  }
+}
+
+/* overrides for content types */
+
+.post {
+  @extend .page-like;
+}
+
+.page {
+  @extend .page-like;
+}

_sass/posts.scss

@@ -6,6 +6,4 @@ $site_url: "" !default;
 
 @use "common";
 @use "structure";
-@use "pages";
-@use "posts";
 @use "post-list";