swaggboi/PostText
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Some CSS overhaul (RIP diff viewers)

Browse source
This commit is contained in:
swagg boi 2023-11-02 14:30:07 -04:00
parent 97543815dd
commit b74112b452
3 changed files with 123 additions and 135 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

139
assets/css/nested.css
View file

@ -1,25 +1,25 @@
.pager { .pager {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.25em; gap: 1.25em;
padding: 0; padding: 0;
} }
.pager__title { .pager__title {
text-align: center; text-align: center;
border: inset var(--dark-warm-gray) 0.18rem; border: inset var(--dark-warm-gray) 0.18rem;
padding: 0.5em 0; padding: 0.5em 0;
margin: 1em 0 0 0; margin: 1em 0 0 0;
background-color: var(--dark-warm-gray); background-color: var(--dark-warm-gray);
} }
.pager__nav { .pager__nav {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
border: inset var(--dark-warm-gray) 0.18rem; border: inset var(--dark-warm-gray) 0.18rem;
background-color: var(--dark-warm-gray); background-color: var(--dark-warm-gray);
padding: 0.5em 0.25em; padding: 0.5em 0.25em;
gap: 0.25em; gap: 0.25em;
} }
/* ================================================================== */ /* ================================================================== */
@ -30,51 +30,51 @@
*/ */
.pager__nav > a { .pager__nav > a {
border: outset var(--light-blue) 0.18rem; border: outset var(--light-blue) 0.18rem;
flex: 1; flex: 1;
text-align: center; text-align: center;
background-color: var(--light-blue); background-color: var(--light-blue);
text-decoration: none; text-decoration: none;
color: black; color: black;
} }
.pager__nav > a[rel="self"] { .pager__nav > a[rel="self"] {
border: inset var(--dark-blue) 0.18rem; border: inset var(--dark-blue) 0.18rem;
background-color: var(--dark-blue); background-color: var(--dark-blue);
} }
.pager__nav > a:link::first-letter { text-decoration: underline; } .pager__nav > a:link::first-letter { text-decoration: underline; }
.pager__nav > a:active { .pager__nav > a:active {
border: inset var(--dark-blue) 0.18rem; border: inset var(--dark-blue) 0.18rem;
background-color: 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) 0.18rem; border: outset var(--light-warm-gray) 0.18rem;
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
.post__title { .post__title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background-color: var(--teal); background-color: var(--teal);
margin: 0; margin: 0;
padding: 0.25em 0.5em 0.25em 0.75em; padding: 0.25em 0.5em 0.25em 0.75em;
align-items: center; align-items: center;
border: inset var(--dark-warm-gray) 0.18rem; border: inset var(--dark-warm-gray) 0.18rem;
} }
.post__id { .post__id {
border: outset var(--true-gray) 0.18rem; border: outset var(--true-gray) 0.18rem;
padding: 0.25em; padding: 0.25em;
background-color: var(--true-gray); background-color: var(--true-gray);
text-decoration: none; text-decoration: none;
white-space: nowrap; white-space: nowrap;
color: black; color: black;
} }
.post__id:link::first-letter { text-decoration: underline; } .post__id:link::first-letter { text-decoration: underline; }
@ -82,8 +82,8 @@
.post__id:active { border: inset var(--true-gray) 0.18rem; } .post__id:active { border: inset var(--true-gray) 0.18rem; }
.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;
} }
.post__body { .post__body {
@ -92,16 +92,51 @@
} }
.post__nav { .post__nav {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
flex-flow: row wrap; flex-flow: row wrap;
padding: 0 1em 0.5em 1em; padding: 0 1em 0.5em 1em;
gap: 0.5em; gap: 0.5em;
align-items: center; align-items: center;
} }
.post__nav > .click { .post__nav > .click {
flex: 1 0; flex: 1 0;
text-align: center; text-align: center;
padding: 0.25em 0; 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;
} }

83
assets/css/simple.css
View file

