From 301c8540b4c6c95064366d82198c28d5f5afad8e Mon Sep 17 00:00:00 2001 From: Araozu Date: Fri, 30 Jun 2023 20:55:29 -0500 Subject: [PATCH] Improve styles --- md/learn/index.md | 11 ++++++++--- static/index.html | 42 +++++++++++++++++++++++------------------- static/template.html | 22 ++++++++++++---------- tailwind.config.js | 3 ++- tailwind.css | 20 +++++++++++++++++--- 5 files changed, 62 insertions(+), 36 deletions(-) diff --git a/md/learn/index.md b/md/learn/index.md index 7b95447..6d8f90a 100644 --- a/md/learn/index.md +++ b/md/learn/index.md @@ -18,7 +18,7 @@ THP is a new programming language that compiles to PHP. - Ship a fast, native binary (not written in PHP). - Sub 10ms watch mode. - Support in-place compilation. -- Emit readable PHP code (but not meant to be edited). +- Emit readable PHP code. - Implement a LSP server. @@ -26,14 +26,19 @@ THP is a new programming language that compiles to PHP. These are **not** aspects that THP looks to solve or implement. -- Be what TypeScript is for JavaScript. +- Be what TypeScript is for JavaScript (PHP with types). - Use PHP syntax/conventions. -- +- Be familiar for PHP developers. ## Philosophy +- Consistency over familiarity +- Change over conventions +- Explicit over implicit +That is, while there is value in the items on +the right, we value the items on the left more. ## Compared to PHP diff --git a/static/index.html b/static/index.html index 119e39e..63b480a 100644 --- a/static/index.html +++ b/static/index.html @@ -17,7 +17,7 @@
-

modern, consistent typed language for PHP.

- +
+ +
- - Learn - +
+ + Learn + +

@@ -55,7 +59,7 @@
-

@@ -81,11 +85,11 @@ print("There are {persons?.length ?? 0} persons regis

-

- Make the PHP stdlib good + A new stdlib for PHP

thp groups all global variables and function of PHP into modules, @@ -108,7 +112,7 @@ print("There are {persons?.length ?? 0} persons regis

-

@@ -127,11 +131,11 @@ print("There are {persons?.length ?? 0} persons regis 
val colors = Array("red", "blue", "green")
+                >val allowedColors = Array("red", "blue", "green")
 
 val response = match colors.search("purple") {
-    Some(_) -> "purple is a color!"
-    None -> "purple is not a color"
+    Some(_) -> "purple is allowed!"
+    None -> "purple is not allowed"
 }
 
 print(response)
diff --git a/static/template.html b/static/template.html index a6bd089..8953ef0 100644 --- a/static/template.html +++ b/static/template.html @@ -16,9 +16,9 @@
-
+
-

-
- +
+ +
{{markdown}} diff --git a/tailwind.config.js b/tailwind.config.js index c70655b..b110a0f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -9,9 +9,10 @@ module.exports = { "c-purple": "var(--c-purple)", "c-purple-light": "var(--c-purple-light)", "c-box-shadow": "var(--c-box-shadow)", - "c-bg-card": "var(--c-bg-card)", "c-ping": "var(--c-pink)", "c-background-2": "var(--c-background-2)", + "c-primary": "var(--c-primary)", + "c-secondary": "var(--c-secondary)", } }, fontFamily: { diff --git a/tailwind.css b/tailwind.css index 1c5d8f5..4d63b99 100644 --- a/tailwind.css +++ b/tailwind.css @@ -5,11 +5,13 @@ :root { --c-bg: #121212; --c-text: #fdfffc; + --c-primary: #884b6a; --c-purple: #7F669D; --c-purple-light: #BA94D1; --c-box-shadow: #FBFACD; - --c-bg-card: #374259; --c-pink: #AE508D; + + --c-secondary: rgba(136,75,106, 0.5); } @media (prefers-color-scheme: light) { @@ -19,10 +21,10 @@ --c-purple: #374259; --c-purple-light: #BA94D1; --c-box-shadow: #374259; - --c-bg-card: #FFB4B4; + --c-primary: rgb(255, 180, 180); --c-pink: #374259; - --c-background-2: #FEDEFF; + --c-secondary: rgba(255, 180, 180, 0.5); } } @@ -43,3 +45,15 @@ pre, code { } +/* Used by headers generated from markdown */ +.heading-linked :hover::after{ + color: var(--c-primary); + content: "#"; + display: inline-block; + font-size: 1em; + line-height: 1; + margin-left: 0.5rem; +} +.heading-linked :hover { + text-decoration: underline var(--c-primary); +}