Merge branch 'master' of https://github.com/thepaperpilot/thepaperpilot.github.io

CS 6314/firststyle.css

@@ -3,14 +3,12 @@ html {
     height: 100%;
     background-color: #2a323d;
     color: white;
-    font-family: "Roboto", sans-serif;
     font-weight: normal;
     line-height: 1.5;
 }
 
 #title {
     text-align: center;
-    font-family: 'Pacifico', cursive, sans-serif;
 }
 
 section {
@@ -68,7 +66,7 @@ section .field > :first-child {
     flex-shrink: 1;
 }
 
-footer {
+#footer {
     font-size: .8em;
     width: 95%;
     max-width: 1200px;
@@ -78,7 +76,7 @@ footer {
     text-align: center;
 }
 
-a {
+#footer .link {
     color: #ffab40;
 }
 
@@ -159,7 +157,7 @@ input[type=radio]:checked + label:before {
     color: #fff;
 }
 
-input[type=reset] {
+#reset {
     border-bottom: none;
     text-transform: uppercase;
     border-radius: 10px;
@@ -169,7 +167,7 @@ input[type=reset] {
     transition: background .2s;
 }
 
-input[type=reset]:hover {
+#reset:hover {
     background: red;
 }
 
@@ -177,8 +175,20 @@ input[type=reset]:hover {
     text-align: center;
 }
 
-.button-row p {
+.instruction {
-    margin-bottom: 0;
+    margin: 0;
+}
+
+/* 
+ * Fun fact: every selector using a #id selector was originally written using 
+ *  other types of selectors, apart from this one.
+ * I usually try to avoid using IDs altogether - even in Javascript I usually
+ *  use React, so I don't even use IDs there - but had to add a bunch here to
+ *  meet the requirements :/
+ */
+.instruction + #target {
+    box-shadow: 2px 2px 3px #222;
+    margin: 10px auto;
 }
 
 @keyframes rotate {
@@ -216,63 +226,3 @@ input[type=reset]:hover {
         transform: translateY(0);
     }
 }
-
-#example-1 {
-    background-color: grey;
-    color: black;
-    padding: 4px;
-}
-
-#example-1 .yellow {
-    text-decoration: underline;
-    margin: auto;
-}
-
-#example-2 {
-    background-color: white;
-    color: black;
-    padding: 4px;
-}
-
-.container {
-    border: solid 1px black;
-    width: 50%;
-    margin: auto;
-    padding: 8px;
-}
-
-.container span, .container div:not(.inner-container) {
-    border: solid 1px black;
-    padding: 8px;
-}
-
-.dashed {
-    border: dashed 1px black;
-}
-
-.yellow {
-    background-color: yellow;
-    width: 50%
-}
-
-.inner-container {
-    width: 75%;
-}
-
-.inner-container span {
-    display: inline-block;
-    box-sizing: border-box;
-}
-
-.inner-container .yellow {
-    width: 75%;
-}
-
-.inner-container .no-left-padding {
-    padding-left: 0;
-    width: 25%;
-}
-
-.middle {
-    margin-left: 25%;
-}

CS 6314/index.html

@@ -5,8 +5,6 @@
     <title>Home</title>
 
     <link rel="stylesheet" type="text/css" href="./firststyle.css">
-    <link rel="stylesheet" type="text/css" href="/css/pacifico.css">
-    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
 
     <meta charset="utf-8">
     <meta name="keywords" content="anthony lawn,portfolio,school, cs 6314,programming,html,css,javascript,web programming languages">
@@ -146,25 +144,25 @@
                     <label for="reason-4">Other</label>
                 </div>
             </div>
-            <input type="reset" />
+            <input id="reset" type="reset" />
         </form>
     </section>
 
     <section>
         <h2>Javascript Show-Off</h2>
-        <p>This is the part where I use Javascript instead of css!</p>
+        <p>This is the part where I use Javascript (even though most of this could be done with CSS)!</p>
-        <p>Hover over the image to activate the mouse enter/leave events:</p>
+        <p class="instruction">Hover over the image to activate the mouse enter/leave events:</p>
-        <p>Press 'F' to play a sequence of fade animations:</p>
+        <p class="instruction">Press 'F' to play a sequence of fade animations:</p>
-        <p>Press 'A' down to play a sequence of non-fade animations:</p>
+        <p class="instruction">Press 'A' down to play a sequence of non-fade animations:</p>
-        <img id="target" src="https://i.kym-cdn.com/photos/images/newsfeed/001/439/882/4f7.png" alt="This is how lil kids look when they cough" title="its a meme you dip" />
+        <img id="target" class="target" src="https://i.kym-cdn.com/photos/images/newsfeed/001/439/882/4f7.png" alt="This is how lil kids look when they cough" title="its a meme you dip" />
         <div class="button-row">
-            <p>Click to toggle Visibility:</p>
+            <p class="instruction">Click to toggle Visibility:</p>
             <button id="hide-button">Hide</button>
             <button id="show-button">Show</button>
             <button id="toggle-button">Toggle Visibility</button>
         </div>
         <div class="button-row">
-            <p>Double Click to change opacity:</p>
+            <p class="instruction">Double Click to change opacity:</p>
             <button id="fadein-button">Fade In</button>
             <button id="fadeout-button">Fade Out</button>
             <button id="fadeto-button">50% Opacity</button>
