~ntgg/interpunct.me: initial commit

3 files changed, 86 insertions(+), 0 deletions(-)

A .build.yml
A index.html
A main.css

A  => .build.yml +10 -0

@@ 1,10 @@
+image: alpine/latest
+oauth: pages.sr.ht/PAGES:RW
+environment:
+  site: interpunct.me
+tasks:
+- package: |
+    cd $site
+    tar -cvz . > ../site.tar.gz
+- upload: |
+    acurl -f https://pages.sr.ht/publish/$site -Fcontent=@site.tar.gz

A  => index.html +27 -0

@@ 1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta
+      name="description"
+      content="interpunct's website for cool and sexy people."
+    />
+    <link rel="stylesheet" href="/main.css" />
+    <title>interpunct.me</title>
+  </head>
+
+  <body>
+    <div class="content">
+      <p>
+        Hello! I'm interpunct and I make stuff sometimes :). You can find all my
+        music on <a href="https://soundcloud.com/intrpnct">my soundcloud</a>. If
+        I end up uploading my visual art to the internet it will be here in a
+        gallery page and on
+        <a href="https://twitter.com/interpunctmusic">my twitter</a>. Rarely I
+        will write some code, all of which can be found on
+        <a href="https://git.sr.ht/~ntgg/">my sourcehut</a>
+      </p>
+    </div>
+  </body>
+</html>

A  => main.css +49 -0

@@ 1,49 @@
+:root {
+  --background-color: #fff;
+  --alt-background-color: #ccc;
+  --text-color: #000;
+  --highlight-color: #31735c;
+  --link-color: #d45959;
+  --link-hover-color: #b54a4a;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color: #000;
+    --alt-background-color: #333;
+    --text-color: #fff;
+    --highlight-color: #d38d5d;
+    --link-color: #6ef293;
+    --link-hover-color: #94ffb2;
+  }
+}
+
+html {
+  font-family: sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  color: var(--text-color);
+  background-color: var(--background-color);
+  font-family: sans-serif;
+  font-size: 1em;
+  font-weight: 400;
+}
+
+a {
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--link-hover-color);
+  text-decoration: underline;
+}
+
+.content {
+  max-width: 920px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}