Add style sheet

metaforr · Dec 15, 2023 · 23b09fa · 23b09fa
1 parent 13b8b25
commit 23b09fa
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 2 deletions.
diff --git a/docs/scripts/myscript.js b/docs/scripts/myscript.js
@@ -1,7 +1,7 @@
 // * Global Resources
 
-let H = window.innerHeight * 0.65;
-let W = window.innerWidth * 0.75;
+let H = window.innerHeight * 0.55;
+let W = window.innerWidth * 0.65;
 
 // * Code for Dependency Graph
 
@@ -431,13 +431,15 @@ function drawDependencyGraph(
 const svg1 = d3
     .select("div#plot1")
     .append("svg")
+    .style("position", "relative")
     .attr("width", W)
     .attr("height", H);
 
 const pen1 = svg1
     .append("rect")
     .attr("width", "100%")
     .attr("height", "100%")
+    .style("position", "relative")
     .attr("fill", "#d3e4cd");
 
 const textGroup1 = svg1
@@ -554,13 +556,15 @@ document.getElementById("submitBtn2").addEventListener("click", function () {
 const svg3 = d3
     .select("div#plot3")
     .append("svg")
+    .style("z-index", "10")
     .attr("width", W)
     .attr("height", H);
 
 const pen3 = svg3
     .append("rect")
     .attr("width", "100%")
     .attr("height", "100%")
+    .style("z-index", "10")
     .attr("fill", "#d3e4cd");
 
 const textGroup5 = svg3

diff --git a/docs/scripts/style.css b/docs/scripts/style.css
@@ -0,0 +1,76 @@
+@font-face {
+    font-family: "San Francisco";
+    font-weight: 400;
+    src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-bold-webfont.woff");
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "San Francisco", sans-serif;
+}
+
+hr {
+    border: 0;
+    height: 1px;
+    background-image: linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0),
+        rgba(0, 0, 0, 0.75),
+        rgba(0, 0, 0, 0)
+    );
+    padding: 0.2%;
+}
+
+/* Slightly Centering Plots */
+.centerer {
+    padding-left: 15%;
+}
+
+h2 {
+    margin: 0 auto;
+}
+
+div#plot1,
+div#plot2,
+div#plot3 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.input-group {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 300px;
+    margin: 0 auto;
+    padding-bottom: 10px;
+    padding-top: 10px;
+}
+
+input::placeholder {
+    color: gray;
+    opacity: 0.5;
+}
+
+#textbox1,
+#textbox2,
+#textbox3 {
+    flex: 1;
+    padding: 8px;
+    border: 1px solid #d3e4cd;
+    border-radius: 0px;
+}
+
+#submitBtn1,
+#submitBtn2,
+#submitBtn3 {
+    padding: 8px;
+    margin-left: 0px;
+    box-shadow: #d3e4cd 0 10px 20px -10px;
+    font-weight: 700;
+    border: 1px solid #d3e4cd;
+    background-color: #d3e4cd;
+    color: white;
+    border-radius: 0px;
+    cursor: pointer;
+}