Switch back to CSS vs Sass, more CSS and HTML work

This commit is contained in:
swagg boi 2023-05-19 23:07:28 -04:00
parent 74bc32f670
commit f3e2bc967f
6 changed files with 41 additions and 31 deletions

View file

@ -1,3 +1,3 @@
! app.css
< https://unpkg.com/normalize.css@8.0.1/normalize.css
< sass/post_text.scss
< css/post_text.css

View file

@ -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);
}

View file

@ -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

Binary file not shown.

View file

@ -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'}} %>

View file

@ -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>