flux.vision, tobias.raayoni-last.com and randogoth.com. They were one site until October 2026, serving four audiences from a single dated list, which is the only format that can hold unrelated things at once. flux.vision is recovered from the Wayback Machine, where it had sat since being deleted in 2021: 90 articles, closed and maintained rather than updated. tobias.raayoni-last.com is the professional record, 97 articles back to 1999. randogoth.com is the technical work, 41 articles across six areas, served as an ANSI bulletin board. History starts here deliberately. The development history, the 266-row inventory that records why each article went where it did, the Wayback pipelines, the pruned articles, the source archives and the full-size images are kept beside the repo rather than in it, so a clone is the web presence and not the argument that produced it. REFACTOR.md is gitignored for the same reason. See README.md for where that material lives, and keep it: the sort is not reproducible from these three directories alone. Each site documents itself in its own README, including the traps that cost time and look like nothing when you get them wrong.
268 lines
No EOL
3.9 KiB
CSS
268 lines
No EOL
3.9 KiB
CSS
@font-face {
|
|
font-family: 'Classic Console Neue';
|
|
src: local('Classic Console Neue'), local('ClassicConsoleNeue'),
|
|
url('clacon2.woff2') format('woff2')
|
|
}
|
|
|
|
/* CSS Reset */
|
|
html {
|
|
margin: 0;
|
|
padding: 0;
|
|
text-align: left;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
/* HTML5 tag defaults. */
|
|
header, footer, aside, nav, article
|
|
{
|
|
display: block;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5 {
|
|
font-weight: normal;
|
|
text-align: left;
|
|
font-size: 1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Classic Console Neue';
|
|
padding-top: 2em;
|
|
font-size: 1.4em;
|
|
line-height: 1.2em;
|
|
text-align: left;
|
|
background: #000;
|
|
color: #bbb;
|
|
height: 100vh;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
perspective: 2px;
|
|
margin: auto;
|
|
max-width: 40em;
|
|
}
|
|
|
|
ul, ul li {
|
|
margin:0;
|
|
padding:0;
|
|
list-style:none
|
|
}
|
|
|
|
ul li::before {
|
|
content: '*\00a0';
|
|
}
|
|
|
|
ul li a {
|
|
display: inline;
|
|
}
|
|
|
|
/* Use a thin border around all images. */
|
|
img
|
|
{
|
|
border: 1px solid;
|
|
max-width: 40em;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Navigation bar. */
|
|
nav li::before {
|
|
content: none;
|
|
}
|
|
|
|
#menu {
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
#menu {
|
|
color: #000;
|
|
}
|
|
|
|
#menu a {
|
|
background-color: transparent;
|
|
color: #000;
|
|
padding: 0;
|
|
}
|
|
|
|
#menu ul li:not(:first-child) a::first-letter {
|
|
color: rgb(168, 0, 0);
|
|
}
|
|
|
|
/*
|
|
* Use a border around tables, but don't draw lines around individual
|
|
* cells.
|
|
*/
|
|
table
|
|
{
|
|
border-style: solid;
|
|
border-collapse: collapse;
|
|
border-width: thin;
|
|
font-size: 100%;
|
|
}
|
|
|
|
th, td
|
|
{
|
|
border-style: solid;
|
|
border-width: thin;
|
|
}
|
|
|
|
a {
|
|
background-color: #0aa;
|
|
/* color:#000; */
|
|
padding: 0.2em 0.3em 0em 0.3em;
|
|
}
|
|
|
|
a.translation {
|
|
background-color: #333;
|
|
}
|
|
|
|
/* for unvisited links: blue */
|
|
a:link
|
|
{
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* for visited links: purple */
|
|
a:visited
|
|
{
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* when mouse is over link or the link is active*/
|
|
a:hover, a:active
|
|
{
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Very clean ruler with no shadows. */
|
|
hr
|
|
{
|
|
border: none;
|
|
}
|
|
|
|
@media screen and (min-width: 941px) {
|
|
hr::after {
|
|
content: '--------------------------------------------------------------------------------';
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 940px) {
|
|
hr {
|
|
border-top: 2px dashed #bbb;
|
|
}
|
|
}
|
|
|
|
.hentry::after {
|
|
content: '\00a0'
|
|
}
|
|
|
|
abbr {
|
|
display: inline;
|
|
text-decoration: none;
|
|
padding: 0;
|
|
float:left;
|
|
}
|
|
|
|
.hentry .entry-summary p {
|
|
margin: 0;
|
|
}
|
|
|
|
.hentry h2 {
|
|
margin: 0;
|
|
}
|
|
|
|
.post-info abbr {
|
|
float: none;
|
|
}
|
|
|
|
.author {
|
|
font-style: normal;
|
|
padding: 0;
|
|
}
|
|
|
|
@keyframes cursor-blink {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
#content-window {
|
|
background-color: #00f;
|
|
display: block;
|
|
margin-top:.7em;
|
|
}
|
|
|
|
#root {
|
|
display: block;
|
|
margin-top: 2em;
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
[contenteditable="true"]:active,
|
|
[contenteditable="true"]:focus{
|
|
border:none;
|
|
outline:none;
|
|
caret-color: transparent;
|
|
}
|
|
|
|
[contenteditable="true"]:active:after,
|
|
[contenteditable="true"]:focus:after {
|
|
content: "\02588";
|
|
animation: cursor-blink 1.5s steps(2) infinite;
|
|
}
|
|
|
|
.para {
|
|
border: 1px solid;
|
|
max-width: 40em;
|
|
display: block;
|
|
background-attachment: fixed;
|
|
background-position: center;
|
|
background-size: contain;
|
|
}
|
|
|
|
iframe {
|
|
border: 1px solid;
|
|
aspect-ratio: 16 / 9;
|
|
width: 100%;
|
|
}
|
|
|
|
blockquote {
|
|
border: 1px solid;
|
|
margin: 0;
|
|
padding: 0 1em;
|
|
background: #555;
|
|
-webkit-hyphens: auto;
|
|
-moz-hyphens: auto;
|
|
-ms-hyphens: auto;
|
|
hyphens: auto;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
em, strong {
|
|
font-style: normal;
|
|
color: white;
|
|
}
|
|
|
|
.overlay {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: fixed;
|
|
z-index: 1;
|
|
left: 0;
|
|
overflow-x: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.vignette {
|
|
background-image: radial-gradient(ellipse at center, rgba(0,0,0,0) 50%, rgba(0,0,0,0.25) 100%);
|
|
}
|
|
|
|
.scanline {
|
|
background-image: linear-gradient(0deg, rgba(0,0,0,0) 25%, rgba(0,0,0,0.33) 25%, rgba(0,0,0,0.33) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(0,0,0,0.33) 75%, rgba(0,0,0,0.33) 100%);
|
|
background-size: 4px 4px;
|
|
}
|
|
|
|
.tui-fieldset legend {
|
|
margin-left: 50px;
|
|
padding: 0 5px 0 5px;
|
|
} |