@@ -172,42 +170,8 @@
         </div>
     </section>
 
-    <section>
+    <footer id="footer">
-        <h2>CSS Show-Off</h2>
+        <span>Psst... I made </span><a class="link" href="http://thepaperpilot.org/toweroffense/">this game</a><span> with some friends. I did all the HTML, CSS, and Javascript coding (although I did use the pixi.js library instead of rendering directly to a canvas)</span>
-        <p>Both firefox or chrome-based browsers should be fine with everything you've seen on this page (assuming you have the most recent versions). I specifically tested on Vivaldi and Firefox.</p>
-        <h3>Example 1</h3>
-        <div id="example-1">
-            <div class="container">
-                HTML 1
-                <div class="yellow">
-                    2 2
-                </div>
-            </div>
-            <span class="dashed">
-                3 3 3
-            </span>
-        </div>
-        <h3>Example 2</h3>
-        <div id="example-2">
-            <div class="container">
-                <div class="inner-container">
-                    <span class="yellow">
-                        4 4 4 4
-                    </span><!--
-                    Comment to avoid adding an extra space here
-                    --><span class="no-left-padding">
-                        5 5 5 5 5
-                    </span>
-                    <div class="middle">
-                        6 6 6 6 6 6
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <footer>
-        <span>Psst... I made </span><a href="http://thepaperpilot.org/toweroffense/">this game</a><span> with some friends. I did all the HTML, CSS, and Javascript coding (although I did use the pixi.js library instead of rendering directly to a canvas)</span>
     </footer>
 
     <script type="text/javascript" src="./school.js"></script>

CS 6314/problem-2.css

@@ -0,0 +1,68 @@
+table {
+    width: 100%;
+    border: solid 1px black;
+    text-align: left;
+    border-collapse: collapse;
+}
+
+td, th {
+    border: solid 1px black;
+    padding: 8px;
+}
+
+tr:nth-child(2) {
+    background-color: lightgray;
+}
+
+td:nth-child(2) {
+    width: 70%;
+}
+
+#example-1 .yellow {
+    text-decoration: underline;
+    margin: auto;
+}
+
+.container {
+    border: solid 2px black;
+    width: 50%;
+    margin: auto;
+    padding: 8px;
+}
+
+.container span, .container div:not(.inner-container) {
+    border: solid 2px black;
+    padding: 8px;
+}
+
+.dashed {
+    border: dashed 2px black;
+}
+
+.yellow {
+    background-color: yellow;
+    width: 50%
+}
+
+.inner-container {
+    width: 75%;
+}
+
+.inner-container span {
+    display: inline-block;
+    box-sizing: border-box;
+}
+
+.inner-container .yellow {
+    width: 75%;
+}
+
+.inner-container .no-left-padding {
+    padding-left: 0;
+    width: 25%;
+    border-left: none;
+}
+
+.middle {
+    margin-left: 25%;
+}

CS 6314/problem-2.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Problem 2</title>
+
+    <link rel="stylesheet" type="text/css" href="./problem-2.css">
+
+    <meta charset="utf-8">
+</head>
+
+<body>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <table>
+        <tr>
+            <th>Example HTML/CSS Structure</th>
+            <th>Structure</th>
+        </tr>
+        <tr>
+            <td>Example 1</td>
+            <td id="example-1">
+                <div class="container">
+                    HTML 1
+                    <div class="yellow">
+                        2 2
+                    </div>
+                </div>
+                <span class="dashed">
+                    3 3 3
+                </span>
+            </td>
+        </tr>
+        <tr>
+            <td>Example 2</td>
+            <td id="example-2">
+                <div class="container">
+                    <div class="inner-container">
+                        <span class="yellow">
+                            4 4 4 4
+                        </span><!--
+                        Comment to avoid adding an extra space here
+                        --><span class="no-left-padding">
+                            5 5 5 5 5
+                        </span>
+                        <div class="middle">
+                            6 6 6 6 6 6
+                        </div>
+                    </div>
+                </div>
+            </td>
+        </tr>
+    </table>
+</body>
+
+</html>

_content/birb/birb.md

@@ -0,0 +1,5 @@
+---
+layout: default
+title: Birb Summary
+---
+A small Kinect project based off Fru made for my Computer Graphics Assignment. Use your silhouette to affect the world and solve puzzles. 

_content/birb/screenshot.md

@@ -0,0 +1,5 @@
+---
+layout: default
+title: Birb Screenshot
+---
+![](/assets/birb-assets/birb screenshot.png)

_posts/2019-05-1-birb.md

@@ -0,0 +1,10 @@
+---
+layout: default
+title: Birb
+category: Game
+banner: birb
+cards: [Birb Summary, Birb Screenshot]
+links: ["Windows Download|https://www.dropbox.com/s/g00y42hexykv4f1/birb.zip?dl=0"]
+tags: [c#, unity, kinect]
+---
+A small Kinect project based off Fru made for my Computer Graphics Assignment. Use your silhouette to affect the world and solve puzzles. 

assets/toweroffense-assets/Tower-Offense

@@ -1 +1 @@
-Subproject commit a1f41ec26ef4946aed99ad182f25a2630637df0c
+Subproject commit e10e59c3c2da1f12570012c017d63b0623ff1b18