Import stuff from PA9.

This commit is contained in:
Kaj Forney 2022-12-12 18:23:22 -07:00
parent 1437a7ef17
commit 7ff1534c9f
Signed by: kforney
GPG key ID: 3AB4E2E04CEF656F
20 changed files with 17256 additions and 3537 deletions

26
css/animation.css Normal file
View file

@ -0,0 +1,26 @@
@keyframes titlePulse {
0% {text-shadow: #B17300 3px 3px 7px;}
75% {text-shadow: #B17300 3px 3px 7px;}
80% {text-shadow: lightsteelblue 3px 3px 7px;}
90% {text-shadow: steelblue 3px 3px 7px;}
100% {text-shadow: #B17300 3px 3px 7px;}
}
.titlePulse {
animation-name: titlePulse;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes wobble {
0% {rotate: 0deg;}
33% {rotate: 15deg;}
66% {rotate: -15deg;}
100% {rotate: 0deg;}
}
.wobble {
animation-name: wobble;
animation-duration: 10s;
animation-iteration-count: infinite;
}

49
css/grid.css Normal file
View file

@ -0,0 +1,49 @@
/** Grid system - https://www.w3schools.com/css/css_rwd_grid.asp **/
* {
box-sizing: border-box;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
[class*="col-"] {
float: left;
padding: 15px;
border-radius: 20px;
/**border: 1px solid red;**/
}
.row::after {
content: "";
clear: both;
display: table;
}
/** Image - https://www.w3schools.com/css/css_rwd_grid.asp **/
img {
max-width: 100%;
height: auto;
}
/** Overflow (for tables) - https://www.w3schools.com/howto/howto_css_table_responsive.asp **/
.overflow {
overflow-x:auto;
}

View file

@ -0,0 +1,218 @@
/*These are the general colors and styles I want to use across my webpages for a consistent look*/
/*Needed for parallax to work correctly*/
body, html {
height: 100%;
margin: 0;
}
/*HTML tags*/
body{
background-color: #161A25;
color: #8FC4E6;
font-family: 'IBM Plex Mono', monospace;
background-image: url("/img/background.png");
}
h1{
color: #FFBC42;
font-family: VT323, monospace;
font-size: 72px;
text-shadow: #B17300 3px 3px 7px;
text-align: center;
}
h2{
color: #FFBC42;
font-family: 'Bebas Neue', cursive;
font-size: 36px;
text-shadow: #B17300 3px 3px 7px;
text-align: center;
}
h3{
color: #FFBC42;
font-family: 'Bebas Neue', cursive;
font-size: 24px;
text-shadow: #B17300 3px 3px 7px;
}
p{
font-weight: 400;
font-size: 20px;
}
li{
font-weight: 400;
font-size: 20px;
}
hr{
width: 45%;
border-top: 5px double #88c0d0;
}
a{
font-family: VT323, monospace;
font-size: 24px;
}
a:link {
color: #78A1BB;
}
a:hover {
color: #B17300;
}
a:active {
color: #FFBC42;
}
a:visited {
color: #FFBC42;
}
iframe[src*=youtube]
{
text-align: center;
display: block;
margin-right: auto;
margin-left: auto;
max-width:90%;
}
[class^="icon-"], [class*=" icon-"] {
display: inline-block;
width: 100%;
}
/*CSS Classes*/
.parallax {
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.roundCorners {
border-radius: 25px;
}
.card {
background-color: RGBA(40, 48, 68, 0.6);
box-shadow: #FFBC42 3px 3px 10px;
}
.spacer {
min-height: 50px;
}
.bigIcon {
font-size: 256px;
color: #FFBC42;
text-align: center;
}
.youtube-container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
.youtube-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
/*CSS IDs*/
#footer-spacer{
min-height: 85px;
}
@media only screen and (min-width: 768px) {
#footer {
position: fixed;
height: 70px;
width: 100%;
bottom: 0;
left: 0;
background-color: #161A25;
color: #385B70;
text-align: right;
}
#footer-logo {
max-height: 50px;
}
#footer-text {
position: relative;
bottom: 20px;
}
}
@media only screen and (max-width: 768px) {
#footer {
position: fixed;
height: 70px;
width: 100%;
bottom: 0;
left: 0;
background-color: #161A25;
color: #385B70;
text-align: right;
}
#footer-logo {
position: relative;
bottom: 35px;
max-height: 50px;
}
#footer-text {
position: relative;
bottom: 55px;
}
}
/*Web fonts*/
@font-face {
font-family: VT323;
src: url("../fonts/VT323-Regular.ttf");
}
@font-face {
font-family: Oswald;
src: url("../fonts/Oswald-Regular.ttf");
}
@font-face {
font-family: 'IBM Plex Mono', monospace;
src: url("../fonts/IBMPlexMono-Regular.ttf");
}
@font-face {
font-family: 'IBM Plex Sans', sans-serif;
src: url("../fonts/IBMPlexSans-Regular.ttf");
}
/**Learned how to do this from this question on StackOverflow: https://stackoverflow.com/questions/15161674/responsive-design-rearrange-element-positions-with-css**/
@media only screen and (max-width: 768px){
.reverseOnMobile{
float: none;
display: table;
}
.firstOnMobile{
float: none;
display: table-header-group;
}
.lastOnMobile{
display: table-footer-group;
}
}

