Switch back to CSS vs Sass, more CSS and HTML work
This commit is contained in:
parent
74bc32f670
commit
f3e2bc967f
|
@ -1,3 +1,3 @@
|
|||
! app.css
|
||||
< https://unpkg.com/normalize.css@8.0.1/normalize.css
|
||||
< sass/post_text.scss
|
||||
< css/post_text.css
|
||||
|
|
|
@ -3,7 +3,15 @@
|
|||
*/
|
||||
|
||||
:root {
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
--light-warm-gray: #C2B3A9;
|
||||
--dark-warm-gray: #A59990;
|
||||
--teal: #5B90A4;
|
||||
--light-blue: #8C97A8;
|
||||
--dark-blue: #696F80;
|
||||
--true-gray: #999999;
|
||||
--highlight-green: green;
|
||||
--highlight-red: red;
|
||||
}
|
||||
|
||||
*, ::before, ::after {
|
||||
|
@ -11,7 +19,7 @@
|
|||
}
|
||||
|
||||
body {
|
||||
background-image: url('/images/halloween_background_1.gif');
|
||||
background-image: url('/images/background2.gif');
|
||||
width: 95vmin;
|
||||
margin: 0 auto;
|
||||
font-size: calc(8px + 1vmin);
|
||||
|
@ -19,6 +27,7 @@ body {
|
|||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
/*
|
||||
|
@ -28,14 +37,14 @@ pre {
|
|||
.site-title {
|
||||
text-align: center;
|
||||
border: outset;
|
||||
background-color: #C2B3A9;
|
||||
background-color: var(--light-warm-gray);
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
text-align: center;
|
||||
border: outset;
|
||||
background-color: #C2B3A9;
|
||||
background-color: var(--light-warm-gray);
|
||||
padding: 0;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
@ -44,7 +53,7 @@ pre {
|
|||
text-align: center;
|
||||
border: inset;
|
||||
padding: 0.5em 0;
|
||||
background-color: #A59990;
|
||||
background-color: var(--dark-warm-gray);
|
||||
}
|
||||
|
||||
.site-nav {
|
||||
|
@ -54,24 +63,24 @@ pre {
|
|||
gap: 0.25em;
|
||||
border: outset;
|
||||
padding: 0.5em 0.25em;
|
||||
background-color: #C2B3A9;
|
||||
background-color: var(--light-warm-gray);
|
||||
}
|
||||
|
||||
.site-nav > a {
|
||||
border: outset;
|
||||
flex: 1;
|
||||
padding: 0 0.5em 0 0.5em;
|
||||
background-color: #8C97A8;
|
||||
background-color: var(--light-blue);
|
||||
}
|
||||
|
||||
.field-with-info {
|
||||
border-style: solid;
|
||||
border-color: green;
|
||||
border-color: var(--highlight-green);
|
||||
}
|
||||
|
||||
.field-with-error {
|
||||
border-style: solid;
|
||||
border-color: red;
|
||||
border-color: var(--highlight-red);
|
||||
}
|
||||
|
||||
/*
|
||||
|
@ -91,7 +100,7 @@ pre {
|
|||
justify-content: flex-start;
|
||||
flex-flow: row wrap;
|
||||
border: inset;
|
||||
background-color: #A59990;
|
||||
background-color: var(--dark-warm-gray);
|
||||
padding: 0.5em 0.25em;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
@ -101,7 +110,7 @@ pre {
|
|||
flex: 1;
|
||||
/* border-bottom-style: none; */
|
||||
text-align: center;
|
||||
background-color: #8C97A8;
|
||||
background-color: var(--light-blue);
|
||||
}
|
||||
|
||||
.pager__nav > a[rel="self"] {
|
||||
|
@ -110,7 +119,7 @@ pre {
|
|||
}
|
||||
|
||||
.post {
|
||||
background-color: #C2B3A9;
|
||||
background-color: var(--light-warm-gray);
|
||||
border: outset;
|
||||
}
|
||||
|
||||
|
@ -118,7 +127,7 @@ pre {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
background-color: #5B90A4;
|
||||
background-color: var(--teal);
|
||||
margin: 0;
|
||||
padding: 0.25em 0.5em 0.25em 0.75em;
|
||||
align-items: center;
|
||||
|
@ -128,7 +137,7 @@ pre {
|
|||
.post__id {
|
||||
border: outset;
|
||||
padding: 0.25em;
|
||||
background-color: #999999;
|
||||
background-color: var(--true-gray);
|
||||
}
|
||||
|
||||
.post__date, .post__author, .post__body {
|
||||
|
@ -140,7 +149,7 @@ pre {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
background-color: #5B90A4;
|
||||
background-color: var(--teal);
|
||||
margin: 0;
|
||||
padding: 0.25em 0.5em 0.25em 0.75em;
|
||||
align-items: center;
|
||||
|
@ -148,7 +157,7 @@ pre {
|
|||
}
|
||||
|
||||
.post__body {
|
||||
background-color: #A59990;
|
||||
background-color: var(--dark-warm-gray);
|
||||
border: inset;
|
||||
}
|
||||
|
||||
|
@ -167,5 +176,5 @@ pre {
|
|||
border: outset;
|
||||
padding: 0.25em 0;
|
||||
white-space: nowrap;
|
||||
background-color: #8C97A8;
|
||||
background-color: var(--light-blue);
|
||||
}
|
1
cpanfile
1
cpanfile
|
@ -11,4 +11,3 @@ requires 'CSS::Minifier::XS';
|
|||
requires 'Text::Markdown';
|
||||
requires 'HTML::Restrict';
|
||||
requires 'IO::Socket::SSL';
|
||||
requires 'CSS::Sass';
|
||||
|
|
BIN
public/.DS_Store
vendored
Normal file
BIN
public/.DS_Store
vendored
Normal file
Binary file not shown.
|
@ -1,22 +1,23 @@
|
|||
% layout 'default';
|
||||
% title "Remark #$remark->{'id'}";
|
||||
<h2><%= title %></h2>
|
||||
<main class="remarks">
|
||||
<article class="remark">
|
||||
<h4 class="date"><%= $remark->{'date'} %></h4>
|
||||
<h5 class="author"><%= $remark->{'author'} %></h5>
|
||||
<div class="body">
|
||||
<h2 class="page-title"><%= title %></h2>
|
||||
<main class="pager">
|
||||
<article class="post">
|
||||
<h4 class="post--remark__date">
|
||||
<%= $remark->{'date'} %>
|
||||
<span class="post__id">#<%= $remark->{'id'} %></span>
|
||||
</h4>
|
||||
<h5 class="post__author"><%= $remark->{'author'} %></h5>
|
||||
<div class="post__body">
|
||||
<%== markdown $remark->{'body'} =%>
|
||||
</div>
|
||||
<nav>
|
||||
<nav class="post__nav">
|
||||
<%= link_to Thread => single_thread => {thread_id => $remark->{'thread_id'}} %>
|
||||
<%= link_to Remark => post_remark => {thread_id => $remark->{'thread_id'}} %>
|
||||
<span class="flag">
|
||||
<%= link_to Flag => flag_remark => {remark_id => $remark->{'id'}} %>
|
||||
</span>
|
||||
<%= link_to Flag => flag_remark => {remark_id => $remark->{'id'}} %>
|
||||
</nav>
|
||||
<% if (is_mod) { =%>
|
||||
<nav>
|
||||
<nav class="post__nav">
|
||||
<%= link_to Hide => hide_remark => {remark_id => $remark->{'id'}} %>
|
||||
<%= link_to Unhide => unhide_remark => {remark_id => $remark->{'id'}} %>
|
||||
<%= link_to Unflag => unflag_remark => {remark_id => $remark->{'id'}} %>
|
||||
|
|
|
@ -36,7 +36,8 @@
|
|||
<% for my $remark (@{$remarks}) { =%>
|
||||
<article class="post">
|
||||
<h4 class="post--remark__date">
|
||||
<%= $remark->{'date'} %>
|
||||
<%= link_to $remark->{'date'}, single_remark =>
|
||||
{remark_id => $remark->{'id'}} %>
|
||||
<%= link_to "#$remark->{'id'}", single_remark =>
|
||||
{remark_id => $remark->{'id'}}, (class => 'post__id') %>
|
||||
</h4>
|
||||
|
|
Loading…
Reference in a new issue