G2/website
1
0
Fork 0
mirror of https://github.com/G2-Games/website.git synced 2025-04-19 09:52:53 -05:00
Code Issues Projects Releases Packages Wiki Activity

Improved CSS, expanded main page, updated showcase image

Browse source
This commit is contained in:
G2-Games 2024-06-07 16:36:11 -05:00
parent d74cb37709
commit bc8c7dbc31
9 changed files with 120 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/code-style.css
View file

@ -1,11 +1,11 @@
code { code {
background-color: #2d2d2d; background-color: #2d2d2d;
color: #ebebeb; color: #ebebeb;
padding: 3px; padding: 2px;
border-radius: 3px; border-radius: 3px;
font-family: "Maple Mono", monospace; font-family: "Maple Mono", monospace;
font-style: normal; font-style: normal;
font-size: 14pt; /*font-size: 14pt;*/
} }
div.code-toolbar { div.code-toolbar {

17
assets/fonts/fonts.css
View file

@ -5,8 +5,8 @@
/* Main Display */ /* Main Display */
@font-face { @font-face {
font-family: "Montserrat"; font-family: "Roboto";
src: url('Montserrat.ttf'); src: url('Roboto-Regular.ttf');
} }
/* Serif */ /* Serif */
@ -17,8 +17,8 @@
/* Impact */ /* Impact */
@font-face { @font-face {
font-family: "Roboto"; font-family: "Montserrat";
src: url('Roboto-Regular.ttf'); src: url('Montserrat.ttf');
} }
@font-face { @font-face {
@ -40,12 +40,3 @@
font-feature-settings: "liga" on; font-feature-settings: "liga" on;
src: url('MapleMono-Italic.woff2') format('woff2'); src: url('MapleMono-Italic.woff2') format('woff2');
} }
/* Too big...
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 100 200 300 400 500 600 700;
src: url('material-icons.woff2');
}
*/

1
assets/images/copy.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 321 B

BIN
assets/images/showcase.webp
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 116 KiB

BIN
assets/images/showcase_2.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.1 MiB

BIN
assets/images/showcase_old.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 57 KiB

32
assets/main-style.css
View file

@ -1,6 +1,7 @@
/* Fonts */ /* Fonts */
@import url('fonts/fonts.css'); @import url('fonts/fonts.css');
/* Auxillary Styles */
@import url('img-style.css'); @import url('img-style.css');
@import url('code-style.css'); @import url('code-style.css');
@ -60,7 +61,7 @@ header a:link, header a:visited, header a:hover {
color: unset; color: unset;
} }
header .navigation { nav {
font-family: "Montserrat", sans-serif; font-family: "Montserrat", sans-serif;
font-weight: 300; font-weight: 300;
font-size: 15pt; font-size: 15pt;
@ -70,7 +71,7 @@ header .navigation {
font-style: italic; font-style: italic;
} }
header .navigation a { nav a {
margin-right: 15px; margin-right: 15px;
text-decoration: none; text-decoration: none;
color: unset; color: unset;
@ -78,7 +79,7 @@ header .navigation a {
position: relative; position: relative;
} }
header .navigation a::after { nav a::after {
content: ''; content: '';
width: 100%; width: 100%;
position: absolute; position: absolute;
@ -90,27 +91,27 @@ header .navigation a::after {
transform-origin: top right; transform-origin: top right;
} }
header .navigation a:hover::after { nav a:hover::after {
scale: 1 1; scale: 1 1;
transform-origin: top left; transform-origin: top left;
} }
header .navigation a.active { nav a.active {
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
} }
header .navigation a.active:hover { nav a.active:hover {
brightness: 200%; brightness: 200%;
} }
header .navigation a.active::after { nav a.active::after {
border-bottom: 2px solid slategray; border-bottom: 2px solid slategray;
transform-origin: top left; transform-origin: top left;
scale: 1 1; scale: 1 1;
} }
header .navigation a.active:hover::after { nav a.active:hover::after {
transform-origin: top left; transform-origin: top left;
scale: 1 1.5; scale: 1 1.5;
} }
@ -325,7 +326,7 @@ footer p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
footer p.paginator { nav.paginator {
display: flex; display: flex;
gap: 10px; gap: 10px;
align-items: center; align-items: center;
@ -333,15 +334,22 @@ footer p.paginator {
margin-bottom: 20px; margin-bottom: 20px;
font-size: 1.8em; font-size: 1.8em;
position: relative; position: relative;
font-style: normal;
font-weight: bold;
} }
footer p.paginator .next { nav.paginator::hover {
all: unset;
}
nav.paginator .next {
display: block; display: block;
position: absolute; position: absolute;
right: 10px; right: 10px;
} }
footer p.paginator .prev { nav.paginator .prev {
display: block; display: block;
position: absolute; position: absolute;
left: 10px; left: 10px;

127
index.html
View file

@ -16,7 +16,7 @@ A place for personal projects and things. Enjoy!">
<meta name="twitter:title" content="G2's Website"> <meta name="twitter:title" content="G2's Website">
<link rel="icon" href="https://g2games.dev/icon.webp"> <link rel="icon" href="https://g2games.dev/icon.webp">
<!-- Selfhosted Analytics --> <!-- Self-hosted Analytics -->
<script data-goatcounter="https://resize.g2games.dev/count" <script data-goatcounter="https://resize.g2games.dev/count"
async src="//resize.g2games.dev/count.js"></script> async src="//resize.g2games.dev/count.js"></script>
@ -26,88 +26,133 @@ A place for personal projects and things. Enjoy!">
<body> <body>
<header> <header>
<a href="/"><h1>G2 Games</h1></a> <a href="/"><h1>G2 Games</h1></a>
<ul class="navigation"> <nav>
<a class="active" href="/"><li>Home</li></a> <a class="active" href="/">Home</a>
<a href="/random"><li>Random</li></a> <a href="/random">Random</a>
<a href="/portfolio"><li>Portfolio</li></a> <a href="/portfolio">Portfolio</a>
<a href="/blog"><li>Blog</li></a> <a href="/blog">Blog</a>
</ul> </nav>
</header> </header>
<main class="holder"> <main>
<figure class="showcase"> <figure class="showcase">
<img src="/assets/images/showcase.webp" alt="A picture of some fields at sunset with trees and a dirt road."> <img src="/assets/images/showcase.webp" alt="A picture of the moon through a telescope">
</figure> </figure>
<section> <section>
<h2 class="sep">About Me</h2> <h2 class="sep">About Me</h2>
<p>Hey, I'm G2. I spend most of my time avoiding social media, improving my website, and writing code in Rust. This website is selfhosted on a <a class="ext" href="https://en.wikipedia.org/wiki/Raspberry_Pi#Series_and_generations">Raspberry Pi 5</a> 8GB running <a href="https://ubuntu.com/server">Ubuntu Server</a>. The CSS can be found <a href="https://g2games.dev/assets/main-style.css">here</a>.</p> <p>Hey, I'm G2.</p>
<p>If you would like to get in touch with me, <a class="ext" href="mailto:g2@g2games.dev">Email</a> is the best way to do so.</p> <p>
I spend most of my time avoiding all social media, improving my website, writing code in Rust, bicycling, and thinking about cool tech.
This website is self-hosted on a <a href="https://en.wikipedia.org/wiki/Raspberry_Pi#Series_and_generations">Raspberry Pi 5</a> 8GB running
<a href="https://ubuntu.com/server">Ubuntu Server</a>.
The CSS can be found <a href="https://g2games.dev/assets/main-style.css">here</a>.
</p>
<p style="margin-bottom:2px;">If you would like to get in touch with me, I actively check:</p>
<p style="margin-bottom:2px;">〜 Email: <code>g2@g2games.dev</code></p>
<p>〜 Discord: <code>g2_games</code></p>
<p>Some more of my links:</p> <p>Some more of my links:</p>
<p style="text-align:center;"><a href="https://github.com/G2-Games">GitHub</a> • <a href="/git">Gitea</a></p> <p style="text-align:center;">
<a href="https://github.com/G2-Games">GitHub</a> &blacklozenge;
<a href="/git">Gitea</a> &blacklozenge;
<a href="https://ko-fi.com/g2_games">Ko-fi</a>
</p>
</section> </section>
<!-- Links to my stuff -->
<h2 class="sep center">My Pages</h2> <h2 class="sep center">My Pages</h2>
<a href="/blog"><section class="clickable"> <a href="/blog"><section class="clickable">
<h3>Blog</h3> <h3>Blog</h3>
<p>My personal blog. I post about whatever is interesting me at the moment, usually something tech or photography related, but not always.</p> <p>My personal blog. I post about whatever is interesting me at the
moment, usually something tech or photography related, but not
always.</p>
</section></a> </section></a>
<a href="/portfolio"><section class="clickable"> <a href="/portfolio"><section class="clickable">
<h3>My Portfolio</h3> <h3>My Portfolio</h3>
<p>This portfolio is a list of things I have done and things I am currently doing.</p> <p>This portfolio is a list of things I have done and things I am
currently doing. Not comprehensive, and also I dislike selling
myself.</p>
</section></a> </section></a>
<a href="/random"><section class="clickable"> <a href="/random"><section class="clickable">
<h3>Random Stuff</h3> <h3>Random Stuff</h3>
<p>I tend to make a lot of random things on the internet. You can check out many of those things on this page. Most aren't very interesting, but they might entertain you for a while at least!</p> <p>I tend to make a lot of random things on the internet. You can
check out many of those things on this page. Most aren't very
interesting, but they might entertain you for a while at least!</p>
</section></a> </section></a>
<!-- More about me -->
<h2 class="sep center">More About Me</h2>
<section class="centered">
<p>
I like MiniDisc devices, and have written
<a href="https://github.com/G2-Games/minidisc-rs">some software</a>
for them! I personally have an MZ&#8209;NF610, MZ&#8209;NHD600, and an
MZ&#8209;E707. Go check out <a href="https://www.minidisc.wiki/">the wiki!</a>
</p>
<p>
I also like the Sony PSP and PSVita consoles, I hope to do some homebrew for
the PSP in the future (check out <a href="https://github.com/overdrivenpotato/rust-psp">
the Rust SDK</a> for it!).
</p>
<p>
I appreciate physical media of all kinds, such as CDs, DVD/Blu-Rays, MiniDiscs, and
anything else physical. It's just nice to have a real high quality copy of the media,
that is yours <i>forever</i>!
</p>
<p>
I'm interested in aerospace, including rockets, aircraft, and similar things. I've made
a few projects related to it as well as part of clubs.
</p>
</section>
<!-- Favorite things -->
<h2 class="sep center">My Favorites</h2> <h2 class="sep center">My Favorites</h2>
<section class="centered"> <section class="centered">
<p>A small list of things I enjoy. Y'know, favorites!</p> <p>A small list of things I enjoy. Favorites! This isn't at
all comprehensive and I'd love to add more.</p>
</section> </section>
<section> <section>
<p class="list_title">Text/Code Editor:</p> <p>General Apps:</p>
<ul>
<li>Browser - <a href="https://www.mozilla.org/en-US/firefox/" title="Keep the web free!">Firefox</a></li>
<li>Notetaking - <a href="https://github.com/zadam/trilium">Trilium</a></li>
<li>Music Player - <a href="https://tauonmusicbox.rocks/">Tauon</a></li>
</ul>
<p>Text/Code Editor:</p>
<ul> <ul>
<li><a href="https://kate-editor.org/">Kate</a></li> <li><a href="https://kate-editor.org/">Kate</a></li>
</ul> </ul>
<p class="list_title">Fonts:</p> <p>Fonts:</p>
<ul> <ul>
<li><a href="https://github.com/tonsky/FiraCode">Fira Code</a></li> <li><a href="https://github.com/tonsky/FiraCode">Fira Code</a></li>
<li><a href="https://github.com/subframe7536/maple-font">Maple Mono</a></li> <li><a href="https://github.com/subframe7536/maple-font">Maple Mono</a></li>
<li><a href="https://fonts.google.com/specimen/Roboto">Roboto</a></li> <li><a href="https://fonts.google.com/specimen/Roboto">Roboto</a></li>
<li><a href="https://fonts.google.com/noto">Noto</a></li> <li><a href="https://fonts.google.com/noto">Noto</a></li>
</ul> </ul>
<p class="list_title">Programming Languages:</p>
<ul>
<li><a href="https://www.rust-lang.org/">Rust</a></li>
<li><a href="https://www.python.org/">Python</a></li>
</ul>
</section> </section>
<section> <section>
<p class="list_title">Shell:</p> <p>Programming Languages:</p>
<ul>
<li><a href="https://www.rust-lang.org/">Rust</a></li>
<li><a href="https://www.python.org/">Python</a></li>
<li><a href="https://www.typescriptlang.org/">TypeScript</a></li>
</ul>
<p>Shell:</p>
<ul> <ul>
<li><a href="https://www.gnu.org/software/bash/">Bash</a> <i>Linux</i></li> <li><a href="https://www.gnu.org/software/bash/">Bash</a> <i>Linux</i></li>
<li><a href="https://www.gnu.org/software/bash/">PowerShell</a> <i>Windows</i></li> <li><a href="https://github.com/PowerShell/PowerShell">PowerShell</a> <i>Windows</i></li>
</ul> </ul>
<p class="list_title">Notetaking App:</p> <p>Desktop Environment:</p>
<ul>
<li><a href="https://github.com/zadam/trilium">Trilium</a></li>
</ul>
<p class="list_title">Browser:</li>
<ul>
<li><a title="Keep the web free!" href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a></li>
</ul>
<p class="list_title">Desktop Environment:</p>
<ul> <ul>
<li><a href="https://kde.org/plasma-desktop/">KDE Plasma</a></li> <li><a href="https://kde.org/plasma-desktop/">KDE Plasma</a></li>
</ul> </ul>
@ -116,7 +161,11 @@ A place for personal projects and things. Enjoy!">
<footer> <footer>
<p>&copy;2024 G2</p> <p>&copy;2024 G2</p>
<p>Powered by <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML"><img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/3/38/HTML5_Badge.svg"></a> and <a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS"><img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/6/62/CSS3_logo.svg"></a></p> <p>Powered by
<a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML"><img class="icon" alt="HTML logo icon" src="https://upload.wikimedia.org/wikipedia/commons/3/38/HTML5_Badge.svg"></a>
and
<a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS"><img class="icon" alt="CSS logo icon" src="https://upload.wikimedia.org/wikipedia/commons/6/62/CSS3_logo.svg"></a>
</p>
</footer> </footer>
</body> </body>
</html> </html>

12
random/index.html
View file

@ -26,12 +26,12 @@ A place for personal projects and things. Enjoy!">
<body> <body>
<header> <header>
<a href="/"><h1>G2 Games</h1></a> <a href="/"><h1>G2 Games</h1></a>
<ul class="navigation"> <nav>
<a href="/"><li>Home</li></a> <a href="/">Home</a>
<a class="active" href="/random"><li>Random</li></a> <a class="active" href="/random">Random</a>
<a href="/portfolio"><li>Portfolio</li></a> <a href="/portfolio">Portfolio</a>
<a href="/blog"><li>Blog</li></a> <a href="/blog">Blog</a>
</ul> </nav>
</header> </header>
<main class="holder"> <main class="holder">