Import stuff from PA9.
This commit is contained in:
parent
1437a7ef17
commit
7ff1534c9f
GPG key ID:
3AB4E2E04CEF656F
26
css/animation.css
Normal file
26
css/animation.css
Normal 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
49
css/grid.css
Normal 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;
|
||||
}
|
||||
218
css/main.css
218
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;
|
||||
}
|
||||
}
|
||||
5860
data/gamedata.csv
Normal file
5860
data/gamedata.csv
Normal file
File diff suppressed because it is too large
Load diff
7068
data/gamedata.json
7068
data/gamedata.json
File diff suppressed because one or more lines are too long
3535
data/gamedata_original.json
Normal file
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
3533
data/gamedata_sql.txt
Normal file
File diff suppressed because it is too large
Load diff
BIN
fonts/IBMPlexMono-Regular.ttf
Normal file
BIN
fonts/IBMPlexMono-Regular.ttf
Normal file
Binary file not shown.
BIN
fonts/IBMPlexSans-Regular.ttf
Normal file
BIN
fonts/IBMPlexSans-Regular.ttf
Normal file
Binary file not shown.
BIN
fonts/Oswald-Regular.ttf
Normal file
BIN
fonts/Oswald-Regular.ttf
Normal file
Binary file not shown.
BIN
fonts/VT323-Regular.ttf
Normal file
BIN
fonts/VT323-Regular.ttf
Normal file
Binary file not shown.
BIN
img/background.png
Normal file
BIN
img/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 397 KiB |
BIN
img/logos/lunarpenguin.png
Normal file
BIN
img/logos/lunarpenguin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
102
index.html
102
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>
|
||||
49
oldStuff/css/gridStyle.css
Normal file
49
oldStuff/css/gridStyle.css
Normal 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
242
oldStuff/css/main.css
Normal 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;
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 88 KiB |
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 49 KiB |
BIN
oldStuff/img/mainBackground.png
Normal file
BIN
oldStuff/img/mainBackground.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 397 KiB |
111
oldStuff/index.html
Normal file
111
oldStuff/index.html
Normal 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>
|
||||
Loading…
Reference in a new issue