Improve styles

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
 

static/index.html

@@ -17,7 +17,7 @@
     <div class="px-2 grid grid-cols-2 gap-4 relative">
         <div class="text-center h-screen overflow-hidden sticky top-0 left-0">
 
-            <div class="rounded-md m-4 p-4 bg-c-bg-card"
+            <div class="rounded-md m-4 p-4 bg-c-primary"
                 style="box-shadow: 0 0 10px -4px var(--c-box-shadow);"
             >
                 <h1
@@ -36,26 +36,30 @@
                     A <b>modern, consistent</b> typed language for PHP.
                 </p>
 
-                <button class="m-4 py-2 px-4 rounded font-display text-white
+                <div class="m-4 relative mb-2 button-effect inline-block bg-c-bg rounded">
-                        bg-c-purple hover:bg-c-purple-light transition-colors"
+                    <button class="button-effect-receiver py-2 px-4 rounded font-display
+                        bg-c-text text-c-primary"
                     >
                         Get started
                     </button>
+                </div>
 
-                <a class="m-4 py-2 px-4 rounded font-display text-white
+                <div class="m-4 relative mb-2 button-effect inline-block bg-c-bg rounded">
-                        bg-c-purple hover:bg-c-purple-light transition-colors"
+                    <a class="button-effect-receiver py-2 px-4 rounded font-display inline-block
+                        bg-c-text text-c-primary"
                         href="/learn/"
                     >
                         Learn
                     </a>
                 </div>
+            </div>
             
         </div>
 
 
         <div>
 
-            <div class="rounded-md my-4 mx-2 p-4 bg-c-bg-card"
+            <div class="rounded-md my-4 mx-2 p-4 bg-c-primary"
                 style="box-shadow: 0 0 10px -4px var(--c-box-shadow);"
             >
                 <h2 class="text-2xl mb-2">
@@ -81,11 +85,11 @@ print(<span class="token string">"There are {persons?.length ?? 0} persons regis
 
             </div>
 
-            <div class="rounded-md my-4 mx-2 p-4 bg-c-bg-card"
+            <div class="rounded-md my-4 mx-2 p-4 bg-c-primary"
                 style="box-shadow: 0 0 10px -4px var(--c-box-shadow);"
             >
                 <h2 class="text-2xl mb-2">
-                    Make the PHP stdlib <b>good</b>
+                    A <b>new</b> stdlib for PHP
                 </h2>
                 <p>
                     thp groups all global variables and function of PHP into modules,
@@ -108,7 +112,7 @@ print(<span class="token string">"There are {persons?.length ?? 0} persons regis
             </div>
 
 
-            <div class="rounded-md my-4 mx-2 p-4 bg-c-bg-card"
+            <div class="rounded-md my-4 mx-2 p-4 bg-c-primary"
                 style="box-shadow: 0 0 10px -4px var(--c-box-shadow);"
             >
                 <h2 class="text-2xl mb-2">
@@ -127,11 +131,11 @@ print(<span class="token string">"There are {persons?.length ?? 0} persons regis
                 <pre
                     class="p-2 my-2 rounded-md bg-c-bg language-misti"
                     style="box-shadow: inset 0 0 10px -5px var(--c-box-shadow);"
-                ><span class="token keyword">val</span> colors = <span class="token class-name">Array</span>(<span class="token string">"red"</span>, <span class="token string">"blue"</span>, <span class="token string">"green"</span>)
+                ><span class="token keyword">val</span> allowedColors = <span class="token class-name">Array</span>(<span class="token string">"red"</span>, <span class="token string">"blue"</span>, <span class="token string">"green"</span>)
 
 <span class="token keyword">val</span> response = match colors.search(<span class="token string">"purple"</span>) {
-    <span class="token class-name">Some</span>(_) -&gt; <span class="token string">"purple is a color!"</span>
+    <span class="token class-name">Some</span>(_) -&gt; <span class="token string">"purple is allowed!"</span>
-    <span class="token class-name">None</span> -&gt; <span class="token string">"purple is not a color"</span>
+    <span class="token class-name">None</span> -&gt; <span class="token string">"purple is not allowed"</span>
 }
 
 print(response)</pre>

static/template.html

@@ -16,9 +16,9 @@
 </head>
 <body class="bg-c-bg text-c-text">
     <div class="grid grid-cols-[10rem_12rem_auto] gap-2">
-        <div class="p-2">
+        <div class="p-2 overflow-x-scroll max-h-screen sticky top-0">
             <div class="relative mb-2 button-effect">
-                <a class="button-effect-receiver inline-block w-[9rem] p-4 bg-c-bg-card rounded-md"
+                <a class="button-effect-receiver inline-block w-[9rem] p-4 bg-c-primary rounded-md"
                     href="/"
                 >
                     <h1
@@ -32,18 +32,20 @@
                 <div class="w-full h-full bg-c-text absolute top-0 left-0 -z-10 rounded-md"></div>
             </div>
 
-            <nav class="rounded-md p-4 bg-c-bg-card">
+            <nav class="rounded-md p-4 bg-c-primary">
                 {{pages}}
             </nav>
         </div>
 
-        <nav class="rounded-md my-2 p-4 bg-c-background-2">
+        <div class="py-2 max-h-screen overflow-x-scroll sticky top-0">
+            <nav class="rounded-md p-4 bg-c-secondary">
                 <h2 class="text-2xl">On this page</h2>
     
                 <br>
     
                 {{sidebar}}
             </nav>
+        </div>
         
         <main class="markdown p-4 my-2">
             {{markdown}}

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: {

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);
+}