From 4b487e7a3859a1a9efb6116eff5038d7a3c64888 Mon Sep 17 00:00:00 2001 From: Linus Lee Date: Thu, 24 Sep 2020 07:30:52 -0400 Subject: [PATCH] Flesh out landing page copy --- static/css/main.css | 64 +++++++++++++++++++++++++---- static/js/main.js | 98 ++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 149 insertions(+), 13 deletions(-) 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!) +

+
    +
  • + Print output with the keywords 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? +
    • +
  • + Declare a function by writing DISCOVER HOW TO ... WITH. Truly, a more + gripping way to declare a function can't possibly exist! +
    • +
  • + Assign to a variable by writing 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! +
    • +
  • + To return from a function, simply write SHOCKING DEVELOPMENT! You're going + to—gasp!—return? How shocking! +
    • +
  • + Every program must end with PLEASE LIKE AND + SUBSCRIBE, because you have to grow your audience! Hashtag hustle. +
    • +

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. +

+
    +
  • DISCOVER HOW TO...WITH declare a function
    • +
  • WE SAID begin a block scope
    • +
  • A OF B, C call function A with arguments B, C
    • +
  • WHAT IF...LIES! an if-else expression
    • +
  • END OF STORY end a block scope
    • +
  • EXPERTS CLAIM...TO BE declare or assign to a variable
    • +
  • YOU WON'T WANT TO MISS print output
    • +
  • IS ACTUALLY is equal to
    • +
  • BEATS / SMALLER THAN greater than / less than
    • +
  • SHOCKING DEVELOPMENT return from a function
    • +
  • PLEASE LIKE AND SUBSCRIBE end of program
    • +