diff --git a/html/assets/fonts/ibm_vga8.woff2 b/html/assets/fonts/ibm_vga8.woff2 new file mode 100644 index 0000000..489d4d2 Binary files /dev/null and b/html/assets/fonts/ibm_vga8.woff2 differ diff --git a/html/assets/img/pixelated.png b/html/assets/img/pixelated.png new file mode 100644 index 0000000..c8c5fb9 Binary files /dev/null and b/html/assets/img/pixelated.png differ diff --git a/html/assets/img/welcome.png b/html/assets/img/welcome.png new file mode 100644 index 0000000..f4c2f63 Binary files /dev/null and b/html/assets/img/welcome.png differ diff --git a/html/assets/mobile.css b/html/assets/mobile.css index 89d4a60..257fd48 100644 --- a/html/assets/mobile.css +++ b/html/assets/mobile.css @@ -5,7 +5,12 @@ */ /* Responsive layout for mobile */ -@media (max-width: 768px) { +@media (max-width: 800px) { + /* Custom */ + .img { + max-height: 25vh; + } + /* Menu */ .menu { width: 90%; @@ -51,6 +56,7 @@ .footer p {font-size:12px;} .info {text-align: center; width: 100%;} + .copyright {text-align: center; width: 100%;} /* Boxes */ .box { @@ -65,4 +71,6 @@ padding: 10px; width: 80%; } + + .content {margin: auto;} } diff --git a/html/assets/style.css b/html/assets/style.css index 4ec1300..f3b3d4c 100644 --- a/html/assets/style.css +++ b/html/assets/style.css @@ -4,10 +4,18 @@ * Copyright (c) 2025 FreedTapestry21 */ +/* Jetbrains Mono font by Jetbrains */ @font-face { font-family: 'Jetbrains Mono'; src: local(''), - url('./fonts/jbmono.woff2') + url('./fonts/jbmono.woff2') +} + +/* VGA font by VileR @ int10h.org! */ +@font-face { + font-family: 'VGA'; + src: local(''), + url('./fonts/ibm_vga8.woff2') } :root { @@ -19,14 +27,23 @@ body { background-color: var(--background-color); color: var(--accent-color); - font-family: Verdana, sans-serif; + font-family: 'Jetbrains Mono'; } -p {font-size: 16px;} -h1 {font-size: 32px;} -h2 {font-size: 28px;} -h3 {font-size: 24px;} -h4 {font-size: 20px;} +p {font-size: 18px;} +h1 {font-size: 34px;} +h2 {font-size: 30px;} +h3 {font-size: 26px;} +h4 {font-size: 22px;} + +a { + text-decoration: underline dotted; + color: var(--accent-color-dark); +} + +a:hover { + color: var(--accent-color); +} /* Custom */ .center { @@ -35,7 +52,16 @@ h4 {font-size: 20px;} } .img { - width: min(512px, 45%); + max-height: 45vh; + max-width: 300px; +} + +.circle { + border-radius: 50%; +} + +.nocircle { + max-height: 30vh; } /* Menu */ @@ -75,11 +101,12 @@ h4 {font-size: 20px;} .footer p {font-size:12px;} -.info {text-align: left; width: 90%;} +.info {text-align: left; width: 45%;} +.copyright {text-align: right; width: 45%;} /* Boxes */ .box { - width: 100%; + width: 80%; display: flex; flex-direction: row; @@ -87,8 +114,13 @@ h4 {font-size: 20px;} } .item { + font-family: VGA; padding: 10px; - width: 40%; + width: 50%; margin: auto; } + +.content {margin: auto; min-height: 400px;} + +.invert {flex-direction: row-reverse;} diff --git a/html/index.html b/html/index.html index 05d1402..da2cbc7 100644 --- a/html/index.html +++ b/html/index.html @@ -23,19 +23,31 @@ -
heya! my name's Bo, also known as Freed! I'm a tiny creature traveling around the wild web like every other tiny creature which I see on my computer screen. be welcome to my little corner of the internet!
+Hii there! My name's Bo, also known as Freed!
I'm a tiny creature traveling around the wild web like every other tiny creature which I see on my computer screen. Be welcome to my little corner of the internet!
Pixelated is a project which I've been working on for quite some time now. It's a collection of open-source services which I maintain, with the purpose of providing open-source alternatives to services from big tech corporations. For more information, please look here.