Merge branch 'master' of https://github.com/thepaperpilot/thepaperpilot.github.io
This commit is contained in:
commit
3efcbd2704
10 changed files with 173 additions and 115 deletions
|
|
@ -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 {
|
||||
margin-bottom: 0;
|
||||
.instruction {
|
||||
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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>Hover over the image to activate the mouse enter/leave events:</p>
|
||||
<p>Press 'F' to play a sequence of fade animations:</p>
|
||||
<p>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" />
|
||||
<p>This is the part where I use Javascript (even though most of this could be done with CSS)!</p>
|
||||
<p class="instruction">Hover over the image to activate the mouse enter/leave events:</p>
|
||||
<p class="instruction">Press 'F' to play a sequence of fade animations:</p>
|
||||
<p class="instruction">Press 'A' down to play a sequence of non-fade animations:</p>
|
||||
<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>
|
||||
<h2>CSS Show-Off</h2>
|
||||
<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 id="footer">
|
||||
<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>
|
||||
</footer>
|
||||
|
||||
<script type="text/javascript" src="./school.js"></script>
|
||||
|
|
|
|||
68
CS 6314/problem-2.css
Normal file
68
CS 6314/problem-2.css
Normal 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
56
CS 6314/problem-2.html
Normal 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
5
_content/birb/birb.md
Normal 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.
|
||||
5
_content/birb/screenshot.md
Normal file
5
_content/birb/screenshot.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: default
|
||||
title: Birb Screenshot
|
||||
---
|
||||
|
||||
10
_posts/2019-05-1-birb.md
Normal file
10
_posts/2019-05-1-birb.md
Normal 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
BIN
assets/banners/birb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
BIN
assets/birb-assets/birb screenshot.png
Normal file
BIN
assets/birb-assets/birb screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 341 KiB |
|
|
@ -1 +1 @@
|
|||
Subproject commit a1f41ec26ef4946aed99ad182f25a2630637df0c
|
||||
Subproject commit e10e59c3c2da1f12570012c017d63b0623ff1b18
|
||||
Loading…
Reference in a new issue