Add .gitignore, static assets, template & css updates

This commit is contained in:
russell@unturf.com 2026-04-21 18:27:17 -04:00
parent 0047dd1ac1
commit e1f7330592
7 changed files with 1310 additions and 234 deletions

6
.gitignore vendored Normal file
View file

@ -0,0 +1,6 @@
*.egg-info
*.pyc
build/
dist/
__pycache__/

View file

@ -0,0 +1,491 @@
/*
960 Grid System ~ Core CSS.
Learn more ~ http://960.gs/
Licensed under GPL and MIT.
*/
/* =Containers
--------------------------------------------------------------------------------*/
.container_12,
.container_16
{
margin-left: auto;
margin-right: auto;
width: 960px;
}
/* =Grid >> Global
--------------------------------------------------------------------------------*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16
{
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.container_12 .grid_3,
.container_16 .grid_4
{
width: 220px;
}
.container_12 .grid_6,
.container_16 .grid_8
{
width: 460px;
}
.container_12 .grid_9,
.container_16 .grid_12
{
width: 700px;
}
.container_12 .grid_12,
.container_16 .grid_16
{
width: 940px;
}
/* =Grid >> Children (Alpha ~ First, Omega ~ Last)
--------------------------------------------------------------------------------*/
.alpha
{
margin-left: 0;
}
.omega
{
margin-right: 0;
}
/* =Grid >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .grid_1
{
width: 60px;
}
.container_12 .grid_2
{
width: 140px;
}
.container_12 .grid_4
{
width: 300px;
}
.container_12 .grid_5
{
width: 380px;
}
.container_12 .grid_7
{
width: 540px;
}
.container_12 .grid_8
{
width: 620px;
}
.container_12 .grid_10
{
width: 780px;
}
.container_12 .grid_11
{
width: 860px;
}
/* =Grid >> 16 Columns
--------------------------------------------------------------------------------*/
.container_16 .grid_1
{
width: 40px;
}
.container_16 .grid_2
{
width: 100px;
}
.container_16 .grid_3
{
width: 160px;
}
.container_16 .grid_5
{
width: 280px;
}
.container_16 .grid_6
{
width: 340px;
}
.container_16 .grid_7
{
width: 400px;
}
.container_16 .grid_9
{
width: 520px;
}
.container_16 .grid_10
{
width: 580px;
}
.container_16 .grid_11
{
width: 640px;
}
.container_16 .grid_13
{
width: 760px;
}
.container_16 .grid_14
{
width: 820px;
}
.container_16 .grid_15
{
width: 880px;
}
/* =Prefix Extra Space >> Global
--------------------------------------------------------------------------------*/
.container_12 .prefix_3,
.container_16 .prefix_4
{
padding-left: 240px;
}
.container_12 .prefix_6,
.container_16 .prefix_8
{
padding-left: 480px;
}
.container_12 .prefix_9,
.container_16 .prefix_12
{
padding-left: 720px;
}
/* =Prefix Extra Space >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .prefix_1
{
padding-left: 80px;
}
.container_12 .prefix_2
{
padding-left: 160px;
}
.container_12 .prefix_4
{
padding-left: 320px;
}
.container_12 .prefix_5
{
padding-left: 400px;
}
.container_12 .prefix_7
{
padding-left: 560px;
}
.container_12 .prefix_8
{
padding-left: 640px;
}
.container_12 .prefix_10
{
padding-left: 800px;
}
.container_12 .prefix_11
{
padding-left: 880px;
}
/* =Prefix Extra Space >> 16 Columns
--------------------------------------------------------------------------------*/
.container_16 .prefix_1
{
padding-left: 60px;
}
.container_16 .prefix_2
{
padding-left: 120px;
}
.container_16 .prefix_3
{
padding-left: 180px;
}
.container_16 .prefix_5
{
padding-left: 300px;
}
.container_16 .prefix_6
{
padding-left: 360px;
}
.container_16 .prefix_7
{
padding-left: 420px;
}
.container_16 .prefix_9
{
padding-left: 540px;
}
.container_16 .prefix_10
{
padding-left: 600px;
}
.container_16 .prefix_11
{
padding-left: 660px;
}
.container_16 .prefix_13
{
padding-left: 780px;
}
.container_16 .prefix_14
{
padding-left: 840px;
}
.container_16 .prefix_15
{
padding-left: 900px;
}
/* =Suffix Extra Space >> Global
--------------------------------------------------------------------------------*/
.container_12 .suffix_3,
.container_16 .suffix_4
{
padding-right: 240px;
}
.container_12 .suffix_6,
.container_16 .suffix_8
{
padding-right: 480px;
}
.container_12 .suffix_9,
.container_16 .suffix_12
{
padding-right: 720px;
}
/* =Suffix Extra Space >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .suffix_1
{
padding-right: 80px;
}
.container_12 .suffix_2
{
padding-right: 160px;
}
.container_12 .suffix_4
{
padding-right: 320px;
}
.container_12 .suffix_5
{
padding-right: 400px;
}
.container_12 .suffix_7
{
padding-right: 560px;
}
.container_12 .suffix_8
{
padding-right: 640px;
}
.container_12 .suffix_10
{
padding-right: 800px;
}
.container_12 .suffix_11
{
padding-right: 640px;
}
/* =Suffix Extra Space >> 16 Columns
--------------------------------------------------------------------------------*/
.container_16 .suffix_1
{
padding-right: 60px;
}
.container_16 .suffix_2
{
padding-right: 120px;
}
.container_16 .suffix_3
{
padding-right: 180px;
}
.container_16 .suffix_5
{
padding-right: 300px;
}
.container_16 .suffix_6
{
padding-right: 360px;
}
.container_16 .suffix_7
{
padding-right: 420px;
}
.container_16 .suffix_9
{
padding-right: 540px;
}
.container_16 .suffix_10
{
padding-right: 600px;
}
.container_16 .suffix_11
{
padding-right: 660px;
}
.container_16 .suffix_13
{
padding-right: 780px;
}
.container_16 .suffix_14
{
padding-right: 840px;
}
.container_16 .suffix_15
{
padding-right: 900px;
}
/* =Clear Floated Elements
--------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
html body * span.clear,
html body * div.clear,
html body * li.clear,
html body * dd.clear
{
background: none;
border: 0;
clear: both;
display: block;
float: none;
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* http://www.positioniseverything.net/easyclearing.html */
.clearfix:after
{
clear: both;
content: '.';
display: block;
visibility: hidden;
height: 0;
}
.clearfix
{
display: inline-block;
}
* html .clearfix
{
height: 1%;
}
.clearfix
{
display: block;
}