@ -13,55 +13,26 @@
background-color: var(--dark-blue); 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 { .site-footer {
text-align: center; text-align: center;
border: outset var(--light-warm-gray) 0.18rem; border: outset var(--light-warm-gray) 0.18rem;
background-color: var(--light-warm-gray); background-color: var(--light-warm-gray);
padding: 0; padding: 0;
margin: 1.25em 0; margin: 1.25em 0;
} }
.page-title { .page-title {
text-align: center; text-align: center;
border: inset var(--dark-warm-gray) 0.18rem; border: inset var(--dark-warm-gray) 0.18rem;
padding: 0.5em 0; padding: 0.5em 0;
margin: 0.85em 0; margin: 0.85em 0;
background-color: var(--dark-warm-gray); background-color: var(--dark-warm-gray);
} }
.page-body { .page-body {
background-color: var(--light-warm-gray); background-color: var(--light-warm-gray);
border: outset var(--light-warm-gray) 0.18rem; border: outset var(--light-warm-gray) 0.18rem;
padding: 0.5em 1em; padding: 0.5em 1em;
} }
.form-preview { .form-preview {
@ -72,12 +43,12 @@
} }
.form-body { .form-body {
background-color: var(--light-warm-gray); background-color: var(--light-warm-gray);
border: outset var(--light-warm-gray) 0.18rem; border: outset var(--light-warm-gray) 0.18rem;
padding: 0.5em 1em; padding: 0.5em 1em;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
gap: 1em; gap: 1em;
} }
.form-field { .form-field {
@ -119,22 +90,6 @@
background-color: var(--dark-blue); 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 { #search {
width: 100%; width: 100%;
border: inset var(--dark-warm-gray) 0.18rem; border: inset var(--dark-warm-gray) 0.18rem;

36
templates/layouts/default.html.ep
View file

@ -32,9 +32,9 @@
<%= asset 'app.css' %> <%= asset 'app.css' %>
</head> </head>
<body> <body>
<header class="site-header"> <header class="header">
<h1 class="site-title">Post::Text</h1> <h1 class="header__title">Post::Text</h1>
<nav class="site-nav"> <nav class="header__nav">
<%= link_to List => threads_list => {list_page => 1}, <%= link_to List => threads_list => {list_page => 1},
(class => 'click') %> (class => 'click') %>
<%= link_to New => post_thread => (class => 'click') %> <%= link_to New => post_thread => (class => 'click') %>
@ -43,7 +43,7 @@
<%= link_to Feeds => feeds_page => (class => 'click') %> <%= link_to Feeds => feeds_page => (class => 'click') %>
</nav> </nav>
<% if (is_mod) { =%> <% if (is_mod) { =%>
<nav class="site-nav"> <nav class="header__nav header__nav--moderator">
<span>Moderate:</span> <span>Moderate:</span>
<%= link_to Flagged => flagged_list => (class => 'click') %> <%= link_to Flagged => flagged_list => (class => 'click') %>
<%= link_to Hidden => hidden_list => (class => 'click') %> <%= link_to Hidden => hidden_list => (class => 'click') %>
@ -52,7 +52,7 @@
</nav> </nav>
<% } =%> <% } =%>
<% if (is_admin) { =%> <% if (is_admin) { =%>
<nav class="site-nav"> <nav class="header__nav header__nav--moderator">
<span>Admin:</span> <span>Admin:</span>
<%= link_to Create => create_mod => (class => 'click') %> <%= link_to Create => create_mod => (class => 'click') %>
<%= link_to Reset => admin_reset => (class => 'click') %> <%= link_to Reset => admin_reset => (class => 'click') %>
@ -62,20 +62,18 @@
<%= link_to Demote => demote_admin => (class => 'click') %> <%= link_to Demote => demote_admin => (class => 'click') %>
</nav> </nav>
<% } =%> <% } =%>
<%= form_for search_page => (class => 'search-body'), begin %> <%= form_for search_page => (class => 'header__search'), begin %>
<div class="search-field"> <% if (my $error = validation->error('q')) { =%>
<% if (my $error = validation->error('q')) { =%> <p class="field-with-error">Must be between <%= $error->[2] %>
<p class="field-with-error">Must be between <%= $error->[2] %> and <%= $error->[3] %> characters.</p>
and <%= $error->[3] %> characters.</p> <% } =%>
<% } =%> <%= text_field q => (
<%= text_field q => ( id => 'search',
id => 'search', maxlength => 2047,
maxlength => 2047, minlength => 1,
minlength => 1, required => undef
required => undef ) %>
) %> <button type="submit" class="search-button">Search</button>
<button type="submit" class="search-button">Search</button>
</div>
<% end %> <% end %>
</header> </header>
<% if (flash 'error') { =%> <% if (flash 'error') { =%>