Import stuff from PA9.

css/animation.css

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

css/grid.css

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

css/main.css

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

index.html

@@ -1,11 +1,105 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
     <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/grid.css">
+    <link rel="stylesheet" href="css/animation.css">
+
+    <script src="https://kit.fontawesome.com/55072ce5fd.js" crossorigin="anonymous"></script>
 </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>
-</html>>
+</html>

oldStuff/css/gridStyle.css

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

oldStuff/css/main.css

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

oldStuff/index.html

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