diff --git a/static/css/main.css b/static/css/main.css index 8bb8b6d..bb63995 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -5,6 +5,13 @@ html { font-size: 18px; } +/* blocks.css bug shim */ + +.fixed.inline.block { + pointer-events: none; + line-height: 1.5em; +} + /* resets */ html, @@ -58,15 +65,21 @@ footer { nav { margin: .8em 0; + width: 96%; + max-width: 400px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; } nav a { color: var(--block-accent-color); - margin: 0 1em; } header .subtitle { font-size: 1.2em; + line-height: 1.5em; } header .lang.block { @@ -77,7 +90,7 @@ header .lang.block { font-weight: normal; color: #fff; display: inline-block; /* for transforms */ - transform: rotate(-10deg); + transform: rotate(-10deg) translateY(6px); pointer-events: none; } @@ -92,7 +105,7 @@ header .lang.block { .editor .output, .editor .errors { width: 100%; - padding: .5em 1em; + padding: .8em 1em; border-bottom: 3px solid var(--block-text-color); box-sizing: border-box; } @@ -103,6 +116,7 @@ header .lang.block { .editor.block { padding: 0; + padding-top: 24px; } .editor .controls { @@ -118,6 +132,11 @@ header .lang.block { justify-content: flex-end; } +.editor .code { + padding: 0; + position: relative; +} + .editor .output { min-height: 5em; display: flex; @@ -130,11 +149,6 @@ header .lang.block { width: 100%; } -.editor .code { - padding: 0; - position: relative; -} - .editor .errors { color: var(--block-accent-color); } @@ -178,6 +192,40 @@ textarea.editor-input:focus { color: #777; } +main > h2 { + margin-top: 1.5em; +} + +main > p, +main > ul li { + line-height: 1.5em; +} + +main > ul li { + margin-bottom: .5em; +} + +main > p a { + color: var(--block-accent-color); +} + +footer { + margin-top: 2em; +} + footer a { color: var(--block-accent-color); } + +@media only screen and (max-width: 600px) { + header .subtitle { + line-height: 1.7em; + } + header .lang.block { + transform: rotate(-5deg) translateY(4px); + } + .filler, + textarea.editor-input { + font-size: .8em; + } +} diff --git a/static/js/main.js b/static/js/main.js index 3815538..7ff59b0 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -1,4 +1,6 @@ -const PROG_DEFAULT = `DISCOVER HOW TO factorial WITH n +const PROG_DEFAULT = `YOU WON'T WANT TO MISS 'Hello, World!' + +DISCOVER HOW TO factorial WITH n WE SAID WHAT IF n IS ACTUALLY 0 WE SAID @@ -10,7 +12,7 @@ WE SAID END OF STORY EXPERTS CLAIM result TO BE factorial OF 10 -YOU WON'T WANT TO MISS 'RESULT IS' +YOU WON'T WANT TO MISS 'Result is' YOU WON'T WANT TO MISS result PLEASE LIKE AND SUBSCRIBE`; @@ -21,6 +23,7 @@ const HEADLINES = [ `Shocking New Programming Language Bewilders Programmers at Google and Facebook!`, `Programmer Who Made Everything Now Predicts the Next Big Language!`, `The Secret Programming Language Every 10x Programmer Recommends!`, + `Programmers at Microsoft Hate This One Trick to Get Good at that Code Thing!`, ]; function randomHeadline() { @@ -56,7 +59,7 @@ class Editor extends Component { const nodes = new Parser(tokens).parse(); const env = new Environment({ print: s => { - this.output += s.toString() + '\n'; + this.output += s.toString().toUpperCase() + '!\n'; this.render(); }, }); @@ -73,7 +76,7 @@ class Editor extends Component { jdom``} + onclick=${this.handleRun}>Run this!
@@ -109,6 +112,10 @@ class App extends Component { @@ -118,11 +125,92 @@ class App extends Component { ${this.editor.node}

What?

+

+ Tabloid is a turing-complete programming + language for writing programs in the style of clickbait news + headlines. +

+

+ Here are a few things${' '}the Top Five + Most Popular Quirks and Features of the Tabloid + programming language (Number Four Will Shock You!) +

+

But why?

+

+ Didn't want to do homework for my + database + systems class, and needed something to do to procrastinate. + Will I finish the homework? Did I get enough sleep? +

+

Stay tuned to find out!

Does it actually work?

+

+ Yes. Tabloid is a fully functioning, turing complete + programming language with an interpreter written in + JavaScript. Tabloid currently only supports numbers, strings, + and booleans, but with these elements, you can write any + program you'd want to write. You can edit and run the program above, or + see how it works for yourself. +

+

+ Before making Tabloid, I also created a more useful and + well-designed${' '}boring and unpopular + programming language, called Ink. +

+

How much is there?

+

+ Here's the full list of non-standard keywords that Tabloid + currently uses, in addition to standard operators like PLUS and MINUS. +

+