App home page header styling

app/src/apps/Examinations/components/WrittenQuestion/styles.scss

@@ -0,0 +1,10 @@
+input {
+  height: 2rem;
+  width: 66rem;
+  text-indent: 10px;
+  border-style: solid;
+  border-radius: 0.6rem;
+  border-width: 0.1rem;
+  border-color: #c0c0c0;
+  margin: 1rem 0rem;
+}

app/src/apps/Graphs/Graph.svelte

@@ -2,6 +2,7 @@
   import { onMount } from "svelte";
   import * as d3 from "d3";
   import "./styles.scss";
+  import Graph from "./lib/Graph";
 
   let element;
 
@@ -13,6 +14,9 @@
     { source: 1, target: 2 },
   ];
 
+  // initial
+  let graph = new Graph(nodes, links);
+
   // TODO make this a component take width and height as props?
   const width = 800;
   const height = 600;
@@ -52,6 +56,11 @@
       let coordinates = d3.pointer(e, e.currentTarget);
       let newNode = { x: coordinates[0], y: coordinates[1], id: ++lastNodeId };
       nodes.push(newNode);
+
+      //test-1
+      graph.addNode(newNode);
+      console.log(graph.nodes);
+
       restart();
     }
   };
@@ -71,12 +80,24 @@
     });
 
     e.preventDefault();
+
+    //test-3
+    console.log(d);
+    graph.deleteNode(d);
+    console.log(graph.nodes, graph.links);
+
     restart();
   };
 
   const removeEdge = (e, d) => {
     links.splice(links.indexOf(d), 1);
     e.preventDefault();
+
+    //test-4
+    console.log(d);
+    graph.deleteEdge(d);
+    console.log(graph.links);
+
     restart();
   };
 
@@ -141,6 +162,10 @@
 
     let newLink = { source: mousedownNode, target: d };
     links.push(newLink);
+
+    //test-2
+    graph.addEdge(newLink);
+    console.log(graph.links);
   };
 
   const keydown = (e) => {

app/src/apps/Graphs/lib/Edge.js

@@ -1,3 +1,9 @@
-class Edge {}
+class Edge {
+  edge;
+
+  constructor(edge) {
+    this.edge = edge;
+  }
+}
 
 export { Edge as default };

app/src/apps/Graphs/lib/Graph.js

@@ -1,3 +1,37 @@
-class Graph {}
+import Vertex from "./Vertex";
+import Edge from "./Edge";
+
+class Graph {
+  nodes;
+  links;
+
+  constructor(nodes, links) {
+    this.nodes = [];
+    this.links = [];
+    nodes.forEach((n) => this.nodes.push(new Vertex(n)));
+    links.forEach((l) => this.links.push(new Edge(l)));
+  }
+
+  addNode(newNode) {
+    this.nodes.push(new Vertex(newNode));
+  }
+
+  addEdge(newEdge) {
+    this.links.push(new Edge(newEdge));
+  }
+
+  deleteNode(delNode) {
+    this.nodes = this.nodes.filter((n) => n.vertex.id != delNode.id);
+    this.links = this.links.filter(
+      (l) => l.edge.source.id != delNode.id && l.edge.target.id != delNode.id
+    );
+  }
+
+  deleteEdge(delEdge) {
+    this.links = this.links.filter(
+      (l) => l.edge.source != delEdge.source || l.edge.target != delEdge.target
+    );
+  }
+}
 
 export { Graph as default };

app/src/apps/Graphs/lib/Vertex.js

@@ -1,3 +1,9 @@
-class Vertex {}
+class Vertex {
+  vertex;
+
+  constructor(vertex) {
+    this.vertex = vertex;
+  }
+}
 
 export { Vertex as default };

app/src/pages/index.astro

@@ -6,30 +6,71 @@ import { Button } from "../components";
 
 <BaseLayout title="DiscreteMath.ca">
   <HomeLayout>
-    <img src="./images/home-page-logo.png" alt="DiscreteMath.ca" />
-    <div>Learn Without Limits.</div>
-    <div>
-      Built by Carleton students, for Carleton students. DiscreteMath.ca is an
-      interactive platform built specifically for content from Carleton's
-      discrete mathematics courses.
+    <div class="header-information">
+      <img
+        class="header-image"
+        src="./images/home-page-logo.png"
+        alt="DiscreteMath.ca"
+      />
+      <div class="header-title">Learn Without Limits.</div>
+      <div class="header-description">
+        Built by Carleton students, for Carleton students. DiscreteMath.ca is an
+        interactive platform built specifically for content from Carleton's
+        discrete mathematics courses.
+      </div>
+      <div class="home-buttons">
+        <!-- TODO: remove ./ -->
+        <a href="./comp1805">
+          <Button label="comp 1805" />
+        </a>
+        <a href="./comp2804">
+          <Button label="comp 2804" />
+        </a>
+      </div>
+      <div>"globe animation here"</div>
     </div>
-    <div class="home-buttons">
-      <!-- TODO: remove ./ -->
-      <a href="./comp1805">
-        <Button label="comp 1805" />
-      </a>
-      <a href="./comp2804">
-        <Button label="comp 2804" />
-      </a>
-    </div>
-    <div>"globe animation here"</div>
   </HomeLayout>
 </BaseLayout>
 
 <style lang="scss">
+  .header-information {
+    font-family: "Assistant", sans-serif;
+    max-width: 50rem;
+    margin-bottom: 1rem;
+    text-align: center;
+  }
+  .header-image {
+    height: 5rem;
+    margin-top: 2rem;
+    margin-bottom: 1.5rem;
+  }
+  .header-title {
+    font-size: 75px;
+    font-weight: 700;
+    margin-bottom: 1rem;
+  }
+  .header-description {
+    max-width: 70rem;
+    margin-bottom: 2rem;
+    font-size: 20px;
+  }
   .home-buttons {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
     a {
       text-decoration: none;
     }
   }
+  @media only screen and (max-width: 800px) {
+    .header-information {
+      margin-top: 1rem;
+    }
+  }
+  @media only screen and (max-width: 500px) {
+    .header-image {
+      height: 3rem;
+      margin-bottom: 0.5rem;
+    }
+  }
 </style>