5860
data/gamedata.csv Normal file

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

3535
data/gamedata_original.json Normal file

File diff suppressed because one or more lines are too long

3533
data/gamedata_sql.txt Normal file

File diff suppressed because it is too large Load diff

Binary file not shown.

Binary file not shown.

BIN
fonts/Oswald-Regular.ttf Normal file

Binary file not shown.

BIN
fonts/VT323-Regular.ttf Normal file

Binary file not shown.

BIN
img/background.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 397 KiB

BIN
img/logos/lunarpenguin.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 178 KiB

View file

@ -1,11 +1,105 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Kaj Forney -- GIMM 260 Data Visualization Narrative</title> <meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Kaj Forney -- PA 9 - More CSS</title>
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" href="css/animation.css">
<script src="https://kit.fontawesome.com/55072ce5fd.js" crossorigin="anonymous"></script>
</head> </head>
<body> <body class="parallax">
<div class="row">
<div class="col-3"></div>
<div class="col-6">
<h1 class="titlePulse">
<i class="fa-solid fa-gamepad"></i>
Gaming on Linux
<i class="fa-brands fa-steam"></i>
</h1>
</div>
<div class="col-4"></div>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col-5 roundCorners card">
<h2>Introduction</h2>
<p>I have been a user of Linux for the past 14 years. In that time, I've observed a notable improvement in the ease of running games on the system, particularly games that were originally made for other operating systems, such as Microsoft Windows.</p>
<p>This can be attributed to the hard work and dedication of the Linux community, particularly the WINE project. More recent improvements are the work of Valve Corporation, who introduced Proton in 2019.</p>
</div>
<div class="col-1"></div>
<div class="col-3 bigIcon">
<i class="fa-brands fa-linux wobble"></i>
</div>
<div class="col-2"></div>
</div>
<div class="spacer"></div>
<div class="row">
<div class="col-2"></div>
<div class="col-3 bigIcon">
<i class="fa-solid fa-wine-glass wobble"></i>
</div>
<div class="col-1"></div>
<div class="col-5 roundCorners card">
<h2>WINE</h2>
<p>[Introduce the WINE project here, which is the basis for running any Windows application on Linux.]</p>
</div>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col-5 roundCorners card">
<h2>Proton</h2>
<p>[Introduce Proton from Valve here.]</p>
</div>
<div class="col-1"></div>
<div class="col-4">
<div class="youtube-container">
<iframe class="youtube-iframe" src="https://www.youtube-nocookie.com/embed/_OAqvtlgfGA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="col-1"></div>
</div>
<div class="spacer"></div>
<div class="row">
<div class="col-1"></div>
<div class="col-4">
<h2>[DATA VIZ HERE]</h2>
</div>
<div class="col-1"></div>
<div class="col-5 roundCorners card">
<p>This data visualization will illustrate the speed at which a newly game can now become Linux-compatible, using Age of Empires II as an example.</p>
</div>
<div class="col-1"></div>
</div>
<div class="spacer"></div>
<h2>[More visualizations will go here...]</h2>
<div id="footer-spacer"></div>
<div id="footer">
<div class="row">
<div class="col-6"></div>
<div class="col-6">
<img src="img/logos/lunarpenguin.png" alt="Lunar Penguin Logo" id="footer-logo">
<span id="footer-text">Page created by <a href="https://lunarpenguin.net">Kaj Forney</a>, 2022.</span>
</div>
</div>
</div>
</body> </body>
</html>> </html>

