Change to Sass and some class name changes

This commit is contained in:
swagg boi 2023-05-19 18:49:08 -04:00
parent 3f5b6862a3
commit 74bc32f670
12 changed files with 178 additions and 150 deletions

View file

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

3
assets/assetpack.def Normal file
View file

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

View file

@ -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: 99vmin;
width: 95vmin;
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;
}

View file

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

View file

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View file

@ -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>
<nav>
<h1 class="site-title">Post::Text</h1>
<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>

View file

@ -1,18 +1,18 @@
% layout 'default';
% title "Thread #$thread->{'id'}";
<h2><%= title %></h2>
<main class="threads">
<article class="thread">
<h3 class="title">
<h2 class="page-title"><%= title %></h2>
<main class="pager">
<article class="post">
<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>
<h5 class="author"><%= $thread->{'author'} %></h5>
<div class="body">
<h4 class="post__date"><%= $thread->{'date'} %></h4>
<h5 class="post__author"><%= $thread->{'author'} %></h5>
<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">
<h3>Remarks</h3>
<section class="pager" id="remarks">
<h3 class="page-title">Remarks</h3>
<% for my $remark (@{$remarks}) { =%>
<article class="remark">
<h4 class="date">
<article class="post">
<h4 class="post--remark__date">
<%= $remark->{'date'} %>
<%= link_to "#$remark->{'id'}",
single_remark => {remark_id => $remark->{'id'}}, (class => 'id') %>
<%= link_to "#$remark->{'id'}", single_remark =>
{remark_id => $remark->{'id'}}, (class => 'post__id') %>
</h4>
<h5 class="author"><%= $remark->{'author'} %></h5>
<div class="body">
<h5 class="post__author"><%= $remark->{'author'} %></h5>
<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>
<% } =%>

View file

@ -1,22 +1,22 @@
% layout 'default';
% title 'Threads List';
<h2><%= title %></h2>
<main class="threads">
<h2 class="page-title"><%= title %></h2>
<main class="pager">
<% for my $thread (@{$threads}) { =%>
<article class="thread">
<h3 class="title">
<article class="post">
<h3 class="post__title">
<%= link_to single_thread => {thread_id => $thread->{'id'}}, begin %>
<%= $thread->{'title'} %>
<% end %>
<%= link_to "#$thread->{'id'}",
single_thread => {thread_id => $thread->{'id'}}, (class => 'id') %>
<%= link_to "#$thread->{'id'}", single_thread =>
{thread_id => $thread->{'id'}}, (class => 'post__id') %>
</h3>
<h4 class="date"><%= $thread->{'date'} %></h4>
<h5 class="author"><%= $thread->{'author'} %></h5>
<div class="body">
<h4 class="post__date"><%= $thread->{'date'} %></h4>
<h5 class="post__author"><%= $thread->{'author'} %></h5>
<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'}},
(class => 'flag') %>
<%= link_to Flag => flag_thread => {thread_id => $thread->{'id'}} %>
</nav>
</article>
<% } =%>
<% if ($last_page && $last_page != 1) { =%>
<nav>
<nav class="pager__nav">
<%= pagination $this_page, $last_page, ($base_path . '/{page}') %>
</nav>
<% } =%>

View file

@ -1,8 +1,8 @@
% layout 'default';
% title 'New Thread';
<h2><%= title %></h2>
<form method="post">
<div class="author field">
<h2 class="page-title"><%= title %></h2>
<form method="post" class="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>