]> Arthur Taft Gitweb - website.git/commitdiff
Create project structure and add html and css
authorArthur Taft <[email protected]>
Thu, 20 Nov 2025 09:57:34 +0000 (02:57 -0700)
committerArthur Taft <[email protected]>
Thu, 20 Nov 2025 09:57:34 +0000 (02:57 -0700)
static/index.html [new file with mode: 0644]
static/styles.css [new file with mode: 0644]

diff --git a/static/index.html b/static/index.html
new file mode 100644 (file)
index 0000000..3f4887a
--- /dev/null
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>home | arthurtaft.EXT</title>
+        <meta charset="UTF-8">
+        <link rel="stylesheet" href="styles.css">
+    </head>
+    <body>
+        <div id="main-cont">
+            <div id="top-nav">
+                <ul>
+                    <li><a href="/">home</a></li>
+                    <li><a href="/blog">blog</a></li>
+                    <li><a href="/resume">resume</a></li>
+                    <li><a href="/contact">contact</a></li>
+                    <li><a href="/about">about me</a></li>
+                </ul>
+            </div>
+            <div id="container">
+                <h1>Bazinga</h1>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/static/styles.css b/static/styles.css
new file mode 100644 (file)
index 0000000..6512132
--- /dev/null
@@ -0,0 +1,86 @@
+:root {
+    /* COLORS */
+    --rosewater: #f5e0dc;
+    --flamingo: #f2cdcd;
+    --pink: #f5c2e7;
+    --mauve: #cba6f7;
+    --red: #f38ba8;
+    --maroon: #eba0ac;
+    --peach: #fab387;
+    --yellow: #f9e2af;
+    --green: #a6e3a1;
+    --teal: #94e2d5;
+    --sky: #89dceb;
+    --sapphire: #74c7ec;
+    --blue: #89b4fa;
+    --lavender: #b4befe;
+    --text: #cdd6f4;
+    --subtext-1: #bac2de;
+    --subtext-0: #a6adc8;
+    --overlay-2: #9399b2;
+    --overlay-1: #7f849c;
+    --overlay-0: #6c7086;
+    --surface-2: #585b70;
+    --surface-1: #45475a;
+    --surface-0: #313244;
+    --base: #1e1e2e;
+    --mantle: #181825;
+    --crust: #11111b;
+}
+
+/* Style Reset */
+html, main, body, ul, h1, h2, p {
+    padding: 0;
+    margin: 0;
+}
+
+html {
+    background-color: var(--base);
+    display: flex;
+    height: 100%;
+}
+
+body {
+    margin: 2%;
+    width: 100%;
+}
+
+#main-cont {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+}
+
+#top-nav {
+    margin-bottom: 1%;
+    align-self: center;
+    width: 30%;
+}
+
+#top-nav ul {
+    list-style-type: none;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+}
+
+h1 {
+    color: var(--green);
+}
+
+a {
+    font-size: 1.25rem;
+}
+
+a:link {
+    color: var(--blue);
+}
+
+a:visited {
+    color: var(--blue);
+}
+
+a:hover {
+    color: var(--peach);
+    text-decoration: none;
+}