Formatting fixes, and add another game.

This commit is contained in:
Kaj Forney 2023-02-21 16:59:51 -07:00
parent 804a75a370
commit 22ee073be7
Signed by: kforney
GPG key ID: 3AB4E2E04CEF656F
2 changed files with 270 additions and 230 deletions

View file

@ -12,9 +12,9 @@
========================================================================== */ ========================================================================== */
html { html {
color: #222; color: #222;
font-size: 1em; font-size: 1em;
line-height: 1.4; line-height: 1.4;
} }
/* /*
@ -28,13 +28,13 @@ html {
*/ */
::-moz-selection { ::-moz-selection {
background: #b3d4fc; background: #b3d4fc;
text-shadow: none; text-shadow: none;
} }
::selection { ::selection {
background: #b3d4fc; background: #b3d4fc;
text-shadow: none; text-shadow: none;
} }
/* /*
@ -42,12 +42,12 @@ html {
*/ */
hr { hr {
display: block; display: block;
height: 1px; height: 1px;
border: 0; border: 0;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
margin: 1em 0; margin: 1em 0;
padding: 0; padding: 0;
} }
/* /*
@ -62,7 +62,7 @@ iframe,
img, img,
svg, svg,
video { video {
vertical-align: middle; vertical-align: middle;
} }
/* /*
@ -70,9 +70,9 @@ video {
*/ */
fieldset { fieldset {
border: 0; border: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
/* /*
@ -80,7 +80,7 @@ fieldset {
*/ */
textarea { textarea {
resize: vertical; resize: vertical;
} }
/* ========================================================================== /* ==========================================================================
@ -106,223 +106,230 @@ body, html {
} }
body { body {
background-color: #161A25; background-color: #161A25;
background-image: url("/img/branding/backgroundSmall.png"); background-image: url("/img/branding/backgroundSmall.png");
} }
a { a {
transition: all 0.4s ease 0s; transition: all 0.4s ease 0s;
} }
h1 { h1 {
font-family: VT323; font-family: VT323;
font-size: 64px; font-size: 64px;
color: #FFBC42; color: #FFBC42;
text-align: center; text-align: center;
} }
h2{ h2 {
font-family: Oswald; font-family: Oswald;
font-size: 64px; font-size: 64px;
color: #78a1bb; color: #78a1bb;
text-align: center; text-align: center;
} }
h5 { h5 {
font-family: 'IBM Plex Mono', monospace; font-family: 'IBM Plex Mono', monospace;
font-size: 28px; font-size: 28px;
color: #78a1bb; color: #78a1bb;
text-align: center; text-align: center;
} }
p { p {
font-family: 'IBM Plex Sans', sans-serif; font-family: 'IBM Plex Sans', sans-serif;
font-size: 20px; font-size: 20px;
color: #78a1bb; color: #78a1bb;
text-align: center; text-align: center;
} }
hr { hr {
border-top: #78a1bb dashed 4px; border-top: #78a1bb dashed 4px;
max-width: 75%; max-width: 75%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
iframe[src*=youtube] iframe[src*=youtube] {
{ text-align: center;
text-align: center; display: block;
display: block; margin-right: auto;
margin-right: auto; margin-left: auto;
margin-left: auto; max-width: 80%;
max-width:80%;
} }
iframe[src*=itch] iframe[src*=itch] {
{ text-align: center;
text-align: center; display: block;
display: block; margin-right: auto;
margin-right: auto; margin-left: auto;
margin-left: auto; max-width: 80%;
max-width: 80%;
} }
.parallax { .parallax {
position: relative; position: relative;
background-attachment: fixed; background-attachment: fixed;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
} }
.bg-dark { .bg-dark {
--bs-dark-rgb: 40, 48, 68; --bs-dark-rgb: 40, 48, 68;
--bs-light-rgb: 120, 161, 187; --bs-light-rgb: 120, 161, 187;
--bs-body-color: 120, 161, 187; --bs-body-color: 120, 161, 187;
} }
.navbar-brand { .navbar-brand {
font-family: VT323; font-family: VT323;
font-size: 36px; font-size: 36px;
color: #FFBC42; color: #FFBC42;
} }
.navbar-text { .navbar-text {
font-family: VT323; font-family: VT323;
font-size: 36px; font-size: 36px;
color: #78a1bb; color: #78a1bb;
} }
.navbar-logo { .navbar-logo {
max-height: 50px; max-height: 50px;
padding-right: 15px; padding-right: 15px;
padding-left:15px; padding-left: 15px;
padding-bottom: 6px; padding-bottom: 6px;
} }
.nav-item { .nav-item {
padding-top: 7px; padding-top: 7px;
} }
.navbar-brand:hover { .navbar-brand:hover {
color: #78a1bb; color: #78a1bb;
text-shadow: #B17300 2px 2px 3px; text-shadow: #B17300 2px 2px 3px;
} }
.navbar-link { .navbar-link {
color: #FFBC42; color: #FFBC42;
font-family: VT323, monospace; font-family: VT323, monospace;
font-size: 36px; font-size: 36px;
padding-left: 50px; padding-left: 50px;
padding-right: 50px; padding-right: 50px;
text-decoration: none; text-decoration: none;
} }
.navbar-link:hover { .navbar-link:hover {
color: #78a1bb; color: #78a1bb;
text-shadow: #B17300 2px 2px 3px; text-shadow: #B17300 2px 2px 3px;
} }
.dropdown-menu{ .dropdown-menu {
background-color: RGBA(22, 26, 37, 70%); background-color: RGBA(22, 26, 37, 70%);
box-shadow: #B17300 0px 0px 20px; box-shadow: #B17300 0px 0px 20px;
} }
.dropdown-item { .dropdown-item {
color: #FFBC42; color: #FFBC42;
font-family: "IBM Plex Mono", monospace; font-family: "IBM Plex Mono", monospace;
} }
.dropdown-item:hover{ .dropdown-item:hover {
background-color: #78a1bb; background-color: #78a1bb;
} }
.card { .card {
background-color: RGBA(22, 26, 37, 70%); background-color: RGBA(22, 26, 37, 70%);
border-radius: 30px; border-radius: 30px;
box-shadow: #B17300 0px 0px 20px; box-shadow: #B17300 0px 0px 20px;
} }
.text-shadow { .text-shadow {
text-shadow: #ffbc42 1px 1px 2px; text-shadow: #ffbc42 1px 1px 2px;
} }
.section-title{ .section-title {
padding-top: 5px; padding-top: 5px;
padding-bottom: 10px; padding-bottom: 10px;
text-shadow: #B17300 3px 3px 3px; text-shadow: #B17300 3px 3px 3px;
}
.game-link {
text-decoration: none;
color: #78a1bb;
}
.game-link:hover {
color: #FFBC42;
text-shadow: #78a1bb 3px 3px 3px;
} }
.youtube-container { .youtube-container {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
max-height: 60%; padding-top: 50.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
padding-top: 50.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
} }
.youtube-iframe { .youtube-iframe {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
width: 100%; width: 100%;
height: 80%; height: 100%;
border-radius: 40px; border-radius: 40px;
} }
.fa-brands { .fa-brands {
color: #FFBC42; color: #FFBC42;
transition: all 0.4s ease 0s; transition: all 0.4s ease 0s;
} }
.fa-brands:hover { .fa-brands:hover {
color: #78a1bb; color: #78a1bb;
text-shadow: #B17300 2px 2px 3px; text-shadow: #B17300 2px 2px 3px;
} }
.footer { .footer {
width: 100%; width: 100%;
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
text-align: center; text-align: center;
} }
#footerText { #footerText {
color: steelblue; color: steelblue;
} }
@media screen and (min-width: 700px) { @media screen and (min-width: 700px) {
.section-title { .section-title {
font-size: 64px; font-size: 64px;
} }
} }
@media screen and (max-width: 699px) { @media screen and (max-width: 699px) {
.section-title { .section-title {
font-size: 45px; font-size: 45px;
} }
} }
@font-face { @font-face {
font-family: VT323; font-family: VT323;
src: url("https://kforney.github.io/fonts/VT323-Regular.ttf"); src: url("https://kforney.github.io/fonts/VT323-Regular.ttf");
} }
@font-face { @font-face {
font-family: Oswald; font-family: Oswald;
src: url("https://kforney.github.io/fonts/Oswald-Regular.ttf"); src: url("https://kforney.github.io/fonts/Oswald-Regular.ttf");
} }
@font-face { @font-face {
font-family: 'IBM Plex Mono', monospace; font-family: 'IBM Plex Mono', monospace;
src: url("https://kforney.github.io/fonts/IBMPlexMono-Regular.ttf"); src: url("https://kforney.github.io/fonts/IBMPlexMono-Regular.ttf");
} }
@font-face { @font-face {
font-family: 'IBM Plex Sans', sans-serif; font-family: 'IBM Plex Sans', sans-serif;
src: url("https://kforney.github.io/fonts/IBMPlexSans-Regular.ttf"); src: url("https://kforney.github.io/fonts/IBMPlexSans-Regular.ttf");
} }
/* ========================================================================== /* ==========================================================================
@ -335,7 +342,7 @@ iframe[src*=itch]
.hidden, .hidden,
[hidden] { [hidden] {
display: none !important; display: none !important;
} }
/* /*
@ -348,16 +355,16 @@ display: none !important;
*/ */
.sr-only { .sr-only {
border: 0; border: 0;
clip: rect(0, 0, 0, 0); clip: rect(0, 0, 0, 0);
height: 1px; height: 1px;
margin: -1px; margin: -1px;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
position: absolute; position: absolute;
white-space: nowrap; white-space: nowrap;
width: 1px; width: 1px;
/* 1 */ /* 1 */
} }
/* /*
@ -368,13 +375,13 @@ display: none !important;
.sr-only.focusable:active, .sr-only.focusable:active,
.sr-only.focusable:focus { .sr-only.focusable:focus {
clip: auto; clip: auto;
height: auto; height: auto;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
position: static; position: static;
white-space: inherit; white-space: inherit;
width: auto; width: auto;
} }
/* /*
@ -382,7 +389,7 @@ display: none !important;
*/ */
.invisible { .invisible {
visibility: hidden; visibility: hidden;
} }
/* /*
@ -399,12 +406,12 @@ display: none !important;
.clearfix::before, .clearfix::before,
.clearfix::after { .clearfix::after {
content: " "; content: " ";
display: table; display: table;
} }
.clearfix::after { .clearfix::after {
clear: both; clear: both;
} }
/* ========================================================================== /* ==========================================================================
@ -414,14 +421,14 @@ display: none !important;
========================================================================== */ ========================================================================== */
@media only screen and (min-width: 35em) { @media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */ /* Style adjustments for viewports that meet the condition */
} }
@media print, @media print,
(-webkit-min-device-pixel-ratio: 1.25), (-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx), (min-resolution: 1.25dppx),
(min-resolution: 120dpi) { (min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */ /* Style adjustments for high resolution devices */
} }
/* ========================================================================== /* ==========================================================================
@ -431,71 +438,71 @@ display: none !important;
========================================================================== */ ========================================================================== */
@media print { @media print {
*, *,
*::before, *::before,
*::after { *::after {
background: #fff !important; background: #fff !important;
color: #000 !important; color: #000 !important;
/* Black prints faster */ /* Black prints faster */
box-shadow: none !important; box-shadow: none !important;
text-shadow: none !important; text-shadow: none !important;
} }
a, a,
a:visited { a:visited {
text-decoration: underline; text-decoration: underline;
} }
a[href]::after { a[href]::after {
content: " (" attr(href) ")"; content: " (" attr(href) ")";
} }
abbr[title]::after { abbr[title]::after {
content: " (" attr(title) ")"; content: " (" attr(title) ")";
} }
/* /*
* Don't show links that are fragment identifiers, * Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol * or use the `javascript:` pseudo protocol
*/ */
a[href^="#"]::after, a[href^="#"]::after,
a[href^="javascript:"]::after { a[href^="javascript:"]::after {
content: ""; content: "";
} }
pre { pre {
white-space: pre-wrap !important; white-space: pre-wrap !important;
} }
pre, pre,
blockquote { blockquote {
border: 1px solid #999; border: 1px solid #999;
page-break-inside: avoid; page-break-inside: avoid;
} }
/* /*
* Printing Tables: * Printing Tables:
* https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
*/ */
thead { thead {
display: table-header-group; display: table-header-group;
} }
tr, tr,
img { img {
page-break-inside: avoid; page-break-inside: avoid;
} }
p, p,
h2, h2,
h3 { h3 {
orphans: 3; orphans: 3;
widows: 3; widows: 3;
} }
h2, h2,
h3 { h3 {
page-break-after: avoid; page-break-after: avoid;
} }
} }

View file

@ -98,9 +98,11 @@
<div class="row"> <div class="row">
<div class="col-sm-4"> <div class="col-sm-4">
<h2>The Climb</h2> <h2>
<a class="game-link" href="https://lunarpenguin.itch.io/the-climb">The Climb</a>
</h2>
<hr/> <hr/>
<p>[2021]</p> <p>[2021, Win/Mac/Linux]</p>
</div> </div>
<div class="col-sm-8"> <div class="col-sm-8">
<p>The Climb is a small game I created in Unity, originally as part of my work in my GIMM 100 <p>The Climb is a small game I created in Unity, originally as part of my work in my GIMM 100
@ -130,6 +132,32 @@
</div> </div>
</div> </div>
<div class="container-md card mt-5">
<div class="card-body">
<div class="row mt-5">
<div class="col-sm-4">
<h2>
<a class="game-link" href="https://lunarpenguin.itch.io/last-minute">Last Minute</a>
</h2>
<hr/>
<p>[2020, Win/Mac/Linux]</p>
</div>
<div class="col-sm-8">
<p>This is a tiny game I made for a community game jam in 2020. I primarily made it to work on
learning the basics of the Godot Engine. Thus, it isn't the most polished game, but it's still
one I enjoyed making.</p>
</div>
<div class="mt-4"></div>
<div class="row mt-3">
<iframe src="https://itch.io/embed/689456?border_width=0&amp;bg_color=12161f&amp;fg_color=78a1bb&amp;link_color=ffbc42&amp;border_color=283044">
<a href="https://lunarpenguin.itch.io/last-minute">Last Minute by Lunar_Penguin</a></iframe>
</div>
</div>
</div>
</div>
</div> </div>
<div id="gamesHelped"></div> <div id="gamesHelped"></div>
@ -149,15 +177,18 @@
<div class="card-body"> <div class="card-body">
<div class="row mt-5"> <div class="row mt-5">
<div class="col-sm-4"> <div class="col-sm-4">
<h2>Mr. Saitou</h2> <h2>
<a class="game-link" href="https://store.steampowered.com/app/628740/Mr_Saitou/">Mr. Saitou</a>
</h2>
<hr/> <hr/>
<p>[Unreleased, 2023]</p> <p>[Unreleased, 2023, Win/Mac/Linux/Switch]</p>
</div> </div>
<div class="col-sm-8"> <div class="col-sm-8">
<p>I assisted in a minor role with Mr. Saitou, a game created by Laura Shigihara/Morizora Studios. My role in the <p>I assisted in a minor role with Mr. Saitou, a game created by Laura Shigihara (Morizora Studios).
project involved organizing a team of various testers and translators, as well as providing My role in the project primarily involved organizing a team of various testers and translators,
additional in-depth testing on multiple platforms. In addition, I created localized graphical as well as providing additional in-depth testing on multiple platforms. In addition, I created
assets for several languages, while maintaining their original visual style.</p> localized graphical assets for several languages, while maintaining their original visual
style.</p>
</div> </div>
</div> </div>
@ -177,9 +208,11 @@
<div class="card-body"> <div class="card-body">
<div class="row mt-5"> <div class="row mt-5">
<div class="col-sm-4"> <div class="col-sm-4">
<h2>Megashigi</h2> <h2>
<a class="game-link" href="https://lopar.itch.io/megashigi">Megashigi</a>
</h2>
<hr/> <hr/>
<p>[2020]</p> <p>[2020, Win/Mac/Linux]</p>
</div> </div>
<div class="col-sm-8"> <div class="col-sm-8">
<p>Megashigi is a game that I helped create using the Godot Engine, along with several friends, as a <p>Megashigi is a game that I helped create using the Godot Engine, along with several friends, as a
@ -193,7 +226,7 @@
<div class="row mt-3"> <div class="row mt-3">
<iframe src="https://itch.io/embed/630032?border_width=0&amp;bg_color=12161f&amp;fg_color=78a1bb&amp;link_color=ffbc42&amp;border_color=283044"> <iframe src="https://itch.io/embed/630032?border_width=0&amp;bg_color=12161f&amp;fg_color=78a1bb&amp;link_color=ffbc42&amp;border_color=283044">
<a href="https://lopar.itch.io/megashigi">The Climb by Lunar_Penguin</a></iframe> <a href="https://lopar.itch.io/megashigi">MEGASHIGI by Lopar</a></iframe>
</div> </div>
</div> </div>
</div> </div>