Rectangle intersection with a line complete

1 files changed, 60 insertions, 123 deletions

diff --git a/frontend/index.css b/frontend/index.css
index dbe4128..bc87160 100644
--- a/frontend/index.css
+++ b/frontend/index.css
@@ -1,3 +1,6 @@
+/***********************************
+Top level styling
+************************************/
 html {
 	background: #2f3032;
 	background: -webkit-radial-gradient(top, #383A56, #303133);
@@ -11,7 +14,7 @@ body {
 	
     font-size: 16px;
     font-family: "Helvetica", sans-serif;
-    line-height: 1.75rem;
+    line-height: 1.5rem;
 	width: 960px;
 	margin: auto;
     overflow-x: auto;
@@ -46,15 +49,9 @@ main {
     overflow-y: hidden;
 }
 
-section {
-    min-width: 74%;
-    width: 74%;
-    overflow-y: hidden;
-}
-
-/*
-    Navigation bar
-*/
+/***********************************
+Navbar stylings
+************************************/
 nav {
     padding-top: 1rem;
     position: sticky;
@@ -134,64 +131,72 @@ nav a:hover {
 	color: #ede68a;
 }
 
-.spin-loader {
-    border: 5px solid #f3f3f3;
-    border-top: 5px solid #555;
-    border-radius: 50%;
-    width: 50px;
-    height: 50px;
-    animation: spin 2s linear infinite;
+/***********************************
+Content styling
+************************************/
+article {
+    min-width: 74%;
+    width: 74%;
+    overflow-y: hidden;
 }
 
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
+article > h1 {
+	width: 100%;
+	border-bottom: 1px solid #EDE68A;
+	padding-bottom: 0.25rem;
 }
 
-article > p {
-    padding-left: 2rem;
-    padding-right: 2rem;
+section > p {
+    padding-left: 1rem;
 }
 
-/*
-    Helpful widgets
-*/
-.vec2_input_group {
-    position: relative;
-    margin-top: 1rem;
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    justify-content: space-evenly;
-    padding: 0.25rem;
+section > h2 {
+	padding-left: 0.25rem;
+	font-size: 18px;
 }
 
-.vec2_input_group > label {
-    position: absolute;
-    top: -1rem;
-    left: 0rem;
-    font-size: 0.8rem;
+section pre {
+    overflow-x: auto;
+    padding-left: 0.5rem;
+    font-size: 0.9rem;
+	line-height: 1.1rem;
+}
+
+#references a,
+#references a:visited {
+    color: #EDE68A;
+    opacity: 0.8;
+}
+
+#references a:hover {
+    opacity: 1.0;
+}
+
+
+/***********************************
+Code stylings
+************************************/
+.code_keyword {
+    color: blue;
     font-weight: bold;
-    text-align: left;
 }
 
-.vec2_input_group > input {
-    width: 45%;
+.code_constant {
+    font-weight: bold;
 }
 
-.slider_container {
-    display: flex;
-    flex-direction: column;
+.code_str {
+    color: orange;
 }
 
-.slider_container > label {
-    font-weight: 500;
+.code_comment {
+    color: green;
 }
 
-/*
-    WebGL container styling from here on.
-*/
-article .opengl_canvas_container {
+/***********************************
+WebGL container
+************************************/
+.opengl_canvas_container {
     position: relative;
     width: 100%;
     text-align: center;
@@ -201,7 +206,7 @@ article .opengl_canvas_container {
     border-radius: 3px;
 }
 
-article .opengl_canvas_container .play_button {
+.opengl_canvas_container .play_button {
     all: unset;
     font-size: 2rem;
     width: 128px;
@@ -217,6 +222,7 @@ article .opengl_canvas_container .play_button {
     flex-direction: row;
     align-items: center;
     justify-content: center;
+	cursor: pointer;
 }
 
 .opengl_canvas_container canvas {
@@ -224,11 +230,7 @@ article .opengl_canvas_container .play_button {
     border: 1px solid #b0a565;
 }
 
-article .opengl_canvas_container .play_button:hover {
-    cursor: pointer;
-}
-
-article .opengl_canvas_container .stop_button {
+.opengl_canvas_container .stop_button {
     all: unset;
     font-size: 1rem;
     background-color: red;
@@ -240,72 +242,7 @@ article .opengl_canvas_container .stop_button {
     top: 0.5rem;
     left: 496px;
     display: none;
+	cursor: pointer;
 }
 
-article .opengl_canvas_container .stop_button:hover {
-    cursor: pointer;
-}
-
-article pre {
-    width: 90%;
-    overflow-x: auto;
-    padding-left: 2rem;
-    font-size: 0.9rem;
-}
-
-.opengl_canvas_sidebar {
-    border: 1px solid #b0a565;
-	border-radius: 0px 0px 3px 3px;
-	display: grid;
-	grid-template-columns: repeat(3, 1fr);
-}
-
-.opengl_canvas_sidebar .opengl_value_tracker {
-	grid-column: 1 span /4;
-    font-size: 14px;
-	display: grid;
-	grid-template-columns: repeat(3, 1fr);
-}
-
-.opengl_canvas_sidebar .opengl_value_tracker > li {
-    padding-bottom: 0.5rem;
-}
-
-.opengl_canvas_sidebar .opengl_value_tracker > li > b {
-    display: inline-block;
-    width: 128px;
-}
-
-.opengl_canvas_sidebar .opengl_value_tracker > li > span {
-    display: inline-block;
-}
-
-#references a,
-#references a:visited {
-    color: #EDE68A;
-    opacity: 0.8;
-}
-
-#references a:hover {
-    opacity: 1.0;
-}
-
-/*
-    Code styles
-*/
-.code_keyword {
-    color: blue;
-    font-weight: bold;
-}
 
-.code_constant {
-    font-weight: bold;
-}
-
-.code_str {
-    color: orange;
-}
-
-.code_comment {
-    color: green;
-}