G2/website
1
0
Fork 0
mirror of https://github.com/G2-Games/website.git synced 2025-04-19 01:42:54 -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 {
background-color: #2d2d2d;
color: #ebebeb;
padding: 3px;
padding: 2px;
border-radius: 3px;
font-family: "Maple Mono", monospace;
font-style: normal;
font-size: 14pt;
/*font-size: 14pt;*/
}
div.code-toolbar {

17
assets/fonts/fonts.css
View file

@ -5,8 +5,8 @@
/* Main Display */
@font-face {
font-family: "Montserrat";
src: url('Montserrat.ttf');
font-family: "Roboto";
src: url('Roboto-Regular.ttf');
}
/* Serif */
@ -17,8 +17,8 @@
/* Impact */
@font-face {
font-family: "Roboto";
src: url('Roboto-Regular.ttf');
font-family: "Montserrat";
src: url('Montserrat.ttf');
}
@font-face {
@ -40,12 +40,3 @@
font-feature-settings: "liga" on;
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 */
@import url('fonts/fonts.css');
/* Auxillary Styles */
@import url('img-style.css');
@import url('code-style.css');
@ -60,7 +61,7 @@ header a:link, header a:visited, header a:hover {
color: unset;
}
header .navigation {
nav {
font-family: "Montserrat", sans-serif;
font-weight: 300;
font-size: 15pt;
@ -70,7 +71,7 @@ header .navigation {
font-style: italic;
}
header .navigation a {
nav a {
margin-right: 15px;
text-decoration: none;
color: unset;
@ -78,7 +79,7 @@ header .navigation a {
position: relative;
}
header .navigation a::after {
nav a::after {
content: '';
width: 100%;
position: absolute;
@ -90,27 +91,27 @@ header .navigation a::after {
transform-origin: top right;
}
header .navigation a:hover::after {
nav a:hover::after {
scale: 1 1;
transform-origin: top left;
}
header .navigation a.active {
nav a.active {
font-weight: bold;
font-style: normal;
}
header .navigation a.active:hover {
nav a.active:hover {
brightness: 200%;
}
header .navigation a.active::after {
nav a.active::after {
border-bottom: 2px solid slategray;
transform-origin: top left;
scale: 1 1;
}
header .navigation a.active:hover::after {
nav a.active:hover::after {
transform-origin: top left;
scale: 1 1.5;
}
@ -325,7 +326,7 @@ footer p:last-child {
margin-bottom: 0;
}
footer p.paginator {
nav.paginator {
display: flex;
gap: 10px;
align-items: center;
@ -333,15 +334,22 @@ footer p.paginator {
margin-bottom: 20px;
font-size: 1.8em;
position: relative;
font-style: normal;
font-weight: bold;
}
footer p.paginator .next {
nav.paginator::hover {
all: unset;
}
nav.paginator .next {
display: block;
position: absolute;
right: 10px;
}
footer p.paginator .prev {
nav.paginator .prev {
display: block;
position: absolute;
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">
<link rel="icon" href="https://g2games.dev/icon.webp">
<!-- Selfhosted Analytics -->
<!-- Self-hosted Analytics -->
<script data-goatcounter="https://resize.g2games.dev/count"
async src="//resize.g2games.dev/count.js"></script>
@ -26,88 +26,133 @@ A place for personal projects and things. Enjoy!">
<body>
<header>
<a href="/"><h1>G2 Games</h1></a>
<ul class="navigation">
<a class="active" href="/"><li>Home</li></a>
<a href="/random"><li>Random</li></a>
<a href="/portfolio"><li>Portfolio</li></a>
<a href="/blog"><li>Blog</li></a>
</ul>
<nav>
<a class="active" href="/">Home</a>
<a href="/random">Random</a>
<a href="/portfolio">Portfolio</a>
<a href="/blog">Blog</a>
</nav>
</header>
<main class="holder">
<main>
<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>
<section>
<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>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>Hey, I'm G2.</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 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>
<!-- Links to my stuff -->
<h2 class="sep center">My Pages</h2>
<a href="/blog"><section class="clickable">
<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>
<a href="/portfolio"><section class="clickable">
<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>
<a href="/random"><section class="clickable">
<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>
<!-- 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>
<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>
<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>
<li><a href="https://kate-editor.org/">Kate</a></li>
</ul>
<p class="list_title">Fonts:</p>
<p>Fonts:</p>
<ul>
<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://fonts.google.com/specimen/Roboto">Roboto</a></li>
<li><a href="https://fonts.google.com/noto">Noto</a></li>
</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>
<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>
<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>
<p class="list_title">Notetaking App:</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>
<p>Desktop Environment:</p>
<ul>
<li><a href="https://kde.org/plasma-desktop/">KDE Plasma</a></li>
</ul>
@ -116,7 +161,11 @@ A place for personal projects and things. Enjoy!">
<footer>
<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>
</body>
</html>

12
random/index.html
View file

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