Button styling
This commit is contained in:
parent
de04a36657
commit
5c79b3989a
|
@ -15,9 +15,7 @@
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, ::before, ::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
*, ::before, ::after { box-sizing: inherit; }
|
||||
|
||||
body {
|
||||
background-image: url('/images/background2.gif');
|
||||
|
@ -66,11 +64,9 @@ pre > code {
|
|||
background-color: var(--light-warm-gray);
|
||||
}
|
||||
|
||||
.site-nav > a {
|
||||
border: outset var(--light-blue);
|
||||
flex: 1;
|
||||
padding: 0 0.5em 0 0.5em;
|
||||
background-color: var(--light-blue);
|
||||
.site-nav > .click {
|
||||
flex: 1;
|
||||
padding: 0 0.5em 0 0.5em;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
|
@ -132,6 +128,20 @@ pre > code {
|
|||
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
|
||||
*/
|
||||
|
@ -152,11 +162,20 @@ pre > code {
|
|||
gap: 0.25em;
|
||||
}
|
||||
|
||||
/* ================================================================== */
|
||||
|
||||
/*
|
||||
* Can't really add a class to these nav elements with
|
||||
* Mojolicious::Plugin::TagHelpers::Pagination...
|
||||
*/
|
||||
|
||||
.pager__nav > a {
|
||||
border: outset var(--light-blue);
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
background-color: var(--light-blue);
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.pager__nav > a[rel="self"] {
|
||||
|
@ -164,6 +183,15 @@ pre > code {
|
|||
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 {
|
||||
background-color: var(--light-warm-gray);
|
||||
border: outset var(--light-warm-gray);
|
||||
|
@ -185,8 +213,13 @@ pre > code {
|
|||
border: outset var(--true-gray);
|
||||
padding: 0.25em;
|
||||
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 {
|
||||
margin: 1em 0.5em;
|
||||
padding: 0.25em 0.5em;
|
||||
|
@ -217,11 +250,8 @@ pre > code {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.post__nav > a {
|
||||
.post__nav > .click {
|
||||
flex: 1 0;
|
||||
text-align: center;
|
||||
border: outset var(--light-blue);
|
||||
padding: 0.25em 0;
|
||||
white-space: nowrap;
|
||||
background-color: var(--light-blue);
|
||||
}
|
||||
|
|
|
@ -9,15 +9,17 @@
|
|||
<header class="site-header">
|
||||
<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'} %>
|
||||
<%= link_to List => threads_list => {list_page => 1},
|
||||
(class => 'click') %>
|
||||
<%= link_to New => post_thread => (class => 'click') %>
|
||||
<%= link_to About => about_page => (class => 'click') %>
|
||||
<%= link_to Rules => rules_page => (class => 'click') %>
|
||||
<%= link_to RSS => threads_feed => {format => 'rss'},
|
||||
(class => 'click') %>
|
||||
<% if (is_mod) { =%>
|
||||
<%= link_to Logout => 'mod_logout' %>
|
||||
<%= link_to Logout => mod_logout => (class => 'click') %>
|
||||
<% } else { =%>
|
||||
<%= link_to Login => 'mod_login' %>
|
||||
<%= link_to Login => mod_login => (class => 'click') %>
|
||||
<% } =%>
|
||||
</span>
|
||||
</nav>
|
||||
|
|
|
@ -54,11 +54,10 @@
|
|||
<h3 class="page-title">Last Remark</h3>
|
||||
<article class="post">
|
||||
<h4 class="post--remark__date">
|
||||
<%= $last_remark->{'date'} %>
|
||||
<span class="post__id">
|
||||
<%= link_to "#$last_remark_id",
|
||||
single_remark => {remark_id => $last_remark_id} %>
|
||||
</span>
|
||||
<%= link_to $last_remark->{'date'}, single_remark =>
|
||||
{remark_id => $last_remark_id} %>
|
||||
<%= link_to "#$last_remark_id", single_remark =>
|
||||
{remark_id => $last_remark_id}, (class => 'post__id') %>
|
||||
</h4>
|
||||
<h5 class="post__author"><%= $last_remark->{'author'} %></h5>
|
||||
<div class="post__body">
|
||||
|
|
|
@ -13,19 +13,25 @@
|
|||
<%== markdown $thread->{'body'} =%>
|
||||
</div>
|
||||
<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'} %>)
|
||||
<% 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'} %>)
|
||||
<% end %>
|
||||
<%= link_to Flag => flag_thread => {thread_id => $thread->{'id'}} %>
|
||||
<%= link_to Flag => flag_thread => {thread_id => $thread->{'id'}},
|
||||
(class => 'click') %>
|
||||
</nav>
|
||||
<% if (is_mod) { =%>
|
||||
<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'}} %>
|
||||
<%= link_to Hide => hide_thread => {thread_id => $thread->{'id'}},
|
||||
(class => 'click') %>
|
||||
<%= link_to Unhide => unhide_thread => {thread_id => $thread->{'id'}},
|
||||
(class => 'click') %>
|
||||
<%= link_to Unflag => unflag_thread => {thread_id => $thread->{'id'}},
|
||||
(class => 'click') %>
|
||||
</nav>
|
||||
<% } =%>
|
||||
</article>
|
||||
|
@ -46,8 +52,10 @@
|
|||
<%== markdown $remark->{'body'} =%>
|
||||
</div>
|
||||
<nav class="post__nav">
|
||||
<%= link_to Remark => post_remark => {thread_id => $thread->{'id'}} %>
|
||||
<%= link_to Flag => flag_remark => {remark_id => $remark->{'id'}} %>
|
||||
<%= link_to Remark => post_remark => {thread_id => $thread->{'id'}},
|
||||
(class => 'click') %>
|
||||
<%= link_to Flag => flag_remark => {remark_id => $remark->{'id'}},
|
||||
(class => 'click') %>
|
||||
</nav>
|
||||
</article>
|
||||
<% } =%>
|
||||
|
|
|
@ -17,15 +17,18 @@
|
|||
<%== markdown truncate_text $thread->{'body'} =%>
|
||||
</div>
|
||||
<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'}})
|
||||
->fragment('remarks'), begin %>
|
||||
->fragment('remarks'), (class => 'click'), begin %>
|
||||
<%= $thread->{'remark_tally'} %> Remarks
|
||||
<% end %>
|
||||
<%= link_to bump_thread => {thread_id => $thread->{'id'}}, begin %>
|
||||
<% end =%>
|
||||
<%= link_to bump_thread => {thread_id => $thread->{'id'}},
|
||||
(class => 'click'), 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 => 'click') %>
|
||||
</nav>
|
||||
</article>
|
||||
<% } =%>
|
||||
|
|
Loading…
Reference in a new issue