View file

@ -0,0 +1,49 @@
/** Grid system - https://www.w3schools.com/css/css_rwd_grid.asp **/
* {
box-sizing: border-box;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
[class*="col-"] {
float: left;
padding: 15px;
border-radius: 20px;
/**border: 1px solid red;**/
}
.row::after {
content: "";
clear: both;
display: table;
}
/** Image - https://www.w3schools.com/css/css_rwd_grid.asp **/
img {
max-width: 100%;
height: auto;
}
/** Overflow (for tables) - https://www.w3schools.com/howto/howto_css_table_responsive.asp **/
.overflow {
overflow-x:auto;
}

242
oldStuff/css/main.css Normal file
View file

@ -0,0 +1,242 @@
/*Importing a few Google fonts to make stuff look nicer.*/
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Exo+2:wght@300;400;700&family=IBM+Plex+Mono:wght@300;400;700&family=VT323&display=swap');
/*These are the general colors and styles I want to use across my webpages for a consistent look*/
/*Needed for parallax to work correctly*/
body, html {
height: 100%;
margin: 0;
}
/*HTML tags*/
body{
background-color: #161A25;
color: #8FC4E6;
font-family: 'Exo 2 Medium';
}
h1{
color: #FFBC42;
font-family: VT323, monospace;
font-size: 48px;
text-shadow: #B17300 3px 3px 7px;
}
h2{
color: #FFBC42;
font-family: 'Bebas Neue', cursive;
font-size: 36px;
text-shadow: #B17300 3px 3px 7px;
text-align: center;
}
h3{
color: #FFBC42;
font-family: 'Bebas Neue', cursive;
font-size: 24px;
text-shadow: #B17300 3px 3px 7px;
}
p{
font-weight: 400;
font-size: 20px;
}
li{
font-weight: 400;
font-size: 20px;
}
hr{
width: 45%;
border-top: 5px double #88c0d0;
}
table{
border-spacing: 30px;
width: 100%;
text-align: center;
}
td{
font-size: 24px;
}
a{
font-family: VT323, monospace;
font-size: 24px;
}
a:link {
color: #8FC4E6;
}
a:hover {
color: #B17300;
}
a:active {
color: #FFBC42;
}
a:visited {
color: #FFBC42;
}
/*Animations*/
@keyframes shadowPulse {
from {text-shadow: #B17300 3px 3px 10px;}
to {text-shadow: #664400 3px 3px 7px;}
}
.fadeIn {
animation-name: fadeIn;
animation-duration: 2s;
}
@keyframes fadeIn {
from {opacity: 0%;}
to {opacity: 100%;}
}
/*Classes*/
/*CSS code for parallax scrolling effect modified from W3Schools*/
.parallax {
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.background1{
background-image: url("../img/mainBackground.png");
}
.spacer-small{
min-height: 25px;
}
.spacer-large{
min-height: 100px;
}
.centerImage{
margin-left: auto;
margin-right: auto;
display: block;
}
.contentBackground{
background-color: RGBA(40, 48, 68, 0.7);
box-shadow: RGBA(177, 115, 0, 0.8) 3px 3px 10px;
}
.roundCorners{
border-radius: 20px;
}
/*Responsive iframe stuff*/
.responsive-iframe-container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
/*TEMP: Used for TEMPORARY content, to be replaced with actual content later.*/
.temporary-box {
background-color: steelblue;
color: lightsteelblue;
}
/**Learned how to do this from this question on StackOverflow: https://stackoverflow.com/questions/15161674/responsive-design-rearrange-element-positions-with-css**/
@media only screen and (max-width: 768px){
.reverseOnMobile{
float: none;
display: table;
}
.firstOnMobile{
float: none;
display: table-header-group;
}
.lastOnMobile{
display: table-footer-group;
}
}
/*IDs*/
#page-title{
text-align: center;
letter-spacing: 2px;
animation-name: shadowPulse;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#logo {
max-height: 250px;
}
#footer-spacer{
min-height: 90px;
}
@media only screen and (min-width: 768px) {
#footer {
position: fixed;
height: 70px;
width: 100%;
bottom: 0;
left: 0;
background-color: #161A25;
color: #8FC4E6;
text-align: right;
}
#footer-logo {
max-height: 50px;
}
#footer-text {
position: relative;
bottom: 20px;
}
}
@media only screen and (max-width: 768px) {
#footer {
position: fixed;
height: 70px;
width: 100%;
bottom: 0;
left: 0;
background-color: #161A25;
color: #8FC4E6;
text-align: right;
}
#footer-logo {
position: relative;
bottom: 35px;
max-height: 50px;
}
#footer-text {
position: relative;
bottom: 55px;
}
}

