add two more themes

assets/css/main.scss

@@ -4,6 +4,7 @@
 @import "./md.scss";
 @import "./syntax.scss";
 
+
 :root {
   --max-w: 640px;
   --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
@@ -23,6 +24,8 @@ body {
   margin: 0 16px;
   font-family: var(--font);
   font-weight: 400;
+  line-height: 1.6;
+  background-image: var(--back-image);
   background-color: var(--back);
   color: var(--text);
   transition-property: background-color, border-color, color;
@@ -53,3 +56,8 @@ main p a:hover {
   }
 }
 
+@media (min-width: 640px) {
+  body {
+    margin-top: calc(1rem + 2vh);
+  }
+}

assets/css/syntax.scss

@@ -1,5 +1,6 @@
 .chroma {
   margin: .5em 0;
+  background-image: var(--back-image);
   background-color: var(--code-back);
   border-radius: 2px;
 }

assets/css/theme.scss

@@ -1,9 +1,4 @@
-.light {
-  --prime: #3170a7;
-  --grid: #e1e1e1;
-  --back: #fff;
-  --text: #222;
-
+:root {
   // code highlighting
   --code-back: #f6f8fa;
   --code-text: #24292f;
@@ -19,6 +14,13 @@
   --code-highlighted-line: #e9e9e9;
 }
 
+.light {
+  --prime: #3170a7;
+  --grid: #e1e1e1;
+  --back: #fff;
+  --text: #333;
+}
+
 .dark {
   --prime: #3170a7;
   --back: #181818;
@@ -38,4 +40,28 @@
   --code-function: #dcdcaaca;
   --code-meta: #c586c0cb;
   --code-highlighted-line: #9494951b;
+}
+
+.sand {
+  --prime: #3170a7;
+  --back: #e6dece;
+  --text: #434343;
+
+  --code-back: #dbd3c1be;
+  --code-text: #24292f;
+  --code-highlighted-line: #cec3ac;
+
+  --back-image: url('texture.png');
+}
+
+.rock {
+  --prime: #3170a7;
+  --back: #ccc;
+  --text: #434343;
+
+  --code-back: #c1c1c1be;
+  --code-text: #24292f;
+  --code-highlighted-line: #afaeae;
+
+  --back-image: url('texture.png');
 }