Apply the styles to moar pages

This commit is contained in:
swag 2023-05-20 13:22:29 -04:00
parent 4b29dfa85d
commit fe7599ae3d
13 changed files with 89 additions and 76 deletions

View File

@ -44,25 +44,23 @@ pre > code {
* Simple classes * Simple classes
*/ */
.site-header {
display: flex;
flex-flow: column wrap;
gap: 1em;
}
.site-title { .site-title {
text-align: center; text-align: center;
border: outset var(--light-warm-gray); border: outset var(--light-warm-gray);
background-color: var(--light-warm-gray); background-color: var(--light-warm-gray);
padding: 0.5em 0; padding: 0.5em 0;
} margin-bottom: 0;
.site-footer {
text-align: center;
border: outset var(--light-warm-gray);
background-color: var(--light-warm-gray);
padding: 0;
margin: 1em 0;
} }
.site-nav { .site-nav {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: flex-start;
gap: 0.25em; gap: 0.25em;
border: outset var(--light-warm-gray); border: outset var(--light-warm-gray);
padding: 0.5em 0.25em; padding: 0.5em 0.25em;
@ -76,6 +74,14 @@ pre > code {
background-color: var(--light-blue); background-color: var(--light-blue);
} }
.site-footer {
text-align: center;
border: outset var(--light-warm-gray);
background-color: var(--light-warm-gray);
padding: 0;
margin: 1em 0;
}
.page-title { .page-title {
text-align: center; text-align: center;
border: inset var(--dark-warm-gray); border: inset var(--dark-warm-gray);
@ -103,20 +109,28 @@ pre > code {
flex-flow: column wrap; flex-flow: column wrap;
} }
.form-field > textarea {
overflow: scroll;
resize: vertical;
}
.form-button { .form-button {
border: outset var(--light-blue); border: outset var(--light-blue);
background-color: var(--light-blue); background-color: var(--light-blue);
padding: 0.5em 0; padding: 0.5em 1.5em;
text-align: left;
} }
.field-with-info { .field-with-info {
border-style: solid; border: dashed var(--highlight-green) 0.5em;
border-color: var(--highlight-green); background-color: var(--true-gray);
padding: 1em;
} }
.field-with-error { .field-with-error {
border-style: solid; border: dashed var(--highlight-red) 0.5em;
border-color: var(--highlight-red); background-color: var(--true-gray);
padding: 1em;
} }
/* /*
@ -132,7 +146,6 @@ pre > code {
.pager__nav { .pager__nav {
display: flex; display: flex;
justify-content: flex-start;
flex-flow: row wrap; flex-flow: row wrap;
border: inset var(--dark-warm-gray); border: inset var(--dark-warm-gray);
background-color: var(--dark-warm-gray); background-color: var(--dark-warm-gray);

View File

@ -6,7 +6,7 @@
<%= asset 'app.css' %> <%= asset 'app.css' %>
</head> </head>
<body> <body>
<header> <header class="site-header">
<h1 class="site-title">Post::Text</h1> <h1 class="site-title">Post::Text</h1>
<nav class="site-nav"> <nav class="site-nav">
<%= link_to List => threads_list => {list_page => 1} %> <%= link_to List => threads_list => {list_page => 1} %>

View File

@ -1,14 +1,14 @@
% layout 'default'; % layout 'default';
% title 'Reset Password'; % title 'Reset Password';
<h2><%= title %></h2> <h2 class="page-title"><%= title %></h2>
<form method="post"> <form method="post" class="form-body">
<div class="email field"> <div class="form-field">
<%= label_for email => 'Email' %> <%= label_for email => 'Email' %>
<%= email_field email => (id => 'email') %> <%= email_field email => (id => 'email') %>
</div> </div>
<div class="password field"> <div class="form-field">
<%= label_for password => 'Password' %> <%= label_for password => 'Password' %>
<%= password_field password => (id => 'password') %> <%= password_field password => (id => 'password') %>
</div> </div>
<%= submit_button 'Reset' %> <%= submit_button Reset => (class => 'form-button') %>
</form> </form>

View File

@ -1,18 +1,18 @@
% layout 'default'; % layout 'default';
% title 'Create Moderator'; % title 'Create Moderator';
<h2><%= title %></h2> <h2 class="page-title"><%= title %></h2>
<form method="post"> <form method="post" class="form-body">
<div class="name field"> <div class="form-field">
<%= label_for name => 'Name' %> <%= label_for name => 'Name' %>
<%= text_field name => (id => 'name') %> <%= text_field name => (id => 'name') %>
</div> </div>
<div class="email field"> <div class="form-field">
<%= label_for email => 'Email' %> <%= label_for email => 'Email' %>
<%= email_field email => (id => 'email') %> <%= email_field email => (id => 'email') %>
</div> </div>
<div class="password field"> <div class="form-field">
<%= label_for password => 'Password' %> <%= label_for password => 'Password' %>
<%= password_field password => (id => 'password') %> <%= password_field password => (id => 'password') %>
</div> </div>
<%= submit_button 'Create' %> <%= submit_button Create => (class => 'form-button') %>
</form> </form>

View File

@ -1,10 +1,10 @@
% layout 'default'; % layout 'default';
% title 'Demote Admin'; % title 'Demote Admin';
<h2><%= title %></h2> <h2 class="page-title"><%= title %></h2>
<form method="post"> <form method="post" class="form-body">
<div class="email field"> <div class="form-field">
<%= label_for email => 'Email' %> <%= label_for email => 'Email' %>
<%= email_field email => (id => 'email') %> <%= email_field email => (id => 'email') %>
</div> </div>
<%= submit_button 'Demote' %> <%= submit_button Demote => (class => 'form-button') %>
</form> </form>

View File

@ -1,7 +1,7 @@
% layout 'default'; % layout 'default';
% title 'Flagged Posts'; % title 'Flagged Posts';
<h2><%= title %></h2> <h2 class="page-title"><%= title %></h2>
<main> <main class="page-body">
<% if ($post_links->[0]) { =%> <% if ($post_links->[0]) { =%>
<ul> <ul>
<% for my $link (@{$post_links}) { =%> <% for my $link (@{$post_links}) { =%>

View File

@ -1,7 +1,7 @@
% layout 'default'; % layout 'default';
% title 'Hidden Posts'; % title 'Hidden Posts';
<h2><%= title %></h2> <h2 class="page-title"><%= title %></h2>
<main> <main class="page-body">
<% if ($post_links->[0]) { =%> <% if ($post_links->[0]) { =%>
<ul> <ul>
<% for my $link (@{$post_links}) { =%> <% for my $link (@{$post_links}) { =%>

View File

@ -1,10 +1,10 @@
% layout 'default'; % layout 'default';
% title 'Lock Account'; % title 'Lock Account';
<h2><%= title %></h2> <h2 class="page-title"><%= title %></h2>
<form method="post"> <form method="post" class="form-body">
<div class="email field"> <div class="form-field">
<%= label_for email => 'Email' %> <%= label_for email => 'Email' %>
<%= email_field email => (id => 'email') %> <%= email_field email => (id => 'email') %>
</div> </div>
<%= submit_button 'Lock' %> <%= submit_button Lock => (class => 'form-button') %>
</form> </form>

View File

@ -1,14 +1,14 @@
% layout 'default'; % layout 'default';
% title 'Moderator Login'; % title 'Moderator Login';
<h2><%= title %></h2> <h2 class="page-title"><%= title %></h2>
<form method="post"> <form method="post" class="form-body">
<div class="email field"> <div class="form-field">
<%= label_for email => 'Email' %> <%= label_for email => 'Email' %>
<%= email_field email => (id => 'email') %> <%= email_field email => (id => 'email') %>
</div> </div>
<div class="password field"> <div class="form-field">
<%= label_for password => 'Password' %> <%= label_for password => 'Password' %>
<%= password_field password => (id => 'password') %> <%= password_field password => (id => 'password') %>
</div> </div>
<%= submit_button 'Login' %> <%= submit_button Login => (class => 'form-button') %>
</form> </form>

View File

@ -1,11 +1,11 @@
% layout 'default'; % layout 'default';
% title 'Reset Password'; % title 'Reset Password';
<h2><%= title %></h2> <h2 class="page-title"><%= title %></h2>
<form method="post"> <form method="post" class="form-body">
<div class="password field"> <div class="form-field">
<%= label_for password => 'Password' %> <%= label_for password => 'Password' %>
<%= password_field password => (id => 'password') %> <%= password_field password => (id => 'password') %>
</div> </div>
<%= submit_button 'Reset' %> <%= submit_button Reset => (class => 'form-button') %>
</form> </form>

View File

@ -1,10 +1,10 @@
% layout 'default'; % layout 'default';
% title 'Promote Moderator'; % title 'Promote Moderator';
<h2><%= title %></h2> <h2 class="page-title"><%= title %></h2>
<form method="post"> <form method="post" class="form-body">
<div class="email field"> <div class="form-field">
<%= label_for email => 'Email' %> <%= label_for email => 'Email' %>
<%= email_field email => (id => 'email') %> <%= email_field email => (id => 'email') %>
</div> </div>
<%= submit_button 'Promote' %> <%= submit_button Promote => (class => 'form-button') %>
</form> </form>

View File

@ -1,10 +1,10 @@
% layout 'default'; % layout 'default';
% title 'Unlock Account'; % title 'Unlock Account';
<h2><%= title %></h2> <h2 class="page-title"><%= title %></h2>
<form method="post"> <form method="post" class="form-body">
<div class="email field"> <div class="form-field">
<%= label_for email => 'Email' %> <%= label_for email => 'Email' %>
<%= email_field email => (id => 'email') %> <%= email_field email => (id => 'email') %>
</div> </div>
<%= submit_button 'Unlock' %> <%= submit_button Unlock => (class => 'form-button') %>
</form> </form>

View File

@ -1,8 +1,8 @@
% layout 'default'; % layout 'default';
% title 'New Remark'; % title 'New Remark';
<h2><%= title %></h2> <h2 class="page-title"><%= title %></h2>
<form method="post"> <form method="post" class="form-body">
<div class="author field"> <div class="form-field">
<%= label_for author => 'Author' %> <%= label_for author => 'Author' %>
<%= text_field author => session->{'author'}, ( <%= text_field author => session->{'author'}, (
id => 'author', id => 'author',
@ -14,7 +14,7 @@
<p class="field-with-error">Invalid author: 1 to 63 characters please.</p> <p class="field-with-error">Invalid author: 1 to 63 characters please.</p>
<% } =%> <% } =%>
</div> </div>
<div class="text field"> <div class="form-field">
<%= label_for body => 'Text' %> <%= label_for body => 'Text' %>
<%= text_area body => ( <%= text_area body => (
id => 'body', id => 'body',
@ -28,40 +28,40 @@
<p class="field-with-error">Invalid text: Up to 4,000 characters only.</p> <p class="field-with-error">Invalid text: Up to 4,000 characters only.</p>
<% } =%> <% } =%>
</div> </div>
<%= submit_button 'Post', class => 'post button' %> <%= submit_button 'Post', class => 'form-button' %>
</form> </form>
<section class="threads"> <section class="pager">
<h3>Thread</h3> <h3 class="page-title">Thread</h3>
<article class="thread"> <article class="post">
<h3 class="title"> <h3 class="post__title">
<%= link_to single_thread => {thread_id => $thread->{'id'}}, begin %> <%= link_to single_thread => {thread_id => $thread->{'id'}}, begin %>
<%= $thread->{'title'} %> <%= $thread->{'title'} %>
<% end %> <% end %>
<span class="id"> <span class="post__id">
<%= link_to "#$thread->{'id'}", <%= link_to "#$thread->{'id'}",
single_thread => {thread_id => $thread->{'id'}} %> single_thread => {thread_id => $thread->{'id'}} %>
</span> </span>
</h3> </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'} =%> <%== markdown $thread->{'body'} =%>
</div> </div>
</article> </article>
</section> </section>
<% if (my $last_remark_id = $last_remark->{'id'}) { =%> <% if (my $last_remark_id = $last_remark->{'id'}) { =%>
<section class="remarks"> <section class="pager">
<h3>Last Remark</h3> <h3 class="page-title">Last Remark</h3>
<article class="remark"> <article class="post">
<h4 class="date"> <h4 class="post--remark__date">
<%= $last_remark->{'date'} %> <%= $last_remark->{'date'} %>
<span class="id"> <span class="post__id">
<%= link_to "#$last_remark_id", <%= link_to "#$last_remark_id",
single_remark => {remark_id => $last_remark_id} %> single_remark => {remark_id => $last_remark_id} %>
</span> </span>
</h4> </h4>
<h5 class="author"><%= $last_remark->{'author'} %></h5> <h5 class="post__author"><%= $last_remark->{'author'} %></h5>
<div class="body"> <div class="post__body">
<%== markdown $last_remark->{'body'} =%> <%== markdown $last_remark->{'body'} =%>
</div> </div>
</article> </article>