Some CSS overhaul (RIP diff viewers)
This commit is contained in:
parent
97543815dd
commit
b74112b452
|
|
@ -1,25 +1,25 @@
|
|||
.pager {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25em;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25em;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pager__title {
|
||||
text-align: center;
|
||||
border: inset var(--dark-warm-gray) 0.18rem;
|
||||
padding: 0.5em 0;
|
||||
margin: 1em 0 0 0;
|
||||
background-color: var(--dark-warm-gray);
|
||||
text-align: center;
|
||||
border: inset var(--dark-warm-gray) 0.18rem;
|
||||
padding: 0.5em 0;
|
||||
margin: 1em 0 0 0;
|
||||
background-color: var(--dark-warm-gray);
|
||||
}
|
||||
|
||||
.pager__nav {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
border: inset var(--dark-warm-gray) 0.18rem;
|
||||
background-color: var(--dark-warm-gray);
|
||||
padding: 0.5em 0.25em;
|
||||
gap: 0.25em;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
border: inset var(--dark-warm-gray) 0.18rem;
|
||||
background-color: var(--dark-warm-gray);
|
||||
padding: 0.5em 0.25em;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
/* ================================================================== */
|
||||
|
|
@ -30,51 +30,51 @@
|
|||
*/
|
||||
|
||||
.pager__nav > a {
|
||||
border: outset var(--light-blue) 0.18rem;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
background-color: var(--light-blue);
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
border: outset var(--light-blue) 0.18rem;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
background-color: var(--light-blue);
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.pager__nav > a[rel="self"] {
|
||||
border: inset var(--dark-blue) 0.18rem;
|
||||
background-color: var(--dark-blue);
|
||||
border: inset var(--dark-blue) 0.18rem;
|
||||
background-color: var(--dark-blue);
|
||||
}
|
||||
|
||||
.pager__nav > a:link::first-letter { text-decoration: underline; }
|
||||
|
||||
.pager__nav > a:active {
|
||||
border: inset var(--dark-blue) 0.18rem;
|
||||
background-color: var(--dark-blue);
|
||||
border: inset var(--dark-blue) 0.18rem;
|
||||
background-color: var(--dark-blue);
|
||||
}
|
||||
|
||||
/* ================================================================== */
|
||||
|
||||
.post {
|
||||
background-color: var(--light-warm-gray);
|
||||
border: outset var(--light-warm-gray) 0.18rem;
|
||||
overflow-wrap: anywhere;
|
||||
background-color: var(--light-warm-gray);
|
||||
border: outset var(--light-warm-gray) 0.18rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.post__title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: var(--teal);
|
||||
margin: 0;
|
||||
padding: 0.25em 0.5em 0.25em 0.75em;
|
||||
align-items: center;
|
||||
border: inset var(--dark-warm-gray) 0.18rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: var(--teal);
|
||||
margin: 0;
|
||||
padding: 0.25em 0.5em 0.25em 0.75em;
|
||||
align-items: center;
|
||||
border: inset var(--dark-warm-gray) 0.18rem;
|
||||
}
|
||||
|
||||
.post__id {
|
||||
border: outset var(--true-gray) 0.18rem;
|
||||
padding: 0.25em;
|
||||
background-color: var(--true-gray);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
color: black;
|
||||
border: outset var(--true-gray) 0.18rem;
|
||||
padding: 0.25em;
|
||||
background-color: var(--true-gray);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.post__id:link::first-letter { text-decoration: underline; }
|
||||
|
|
@ -82,8 +82,8 @@
|
|||
.post__id:active { border: inset var(--true-gray) 0.18rem; }
|
||||
|
||||
.post__date, .post__author, .post__body {
|
||||
margin: 1em 0.5em;
|
||||
padding: 0.25em 0.5em;
|
||||
margin: 1em 0.5em;
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
|
||||
.post__body {
|
||||
|
|
@ -92,16 +92,51 @@
|
|||
}
|
||||
|
||||
.post__nav {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-flow: row wrap;
|
||||
padding: 0 1em 0.5em 1em;
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-flow: row wrap;
|
||||
padding: 0 1em 0.5em 1em;
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.post__nav > .click {
|
||||
flex: 1 0;
|
||||
text-align: center;
|
||||
padding: 0.25em 0;
|
||||
flex: 1 0;
|
||||
text-align: center;
|
||||
padding: 0.25em 0;
|
||||
}
|
||||
|
||||
/* New header stuff */
|
||||
.header {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
text-align: center;
|
||||
border: outset var(--light-warm-gray) 0.18rem;
|
||||
background-color: var(--light-warm-gray);
|
||||
padding: 0 0.25em 0.5em 0.25em;
|
||||
margin-top: 1.25em;
|
||||
}
|
||||
|
||||
.header__nav {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: 0.25em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.header__nav--moderator {
|
||||
margin: 0.5em 0 0 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header__nav > .click {
|
||||
flex: 1;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
.header__search {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 0.25em;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,55 +13,26 @@
|
|||
background-color: var(--dark-blue);
|
||||
}
|
||||
|
||||
.site-header {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
text-align: center;
|
||||
border: outset var(--light-warm-gray) 0.18rem;
|
||||
background-color: var(--light-warm-gray);
|
||||
padding: 0.5em 0;
|
||||
margin-bottom: 0.15em;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: 0.25em;
|
||||
border: outset var(--light-warm-gray) 0.18rem;
|
||||
padding: 0.5em 0.25em;
|
||||
background-color: var(--light-warm-gray);
|
||||
}
|
||||
|
||||
.site-nav > .click {
|
||||
flex: 1;
|
||||
padding: 0 0.5em 0 0.5em;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
text-align: center;
|
||||
border: outset var(--light-warm-gray) 0.18rem;
|
||||
background-color: var(--light-warm-gray);
|
||||
padding: 0;
|
||||
margin: 1.25em 0;
|
||||
text-align: center;
|
||||
border: outset var(--light-warm-gray) 0.18rem;
|
||||
background-color: var(--light-warm-gray);
|
||||
padding: 0;
|
||||
margin: 1.25em 0;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
text-align: center;
|
||||
border: inset var(--dark-warm-gray) 0.18rem;
|
||||
padding: 0.5em 0;
|
||||
margin: 0.85em 0;
|
||||
background-color: var(--dark-warm-gray);
|
||||
text-align: center;
|
||||
border: inset var(--dark-warm-gray) 0.18rem;
|
||||
padding: 0.5em 0;
|
||||
margin: 0.85em 0;
|
||||
background-color: var(--dark-warm-gray);
|
||||
}
|
||||
|
||||
.page-body {
|
||||
background-color: var(--light-warm-gray);
|
||||
border: outset var(--light-warm-gray) 0.18rem;
|
||||
padding: 0.5em 1em;
|
||||
background-color: var(--light-warm-gray);
|
||||
border: outset var(--light-warm-gray) 0.18rem;
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
.form-preview {
|
||||
|
|
@ -72,12 +43,12 @@
|
|||
}
|
||||
|
||||
.form-body {
|
||||
background-color: var(--light-warm-gray);
|
||||
border: outset var(--light-warm-gray) 0.18rem;
|
||||
padding: 0.5em 1em;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 1em;
|
||||
background-color: var(--light-warm-gray);
|
||||
border: outset var(--light-warm-gray) 0.18rem;
|
||||
padding: 0.5em 1em;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
|
|
@ -119,22 +90,6 @@
|
|||
background-color: var(--dark-blue);
|
||||
}
|
||||
|
||||
.search-body {
|
||||
background-color: var(--light-warm-gray);
|
||||
border: outset var(--light-warm-gray) 0.18rem;
|
||||
padding: 0.5em 0.5em;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 1em;
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
.search-field {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
#search {
|
||||
width: 100%;
|
||||
border: inset var(--dark-warm-gray) 0.18rem;
|
||||
|
|
|
|||
|
|
@ -32,9 +32,9 @@
|
|||
<%= asset 'app.css' %>
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<h1 class="site-title">Post::Text</h1>
|
||||
<nav class="site-nav">
|
||||
<header class="header">
|
||||
<h1 class="header__title">Post::Text</h1>
|
||||
<nav class="header__nav">
|
||||
<%= link_to List => threads_list => {list_page => 1},
|
||||
(class => 'click') %>
|
||||
<%= link_to New => post_thread => (class => 'click') %>
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
<%= link_to Feeds => feeds_page => (class => 'click') %>
|
||||
</nav>
|
||||
<% if (is_mod) { =%>
|
||||
<nav class="site-nav">
|
||||
<nav class="header__nav header__nav--moderator">
|
||||
<span>Moderate:</span>
|
||||
<%= link_to Flagged => flagged_list => (class => 'click') %>
|
||||
<%= link_to Hidden => hidden_list => (class => 'click') %>
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
</nav>
|
||||
<% } =%>
|
||||
<% if (is_admin) { =%>
|
||||
<nav class="site-nav">
|
||||
<nav class="header__nav header__nav--moderator">
|
||||
<span>Admin:</span>
|
||||
<%= link_to Create => create_mod => (class => 'click') %>
|
||||
<%= link_to Reset => admin_reset => (class => 'click') %>
|
||||
|
|
@ -62,20 +62,18 @@
|
|||
<%= link_to Demote => demote_admin => (class => 'click') %>
|
||||
</nav>
|
||||
<% } =%>
|
||||
<%= form_for search_page => (class => 'search-body'), begin %>
|
||||
<div class="search-field">
|
||||
<% if (my $error = validation->error('q')) { =%>
|
||||
<p class="field-with-error">Must be between <%= $error->[2] %>
|
||||
and <%= $error->[3] %> characters.</p>
|
||||
<% } =%>
|
||||
<%= text_field q => (
|
||||
id => 'search',
|
||||
maxlength => 2047,
|
||||
minlength => 1,
|
||||
required => undef
|
||||
) %>
|
||||
<button type="submit" class="search-button">Search</button>
|
||||
</div>
|
||||
<%= form_for search_page => (class => 'header__search'), begin %>
|
||||
<% if (my $error = validation->error('q')) { =%>
|
||||
<p class="field-with-error">Must be between <%= $error->[2] %>
|
||||
and <%= $error->[3] %> characters.</p>
|
||||
<% } =%>
|
||||
<%= text_field q => (
|
||||
id => 'search',
|
||||
maxlength => 2047,
|
||||
minlength => 1,
|
||||
required => undef
|
||||
) %>
|
||||
<button type="submit" class="search-button">Search</button>
|
||||
<% end %>
|
||||
</header>
|
||||
<% if (flash 'error') { =%>
|
||||
|
|
|
|||
Loading…
Reference in a new issue