Change to Sass and some class name changes
This commit is contained in:
parent
3f5b6862a3
commit
74bc32f670
|
|
@ -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
3
assets/assetpack.def
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
! app.css
|
||||
< https://unpkg.com/normalize.css@8.0.1/normalize.css
|
||||
< 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: 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;
|
||||
}
|
||||
2
cpanfile
2
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';
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
BIN
public/images/background2.gif
Normal file
BIN
public/images/background2.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
BIN
public/images/background_stars_anm.gif
Normal file
BIN
public/images/background_stars_anm.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
public/images/topwwbackground.gif
Normal file
BIN
public/images/topwwbackground.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<% } =%>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<% } =%>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue