More Docs (#546)

* Updated buttons

docs/basics/actorsmenu.md

@@ -14,6 +14,16 @@ How actors in mk64 works. There are two kinds of actors.
     display: block;
     background-color: rgb(40, 44, 52);
     width: 320px;
+    box-shadow: 0 0 0 0;
+    transition: 0.3s ease;
+}
+.pagelink:hover {
+  box-shadow: 0 5px 15px 5px rgba(0,0,0,1);
+
+}
+.pagelink:hover img {
+  transform: scale3d(1.1,1.1,1.1);
+
 }
 .pageimg {
     display: inline-block;
@@ -21,6 +31,9 @@ How actors in mk64 works. There are two kinds of actors.
     position: relative;
     overflow: hidden;
 }
+.pageimg img {
+    transition: 0.3s ease;
+}
 .content {
     color: white;
     font-size: 1em;
@@ -32,6 +45,7 @@ How actors in mk64 works. There are two kinds of actors.
     font-size: 18px;
     color: white;
     font-weight: bold;
+    text-decoration: none;
 }
 .pagedescription {
     color: #fff;
@@ -47,10 +61,23 @@ How actors in mk64 works. There are two kinds of actors.
     line-height: 1.64em;
     font-size: 1em;
     font-weight: normal;
+    text-decoration: none;
 }
 .pagea {
     display: inline-block;
 }
+.pagea:link {
+    text-decoration: none;
+}
+.pagea:visited {
+    text-decoration: none;
+}
+.pagea:hover {
+    text-decoration: none;
+}
+.pagea:active {
+    text-decoration: none;
+}
 p {
     margin: 0;
     padding: 0;
@@ -60,7 +87,7 @@ p {
 <div class="pagebutton">
 <a class="pagea" href="actors.html">
 <div class="pagelink">
-  <div class="pageimg"><img width=320 src="placeholder.png" /></div>
+  <div class="pageimg"><img width=320 src="buttonimage.png" /></div>
   <div class="content">
     <div class="pageheading">Actors</div>
     <div class="pagedescription">

docs/basics/basicsmenu.md

@@ -14,6 +14,16 @@ Essential skills and concepts to help you get started with mk64 decomp.
     display: block;
     background-color: rgb(40, 44, 52);
     width: 320px;
+    box-shadow: 0 0 0 0;
+    transition: 0.3s ease;
+}
+.pagelink:hover {
+  box-shadow: 0 5px 15px 5px rgba(0,0,0,1);
+
+}
+.pagelink:hover img {
+  transform: scale3d(1.1,1.1,1.1);
+
 }
 .pageimg {
     display: inline-block;
@@ -21,6 +31,9 @@ Essential skills and concepts to help you get started with mk64 decomp.
     position: relative;
     overflow: hidden;
 }
+.pageimg img {
+    transition: 0.3s ease;
+}
 .content {
     color: white;
     font-size: 1em;
@@ -32,6 +45,7 @@ Essential skills and concepts to help you get started with mk64 decomp.
     font-size: 18px;
     color: white;
     font-weight: bold;
+    text-decoration: none;
 }
 .pagedescription {
     color: #fff;
@@ -47,10 +61,23 @@ Essential skills and concepts to help you get started with mk64 decomp.
     line-height: 1.64em;
     font-size: 1em;
     font-weight: normal;
+    text-decoration: none;
 }
 .pagea {
     display: inline-block;
 }
+.pagea:link {
+    text-decoration: none;
+}
+.pagea:visited {
+    text-decoration: none;
+}
+.pagea:hover {
+    text-decoration: none;
+}
+.pagea:active {
+    text-decoration: none;
+}
 p {
     margin: 0;
     padding: 0;
@@ -59,7 +86,7 @@ p {
 <div class="pagebutton">
 <a class="pagea" href="compiling.html">
 <div class="pagelink">
-  <div class="pageimg"><img width=320 src="placeholder.png" /></div>
+  <div class="pageimg"><img width=320 src="buttonimage.png" /></div>
   <div class="content">
     <div class="pageheading">Installing mk64 Decomp</div>
     <div class="pagedescription">
@@ -73,7 +100,7 @@ p {
 <div class="pagebutton">
 <a class="pagea" href="test.html">
 <div class="pagelink">
-  <div class="pageimg"><img width=320 src="placeholder.png" /></div>
+  <div class="pageimg"><img width=320 src="buttonimage.png" /></div>
   <div class="content">
     <div class="pageheading">test</div>
     <div class="pagedescription">
@@ -91,7 +118,7 @@ p {
 <div class="pagebutton">
 <a class="pagea" href="basicconcepts.html">
 <div class="pagelink">
-  <div class="pageimg"><img width=320 src="placeholder.png" /></div>
+  <div class="pageimg"><img width=320 src="buttonimage.png" /></div>
   <div class="content">
     <div class="pageheading">Basic Concepts</div>
     <div class="pagedescription">
@@ -105,7 +132,7 @@ p {
 <div class="pagebutton">
 <a class="pagea" href="terminology.html">
 <div class="pagelink">
-  <div class="pageimg"><img width=320 src="placeholder.png" /></div>
+  <div class="pageimg"><img width=320 src="buttonimage.png" /></div>
   <div class="content">
     <div class="pageheading">Decomp Terminology</div>
     <div class="pagedescription">

docs/basics/coursesmenu.md

@@ -14,6 +14,16 @@ How courses work in mk64
     display: block;
     background-color: rgb(40, 44, 52);
     width: 320px;
+    box-shadow: 0 0 0 0;
+    transition: 0.3s ease;
+}
+.pagelink:hover {
+  box-shadow: 0 5px 15px 5px rgba(0,0,0,1);
+
+}
+.pagelink:hover img {
+  transform: scale3d(1.1,1.1,1.1);
+
 }
 .pageimg {
     display: inline-block;
@@ -21,6 +31,9 @@ How courses work in mk64
     position: relative;
     overflow: hidden;
 }
+.pageimg img {
+    transition: 0.3s ease;
+}
 .content {
     color: white;
     font-size: 1em;
@@ -32,6 +45,7 @@ How courses work in mk64
     font-size: 18px;
     color: white;
     font-weight: bold;
+    text-decoration: none;
 }
 .pagedescription {
     color: #fff;
@@ -47,10 +61,23 @@ How courses work in mk64
     line-height: 1.64em;
     font-size: 1em;
     font-weight: normal;
+    text-decoration: none;
 }
 .pagea {
     display: inline-block;
 }
+.pagea:link {
+    text-decoration: none;
+}
+.pagea:visited {
+    text-decoration: none;
+}
+.pagea:hover {
+    text-decoration: none;
+}
+.pagea:active {
+    text-decoration: none;
+}
 p {
     margin: 0;
     padding: 0;
@@ -60,7 +87,7 @@ p {
 <div class="pagebutton">
 <a class="pagea" href="courses.html">
 <div class="pagelink">
-  <div class="pageimg"><img width=320 src="placeholder.png" /></div>
+  <div class="pageimg"><img width=320 src="buttonimage.png" /></div>
   <div class="content">
     <div class="pageheading">Courses</div>
     <div class="pagedescription">

docs/basics/menu.html

@@ -1,68 +0,0 @@
-Essential skills and concepts to help you get started with mk64 decomp.
-
-<style>
-.pagelink {
-    background-color: rgb(40, 44, 52);
-    width: 320px;
-    margin-right: 1em;
-    margin-bottom: 1em;
-    display: inline-block;
-}
-.content {
-    color: white;
-    padding-left: 15px;
-    font-size: 1em;
-}
-.pageheading {
-    padding: .75em .5em;
-    font-size: 18px;
-    color: white;
-    font-weight: bold;
-}
-.pagedescription {
-    color: #fff;
-    border-color: transparent;
-    opacity: 0.75;
-    height: 84;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    margin-top: 10px;
-    display: block;
-    padding: 10px;
-    text-decoration: none;
-    line-height: 1.64em;
-    font-size: 1em;
-    font-weight: normal;
-}
-</style>
-
-<a href="compiling.md">
-<div class="pagelink"><img src="placeholder.png" />
-  <div style="color: white; padding-left: 15px">
-    <div class="pageheading">Compiling mk64</div>
-    <div class="pagedescription"><p>Instructions and dependencies required to build the game</p>
-    </div>
-  </div>
-</div>
-</a>
-
-<a href="Basic Concepts.md">
-<div class="pagelink"><img src="placeholder.png" />
-  <div class="content">
-    <div class="pageheading">Basic Concepts</div>
-    <div class="pagedescription">
-    <p>Decomp, hexadecimal, cpu threads, addresses, and types to provide foundation knowledge.</>
-    </div>
-  </div>
-</div>
-</a>
-
-<a href="test">
-<div class="pagelink"><img src="placeholder.png" />
-  <div class="content">
-    <div class="pageheading">test</div>
-    <div class="pagedescription"><p>test</p>
-    </div>
-  </div>
-</div>
-</a>