View file

Before

Width:  |  Height:  |  Size: 88 KiB

After

Width:  |  Height:  |  Size: 88 KiB

View file

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 397 KiB

111
oldStuff/index.html Normal file
View file

@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kaj Forney -- GIMM 260 Data Visualization Narrative</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/gridStyle.css">
</head>
<body class="background1 parallax">
<div class="spacer-large"></div>
<div class="row">
<div class="col-3"></div>
<div class="col-6">
<h1 id="page-title">Linux Gaming with Proton</h1>
</div>
<div class="col-3"></div>
</div>
<div class="spacer-large"></div>
<div class="row fadeIn">
<h2>Proton: Brief Overview</h2>
</div>
<div class="row fadeIn">
<div class="col-1"></div>
<div class="col-5">
<div class="responsive-iframe-container">
<iframe class="responsive-iframe" width="560" height="315" src="https://www.youtube.com/embed/_OAqvtlgfGA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="col-5 contentBackground">
<p>[NARRATIVE TEXT: Introduce Proton here. Describe how Valve's rating system for games on Steam Deck works, and compare to ProtonDB, where I got my data.]</p>
</div>
<div class="col-1"></div>
</div>
<div class="spacer-small"></div>
<div class="row fadeIn">
<div class="col-1"></div>
<div class="col-5 contentBackground">
<p>Some games work perfectly out of the box, and require no additional configuration!</p>
</div>
<div class="col-5 ">
<div class="temporary-box">
FIRST CHART HERE.
This will be a depiction of the user reports for Risk of Rain 2 or Cuphead.
</div>
</div>
<div class="col-1"></div>
</div>
<div class="spacer-small"></div>
<div class="row fadeIn">
<div class="col-1"></div>
<div class="col-5 contentBackground">
<p>However, some games require improvements on Valve's end for various reasons before they work properly.</p>
</div>
<div class="col-5 ">
<div class="temporary-box">
SECOND CHART HERE: Streamgraph.
This will be a depiction of the user reports for Age of Empires II:DE.
</div>
</div>
<div class="col-1"></div>
</div>
<div class="spacer-small"></div>
<div class="row fadeIn">
<div class="col-1"></div>
<div class="col-5 contentBackground">
<p>Finally, some games, especially AAA multiplayer titles, utilize intrusive kernel-level anti cheat measures.</p>
<p>These prevent games from working at all on Linux, unles the developer permits it.</p>
</div>
<div class="col-5 ">
<div class="temporary-box">
THIRD CHART HERE: Streamgraph.
This will be a depiction of the user reports for Apex Legends.
</div>
</div>
<div class="col-1"></div>
</div>
<div class="spacer-large"></div>
<div class="row fadeIn">
<div class="col-2"></div>
<div class="col-8 contentBackground temporary-box">
<p>In this section, there will be </p>
</div>
<div class="col-2"></div>
</div>
<div id="footer-spacer"></div>
<div id="footer">
<div class="row">
<div class="col-6"></div>
<div class="col-6">
<img src="img/logo.png" alt="Lunar Penguin Logo" id="footer-logo">
<span id="footer-text">Page created by <a href="https://lunarpenguin.net">Kaj Forney</a>, 2022.</span>
</div>
</div>
</div>
</body>
</html>