■ 🕑 1. stylesheet thread
│ talk about pohon stylesheets here
│ here are various site features to test
│ >gtxt
│ spoiler
│
├─■ 🕑 2.
│ │ example sage
│ │
│ └─■ 🕑 3.
│ < more
│ , test
│ ^ ing
│ >#2
│
├─■ 🕑 4.
│ │ ugly stylesheet 'arctic'
│ │
│ │ body {
│ │ background-color: #136;
│ │ color: #fff;
│ │ font-family: monospace, monospace;
│ │ max-width: 1234px;
│ │ margin-left: 16px;
│ │ margin-right: 32px;
│ │ line-height: 0.9;
│ │ }
│ │
│ │ .sjis {
│ │ font-family: Mona, "MS PGothic", Osaka, Meiryo, monospace, monospace;
│ │ }
│ │
│ │ a, a:visited { color: #bee;}
│ │
│ │ hr {
│ │ border: 0 none;
│ │ height: 1px;
│ │ background-color: #777;
│ │ color: #777;
│ │ }
│ │
│ │ .headline {
│ │ display: block;
│ │ font-size: 1.5em;
│ │ font-weight: bold;
│ │ margin-top: 0.83em;
│ │ margin-bottom: 0.83em;
│ │ }
│ │
│ │ .thread-head {
│ │ display: block;
│ │ font-size: 1.17em;
│ │ margin-top: 1em;
│ │ margin-bottom: 1em;
│ │ margin-left: 0;
│ │ margin-right: 0;
│ │ font-weight: bold;
│ │ }
│ │
│ │ .title {
│ │ background-color: #007f7f;
│ │ padding:2px;
│ │ color:#fff;
│ │ }
│ │
│ │ .new-thread {
│ │ line-height: 2;
│ │ }
│ │ .new-thread > form > input[type="text"] {
│ │ width: 300px;
│ │ }
│ │
│ │ label {
│ │ white-space: nowrap;
│ │ }
│ │
│ │ table.comment-box {
│ │ padding-left: 3em;
│ │ }
│ │
│ │ td.comment {
│ │ padding-left: 1em;
│ │ width: 80ch;
│ │ white-space: break-spaces;
│ │ }
│ │
│ │ span.subject {
│ │ font-weight: bold;
│ │ }
│ │
│ │ span.pubdate {
│ │ text-decoration: underline;
│ │ }
│ │
│ │ span.author {
│ │ font-weight: bold;
│ │ }
│ │
│ │ span.deleted {
│ │ font-style: italic;
│ │ }
│ │
│ │ span.error {
│ │ color: red;
│ │ }
│ │
│ │ details {
│ │ user-select: none;
│ │ border: 2px solid black;
│ │ padding: 1em;
│ │ background-color: #066;
│ │ }
│ │
│ │ details.tagbox {
│ │ width: 350px;
│ │ }
│ │
│ │ details.replybox {
│ │ width: 40em;
│ │ }
│ │
│ │ details > p {
│ │ border-top: 2px solid white;
│ │ padding-top: 1em;
│ │ }
│ │
│ │ summary {
│ │ cursor: pointer;
│ │ text-decoration: underline;
│ │ color: cyan;
│ │ }
│ │
│ │ input.subject {
│ │ width: 20em;
│ │ }
│ │
│ │ .threadnav {
│ │ padding: 4px;
│ │ background-color: #249;
│ │ max-width: 300px;
│ │ position: sticky;
│ │ float:right;
│ │ top: 10%;
│ │ }
│ │
│ │ .sage {
│ │ background-color: #137;
│ │ color: #bbf;
│ │ font-weight: normal;
│ │ font-style: italic;
│ │ }
│ │
│ │ .trip {
│ │ color: #c1f;
│ │ font-weight: normal;
│ │ font-style: normal;
│ │ border-bottom: 1px solid;
│ │ }
│ │
│ │ .quote {
│ │ color: #0f2;
│ │ }
│ │
│ │ .quote2 {
│ │ color: #fb2;
│ │ }
│ │
│ │ .quote3 {
│ │ color: #f6e;
│ │ }
│ │
│ │ .spoiler {
│ │ color: #002;
│ │ background-color: #002;
│ │ }
│ │
│ │ .spoiler:hover {
│ │ color: #ffe;
│ │ }
│ │
│ │
│ └─■ 🕑 6.
│ │ this looks cool man, i'll look into adding themes to the code soon
│ │
│ └─■ 🕑 7.
│ │ i don't have much doubt you wont, but please don't do it the usual
│ │ way where its a js controlled drop-down menu and cookie!
│ │ maybe a cgi variable in url or something works.
│ │
│ └─■ 🕑 8.
│ It's going to be handled by backend rather than JS, with an option to
│ select via CGI variable in URL. So far we don't use any javascript here
│ and the only cookie is for the admin password. But a cookie for site
│ theme feels appropriate.
│
│ I may also add a cookie for the name field, so whatever name you enter
│ is preserved; posting as anon clears the name cookie -- just like on
│ wiki.gikopoi.com
│
│ What 0chan/multichan did ... *worked* but the stylesheet changing 0.5s
│ into a page loading was not very kino.
│
├─■ 🕑 5.
│ wip: https://i.imgur.com/tm7lSEq.jpeg
│
└─■ 🕑 9.
sorry for sleeping on this, been lazy...