View file

@ -0,0 +1,69 @@
.hll { background-color: #404040 }
.c { color: #999999; font-style: italic } /* Comment */
.err { color: #a61717; background-color: #e3d2d2 } /* Error */
.g { color: #d0d0d0 } /* Generic */
.k { color: #6ab825; font-weight: bold } /* Keyword */
.l { color: #d0d0d0 } /* Literal */
.n { color: #d0d0d0 } /* Name */
.o { color: #d0d0d0 } /* Operator */
.x { color: #d0d0d0 } /* Other */
.p { color: #d0d0d0 } /* Punctuation */
.cm { color: #999999; font-style: italic } /* Comment.Multiline */
.cp { color: #cd2828; font-weight: bold } /* Comment.Preproc */
.c1 { color: #999999; font-style: italic } /* Comment.Single */
.cs { color: #e50808; font-weight: bold; background-color: #520000 } /* Comment.Special */
.gd { color: #d22323 } /* Generic.Deleted */
.ge { color: #d0d0d0; font-style: italic } /* Generic.Emph */
.gr { color: #d22323 } /* Generic.Error */
.gh { color: #ffffff; font-weight: bold } /* Generic.Heading */
.gi { color: #589819 } /* Generic.Inserted */
.go { color: #cccccc } /* Generic.Output */
.gp { color: #aaaaaa } /* Generic.Prompt */
.gs { color: #d0d0d0; font-weight: bold } /* Generic.Strong */
.gu { color: #ffffff; text-decoration: underline } /* Generic.Subheading */
.gt { color: #d22323 } /* Generic.Traceback */
.kc { color: #6ab825; font-weight: bold } /* Keyword.Constant */
.kd { color: #6ab825; font-weight: bold } /* Keyword.Declaration */
.kn { color: #6ab825; font-weight: bold } /* Keyword.Namespace */
.kp { color: #6ab825 } /* Keyword.Pseudo */
.kr { color: #6ab825; font-weight: bold } /* Keyword.Reserved */
.kt { color: #6ab825; font-weight: bold } /* Keyword.Type */
.ld { color: #d0d0d0 } /* Literal.Date */
.m { color: #3677a9 } /* Literal.Number */
.s { color: #ed9d13 } /* Literal.String */
.na { color: #bbbbbb } /* Name.Attribute */
.nb { color: #24909d } /* Name.Builtin */
.nc { color: #447fcf; text-decoration: underline } /* Name.Class */
.no { color: #40ffff } /* Name.Constant */
.nd { color: #ffa500 } /* Name.Decorator */
.ni { color: #d0d0d0 } /* Name.Entity */
.ne { color: #bbbbbb } /* Name.Exception */
.nf { color: #447fcf } /* Name.Function */
.nl { color: #d0d0d0 } /* Name.Label */
.nn { color: #447fcf; text-decoration: underline } /* Name.Namespace */
.nx { color: #d0d0d0 } /* Name.Other */
.py { color: #d0d0d0 } /* Name.Property */
.nt { color: #6ab825; font-weight: bold } /* Name.Tag */
.nv { color: #40ffff } /* Name.Variable */
.ow { color: #6ab825; font-weight: bold } /* Operator.Word */
.w { color: #666666 } /* Text.Whitespace */
.mf { color: #3677a9 } /* Literal.Number.Float */
.mh { color: #3677a9 } /* Literal.Number.Hex */
.mi { color: #3677a9 } /* Literal.Number.Integer */
.mo { color: #3677a9 } /* Literal.Number.Oct */
.sb { color: #ed9d13 } /* Literal.String.Backtick */
.sc { color: #ed9d13 } /* Literal.String.Char */
.sd { color: #ed9d13 } /* Literal.String.Doc */
.s2 { color: #ed9d13 } /* Literal.String.Double */
.se { color: #ed9d13 } /* Literal.String.Escape */
.sh { color: #ed9d13 } /* Literal.String.Heredoc */
.si { color: #ed9d13 } /* Literal.String.Interpol */
.sx { color: #ffa500 } /* Literal.String.Other */
.sr { color: #ed9d13 } /* Literal.String.Regex */
.s1 { color: #ed9d13 } /* Literal.String.Single */
.ss { color: #ed9d13 } /* Literal.String.Symbol */
.bp { color: #24909d } /* Name.Builtin.Pseudo */
.vc { color: #40ffff } /* Name.Variable.Class */
.vg { color: #40ffff } /* Name.Variable.Global */
.vi { color: #40ffff } /* Name.Variable.Instance */
.il { color: #3677a9 } /* Literal.Number.Integer.Long */

View file

@ -1,293 +1,768 @@
/* ============================================================ @import "/static/theme/chaostheory/css/pygments-native.css";
foxhop.net chaos theory theme
sensitive dependence on initial conditions
============================================================ */
:root { /* universal box model — prevents padding/border from causing overflow */
--bg: #06060e; *, *::before, *::after {
--bg-container: rgba(9, 9, 22, 0.98); box-sizing: border-box;
--bg-input: #0f0f22;
--text: #c4c4d0;
--text-muted: #52526a;
--accent: #00e5cc;
--accent-warm: #ff6b35;
--border: #1a1a30;
--border-top: #00e5cc;
} }
* { /* layout */
box-sizing: border-box; .container_16 {
width: 96%;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
/* clearfix via pseudo-element — clears floats without clipping content */
.container_16::after {
content: '';
display: table;
clear: both;
}
.container_16 .grid_16 {
display: block;
float: none; /* override 960.css float: left */
width: 100%;
margin: 0;
}
#wikibar {
overflow: hidden; /* self-clear the left/right wikibar floats */
}
.grid_10 {
float: left;
width: 72%;
}
.grid_6 {
float: right;
width: 26%;
}
div.clear { clear: both; display: block; height: 0; }
/* prevent any element from blowing out the horizontal layout */
body {
overflow-x: hidden;
}
img, video, pre, table {
max-width: 100%;
}
html {
background-color: #111111;
} }
body { body {
color: var(--text); margin: 0;
background-color: var(--bg); background-color: #1C4E63;
/* dot grid — ordered system from simple rules */ color: #DDDDDD;
background-image: radial-gradient( font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif;
circle, font-size: 14px;
rgba(0, 229, 204, 0.07) 1px, line-height: 1.6;
transparent 1px
);
background-size: 28px 28px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
font-size: 1em;
line-height: 1.65;
margin-top: 40px;
margin-bottom: 60px;
} }
h1, h2, h3, h4, h5, h6 { #header {
font-family: 'Space Mono', 'Courier New', monospace; display: block;
color: #e8e8f0; font-size: 1.6em;
background-color: #0A0A0A;
padding: 1.2% 2%;
letter-spacing: -0.02em;
} }
a, a:visited { #header a {
color: var(--accent); color: #ffffff;
text-decoration: none; text-decoration: none;
opacity: 0.85; }
transition: opacity 0.15s, color 0.15s;
#header a:hover {
color: #6DCFF6;
}
h1, h2, h3, h4, h5 {
color: #6DCFF6;
font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif;
letter-spacing: -0.04em;
line-height: normal;
}
a, a:link, a:visited {
color: #6DCFF6;
text-decoration: none;
} }
a:hover { a:hover {
opacity: 1.0; color: #9de3fb;
color: #ffffff; text-decoration: underline;
} }
/* ---- brand ---- */ /*********************
wikibar
*********************/
h1.brand { #wikibar {
font-family: 'Space Mono', 'Courier New', monospace; padding-top: 0;
font-size: 2.2em; margin-top: 0;
font-weight: 700; border: 0;
letter-spacing: 2px; font-size: 12px;
margin-left: 32px; overflow: hidden;
margin-bottom: 0;
color: #e8e8f0;
} }
h1.brand a { #wikibar-left, #wikibar-right {
color: #e8e8f0; padding: 0;
opacity: 1.0; margin: 0;
text-decoration: none;
} }
h1.brand a:hover { #wikibar-right {
color: #ffffff; width: auto;
opacity: 1.0; float: right;
background-color: #0A0A0A;
padding: 6px 12px;
} }
.brand-dot { #wikibar-left a {
color: var(--accent); border: 0;
border-top: 1px solid #0a0a0a;
float: left;
background-color: #0A0A0A;
color: #CCCCCC;
padding: 6px 12px;
border-radius: 0;
margin: 0;
text-decoration: none;
} }
.tagline { #wikibar-left a.on {
font-family: 'Space Mono', 'Courier New', monospace; border-top: 1px solid #262626;
font-size: 0.7em; background-color: #191919;
color: var(--text-muted); color: #aaaaaa;
letter-spacing: 1px;
margin-left: 36px;
margin-top: 4px;
margin-bottom: 18px;
} }
/* ---- search ---- */ #wikibar-left a:hover {
background: #111;
.searchbox { color: #6DCFF6;
float: right; border-top: 1px solid #1c1c1c;
margin-right: 32px;
margin-bottom: 20px;
width: 240px;
} }
/* ---- nav menu ---- */ /*********************
search box
*********************/
#remarkbox-menu { #keywords {
text-align: right; background-color: #184254;
margin-right: 32px; color: #eeeeee;
margin-bottom: 24px; border: 1px solid #336173;
font-family: 'Space Mono', 'Courier New', monospace; border-radius: 3px;
font-size: 0.82em; padding: 4px 8px;
color: var(--text-muted); font-size: 12px;
width: 200px;
} }
#remarkbox-menu a { #keywords::placeholder {
color: var(--text-muted); color: #aaaaaa;
opacity: 1.0;
text-decoration: none;
} }
#remarkbox-menu a:hover { #keywords:focus {
color: var(--accent); outline: none;
border-color: #6DCFF6;
} }
/* ---- main content container ---- */ /*********************
content area
*********************/
.main { #content {
width: 68%; background-color: transparent;
margin: auto; padding: 20px 32px;
background: var(--bg-container);
border: 1px solid var(--border);
border-top: 2px solid var(--border-top);
border-radius: 2px;
padding: 28px 32px;
} }
/* ---- content elements ---- */ /*********************
thread summary cards
*********************/
.title { .summary {
font-size: 1.35em; padding: 14px 0;
font-family: 'Space Mono', 'Courier New', monospace; border-bottom: 1px solid #336173;
}
.summary:last-child {
border-bottom: 0;
}
.summary a {
font-size: 1.05em;
} }
.author-and-date { .author-and-date {
color: var(--text-muted); font-size: 0.82em;
font-size: 0.85em; color: #aaaaaa;
} }
.action { .remark-count {
color: var(--text-muted); font-size: 0.82em;
font-size: 0.85em; color: #6DCFF6;
font-weight: bold;
} }
/* ---- thread summaries ---- */ .date {
color: #888888;
ul.summary {
list-style: none;
padding-left: 0;
margin: 0;
} }
li.summary { /*********************
border-bottom: 1px solid var(--border); page body areas
padding: 14px 0; *********************/
#wiki-section-break, #comment-section, #show-comment {
border-color: #336173;
} }
li.summary:last-child { #comment-section {
border-bottom: none; display: block;
} }
/* ---- forms and inputs ---- */ #comment, #comment-preview-div {
font-size: 12px;
input, background-color: #184254;
textarea, color: #eeeeee;
.common-textarea, border-radius: 6px;
#thread_title_input, border: 0;
#email_input,
#email_input2 {
background-color: var(--bg-input);
color: var(--text);
border: 1px solid var(--border);
border-radius: 2px;
font-family: inherit;
transition: border-color 0.15s;
} }
input:focus, textarea, .text {
textarea:focus, background-color: #184254;
color: #eeeeee;
border-radius: 6px;
border: 1px solid #336173;
}
textarea:focus, .text:focus {
outline: none;
border-color: #6DCFF6;
}
#flash {
opacity: 0.8;
}
.contents {
background-color: #184254;
color: #eeeeee;
border: 0;
}
.codeblock {
color: #bbbbbb;
background-color: #184254;
border-radius: 6px;
border: 0;
padding: 12px;
font-size: 12px;
font-family: monospace;
overflow-x: auto;
}
/*********************
footer
*********************/
#footer {
background-image: url(/static/theme/chaostheory/footer-lines-bkg.png);
padding: 40px;
padding-top: 80px;
background-color: #111111;
background-position: 50% 0;
background-repeat: repeat-x;
font-size: 0.85em;
color: #888888;
text-align: center;
}
#footer a, #footer a:link, #footer a:visited {
color: #6DCFF6;
}
.utility {
color: white;
font-weight: bold;
}
/*********************
tables
*********************/
table.event {
border: 0;
width: 100%;
}
td.event {
color: #DDDDDD;
padding: 6px 8px;
}
tr.False {
background-color: #184254;
}
tr.True {
background-color: #1C4E63;
}
.daybr {
background-color: #153948;
border: 0;
font-size: 1.1em;
font-weight: bold;
padding: 4px 8px;
color: #6DCFF6;
}
/*********************
alerts / flash
*********************/
.warning, .error {
background-color: #4a1a1a;
color: #ffaaaa;
border: 1px solid #7a2020;
border-radius: 4px;
padding: 8px 12px;
}
.success, .notice {
background-color: #0e3020;
color: #aaffbb;
border: 1px solid #1a5c30;
border-radius: 4px;
padding: 8px 12px;
}
/*********************
forms & comment section
*********************/
.common-text-input,
.common-textarea {
background-color: #184254;
color: #eeeeee;
border: 1px solid #336173;
border-radius: 4px;
}
.common-text-input:focus,
.common-textarea:focus { .common-textarea:focus {
border-color: var(--accent); outline: none;
outline: none; border-color: #6DCFF6;
}
.common-text-input::placeholder,
.common-textarea::placeholder {
color: #aaaaaa;
}
input[type="text"],
input[type="email"],
input[type="input"] {
background-color: #184254;
color: #eeeeee;
border: 1px solid #336173;
border-radius: 4px;
padding: 4px 8px;
}
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="input"]::placeholder {
color: #aaaaaa;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="input"]:focus {
outline: none;
border-color: #6DCFF6;
}
input[type="submit"],
button[type="submit"],
.button {
background-color: #184254;
color: #6DCFF6;
border: 1px solid #336173;
border-radius: 4px;
padding: 5px 14px;
cursor: pointer;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif;
}
input[type="submit"]:hover,
button[type="submit"]:hover,
.button:hover {
background-color: #1C4E63;
border-color: #6DCFF6;
color: #9de3fb;
}
.green-button {
background-color: #0e3020;
border-color: #1a5c30;
color: #aaffbb;
}
.green-button:hover {
background-color: #1a5c30;
color: #ddffee;
}
.comments-section {
margin-top: 2rem;
}
.comments-divider {
border-top: 2px solid #336173;
margin-bottom: 1rem;
}
.comments-header {
color: #6DCFF6;
font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif;
letter-spacing: -0.04em;
margin-top: 0;
padding-top: 0;
}
.no-comments {
color: #aaaaaa;
font-style: italic;
margin-top: 1rem;
} }
.preview { .preview {
border: 1px solid var(--border); background-color: #184254;
background-color: var(--bg-input); border: 1px dotted #336173;
border-radius: 4px;
padding: 12px 16px;
margin-top: 8px;
color: #eeeeee;
} }
/* ---- buttons ---- */ .author-and-date a,
.status,
.btn, button, input[type="submit"] { .whats-next,
font-family: 'Space Mono', 'Courier New', monospace; .topic,
font-size: 0.82em; .remark-count {
border-radius: 2px; color: #aaaaaa;
cursor: pointer; font-size: 0.82em;
transition: background-color 0.15s, color 0.15s, border-color 0.15s;
} }
/* ---- alerts ---- */ .topic a {
color: #6DCFF6;
#alerts {
width: 36%;
margin: auto;
right: 50%;
margin-right: -18%;
position: fixed;
z-index: 100;
} }
.close { .action,
margin-left: 10px; .remark {
float: left; color: #aaaaaa;
font-size: 0.78em;
margin-right: 8px;
font-weight: bold;
cursor: pointer;
text-decoration: none;
} }
.alert { .action:hover,
text-align: center; .remark:hover {
color: #ffffff; color: #6DCFF6;
font-weight: bold;
border-radius: 2px;
margin-bottom: 6px;
padding: 8px 12px;
font-family: 'Space Mono', 'Courier New', monospace;
font-size: 0.82em;
} }
.alert-warning, p.whats-next {
.alert-error { color: #aaaaaa;
background-color: #3a1510; font-size: 0.85em;
border: 1px solid var(--accent-warm);
color: var(--accent-warm);
} }
.alert-success, /*********************
.alert-notice { TOC (.. contents::)
background-color: #081a16; *********************/
border: 1px solid var(--accent);
color: var(--accent); div.contents {
background-color: #184254;
border: 1px solid #336173;
border-radius: 4px;
padding: 12px 20px;
display: inline-block;
min-width: 200px;
margin-bottom: 1.5em;
} }
/* ---- footer ---- */ div.contents ul {
margin: 0;
#remarkbox-footer { padding-left: 1.2em;
width: 68%;
margin: 20px auto 0;
text-align: center;
font-size: 0.78em;
color: var(--text-muted);
} }
.poweredby { div.contents a, div.contents a:visited {
opacity: 0.35; color: #6DCFF6;
font-size: 0.9em;
} }
/* ---- mobile ---- */ div.contents a:hover {
color: #9de3fb;
@media screen and (min-width: 0px) and (max-width: 800px) {
.mobile-hide { display: none; }
.main { width: 96%; padding: 16px 14px; }
#remarkbox-footer { width: 96%; }
.searchbox { width: 180px; margin-right: 14px; }
h1.brand { margin-left: 14px; font-size: 1.7em; }
.tagline { margin-left: 16px; }
#remarkbox-menu { margin-right: 14px; }
} }
/* ---- burger phone menu ---- */ /*********************
thread comments
*********************/
.burger-label { .conversation {
background-color: var(--accent); border-top: 1px solid #336173;
opacity: 0.75; padding-top: 1.2rem;
transition: opacity 0.2s; margin-top: 1.2rem;
} }
.burger-label:hover { .node {
opacity: 1.0; padding-top: 0.8rem;
padding-bottom: 0.8rem;
} }
.burger-label span { .node-depth-1 { padding-left: 0; }
background-color: var(--bg); .node-depth-2 { padding-left: 28px; border-left: 2px solid #336173; margin-left: 16px; }
.node-depth-3 { padding-left: 28px; border-left: 2px solid #2a5468; margin-left: 28px; }
.node-depth-4 { padding-left: 28px; border-left: 1px solid #2a5468; margin-left: 40px; }
.node .author-and-date {
font-size: 0.82em;
color: #aaaaaa;
margin-bottom: 4px;
display: block;
} }
.burger-checkbox ~ .phone-menu { .node-data {
background-color: var(--bg); margin-top: 6px;
border-top: 2px solid var(--accent); line-height: 1.65;
}
.node-data p {
margin-top: 0;
margin-bottom: 0.5em;
}
.node-actions {
margin-top: 6px;
}
.remark-box-div-main {
background-color: #184254;
border: 1px solid #336173;
border-radius: 6px;
padding: 16px 20px;
margin-bottom: 1.5rem;
}
.remark-box-div-main .common-textarea {
min-height: 80px;
}
/*********************
images & figures
*********************/
.node-data img,
#content img {
max-width: 100%;
height: auto;
border-radius: 4px;
margin: 8px 0;
}
figure {
margin: 1rem 0;
}
figcaption {
font-size: 0.85em;
color: #aaaaaa;
font-style: italic;
margin-top: 4px;
}
/*********************
OG comment card style
*********************/
/* Override previous node styles with card-based layout */
.conversation {
border-top: none;
padding-top: 0;
margin-top: 0;
}
.node.node-depth-1 {
background-color: #163a4a;
border: 1px solid #4a8fa8;
border-radius: 6px;
padding: 14px 18px 12px 18px;
margin-bottom: 14px;
}
.node.node-depth-2 {
background-color: #112e3c;
border: 1px solid #4a8fa8;
border-left: 3px solid #6DCFF6;
border-radius: 4px;
padding: 10px 14px 10px 14px;
margin-bottom: 10px;
margin-left: 32px;
}
.node.node-depth-3 {
background-color: #0e2530;
border: 1px solid #336173;
border-left: 3px solid #4a8fa8;
border-radius: 4px;
padding: 8px 12px;
margin-bottom: 8px;
margin-left: 56px;
}
.node.node-depth-4,
.node.node-depth-5 {
background-color: #0b1e27;
border: 1px solid #2a5468;
border-left: 2px solid #336173;
border-radius: 4px;
padding: 6px 10px;
margin-bottom: 6px;
margin-left: 72px;
}
/* Card interior flex row with wrap.
Avatar + author-and-date share the first row.
Everything else wraps to full width below. */
.node {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
column-gap: 10px;
row-gap: 0;
}
/* Avatar wrapper (a or img) — flex item, kill float from align="left" */
.node img.avatar,
.node a:has(img.avatar) {
flex: 0 0 auto;
float: none !important;
order: 0;
display: block;
align-self: flex-start;
margin: 0;
}
.node img.avatar {
border-radius: 3px;
display: block;
}
/* Author/date: fills rest of the header row */
.node .author-and-date {
flex: 1 1 0;
min-width: 0;
order: 1;
font-size: 0.82em;
color: #aaaaaa;
padding-bottom: 8px;
border-bottom: 1px solid #2a5468;
line-height: 1.4;
align-self: center;
}
.node .author-and-date a {
color: #6DCFF6;
font-weight: bold;
}
/* Everything below wraps to a new full-width row */
.node .status,
.node .node-data,
.node .node-actions,
.node .edit-box-div,
.node .remark-box-div,
.node [id^="node-children-"] {
flex: 0 0 100%;
order: 10;
}
/* Comment text */
.node .node-data {
margin-top: 10px;
font-size: 0.95em;
line-height: 1.65;
overflow-wrap: break-word;
word-break: break-word;
}
/* Action row */
.node .node-actions {
margin-top: 8px;
border-top: 1px solid #2a5468;
padding-top: 5px;
font-size: 0.78em;
}
/* Reply form inside node — display:none owned by common.css; just clear floats when open */
.remark-box-div.toggle-open {
display: flow-root;
}
/* Thread container spacing */
.thread {
margin-top: 1rem;
}
.no-comments {
background-color: #184254;
border: 1px solid #336173;
border-radius: 6px;
padding: 20px;
text-align: center;
color: #aaaaaa;
font-style: italic;
margin-top: 1rem;
}
/* Main reply form card */
.remark-box-div-main {
background-color: #184254;
border: 1px solid #336173;
border-radius: 6px;
padding: 16px 20px;
margin-bottom: 1.5rem;
display: flow-root; /* clears internal floats without clipping */
}
/* Wiki page tabs — content | history */
.wiki-tabs {
display: flex;
gap: 0;
border-bottom: 2px solid #2a5468;
margin-bottom: 1rem;
}
.wiki-tab {
padding: 6px 16px;
color: #aaaaaa;
text-decoration: none;
border: 1px solid transparent;
border-bottom: none;
border-radius: 4px 4px 0 0;
font-size: 0.85em;
}
.wiki-tab:hover {
color: #6DCFF6;
background: #184254;
}
.wiki-tab.active {
color: #6DCFF6;
background: #184254;
border-color: #2a5468;
border-bottom: 2px solid #184254;
margin-bottom: -2px;
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View file

@ -2,14 +2,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>{% block title %}{{ request.domain }}{% endblock %}</title> <title>{% block title %}foxhop.net{% endblock %}</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#06060e">
{% include 'snippets/stylesheet-includes.j2' %} <link rel="stylesheet" href="/static/css/common.css">
<link rel="stylesheet" href="/static/theme/chaostheory/css/960.css">
<link rel="stylesheet" href="/static/theme/chaostheory/css/pygments-native.css">
<link rel="stylesheet" href="/static/theme/chaostheory/css/theme.css"> <link rel="stylesheet" href="/static/theme/chaostheory/css/theme.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap">
{% include 'snippets/javascript-includes.j2' %} {% include 'snippets/javascript-includes.j2' %}
</head> </head>
@ -22,36 +22,71 @@
{% include 'snippets/flash-alerts.j2' %} {% include 'snippets/flash-alerts.j2' %}
<div class="searchbox"> <div id="header">
{% include 'snippets/search.j2' %} <a href="/">foxhop.net</a>
</div> </div>
<h1 class="brand"><a href="/">foxhop<span class="brand-dot">.</span></a></h1> <div class="container_16">
<p class="tagline">sensitive dependence on initial conditions</p>
<div id="wikibar" class="grid_16">
<div id="wikibar-left" class="grid_10">
<a href="/" class="on">home</a>
{%- if request.user %}
{{ snippets.user_link(request.user) }}
<a href="/log-out">log out</a>
{%- else %}
<a href="/join-or-log-in">join or log in</a>
{%- endif %}
</div>
<div id="wikibar-right" class="grid_6">
<form action="/search" id="search" onsubmit="submit.disabled = true; return true;">
<input type="hidden" name="namespace" value="{{ request.namespace.name }}">
<input type="input" name="keywords" id="keywords" placeholder="search" required/>
</form>
</div>
</div>
<div class="clear"></div>
<div id="content" class="grid_16">
{% block content %}
{% endblock %}
</div>
<div id="remarkbox-menu">
{%- block menu %}
<a href="/">home</a> |
<a href="/new">new thread</a> |
{%- if request.user %}
{{ snippets.user_link(request.user) }} <a href="/log-out">[log out]</a>
{%- else %}
<a href="/join-or-log-in">join or log in</a>
{%- endif %}
{%- endblock %}
</div> </div>
<div class="main"> <div id="footer">
{% block content %}
{% endblock %}
</div>
{% include 'snippets/phone-menu.j2' %}
<div id="remarkbox-footer">
<br />
{% include 'snippets/powered-by.j2' %} {% include 'snippets/powered-by.j2' %}
</div> </div>
<script>
// Build TOC from empty div.contents pandoc placeholder + heading id attrs
document.addEventListener('DOMContentLoaded', function() {
var toc = document.querySelector('#content div.contents');
if (!toc) return;
var content = document.getElementById('content');
var headings = content.querySelectorAll('h2, h3, h4');
if (!headings.length) { toc.style.display = 'none'; return; }
var title = document.createElement('p');
title.style.cssText = 'font-weight:bold; margin:0 0 6px 0; color:#6DCFF6; font-size:0.9em;';
title.textContent = 'Contents';
var ul = document.createElement('ul');
ul.style.margin = '0';
headings.forEach(function(h) {
if (!h.id) return;
var depth = parseInt(h.tagName[1]) - 2;
var li = document.createElement('li');
li.style.paddingLeft = (depth * 12) + 'px';
var a = document.createElement('a');
a.href = '#' + h.id;
a.textContent = h.textContent;
li.appendChild(a);
ul.appendChild(li);
});
toc.appendChild(title);
toc.appendChild(ul);
});
</script>
</body> </body>
</html> </html>