This commit is contained in:
thepaperpilot 2019-09-17 00:30:36 -05:00
commit 3efcbd2704
10 changed files with 173 additions and 115 deletions

View file

@ -3,14 +3,12 @@ html {
height: 100%; height: 100%;
background-color: #2a323d; background-color: #2a323d;
color: white; color: white;
font-family: "Roboto", sans-serif;
font-weight: normal; font-weight: normal;
line-height: 1.5; line-height: 1.5;
} }
#title { #title {
text-align: center; text-align: center;
font-family: 'Pacifico', cursive, sans-serif;
} }
section { section {
@ -68,7 +66,7 @@ section .field > :first-child {
flex-shrink: 1; flex-shrink: 1;
} }
footer { #footer {
font-size: .8em; font-size: .8em;
width: 95%; width: 95%;
max-width: 1200px; max-width: 1200px;
@ -78,7 +76,7 @@ footer {
text-align: center; text-align: center;
} }
a { #footer .link {
color: #ffab40; color: #ffab40;
} }
@ -159,7 +157,7 @@ input[type=radio]:checked + label:before {
color: #fff; color: #fff;
} }
input[type=reset] { #reset {
border-bottom: none; border-bottom: none;
text-transform: uppercase; text-transform: uppercase;
border-radius: 10px; border-radius: 10px;
@ -169,7 +167,7 @@ input[type=reset] {
transition: background .2s; transition: background .2s;
} }
input[type=reset]:hover { #reset:hover {
background: red; background: red;
} }
@ -177,8 +175,20 @@ input[type=reset]:hover {
text-align: center; 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 { @keyframes rotate {
@ -216,63 +226,3 @@ input[type=reset]:hover {
transform: translateY(0); 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%;
}

View file

@ -5,8 +5,6 @@
<title>Home</title> <title>Home</title>
<link rel="stylesheet" type="text/css" href="./firststyle.css"> <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 charset="utf-8">
<meta name="keywords" content="anthony lawn,portfolio,school, cs 6314,programming,html,css,javascript,web programming languages"> <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> <label for="reason-4">Other</label>
</div> </div>
</div> </div>
<input type="reset" /> <input id="reset" type="reset" />
</form> </form>
</section> </section>
<section> <section>
<h2>Javascript Show-Off</h2> <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"> <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="hide-button">Hide</button>
<button id="show-button">Show</button> <button id="show-button">Show</button>
<button id="toggle-button">Toggle Visibility</button> <button id="toggle-button">Toggle Visibility</button>
</div> </div>
<div class="button-row"> <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="fadein-button">Fade In</button>
<button id="fadeout-button">Fade Out</button> <button id="fadeout-button">Fade Out</button>
<button id="fadeto-button">50% Opacity</button> <button id="fadeto-button">50% Opacity</button>
@ -172,42 +170,8 @@
</div> </div>
</section> </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> </footer>
<script type="text/javascript" src="./school.js"></script> <script type="text/javascript" src="./school.js"></script>

68
CS 6314/problem-2.css Normal file
View file

@ -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%;
}

56
CS 6314/problem-2.html Normal file
View file

@ -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>

5
_content/birb/birb.md Normal file
View file

@ -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.

View file

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

10
_posts/2019-05-1-birb.md Normal file
View file

@ -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.

BIN
assets/banners/birb.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 341 KiB

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