5 files changed, 83 insertions, 0 deletions
diff --git a/src/App.svelte b/src/App.svelte
new file mode 100644
index 0000000..7ce6b42
--- /dev/null
+++ b/src/App.svelte
@@ -0,0 +1,17 @@
+<script>
+  import Navbar from './Navbar.svelte'
+
+  import Home from './Home.svelte'
+  import DDA from './algorithms/line-drawing/DDA.svelte'
+
+  let page = Home
+</script>
+
+<h1 class="title">CG Algorithms</h1>
+<Navbar />
+<main>
+  <svelte:component this={page} />
+</main>
+
+<style>
+</style>
diff --git a/src/Home.svelte b/src/Home.svelte
new file mode 100644
index 0000000..a3f6997
--- /dev/null
+++ b/src/Home.svelte
@@ -0,0 +1 @@
+<p>Home</p>
diff --git a/src/Navbar.svelte b/src/Navbar.svelte
new file mode 100644
index 0000000..a1a3712
--- /dev/null
+++ b/src/Navbar.svelte
@@ -0,0 +1,57 @@
+<nav class="ddmenu">
+  <a href="#">Home</a>
+
+  <div class="ddgroup">
+    Line Drawing Algorithms
+    <div class="ddsub">
+      <a href="#">DDA</a>
+      <a href="#">Bresenham</a>
+    </div>
+  </div>
+</nav>
+
+<style>
+  .ddmenu { display: flex; }
+
+  .ddmenu a, .ddmenu .ddgroup {
+    width: 100%;
+    padding: 15px;
+    color: var(--fg-main);
+    text-decoration: none;
+    background: var(--bg-alt);
+    border: 2px solid var(--bg-main);
+  }
+  .ddmenu a:hover, .ddmenu .ddgroup:hover {
+    color: var(--fg-special-cold);
+    background: var(--bg-dim);
+    cursor: pointer;
+  }
+  .ddmenu .ddgroup { position: relative; }
+  .ddsub {
+    width: 100%;
+    position: absolute;
+    top: 100%; left: 0;
+    display: none;
+  }
+  .ddsub a {
+    display: block;
+    box-sizing: border-box;
+  }
+  .ddgroup:hover .ddsub { display: block; }
+  .ddgroup::after {
+    content: "\27A4";
+    position: absolute;
+    top: 13px; right: 10px;
+    transition: transform 0.2s;
+  }
+  .ddgroup:hover::after {
+    transform: rotate(90deg);
+  }
+  @media screen and (max-width: 640px) {
+    .ddmenu { flex-wrap: wrap; }
+    .ddsub {
+      position: static;
+      margin-top: 10px;
+    }
+  }
+</style>
diff --git a/src/algorithms/line-drawing/DDA.svelte b/src/algorithms/line-drawing/DDA.svelte
new file mode 100644
index 0000000..5295cfd
--- /dev/null
+++ b/src/algorithms/line-drawing/DDA.svelte
@@ -0,0 +1 @@
+<p>DDA</p>
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..50a0732
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,7 @@
+import App from './App.svelte';
+
+const app = new App({
+  target: document.body,
+});
+
+export default app;