Added mobile ui, changed back to og font

.prettierignore

@@ -1,3 +1,4 @@
 .next
 out
-pnpm-lock.yaml
+pnpm-lock.yaml
+node_modules

README.md

@@ -49,5 +49,7 @@ A general list for any contributors. If you make a contribution add yourself her
 - Quite a Fancy Emerald
 - sexyduceduce
 - mdoryammilwalrus
+- Crllect
+- xmb9
 
 If you wish to support TitaniumNetwork please check out our Discord!

package.json

@@ -4,7 +4,7 @@
 	"homepage": "https://titaniumnetwork.org",
 	"scripts": {
 		"dev": "next dev",
-		"build": "next build --webpack",
+		"build": "next build",
 		"start": "next start",
 		"format": "prettier --write .",
 		"lint": "next lint"

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+allowBuilds:
+    sharp: true

prettier.config.js

@@ -6,6 +6,7 @@ const config = {
 	useTabs: true,
 	semi: true,
 	singleQuote: false,
+	tabWidth: 4,
 };
 
 export default config;

src/app/error.tsx

@@ -9,7 +9,9 @@ export default function Error() {
 			<div className="content">
 				<div className="container">
 					<div data-aos="fade-right">
-						<p className="header-text">{disabled("TitaniumNetwork")}</p>
+						<p className="header-text">
+							{disabled("TitaniumNetwork")}
+						</p>
 						<p>Something went wrong</p>
 					</div>
 				</div>

src/app/globals.css

@@ -40,7 +40,11 @@ body {
 	color: var(--text);
 	font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
 	background:
-		radial-gradient(circle at 86% 14%, rgba(211, 70, 68, 0.08), transparent 36%),
+		radial-gradient(
+			circle at 86% 14%,
+			rgba(211, 70, 68, 0.08),
+			transparent 36%
+		),
 		linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
 }
 
@@ -58,10 +62,13 @@ h1,
 h2,
 h3 {
 	color: var(--text);
-	font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
+	font-family:
+		var(--font-raleway), "Avenir Next", "Segoe UI", "Helvetica Neue",
+		sans-serif;
 	font-weight: 600;
 	letter-spacing: -0.02em;
 	line-height: 0.98;
+	font-style: normal;
 }
 
 code {
@@ -82,17 +89,23 @@ code {
 	justify-content: center;
 	padding: 0.34rem 0.62rem;
 	color: var(--muted);
-	font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
+	font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
 	font-size: 0.95rem;
 	font-weight: 400;
 	letter-spacing: 0.08em;
 	text-transform: uppercase;
-	transition: color 0.1s ease, text-shadow 0.1s ease, transform 0.1s ease;
+	transition:
+		color 0.1s ease,
+		text-shadow 0.1s ease,
+		transform 0.1s ease;
 }
 
 .nav-link-label {
 	display: inline-block;
-	transition: color 0.1s ease, text-shadow 0.1s ease, transform 0.1s ease;
+	transition:
+		color 0.1s ease,
+		text-shadow 0.1s ease,
+		transform 0.1s ease;
 }
 
 .nav-link-plain:hover,
@@ -101,13 +114,51 @@ code {
 	text-shadow: 0 0 1px color-mix(in oklab, var(--primary) 58%, white 42%);
 }
 
+.mobile-nav-link {
+	display: flex;
+	align-items: center;
+	min-height: 2.6rem;
+	padding: 0.5rem 0.72rem;
+	border: 1px solid rgba(255, 255, 255, 0.12);
+	border-radius: 10px;
+	background: rgba(255, 255, 255, 0.04);
+	color: var(--muted);
+	font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
+	font-size: 0.92rem;
+	font-weight: 500;
+	letter-spacing: 0.08em;
+	text-transform: uppercase;
+	transition:
+		color 0.1s ease,
+		background-color 0.1s ease,
+		border-color 0.1s ease,
+		text-shadow 0.1s ease;
+}
+
+.mobile-nav-link:hover,
+.mobile-nav-link:focus-visible {
+	border-color: color-mix(in oklab, var(--primary) 68%, white 32%);
+	background: color-mix(in oklab, var(--primary) 12%, transparent);
+	color: color-mix(in oklab, var(--primary) 72%, white 28%);
+	text-shadow: 0 0 1px color-mix(in oklab, var(--primary) 58%, white 42%);
+}
+
+.mobile-nav-link-active {
+	border-color: rgba(255, 255, 255, 0.25);
+	background: rgba(255, 255, 255, 0.1);
+	color: rgba(255, 248, 251, 0.95);
+	text-shadow: 0 0 1px rgba(255, 248, 251, 0.3);
+}
+
 .dock-brand-icon {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	transform: scale(1);
 	color: rgba(255, 248, 251, 0.78);
-	filter: drop-shadow(0 0 0 color-mix(in oklab, var(--primary) 58%, white 42%));
+	filter: drop-shadow(
+		0 0 0 color-mix(in oklab, var(--primary) 58%, white 42%)
+	);
 	transition:
 		color 0.1s ease,
 		filter 0.1s ease,
@@ -119,13 +170,17 @@ code {
 .dock-brand-button:focus-visible .dock-brand-icon {
 	transform: scale(1.03);
 	color: color-mix(in oklab, var(--primary) 72%, white 28%);
-	filter: drop-shadow(0 0 0.5px color-mix(in oklab, var(--primary) 58%, white 42%));
+	filter: drop-shadow(
+		0 0 0.5px color-mix(in oklab, var(--primary) 58%, white 42%)
+	);
 }
 
 .dock-brand-button:active .dock-brand-icon {
 	transform: scale(0.97);
 	color: color-mix(in oklab, var(--primary) 64%, white 36%);
-	filter: drop-shadow(0 0 1px color-mix(in oklab, var(--primary) 52%, white 48%));
+	filter: drop-shadow(
+		0 0 1px color-mix(in oklab, var(--primary) 52%, white 48%)
+	);
 }
 
 .content-frame {
@@ -174,7 +229,7 @@ code {
 .legacy-stack {
 	display: grid;
 	gap: 1rem;
-	font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
+	font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
 	font-weight: 400;
 }
 
@@ -206,7 +261,9 @@ code {
 .service-source,
 .service-name {
 	color: var(--text);
-	transition: color 0.18s ease, text-shadow 0.18s ease;
+	transition:
+		color 0.18s ease,
+		text-shadow 0.18s ease;
 }
 
 .legacy-stack a:hover,
@@ -293,6 +350,7 @@ code {
 .service-source {
 	color: var(--muted);
 	font-size: 0.9rem;
+	white-space: nowrap;
 }
 
 .social-badge {
@@ -329,17 +387,27 @@ code {
 		display: block;
 		font-size: clamp(2.7rem, 12vw, 4rem);
 	}
-
-	.nav-link-plain {
-		font-size: 0.84rem;
-		padding: 0.28rem 0.5rem;
-	}
 }
 
 @media (max-width: 720px) {
 	.service-row-legacy,
 	.social-row-legacy {
-		flex-direction: column;
-		align-items: flex-start;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		flex-wrap: nowrap;
+		padding: 0.78rem 0.82rem;
+		gap: 0.75rem;
+	}
+
+	.service-name,
+	.social-name {
+		min-width: 0;
+		flex: 1 1 auto;
+	}
+
+	.service-meta,
+	.social-badge {
+		flex: 0 0 auto;
 	}
 }

src/app/layout.tsx

@@ -1,7 +1,14 @@
 import { Metadata, Viewport } from "next";
+import { Raleway } from "next/font/google";
 import Nav from "../components/Nav";
 import "./globals.css";
 
+const raleway = Raleway({
+	subsets: ["latin"],
+	weight: ["600"],
+	variable: "--font-raleway",
+});
+
 export const metadata: Metadata = {
 	title: "TitaniumNetwork",
 	description:
@@ -28,7 +35,10 @@ export default function RootLayout({
 	children: React.ReactNode;
 }) {
 	return (
-		<html lang="en">
+		<html
+			lang="en"
+			className={`bg-[#220934] text-white ${raleway.variable}`}
+		>
 			<head>
 				<script
 					type="application/ld+json"
@@ -129,7 +139,7 @@ export default function RootLayout({
 									name: "Where can I obtain more proxy sites?",
 									acceptedAnswer: {
 										"@type": "Answer",
-										text: 'Be sure to join the TitaniumNetwork discord at discord.gg/unblock! Then simply use the bot in #panel to get a new link.',
+										text: "Be sure to join the TitaniumNetwork discord at discord.gg/unblock! Then simply use the bot in #panel to get a new link.",
 									},
 								},
 								{

src/app/not-found.tsx

@@ -10,7 +10,9 @@ export default function NotFound() {
 		<main className="mx-auto w-full max-w-275 px-4 pb-16 pt-8 md:px-8">
 			<section className="content-frame min-h-[calc(100vh-11.5rem)] grid place-items-center pt-6 pb-8">
 				<div className="w-full max-w-180 text-center">
-					<p className="text-sm font-semibold tracking-[0.18em] text-white/65">404</p>
+					<p className="text-sm font-semibold tracking-[0.18em] text-white/65">
+						404
+					</p>
 					<h1 className="mt-3 text-balance text-[clamp(2.1rem,6.2vw,4rem)] leading-[0.95] tracking-[-0.03em] text-white">
 						Page Not Found
 					</h1>

src/app/page.tsx

@@ -15,8 +15,9 @@ export default function Home() {
 						TitaniumNetwork
 					</h1>
 					<p className="mx-auto mt-6 max-w-[52ch] text-[clamp(1.02rem,1.9vw,1.34rem)] leading-relaxed text-white/78">
-						Services for a less restrictive web experience, built with a focus on
-						access, privacy, and practical deployment.
+						Services for a less restrictive web experience, built
+						with a focus on access, privacy, and practical
+						deployment.
 					</p>
 					<HeroActions
 						actions={[
@@ -31,8 +32,7 @@ export default function Home() {
 								label: "Documentation",
 								variant: "secondary",
 								external: true,
-								title:
-									"Look here for either contributing or hosting your own web proxy service using our various open-source projects!",
+								title: "Look here for either contributing or hosting your own web proxy service using our various open-source projects!",
 							},
 						]}
 					/>

src/app/services/page.tsx

@@ -90,22 +90,31 @@ export default function Services() {
 					</FadeIn>
 
 					{serviceGroups.map((group, index) => (
-						<FadeIn className="service-group" key={group.title} delay={index * 0.05 + 0.02}>
-							<h3 className="service-group-title">{group.title}</h3>
+						<FadeIn
+							className="service-group"
+							key={group.title}
+							delay={index * 0.05 + 0.02}
+						>
+							<h3 className="service-group-title">
+								{group.title}
+							</h3>
 							<ul className="service-list-legacy service-group-list">
 								{group.services.map((service) => (
 									<li key={service.name}>
-										<Service href={service.href} source={service.source}>
+										<Service
+											href={service.href}
+											source={service.source}
+										>
 											{service.name}
 										</Service>
 									</li>
 								))}
 							</ul>
 						</FadeIn>
-						))}
-					</div>
-				</section>
-			</main>
+					))}
+				</div>
+			</section>
+		</main>
 	);
 }
 
@@ -118,15 +127,15 @@ function Service({
 	children: React.ReactNode;
 	source?: string;
 }) {
-		return (
-			<div className="service-row-legacy">
-				<a className="service-name" href={href} target="_blank">
-					{children}
-				</a>
-				<div className="service-meta">
-					{source ? (
-						<a className="service-source" href={source} target="_blank">
-							[Source]
+	return (
+		<div className="service-row-legacy">
+			<a className="service-name" href={href} target="_blank">
+				{children}
+			</a>
+			<div className="service-meta">
+				{source ? (
+					<a className="service-source" href={source} target="_blank">
+						[Source]
 					</a>
 				) : null}
 			</div>