Change to Sass and some class name changes

assets/assetpack.db

@@ -6,3 +6,7 @@ minified=1
 checksum=4f089bc53f
 format=css
 minified=1
+[sass:sass/post_text.scss]
+checksum=ecda188939
+format=css
+minified=0

assets/assetpack.def

@@ -0,0 +1,3 @@
+! app.css
+< https://unpkg.com/normalize.css@8.0.1/normalize.css
+< sass/post_text.scss

assets/sass/post_text.scss

@@ -1,5 +1,8 @@
+/*
+ * Tags
+ */
+
 :root {
-  font-size: calc(8px + 1vmin);
   box-sizing: border-box;
 }
 
@@ -9,26 +12,42 @@
 
 body {
     background-image: url('/images/halloween_background_1.gif');
-    background-attachment: fixed;
+    width: 95vmin;
-    width: 99vmin;
     margin: 0 auto;
+    font-size: calc(8px + 1vmin);
 }
 
-header > h1, footer > p {
+pre {
+    white-space: pre-wrap;
+}
+
+/*
+ * Simple classes
+ */
+
+.site-title {
   text-align: center;
   border: outset;
   background-color: #C2B3A9;
   padding: 0.5em 0;
 }
 
-hr + h2 {
+.site-footer {
+  text-align: center;
+  border: outset;
+  background-color: #C2B3A9;
+  padding: 0;
+  margin: 1em 0;
+}
+
+.page-title {
   text-align: center;
   border: inset;
   padding: 0.5em 0;
   background-color: #A59990;
 }
 
-header > nav {
+.site-nav {
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
@@ -38,103 +57,13 @@ header > nav {
   background-color: #C2B3A9;
 }
 
-header > nav a {
+.site-nav > a {
   border: outset;
   flex: 1;
-  padding-left: 0.5em;
+  padding: 0 0.5em 0 0.5em;
   background-color: #8C97A8;
 }
 
-.threads, .remarks {
-  display: flex;
-  flex-direction: column;
-  /* border: dashed; */
-  gap: 1em;
-  padding: 0.5em 0;
-}
-
-.thread, .remark {
-  background-color: #C2B3A9;
-  border: outset;
-}
-
-.thread .title, .remark .date {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  background-color: #5B90A4;
-  margin: 0;
-  padding: 0.25em 0.5em 0.25em 0.75em;
-  align-items: center;
-  border: inset;
-}
-
-.thread .title .id, .remark .id {
-  border: outset;
-  padding: 0.25em;
-  background-color: #999999;
-}
-
-.thread .date, .thread .author, .thread .body {
-  margin: 1em 0.5em;
-  padding: 0.25em 0.5em;
-}
-
-.remark .author, .remark .body {
-  margin: 1em 0.5em;
-  padding: 0.25em 0.5em;
-}
-
-.thread .body, .remark .body {
-    background-color: #A59990;
-    border: inset;
-}
-
-.thread nav, .remark nav {
-  display: flex;
-  justify-content: flex-end;
-  flex-flow: row wrap;
-  padding: 0 1em 0.5em 1em;
-  gap: 0.5em;
-  align-items: center;
-}
-
-.thread nav a, .remark nav a {
-  flex: 1 0;
-  text-align: center;
-  border: outset;
-  padding: 0.25em 0;
-  white-space: nowrap;
-  background-color: #8C97A8;
-}
-
-article + nav {
-  display: flex;
-  justify-content: flex-start;
-  flex-flow: row wrap;
-  border: inset;
-  background-color: #A59990;
-  padding: 0.5em 0.25em;
-  gap: 0.25em;
-}
-
-article + nav > a {
-  border: outset;
-  flex: 1;
-  /* border-bottom-style: none; */
-  text-align: center;
-  background-color: #8C97A8;
-}
-
-article + nav > a[rel="self"] {
-  border-style: inset;
-  background-color: #696F80;
-}
-
-article + nav > span {
-
-}
-
 .field-with-info {
     border-style: solid;
     border-color: green;
@@ -145,6 +74,98 @@ article + nav > span {
     border-color: red;
 }
 
-pre {
+/*
-    white-space: pre-wrap;
+ * Nested/layered classes
+ */
+
+.pager {
+  display: flex;
+  flex-direction: column;
+  /* border: dashed; */
+  gap: 1em;
+  padding: 0.5em 0;
+}
+
+.pager__nav {
+  display: flex;
+  justify-content: flex-start;
+  flex-flow: row wrap;
+  border: inset;
+  background-color: #A59990;
+  padding: 0.5em 0.25em;
+  gap: 0.25em;
+}
+
+.pager__nav > a {
+  border: outset;
+  flex: 1;
+  /* border-bottom-style: none; */
+  text-align: center;
+  background-color: #8C97A8;
+}
+
+.pager__nav > a[rel="self"] {
+  border-style: inset;
+  background-color: #696F80;
+}
+
+.post {
+  background-color: #C2B3A9;
+  border: outset;
+}
+
+.post__title {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  background-color: #5B90A4;
+  margin: 0;
+  padding: 0.25em 0.5em 0.25em 0.75em;
+  align-items: center;
+  border: inset;
+}
+
+.post__id {
+  border: outset;
+  padding: 0.25em;
+  background-color: #999999;
+}
+
+.post__date, .post__author, .post__body {
+  margin: 1em 0.5em;
+  padding: 0.25em 0.5em;
+}
+
+.post--remark__date {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  background-color: #5B90A4;
+  margin: 0;
+  padding: 0.25em 0.5em 0.25em 0.75em;
+  align-items: center;
+  border: inset;
+}
+
+.post__body {
+    background-color: #A59990;
+    border: inset;
+}
+
+.post__nav {
+  display: flex;
+  justify-content: flex-end;
+  flex-flow: row wrap;
+  padding: 0 1em 0.5em 1em;
+  gap: 0.5em;
+  align-items: center;
+}
+
+.post__nav > a {
+  flex: 1 0;
+  text-align: center;
+  border: outset;
+  padding: 0.25em 0;
+  white-space: nowrap;
+  background-color: #8C97A8;
 }

cpanfile

@@ -10,3 +10,5 @@ requires 'XML::RSS';
 requires 'CSS::Minifier::XS';
 requires 'Text::Markdown';
 requires 'HTML::Restrict';
+requires 'IO::Socket::SSL';
+requires 'CSS::Sass';

lib/PostText.pm

@@ -16,7 +16,7 @@ use PostText::Model::Moderator;
 sub startup($self) {
     $self->plugin('Config');
     $self->plugin('TagHelpers::Pagination');
-    $self->plugin(AssetPack => {pipes => [qw{Css Combine}]});
+    $self->plugin(AssetPack => {pipes => [qw{Sass Css Combine}]});
 
     # Helpers
     $self->helper(pg => sub ($c) {
@@ -94,7 +94,7 @@ sub startup($self) {
         $self->remark->per_page($remarks_per_page)
     }
 
-    $self->asset->process('main.css', 'css/PostText.css');
+    $self->asset->process;
 
     push @{$self->commands->namespaces}, 'PostText::Command';
 

templates/layouts/default.html.ep

@@ -3,26 +3,26 @@
 <head>
   <title>Post::Text - <%= title %></title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <%= asset 'main.css' %>
+  <%= asset 'app.css' %>
 </head>
 <body>
 <header>
-  <h1>Post::Text</h1>
+  <h1 class="site-title">Post::Text</h1>
-  <nav>
+  <nav class="site-nav">
     <%= link_to List  => threads_list => {list_page => 1}  %>
     <%= link_to New   => 'post_thread'                     %>
     <%= link_to About => 'about_page'                      %>
     <%= link_to Rules => 'rules_page'                      %>
     <%= link_to RSS   => threads_feed => {format => 'rss'} %>
     <% if (is_mod) { =%>
-    <%= link_to Logout => mod_logout => (class => 'login') %>
+    <%= link_to Logout => 'mod_logout' %>
     <% } else { =%>
-    <%= link_to Login => mod_login => (class => 'login') %>
+    <%= link_to Login => 'mod_login' %>
     <% } =%>
     </span>
   </nav>
   <% if (is_mod) { =%>
-  <nav>
+  <nav class="site-nav">
     <span>Moderate:</span>
     <%= link_to Flagged => 'flagged_list' %>
     <%= link_to Hidden  => 'hidden_list'  %>
@@ -30,7 +30,7 @@
   </nav>
   <% } =%>
   <% if (is_admin) { =%>
-  <nav>
+  <nav class="site-nav">
     <span>Admin:</span>
     <%= link_to Create  => 'create_mod'   %>
     <%= link_to Reset   => 'admin_reset'  %>
@@ -41,7 +41,6 @@
   </nav>
   <% } =%>
 </header>
-<hr>
 <% if (flash 'error') { =%>
 <p class="field-with-error" id="error"><%= flash 'error' %></p>
 <% } elsif (stash 'error') { =%>
@@ -53,7 +52,7 @@
 <p class="field-with-info" id="info"><%= stash 'info' %></p>
 <% } =%>
 <%= content =%>
-<footer>
+<footer class="site-footer">
   <p>In UTF-8 we trust. 🫡</p>
 </footer>
 </body>

templates/thread/by_id.html.ep

@@ -1,18 +1,18 @@
 % layout 'default';
 % title "Thread #$thread->{'id'}";
-<h2><%= title %></h2>
+<h2 class="page-title"><%= title %></h2>
-<main class="threads">
+<main class="pager">
-  <article class="thread">
+  <article class="post">
-    <h3 class="title">
+    <h3 class="post__title">
       <%= $thread->{'title'} %>
-      <span class="id">#<%= $thread->{'id'} %></span>
+      <span class="post__id">#<%= $thread->{'id'} %></span>
     </h3>
-    <h4 class="date"><%= $thread->{'date'} %></h4>
+    <h4 class="post__date"><%= $thread->{'date'} %></h4>
-    <h5 class="author"><%= $thread->{'author'} %></h5>
+    <h5 class="post__author"><%= $thread->{'author'} %></h5>
-    <div class="body">
+    <div class="post__body">
       <%== markdown $thread->{'body'} =%>
     </div>
-    <nav>
+    <nav class="post__nav">
       <%= link_to post_remark => {thread_id => $thread->{'id'}}, begin %>
         Remark (<%= $thread->{'remark_tally'} %>)
       <% end %>
@@ -22,7 +22,7 @@
       <%= link_to Flag => flag_thread => {thread_id => $thread->{'id'}} %>
     </nav>
     <% if (is_mod) { =%>
-    <nav>
+    <nav class="post__nav">
       <%= link_to Hide   => hide_thread   => {thread_id => $thread->{'id'}} %>
       <%= link_to Unhide => unhide_thread => {thread_id => $thread->{'id'}} %>
       <%= link_to Unflag => unflag_thread => {thread_id => $thread->{'id'}} %>
@@ -31,27 +31,27 @@
   </article>
 </main>
 <% if (my $first_remark = $remarks->[0]) { =%>
-<section class="remarks" id="remarks">
+<section class="pager" id="remarks">
-  <h3>Remarks</h3>
+  <h3 class="page-title">Remarks</h3>
   <% for my $remark (@{$remarks}) { =%>
-  <article class="remark">
+  <article class="post">
-    <h4 class="date">
+    <h4 class="post--remark__date">
       <%= $remark->{'date'} %>
-      <%= link_to "#$remark->{'id'}",
+      <%= link_to "#$remark->{'id'}", single_remark =>
-          single_remark => {remark_id => $remark->{'id'}}, (class => 'id') %>
+          {remark_id => $remark->{'id'}}, (class => 'post__id') %>
     </h4>
-    <h5 class="author"><%= $remark->{'author'} %></h5>
+    <h5 class="post__author"><%= $remark->{'author'} %></h5>
-    <div class="body">
+    <div class="post__body">
       <%== markdown $remark->{'body'} =%>
     </div>
-    <nav>
+    <nav class="post__nav">
       <%= link_to Remark => post_remark => {thread_id => $thread->{'id'}} %>
       <%= link_to Flag   => flag_remark => {remark_id => $remark->{'id'}} %>
     </nav>
   </article>
   <% } =%>
   <% if ($last_page && $last_page != 1) { =%>
-  <nav>
+  <nav class="pager__nav">
     <%= pagination $this_page, $last_page, ($base_path . '/{page}') %>
   </nav>
   <% } =%>

templates/thread/by_page.html.ep

@@ -1,22 +1,22 @@
 % layout 'default';
 % title 'Threads List';
-<h2><%= title %></h2>
+<h2 class="page-title"><%= title %></h2>
-<main class="threads">
+<main class="pager">
   <% for my $thread (@{$threads}) { =%>
-  <article class="thread">
+  <article class="post">
-    <h3 class="title">
+    <h3 class="post__title">
       <%= link_to single_thread => {thread_id => $thread->{'id'}}, begin %>
         <%= $thread->{'title'} %>
       <% end %>
-      <%= link_to "#$thread->{'id'}",
+      <%= link_to "#$thread->{'id'}", single_thread =>
-          single_thread => {thread_id => $thread->{'id'}}, (class => 'id') %>
+          {thread_id => $thread->{'id'}}, (class => 'post__id') %>
     </h3>
-    <h4 class="date"><%= $thread->{'date'} %></h4>
+    <h4 class="post__date"><%= $thread->{'date'} %></h4>
-    <h5 class="author"><%= $thread->{'author'} %></h5>
+    <h5 class="post__author"><%= $thread->{'author'} %></h5>
-    <div class="body">
+    <div class="post__body">
       <%== markdown truncate_text $thread->{'body'} =%>
     </div>
-    <nav>
+    <nav class="post__nav">
       <%= link_to Remark => post_remark => {thread_id => $thread->{'id'}} %>
       <%= link_to url_for(single_thread => {thread_id => $thread->{'id'}})
           ->fragment('remarks'), begin %>
@@ -25,13 +25,12 @@
       <%= link_to bump_thread => {thread_id => $thread->{'id'}}, begin %>
         Bump (<%= $thread->{'bump_tally'} %>)
       <% end %>
-      <%= link_to Flag => flag_thread => {thread_id => $thread->{'id'}},
+      <%= link_to Flag => flag_thread => {thread_id => $thread->{'id'}} %>
-          (class => 'flag') %>
     </nav>
   </article>
   <% } =%>
   <% if ($last_page && $last_page != 1) { =%>
-  <nav>
+  <nav class="pager__nav">
     <%= pagination $this_page, $last_page, ($base_path . '/{page}') %>
   </nav>
 <% } =%>

templates/thread/create.html.ep

@@ -1,8 +1,8 @@
 % layout 'default';
 % title 'New Thread';
-<h2><%= title %></h2>
+<h2 class="page-title"><%= title %></h2>
-<form method="post">
+<form method="post" class="field">
-  <div class="author field">
+  <div class="field__author">
     <%= label_for author => 'Author' %>
     <%= text_field author => session->{'author'}, (
         id        => 'author',
@@ -14,7 +14,7 @@
     <p class="field-with-error">Invalid author: 1 to 63 characters please.</p>
     <% } =%>
   </div>
-  <div class="title field">
+  <div class="field__title">
     <%= label_for title => 'Title' %>
     <%= text_field title => (
         id        => 'title',
@@ -27,7 +27,7 @@
     <p class="field-with-error">Invalid title: 1 to 127 characters please.</p>
     <% } =%>
   </div>
-  <div class="text field">
+  <div class="field__text">
     <%= label_for body => 'Text' %>
     <%= text_area body => (
         id        => 'body',
@@ -40,5 +40,5 @@
     <p class="field-with-error">Invalid text: Up to 4,000 characters only.</p>
     <% } =%>
   </div>
-  <%= submit_button 'Post', class => 'post button' %>
+  <%= submit_button 'Post', class => 'field__submit' %>
 </form>