init chaos theory theme for foxhop.net
Dark void background with dot-grid overlay, electric teal accent, Space Mono typography. Remarkbox entry point: chaostheory.
This commit is contained in:
commit
5722b6c7b0
6 changed files with 422 additions and 0 deletions
2
MANIFEST.in
Normal file
2
MANIFEST.in
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
recursive-include remarkbox_chaostheory/templates *
|
||||
recursive-include remarkbox_chaostheory/static *
|
||||
39
readme.rst
Normal file
39
readme.rst
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
Remarkbox Chaos Theory Theme
|
||||
=============================
|
||||
|
||||
foxhop.net theme for Remarkbox.
|
||||
|
||||
**Sensitive dependence on initial conditions.**
|
||||
|
||||
Design
|
||||
------
|
||||
|
||||
- Background: ``#06060e`` — void black with a dot-grid overlay (ordered structure from simple rules)
|
||||
- Accent: ``#00e5cc`` — electric teal
|
||||
- Font: Space Mono (Google Fonts) — monospace precision
|
||||
- Container: dark panel with electric teal top border
|
||||
- Minimal nav, right-aligned, monospace
|
||||
|
||||
Install
|
||||
-------
|
||||
|
||||
.. code-block:: bash
|
||||
|
||||
cd remarkbox-theme-chaostheory
|
||||
pip install -e .
|
||||
|
||||
Configure in your Remarkbox ``production.ini``::
|
||||
|
||||
app.theme = chaostheory
|
||||
|
||||
Files
|
||||
-----
|
||||
|
||||
.. code-block:: text
|
||||
|
||||
remarkbox_chaostheory/
|
||||
├── templates/
|
||||
│ └── chaostheory-base.j2
|
||||
└── static/theme/chaostheory/
|
||||
└── css/
|
||||
└── theme.css
|
||||
0
remarkbox_chaostheory/__init__.py
Normal file
0
remarkbox_chaostheory/__init__.py
Normal file
293
remarkbox_chaostheory/static/theme/chaostheory/css/theme.css
Normal file
293
remarkbox_chaostheory/static/theme/chaostheory/css/theme.css
Normal file
|
|
@ -0,0 +1,293 @@
|
|||
/* ============================================================
|
||||
foxhop.net — chaos theory theme
|
||||
sensitive dependence on initial conditions
|
||||
============================================================ */
|
||||
|
||||
:root {
|
||||
--bg: #06060e;
|
||||
--bg-container: rgba(9, 9, 22, 0.98);
|
||||
--bg-input: #0f0f22;
|
||||
--text: #c4c4d0;
|
||||
--text-muted: #52526a;
|
||||
--accent: #00e5cc;
|
||||
--accent-warm: #ff6b35;
|
||||
--border: #1a1a30;
|
||||
--border-top: #00e5cc;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--text);
|
||||
background-color: var(--bg);
|
||||
/* dot grid — ordered system from simple rules */
|
||||
background-image: radial-gradient(
|
||||
circle,
|
||||
rgba(0, 229, 204, 0.07) 1px,
|
||||
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 {
|
||||
font-family: 'Space Mono', 'Courier New', monospace;
|
||||
color: #e8e8f0;
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
opacity: 0.85;
|
||||
transition: opacity 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
opacity: 1.0;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* ---- brand ---- */
|
||||
|
||||
h1.brand {
|
||||
font-family: 'Space Mono', 'Courier New', monospace;
|
||||
font-size: 2.2em;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
margin-left: 32px;
|
||||
margin-bottom: 0;
|
||||
color: #e8e8f0;
|
||||
}
|
||||
|
||||
h1.brand a {
|
||||
color: #e8e8f0;
|
||||
opacity: 1.0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1.brand a:hover {
|
||||
color: #ffffff;
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.brand-dot {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-family: 'Space Mono', 'Courier New', monospace;
|
||||
font-size: 0.7em;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 1px;
|
||||
margin-left: 36px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
/* ---- search ---- */
|
||||
|
||||
.searchbox {
|
||||
float: right;
|
||||
margin-right: 32px;
|
||||
margin-bottom: 20px;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
/* ---- nav menu ---- */
|
||||
|
||||
#remarkbox-menu {
|
||||
text-align: right;
|
||||
margin-right: 32px;
|
||||
margin-bottom: 24px;
|
||||
font-family: 'Space Mono', 'Courier New', monospace;
|
||||
font-size: 0.82em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
#remarkbox-menu a {
|
||||
color: var(--text-muted);
|
||||
opacity: 1.0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#remarkbox-menu a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ---- main content container ---- */
|
||||
|
||||
.main {
|
||||
width: 68%;
|
||||
margin: auto;
|
||||
background: var(--bg-container);
|
||||
border: 1px solid var(--border);
|
||||
border-top: 2px solid var(--border-top);
|
||||
border-radius: 2px;
|
||||
padding: 28px 32px;
|
||||
}
|
||||
|
||||
/* ---- content elements ---- */
|
||||
|
||||
.title {
|
||||
font-size: 1.35em;
|
||||
font-family: 'Space Mono', 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.author-and-date {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.action {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
/* ---- thread summaries ---- */
|
||||
|
||||
ul.summary {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li.summary {
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 14px 0;
|
||||
}
|
||||
|
||||
li.summary:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* ---- forms and inputs ---- */
|
||||
|
||||
input,
|
||||
textarea,
|
||||
.common-textarea,
|
||||
#thread_title_input,
|
||||
#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:focus,
|
||||
.common-textarea:focus {
|
||||
border-color: var(--accent);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.preview {
|
||||
border: 1px solid var(--border);
|
||||
background-color: var(--bg-input);
|
||||
}
|
||||
|
||||
/* ---- buttons ---- */
|
||||
|
||||
.btn, button, input[type="submit"] {
|
||||
font-family: 'Space Mono', 'Courier New', monospace;
|
||||
font-size: 0.82em;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s, color 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
/* ---- alerts ---- */
|
||||
|
||||
#alerts {
|
||||
width: 36%;
|
||||
margin: auto;
|
||||
right: 50%;
|
||||
margin-right: -18%;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.close {
|
||||
margin-left: 10px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.alert {
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
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,
|
||||
.alert-error {
|
||||
background-color: #3a1510;
|
||||
border: 1px solid var(--accent-warm);
|
||||
color: var(--accent-warm);
|
||||
}
|
||||
|
||||
.alert-success,
|
||||
.alert-notice {
|
||||
background-color: #081a16;
|
||||
border: 1px solid var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ---- footer ---- */
|
||||
|
||||
#remarkbox-footer {
|
||||
width: 68%;
|
||||
margin: 20px auto 0;
|
||||
text-align: center;
|
||||
font-size: 0.78em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.poweredby {
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
/* ---- mobile ---- */
|
||||
|
||||
@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 ---- */
|
||||
|
||||
.burger-label {
|
||||
background-color: var(--accent);
|
||||
opacity: 0.75;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.burger-label:hover {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.burger-label span {
|
||||
background-color: var(--bg);
|
||||
}
|
||||
|
||||
.burger-checkbox ~ .phone-menu {
|
||||
background-color: var(--bg);
|
||||
border-top: 2px solid var(--accent);
|
||||
}
|
||||
57
remarkbox_chaostheory/templates/chaostheory-base.j2
Normal file
57
remarkbox_chaostheory/templates/chaostheory-base.j2
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
{%- import 'snippets/snippets.j2' as snippets with context -%}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>{% block title %}{{ request.domain }}{% endblock %}</title>
|
||||
<meta charset="utf-8" />
|
||||
<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/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' %}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<noscript>
|
||||
<style>.js-only { display: none; }</style>
|
||||
</noscript>
|
||||
|
||||
{% include 'snippets/flash-alerts.j2' %}
|
||||
|
||||
<div class="searchbox">
|
||||
{% include 'snippets/search.j2' %}
|
||||
</div>
|
||||
|
||||
<h1 class="brand"><a href="/">foxhop<span class="brand-dot">.</span></a></h1>
|
||||
<p class="tagline">sensitive dependence on initial conditions</p>
|
||||
|
||||
<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 class="main">
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
||||
{% include 'snippets/phone-menu.j2' %}
|
||||
|
||||
<div id="remarkbox-footer">
|
||||
<br />
|
||||
{% include 'snippets/powered-by.j2' %}
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
31
setup.py
Normal file
31
setup.py
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
# A Remarkbox theme is a python package with the following paths:
|
||||
#
|
||||
# templates/<theme_name>-base.j2
|
||||
# static/theme/<theme_name>/
|
||||
#
|
||||
# Register to 'remarkbox.themes' entry_point group to load in Remarkbox.
|
||||
|
||||
from setuptools import setup, find_packages
|
||||
|
||||
setup(
|
||||
name='remarkbox_chaostheory',
|
||||
version='0.1.0',
|
||||
description='remarkbox chaos theory theme — foxhop.net',
|
||||
classifiers=[
|
||||
"Programming Language :: Python",
|
||||
"Framework :: Pyramid",
|
||||
"Topic :: Internet :: WWW/HTTP",
|
||||
"Topic :: Internet :: WWW/HTTP :: WSGI :: Application",
|
||||
],
|
||||
author='fox',
|
||||
url='https://foxhop.net',
|
||||
keywords='remarkbox chaostheory theme foxhop',
|
||||
packages=find_packages(),
|
||||
include_package_data=True,
|
||||
zip_safe=False,
|
||||
entry_points={
|
||||
'remarkbox.themes': [
|
||||
'chaostheory = remarkbox_chaostheory',
|
||||
],
|
||||
},
|
||||
)
|
||||
Loading…
Add table
Add a link
Reference in a new issue