diff --git a/html/assets/style.css b/html/assets/style.css index e999987..ba734f5 100644 --- a/html/assets/style.css +++ b/html/assets/style.css @@ -13,6 +13,7 @@ :root { --accent-color: #b4befe; + --accent-color-dark: #9198cd; --text-color: #b8c0ff; --background-color: #191724; } @@ -26,7 +27,7 @@ body { } p { - font-size: 16px; + font-size: 18px; color: var(--text-color); } @@ -46,15 +47,20 @@ footer { } footer p { - font-size: 10px; + font-size: 14px; } /* Custom classes */ .box { - width: min(1400px, 90%); + width: min(80%, 1400px); margin-inline: auto; } +.title { + font-size: 18px; + font-weight: bolder; +} + .invert { background-color: var(--text-color); color: var(--background-color); @@ -91,3 +97,89 @@ footer p { .bold {font-weight: bold;} .no-background a:hover {background-color: transparent;} + +/* Top bar */ +.menu { + display: flex; + flex-direction: row; + justify-content: center; + + background-color: var(--accent-color); + color: var(--background-color); + + margin: auto; + width: min(80%, 1400px); +} + +.menu a { + color: var(--background-color); + text-decoration: none; + + user-select: none; + font-size: 20px; +} + +.menu a:hover { + color: var(--accent-color); + background-color: var(--background-color); +} + +.branding {text-align: left; width: 45%; padding: 10px;} +.index {text-align: right; width: 45%; padding: 10px;} + +/* Mobile */ +@media (max-width: 800px) { + p {font-size: 14px;} + + footer p { + font-size: 10px; + } + + .title { + font-size: 16px; + font-weight: bolder; + } + + .psst { + font-style: italic; + font-size: 12px; + } + + .tag { + font-style: italic; + font-size: 12px; + user-select: none; + } + + .rule { + font-size: 12px; + font-weight: bold; + } + + .box { + width: 90%; + margin-inline: auto; + } + + .menu { + display: flex; + flex-direction: column; + justify-content: center; + + background-color: var(--accent-color); + color: var(--background-color); + + width: 90%; + } + + .menu a { + color: var(--background-color); + text-decoration: none; + + user-select: none; + font-size: 16px; + } + + .branding {text-align: center; width: 100%;} + .index {text-align: center; background-color: var(--accent-color-dark); width: 100%; padding: 0px;} +} diff --git a/html/index.html b/html/index.html index 545ea7a..bd114d1 100644 --- a/html/index.html +++ b/html/index.html @@ -8,40 +8,52 @@ -
-
- +
+ +
+
+
+ Pixelated.sh
-

About

+
+ Home + World + Haven + Archives +
+
+ +
+

About

- A collective of services hosted by queers, for queers.
- Powered by a cozy ecosystem of creatures since 2024.
- All home-brewed and mixed with plenty of foxgirl love & energy.
+ A collective of services hosted by the fops called Bo.
+ Powered by a cozy ecosystem of creatures since 2024.
+ Open for all mutuals of Bo to join and explore.

-

Services

+

Services

- > Pixelated World: Our self-hosted Sharkey instance. Social
- > Pixelated Haven: Our self-hosted Nextcloud instance. Cloud
- > Pixelated Archives: Our self-hosted Forgejo instance. Code
- > Pixelated Unity: Our self-hosted Minecraft server. Games
+ > Pixelated World: Our Sharkey instance. Social
+ > Pixelated Haven: Our Nextcloud instance. Cloud
+ > Pixelated Archives: Our Forgejo instance. Code
+ > Pixelated Unity: Our Minecraft server. Games

-

Maintainer(s)

+

Maintainer(s)

> Bo⋆˚✿˖° (she/they) Maintainer of infrastructure

-

Contact

+

Contact

Do you have any questions, inqueries, or have feedback?
- Please contact a maintainer, or reach out to us at:
+ Please reach out to us at:
> E-Mail: info@pixelated.sh
> Fediverse: @pixelated@floss.social
We look forward to hearing from you!
@@ -49,7 +61,7 @@

-

:3

+

:3