Add Tampio hello world example, syntax.css, and update README

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.

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