better style, DOS colors, simplified content
This commit is contained in:
randogoth
parent
c9b86ba012
commit
8338b702b4
12 changed files with 182 additions and 234 deletions
|
|
@ -31,7 +31,7 @@ body {
|
|||
font-size: 1.4em;
|
||||
line-height: 1.2em;
|
||||
text-align: left;
|
||||
background: #090A0E;
|
||||
background: #000;
|
||||
color: #bbb;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -115,7 +115,7 @@ th, td
|
|||
|
||||
a {
|
||||
background-color: #bbb;
|
||||
color:#090A0E;
|
||||
color:#000;
|
||||
padding: 0.2em 0.3em 0em 0.3em;
|
||||
}
|
||||
|
||||
|
|
@ -164,10 +164,10 @@ hr
|
|||
}
|
||||
|
||||
abbr {
|
||||
color: #555;
|
||||
display: inline;
|
||||
text-decoration: none;
|
||||
padding: 0;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.hentry .entry-summary p {
|
||||
|
|
@ -187,16 +187,6 @@ abbr {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.post-info {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.author a {
|
||||
padding: 0;
|
||||
background: none;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
@keyframes cursor-blink {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
@ -206,6 +196,7 @@ abbr {
|
|||
#root {
|
||||
display: block;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
[contenteditable="true"]:active,
|
||||
|
|
@ -240,7 +231,7 @@ blockquote {
|
|||
border: 1px solid;
|
||||
margin: 0;
|
||||
padding: 0 1em;
|
||||
background: #222;
|
||||
background: #555;
|
||||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,35 @@
|
|||
const randomColor = Math.floor(Math.random()*16777215).toString(16);
|
||||
document.querySelector('#blog-title').firstElementChild.style.backgroundColor = '#' + randomColor;
|
||||
function pickColors() {
|
||||
const backgrounds = [
|
||||
"#000000", // Black
|
||||
"#0000AA", // Blue
|
||||
];
|
||||
|
||||
const highlights = [
|
||||
"#00AA00", // Green
|
||||
"#00AAAA", // Cyan
|
||||
"#AA00AA", // Magenta
|
||||
"#AA5500", // Brown
|
||||
"#AAAA00", // Yellow
|
||||
"#AA0000", // Red
|
||||
"#555555", // Dark Gray
|
||||
"#5555FF", // Bright Blue
|
||||
"#55FF55", // Bright Green
|
||||
"#55FFFF", // Bright Cyan
|
||||
"#FF5555", // Bright Red
|
||||
"#FF55FF", // Bright Magenta
|
||||
"#FFFF55", // Bright Yellow
|
||||
];
|
||||
|
||||
return {
|
||||
// background: backgrounds[Math.floor(Math.random() * backgrounds.length)],
|
||||
highlight: highlights[Math.floor(Math.random() * highlights.length)],
|
||||
};
|
||||
}
|
||||
|
||||
const { background, highlight } = pickColors();
|
||||
|
||||
document.querySelector('.home').style.backgroundColor = background;
|
||||
document.querySelector('#blog-title').firstElementChild.style.backgroundColor = highlight;
|
||||
|
||||
let scrollHeight = Math.max(
|
||||
document.body.scrollHeight, document.documentElement.scrollHeight,
|
||||
|
|
@ -28,115 +58,115 @@ window.addEventListener('scroll', () => {
|
|||
}
|
||||
});
|
||||
|
||||
//components
|
||||
//console component
|
||||
class Console{
|
||||
comps=[];
|
||||
input_received=false;
|
||||
blocking_interval=null;
|
||||
text_color="#bbb";
|
||||
constructor(root){
|
||||
this.elem=document.createElement("span");
|
||||
this.elem.className="console";
|
||||
root.appendChild(this.elem);
|
||||
this.resetTextColor();
|
||||
}
|
||||
appendComponent(comp){
|
||||
this.comps.push(comp);
|
||||
this.elem.appendChild(comp.elem);
|
||||
}
|
||||
writeLine(txt){
|
||||
let text=new Text(txt,this.text_color);
|
||||
this.appendComponent(text);
|
||||
}
|
||||
async readLine(txt){
|
||||
let text=new Text(txt,this.text_color);
|
||||
this.appendComponent(text);
|
||||
let input=new Input(this.text_color);
|
||||
this.appendComponent(input);
|
||||
input.elem.focus({ preventScroll: true});
|
||||
return new Promise(resolve=>{
|
||||
this.blocking_interval=setInterval(()=>{
|
||||
if(this.input_received){
|
||||
this.input_received=false;
|
||||
clearInterval(this.blocking_interval);
|
||||
resolve(input.elem.innerText);
|
||||
}
|
||||
},500);
|
||||
})
|
||||
}
|
||||
setTextColor(color){
|
||||
this.text_color=color;
|
||||
}
|
||||
resetTextColor(){
|
||||
this.text_color="#bbb";
|
||||
}
|
||||
//helpers
|
||||
get lastComp(){return this.comps[this.comps.length-1]};
|
||||
}
|
||||
//text component
|
||||
class Text{
|
||||
constructor(txt,color){
|
||||
this.elem=document.createElement("span");
|
||||
this.elem.className="text";
|
||||
this.elem.style.color=color;
|
||||
this.elem.innerText=txt;
|
||||
}
|
||||
}
|
||||
//input component
|
||||
class Input{
|
||||
constructor(color){
|
||||
this.elem=document.createElement("span");
|
||||
this.elem.style.color=color;
|
||||
this.elem.contentEditable=true;
|
||||
this.elem.addEventListener('keydown',function(e){
|
||||
let key=e.key;
|
||||
if(key=="Enter"){
|
||||
e.preventDefault();
|
||||
cmd.input_received=true;
|
||||
cmd.lastComp.elem.contentEditable=false;
|
||||
cmd.lastComp.elem.style.borderWidth="0px";
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// //components
|
||||
// //console component
|
||||
// class Console{
|
||||
// comps=[];
|
||||
// input_received=false;
|
||||
// blocking_interval=null;
|
||||
// text_color="#bbb";
|
||||
// constructor(root){
|
||||
// this.elem=document.createElement("span");
|
||||
// this.elem.className="console";
|
||||
// root.appendChild(this.elem);
|
||||
// this.resetTextColor();
|
||||
// }
|
||||
// appendComponent(comp){
|
||||
// this.comps.push(comp);
|
||||
// this.elem.appendChild(comp.elem);
|
||||
// }
|
||||
// writeLine(txt){
|
||||
// let text=new Text(txt,this.text_color);
|
||||
// this.appendComponent(text);
|
||||
// }
|
||||
// async readLine(txt){
|
||||
// let text=new Text(txt,this.text_color);
|
||||
// this.appendComponent(text);
|
||||
// let input=new Input(this.text_color);
|
||||
// this.appendComponent(input);
|
||||
// input.elem.focus({ preventScroll: true});
|
||||
// return new Promise(resolve=>{
|
||||
// this.blocking_interval=setInterval(()=>{
|
||||
// if(this.input_received){
|
||||
// this.input_received=false;
|
||||
// clearInterval(this.blocking_interval);
|
||||
// resolve(input.elem.innerText);
|
||||
// }
|
||||
// },500);
|
||||
// })
|
||||
// }
|
||||
// setTextColor(color){
|
||||
// this.text_color=color;
|
||||
// }
|
||||
// resetTextColor(){
|
||||
// this.text_color="#bbb";
|
||||
// }
|
||||
// //helpers
|
||||
// get lastComp(){return this.comps[this.comps.length-1]};
|
||||
// }
|
||||
// //text component
|
||||
// class Text{
|
||||
// constructor(txt,color){
|
||||
// this.elem=document.createElement("span");
|
||||
// this.elem.className="text";
|
||||
// this.elem.style.color=color;
|
||||
// this.elem.innerText=txt;
|
||||
// }
|
||||
// }
|
||||
// //input component
|
||||
// class Input{
|
||||
// constructor(color){
|
||||
// this.elem=document.createElement("span");
|
||||
// this.elem.style.color=color;
|
||||
// this.elem.contentEditable=true;
|
||||
// this.elem.addEventListener('keydown',function(e){
|
||||
// let key=e.key;
|
||||
// if(key=="Enter"){
|
||||
// e.preventDefault();
|
||||
// cmd.input_received=true;
|
||||
// cmd.lastComp.elem.contentEditable=false;
|
||||
// cmd.lastComp.elem.style.borderWidth="0px";
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
|
||||
/************************************/
|
||||
let root=document.getElementById("root");
|
||||
// /************************************/
|
||||
// let root=document.getElementById("root");
|
||||
|
||||
let cmd=new Console(root);
|
||||
let prompt = "C:\\>"
|
||||
async function execute(){
|
||||
let command= await cmd.readLine(prompt);
|
||||
if ( command == "projects" ) window.location = "/current.html";
|
||||
else if ( command == "blog" ) window.location = "/blog";
|
||||
else if ( command == "archive" ) window.location = "/archive";
|
||||
else if ( command == "dir" ) window.location = "/archive";
|
||||
else if ( command == "home" ) window.location = "/";
|
||||
else if ( command == "connect" ) window.location = "/connect.html";
|
||||
else if ( command == "reboot" ) location.reload();
|
||||
else if ( command == "a:" ) {
|
||||
prompt = "A:\\>";
|
||||
cmd.writeLine("\n");
|
||||
cmd=new Console(root);
|
||||
execute();
|
||||
}
|
||||
else if ( command == "b:" ) {
|
||||
prompt = "B:\\>";
|
||||
cmd.writeLine("\n");
|
||||
cmd=new Console(root);
|
||||
execute();
|
||||
}
|
||||
else if ( command == "c:" ) {
|
||||
prompt = "C:\\>";
|
||||
cmd.writeLine("\n");
|
||||
cmd=new Console(root);
|
||||
execute();
|
||||
}
|
||||
else {
|
||||
cmd.writeLine("\nSyntax error\n");
|
||||
cmd=new Console(root);
|
||||
execute();
|
||||
}
|
||||
}
|
||||
execute();
|
||||
// let cmd=new Console(root);
|
||||
// let prompt = "C:\\>"
|
||||
// async function execute(){
|
||||
// let command= await cmd.readLine(prompt);
|
||||
// if ( command == "projects" ) window.location = "/current.html";
|
||||
// else if ( command == "blog" ) window.location = "/blog";
|
||||
// else if ( command == "archive" ) window.location = "/archive";
|
||||
// else if ( command == "dir" ) window.location = "/archive";
|
||||
// else if ( command == "home" ) window.location = "/";
|
||||
// else if ( command == "connect" ) window.location = "/connect.html";
|
||||
// else if ( command == "reboot" ) location.reload();
|
||||
// else if ( command == "a:" ) {
|
||||
// prompt = "A:\\>";
|
||||
// cmd.writeLine("\n");
|
||||
// cmd=new Console(root);
|
||||
// execute();
|
||||
// }
|
||||
// else if ( command == "b:" ) {
|
||||
// prompt = "B:\\>";
|
||||
// cmd.writeLine("\n");
|
||||
// cmd=new Console(root);
|
||||
// execute();
|
||||
// }
|
||||
// else if ( command == "c:" ) {
|
||||
// prompt = "C:\\>";
|
||||
// cmd.writeLine("\n");
|
||||
// cmd=new Console(root);
|
||||
// execute();
|
||||
// }
|
||||
// else {
|
||||
// cmd.writeLine("\nSyntax error\n");
|
||||
// cmd=new Console(root);
|
||||
// execute();
|
||||
// }
|
||||
// }
|
||||
// execute();
|
||||
File diff suppressed because one or more lines are too long
BIN
web/mc-pelican/static/symbols.woff2
Normal file
BIN
web/mc-pelican/static/symbols.woff2
Normal file
Binary file not shown.
|
|
@ -7,11 +7,11 @@
|
|||
{% for article in dates if article.category != 'blog' %}
|
||||
|
||||
<article class="hentry">
|
||||
<abbr class="published" title="{{ article.date.isoformat() }}"> {{ article.locale_date }} </abbr>
|
||||
<header>
|
||||
<h2 class="entry-title">
|
||||
<a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a>
|
||||
</h2>
|
||||
<abbr class="published" title="{{ article.date.isoformat() }}">[{{ article.locale_date }}] </abbr>
|
||||
<span class="entry-summary">{{ article.summary }}</span>
|
||||
</header>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
{{ DESCRIPTION }}
|
||||
</footer><!-- /#contentinfo -->
|
||||
{% endif %}
|
||||
<span id="root"></span>
|
||||
<span id="root"> </span>
|
||||
{% if JS_OVERRIDE %}
|
||||
<!-- Script specified by the user -->
|
||||
{% for js in JS_OVERRIDE %}
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@
|
|||
{% for article in articles_page.object_list %}
|
||||
|
||||
<article class="hentry">
|
||||
<abbr class="published" title="{{ article.date.isoformat() }}"> {{ article.locale_date }} </abbr>
|
||||
<header>
|
||||
<h2 class="entry-title">
|
||||
<a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a>
|
||||
</h2>
|
||||
<abbr class="published" title="{{ article.date.isoformat() }}">[{{ article.locale_date }}] </abbr>
|
||||
<span class="entry-summary">{{ article.summary }}</span>
|
||||
</header>
|
||||
</article>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue