From 7254c1d1fdfae17bf0b3ffc615919118b151ab0a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Katariina=20J=C3=A4rvenm=C3=A4ki?=
 <katariina.jarvenmaki@proton.me>
Date: Sun, 29 Mar 2026 14:43:20 +0300
Subject: [PATCH] Add Tampio hello world example, syntax.css, and update README

---
 README.md                  | 12 +++++-
 examples/basics/hello.itp  | 10 +++++
 examples/basics/syntax.css | 83 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 103 insertions(+), 2 deletions(-)
 create mode 100644 examples/basics/hello.itp
 create mode 100644 examples/basics/syntax.css

diff --git a/README.md b/README.md
index 44a7f80..8221ced 100644
--- a/README.md
+++ b/README.md
@@ -12,12 +12,20 @@ The easiest way to try Tampio, no manual `libvoikko` setup required:
 docker compose run --rm tampio
 ```
 
-This drops you into a shell with `tampio` available. Run any example:
+This drops you into a shell with `tampio` available. Compile an example to HTML:
 
 ```sh
-tampio examples/basics/hello.tampio
+tampio -i -p examples/basics/hello.itp > examples/basics/hello.html
 ```
 
+Then serve it locally and open it in your browser:
+
+```sh
+python3 -m http.server 9994 --directory examples/basics
+```
+
+Go to `http://localhost:9994/hello.html`.
+
 ## What is Tampio?
 
 Tampio programs read like Finnish sentences. Methods are defined using grammatical cases, so the language's syntax is shaped by natural-language morphology rather than punctuation.
diff --git a/examples/basics/hello.itp b/examples/basics/hello.itp
new file mode 100644
index 0000000..93c9f40
--- /dev/null
+++ b/examples/basics/hello.itp
@@ -0,0 +1,10 @@
+# Hei maailma! — Hello World in Tampio
+#
+# "Kun nykyinen sivu avautuu" = "When the current page opens"
+# This is Tampio's page-load event hook — the entry point of every program.
+#
+# "teksti" wraps a string literal.
+# "näytetään käyttäjälle" = "is shown to the user" (triggers a browser alert)
+
+Kun nykyinen sivu avautuu,
+	teksti "Hei maailma!" näytetään käyttäjälle.
diff --git a/examples/basics/syntax.css b/examples/basics/syntax.css
new file mode 100644
index 0000000..604a4cb
--- /dev/null
+++ b/examples/basics/syntax.css
@@ -0,0 +1,83 @@
+/*
+ * Tampio Syntax Highlighting — Typography & Styling
+ *
+ * This stylesheet defines the visual presentation of Tampio source code.
+ */
+
+/* ===== TYPE STYLES ===== */
+span.type {
+	font-variant: small-caps;
+	font-size: large;
+}
+
+/* ===== KEYWORDS ===== */
+span.keyword {
+	font-weight: bold;
+}
+
+/* ===== VARIABLES & FIELDS ===== */
+span.field {
+	text-decoration: underline dotted;
+}
+
+span.variable {
+	font-variant: small-caps;
+	font-size: large;
+}
+
+span.variable-or-field {
+	text-decoration: underline dotted;
+	font-variant: small-caps;
+	font-size: large;
+}
+
+/* ===== FUNCTIONS ===== */
+span.function {
+	font-style: italic;
+}
+
+/* ===== OPERATORS ===== */
+span.operator {
+	text-decoration: underline dotted;
+	font-weight: bold;
+}
+
+span.conditional-operator {
+	text-decoration: underline dotted;
+	color: #622;
+}
+
+/* ===== LITERALS ===== */
+span.literal {
+	color: #622;
+}
+
+/* ===== COMMENTS ===== */
+span.comment-inline, span.block-comment-inline {
+	color: #226;
+	font-size: small;
+}
+
+span.comment-global {
+	color: black;
+	font-size: 1.5em;
+	border-bottom: 1px solid black;
+}
+
+span.block-comment-global {
+	color: #226;
+}
+
+/* ===== LIST STYLES ===== */
+ul:not(.syntax-root) {
+	list-style: disc;
+}
+
+ul.syntax-root > li {
+	margin-top: 10px;
+	margin-bottom: 10px;
+}
+
+ul.syntax-root {
+	list-style: none;
+}
\ No newline at end of file