Button styling

This commit is contained in:
swag 2023-05-20 22:53:32 -04:00
parent de04a36657
commit 5c79b3989a
5 changed files with 79 additions and 37 deletions

View File

@ -15,9 +15,7 @@
box-sizing: border-box; box-sizing: border-box;
} }
*, ::before, ::after { *, ::before, ::after { box-sizing: inherit; }
box-sizing: inherit;
}
body { body {
background-image: url('/images/background2.gif'); background-image: url('/images/background2.gif');
@ -66,11 +64,9 @@ pre > code {
background-color: var(--light-warm-gray); background-color: var(--light-warm-gray);
} }
.site-nav > a { .site-nav > .click {
border: outset var(--light-blue);
flex: 1; flex: 1;
padding: 0 0.5em 0 0.5em; padding: 0 0.5em 0 0.5em;
background-color: var(--light-blue);
} }
.site-footer { .site-footer {
@ -132,6 +128,20 @@ pre > code {
padding: 1em; padding: 1em;
} }
.click {
color: black;
text-decoration: none;
border: outset var(--light-blue);
background-color: var(--light-blue);
}
.click::first-letter { text-decoration: underline; }
.click:active {
border: inset var(--dark-blue);
background-color: var(--dark-blue);
}
/* /*
* Nested/layered classes * Nested/layered classes
*/ */
@ -152,11 +162,20 @@ pre > code {
gap: 0.25em; gap: 0.25em;
} }
/* ================================================================== */
/*
* Can't really add a class to these nav elements with
* Mojolicious::Plugin::TagHelpers::Pagination...
*/
.pager__nav > a { .pager__nav > a {
border: outset var(--light-blue); border: outset var(--light-blue);
flex: 1; flex: 1;
text-align: center; text-align: center;
background-color: var(--light-blue); background-color: var(--light-blue);
text-decoration: none;
color: black;
} }
.pager__nav > a[rel="self"] { .pager__nav > a[rel="self"] {
@ -164,6 +183,15 @@ pre > code {
background-color: var(--dark-blue); background-color: var(--dark-blue);
} }
.pager__nav > a:link::first-letter { text-decoration: underline; }
.pager__nav > a:active {
border: inset var(--dark-blue);
background-color: var(--dark-blue);
}
/* ================================================================== */
.post { .post {
background-color: var(--light-warm-gray); background-color: var(--light-warm-gray);
border: outset var(--light-warm-gray); border: outset var(--light-warm-gray);
@ -185,8 +213,13 @@ pre > code {
border: outset var(--true-gray); border: outset var(--true-gray);
padding: 0.25em; padding: 0.25em;
background-color: var(--true-gray); background-color: var(--true-gray);
text-decoration: none;
} }
.post__id:link::first-letter { text-decoration: underline; }
.post__id:active { border: inset; }
.post__date, .post__author, .post__body { .post__date, .post__author, .post__body {
margin: 1em 0.5em; margin: 1em 0.5em;
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
@ -217,11 +250,8 @@ pre > code {
align-items: center; align-items: center;
} }
.post__nav > a { .post__nav > .click {
flex: 1 0; flex: 1 0;
text-align: center; text-align: center;
border: outset var(--light-blue);
padding: 0.25em 0; padding: 0.25em 0;
white-space: nowrap;
background-color: var(--light-blue);
} }

View File

@ -9,15 +9,17 @@
<header class="site-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},
<%= link_to New => 'post_thread' %> (class => 'click') %>
<%= link_to About => 'about_page' %> <%= link_to New => post_thread => (class => 'click') %>
<%= link_to Rules => 'rules_page' %> <%= link_to About => about_page => (class => 'click') %>
<%= link_to RSS => threads_feed => {format => 'rss'} %> <%= link_to Rules => rules_page => (class => 'click') %>
<%= link_to RSS => threads_feed => {format => 'rss'},
(class => 'click') %>
<% if (is_mod) { =%> <% if (is_mod) { =%>
<%= link_to Logout => 'mod_logout' %> <%= link_to Logout => mod_logout => (class => 'click') %>
<% } else { =%> <% } else { =%>
<%= link_to Login => 'mod_login' %> <%= link_to Login => mod_login => (class => 'click') %>
<% } =%> <% } =%>
</span> </span>
</nav> </nav>

View File

@ -54,11 +54,10 @@
<h3 class="page-title">Last Remark</h3> <h3 class="page-title">Last Remark</h3>
<article class="post"> <article class="post">
<h4 class="post--remark__date"> <h4 class="post--remark__date">
<%= $last_remark->{'date'} %> <%= link_to $last_remark->{'date'}, single_remark =>
<span class="post__id"> {remark_id => $last_remark_id} %>
<%= link_to "#$last_remark_id", <%= link_to "#$last_remark_id", single_remark =>
single_remark => {remark_id => $last_remark_id} %> {remark_id => $last_remark_id}, (class => 'post__id') %>
</span>
</h4> </h4>
<h5 class="post__author"><%= $last_remark->{'author'} %></h5> <h5 class="post__author"><%= $last_remark->{'author'} %></h5>
<div class="post__body"> <div class="post__body">

View File

@ -13,19 +13,25 @@
<%== markdown $thread->{'body'} =%> <%== markdown $thread->{'body'} =%>
</div> </div>
<nav class="post__nav"> <nav class="post__nav">
<%= link_to post_remark => {thread_id => $thread->{'id'}}, begin %> <%= link_to post_remark => {thread_id => $thread->{'id'}},
(class => 'click'), begin %>
Remark (<%= $thread->{'remark_tally'} %>) Remark (<%= $thread->{'remark_tally'} %>)
<% end %> <% end %>
<%= link_to bump_thread => {thread_id => $thread->{'id'}}, begin %> <%= link_to bump_thread => {thread_id => $thread->{'id'}},
(class => 'click'), begin %>
Bump (<%= $thread->{'bump_tally'} %>) Bump (<%= $thread->{'bump_tally'} %>)
<% end %> <% end %>
<%= link_to Flag => flag_thread => {thread_id => $thread->{'id'}} %> <%= link_to Flag => flag_thread => {thread_id => $thread->{'id'}},
(class => 'click') %>
</nav> </nav>
<% if (is_mod) { =%> <% if (is_mod) { =%>
<nav class="post__nav"> <nav class="post__nav">
<%= link_to Hide => hide_thread => {thread_id => $thread->{'id'}} %> <%= link_to Hide => hide_thread => {thread_id => $thread->{'id'}},
<%= link_to Unhide => unhide_thread => {thread_id => $thread->{'id'}} %> (class => 'click') %>
<%= link_to Unflag => unflag_thread => {thread_id => $thread->{'id'}} %> <%= link_to Unhide => unhide_thread => {thread_id => $thread->{'id'}},
(class => 'click') %>
<%= link_to Unflag => unflag_thread => {thread_id => $thread->{'id'}},
(class => 'click') %>
</nav> </nav>
<% } =%> <% } =%>
</article> </article>
@ -46,8 +52,10 @@
<%== markdown $remark->{'body'} =%> <%== markdown $remark->{'body'} =%>
</div> </div>
<nav class="post__nav"> <nav class="post__nav">
<%= link_to Remark => post_remark => {thread_id => $thread->{'id'}} %> <%= link_to Remark => post_remark => {thread_id => $thread->{'id'}},
<%= link_to Flag => flag_remark => {remark_id => $remark->{'id'}} %> (class => 'click') %>
<%= link_to Flag => flag_remark => {remark_id => $remark->{'id'}},
(class => 'click') %>
</nav> </nav>
</article> </article>
<% } =%> <% } =%>

View File

@ -17,15 +17,18 @@
<%== markdown truncate_text $thread->{'body'} =%> <%== markdown truncate_text $thread->{'body'} =%>
</div> </div>
<nav class="post__nav"> <nav class="post__nav">
<%= link_to Remark => post_remark => {thread_id => $thread->{'id'}} %> <%= link_to Remark => post_remark => {thread_id => $thread->{'id'}},
(class => 'click') %>
<%= link_to url_for(single_thread => {thread_id => $thread->{'id'}}) <%= link_to url_for(single_thread => {thread_id => $thread->{'id'}})
->fragment('remarks'), begin %> ->fragment('remarks'), (class => 'click'), begin %>
<%= $thread->{'remark_tally'} %> Remarks <%= $thread->{'remark_tally'} %> Remarks
<% end %> <% end =%>
<%= link_to bump_thread => {thread_id => $thread->{'id'}}, begin %> <%= link_to bump_thread => {thread_id => $thread->{'id'}},
(class => 'click'), begin %>
Bump (<%= $thread->{'bump_tally'} %>) Bump (<%= $thread->{'bump_tally'} %>)
<% end %> <% end %>
<%= link_to Flag => flag_thread => {thread_id => $thread->{'id'}} %> <%= link_to Flag => flag_thread => {thread_id => $thread->{'id'}},
(class => 'click') %>
</nav> </nav>
</article> </article>
<% } =%> <% } =%>