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!
+ 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!)
+
YOU WON'T WANT TO MISS
followed by an
+ expression. Everything printed by Tabloid is
+ automatically capitalized, and an exclamation point is
+ added. Why would you want anything else?
+ DISCOVER HOW TO ... WITH
. Truly, a more
+ gripping way to declare a function can't possibly exist!
+ EXPERTS CLAIM ... TO BE
. On the Internet,
+ anyone can be an expert, and Tabloid gives YOU the power to
+ wield that responsibility and declare anything you'd like!
+ SHOCKING DEVELOPMENT
! You're going
+ to—gasp!—return? How shocking!
+ PLEASE LIKE AND
+ SUBSCRIBE
, because you have to grow your audience! Hashtag hustle.
+ + 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!
+ 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.
+
+ Here's the full list of non-standard keywords that Tabloid
+ currently uses, in addition to standard operators like PLUS
and MINUS
.
+
DISCOVER HOW TO...WITH
declare a functionWE SAID
begin a block scopeA OF B, C
call function A with arguments B, CWHAT IF...LIES!
an if-else expressionEND OF STORY
end a block scopeEXPERTS CLAIM...TO BE
declare or assign to a variableYOU WON'T WANT TO MISS
print outputIS ACTUALLY
is equal toBEATS / SMALLER THAN
greater than / less thanSHOCKING DEVELOPMENT
return from a functionPLEASE LIKE AND SUBSCRIBE
end of program