add initial content, styles

raytools · Aug 8, 2024 · d93f015 · d93f015
1 parent 18decf5
commit d93f015
Show file tree

Hide file tree

Showing 4 changed files with 189 additions and 11 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+*.swp
+
diff --git a/index.html b/index.html
@@ -1,13 +1,82 @@
 <!DOCTYPE html>
-<html>
-	<head>
-		<title>Raytools</title>
-		<meta charset="UTF-8">
-		<link rel="stylesheet" href="candy.css">
-		<link rel="icon" href="favicon.ico">
-	</head>
-	<body>
-		<h1>Raytools</h1>
-		<hr>
-	</body>
+<html lang="en" class="candy-root candy-scrollbar">
+<head>
+	<title>Raytools</title>
+	<meta charset="UTF-8">
+	<link rel="stylesheet" href="main.css">
+	<link rel="stylesheet" href="candy.css">
+	<link rel="icon" href="favicon.ico">
+	<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
+	<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+
+<header class="candy-texture-striped">
+		<img src="logo.png" width="32" height="32">
+		<b>raytools</b>
+</header>
+<main>
+	<div class="content">
+		<h1>welcome to raytools</h1>
+		<p>
+		This site aggregates various utilities and mods for Rayman 2 (and other CPA engine games).<br>
+		TODO better description
+		</p>
+	</div>
+	<section>
+		<h2>essentials</h2>
+		<div class="card-stack">
+			<div class="candy-card">
+				<h2>Ray2Fix</h2>
+				<p>
+				Collection of fixes and patches for Rayman 2.<br>
+				Say goodbye to stutters, instability, and problems with graphics.<br>
+				Includes patches for windowed mode, widescreen, and controller support.<br>
+				</p>
+				<div class="button-row">
+					<a class="candy-button candy-primary" href="https://github.com/spitfirex86/Ray2Fix/releases/latest">download</a>
+					<a class="candy-button" href="https://github.com/spitfirex86/Ray2Fix/blob/master/README.md">readme</a>
+					<a class="candy-button" href="https://github.com/spitfirex86/Ray2Fix">source code</a>
+				</div>
+			</div>
+			<div class="candy-card">
+				<h2>Twofold</h2>
+				<p>
+				DLL mod loader for Rayman 2.<br>
+				Previously a part of Ray2Fix, the new loader improves stability, allows customizing the load order, and makes it easier to launch the game in unmodded state.
+				</p>
+				<div class="button-row">
+					<a class="candy-button candy-primary" href="https://github.com/spitfirex86/Twofold/releases/latest">download</a>
+					<a class="candy-button" href="https://github.com/spitfirex86/Twofold">source code</a>
+				</div>
+			</div>
+			<div class="candy-card">
+				<h2>OpenSpaceToolbox</h2>
+				<p>
+				Toolbox and level switcher for Rayman 2, Rayman 3 and Donald Duck: Goin' Quackers.<br>
+				Change the current map, save and load player position as bookmarks, and more.
+				</p>
+				<div class="button-row">
+					<a class="candy-button candy-primary" href="https://github.com/raytools/OpenSpaceToolbox/releases/latest">download</a>
+					<a class="candy-button" href="https://github.com/raytools/OpenSpaceToolbox">source code</a>
+				</div>
+			</div>
+		</div>
+	</section>
+	<section>
+		<h2>spitfire's mods</h2>
+		<p>TODO</p>
+	</section>
+	<section>
+		<div class="footer">
+			<p>&copy; 2024 <a href="https://github.com/spitfirex86">Spitfire_x86</a>.&ensp;Uses <a href="https://candy.wavebeem.com/">candy.css</a> by Sage Fennel.</p>
+		</div>
+	</section>
+</main>
+
+</body>
 </html>
diff --git a/logo.png b/logo.png
diff --git a/main.css b/main.css
@@ -0,0 +1,107 @@
+:root {
+	box-sizing: border-box;
+	padding: 0;
+	line-height: 1.5;
+	font-family: "Noto Sans", "Roboto", sans-serif;
+	font-optical-sizing: auto;
+	color-scheme: light;
+}
+
+body {
+	margin: 0 auto;
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	grid-template-areas: "header" "main";
+	grid-template-rows: max-content 1fr;
+}
+
+@media (min-width: 900px) {
+	body {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+		grid-template-areas: "header" "main";
+		grid-template-rows: max-content 1fr;
+	}
+}
+
+header {
+	grid-area: header;
+	padding: 1rem;
+	font-size: 1.25rem;
+	display: flex;
+	flex-flow: row wrap;
+	align-items: center;
+	gap: 1rem 2rem;
+	border-bottom: 1px solid var(--candy-color-border1);
+	box-shadow:
+		0 1px 4px 0 var(--candy-color-shadow1),
+		0 2px 8px 0 var(--candy-color-shadow1);
+	z-index: 1;
+}
+
+main {
+	grid-area: main;
+	overflow-y: auto;
+}
+
+.content, section {
+	box-sizing: border-box;
+	padding: 0 1rem;
+	max-width: 100ch;
+	margin: 0 auto;
+}
+
+section > h2, .content > h2 {
+	padding-top: 1rem;
+	border-top: 1px solid var(--candy-color-border3);
+}
+
+.candy-card h2 {
+	display: inline;
+}
+
+a.candy-button {
+	text-decoration: none;
+	display: inline-block;
+	cursor: default;
+}
+
+.footer {
+	margin-top: 3rem;
+	font-size: 0.8rem;
+	border-top: 1px solid var(--candy-color-border3);
+}
+
+.card-deck {
+	display: flex;
+	flex-flow: row wrap;
+	gap: 1rem;
+}
+
+.card-deck > .candy-card {
+	flex: calc(45ch - 2rem);
+}
+
+.card-stack {
+	display: flex;
+	flex-flow: column;
+	gap: 1rem;
+}
+
+.card-stack > .candy-card {
+	flex: auto;
+}
+
+.button-row {
+	display: flex;
+	flex-flow: row wrap;
+	gap: 0.5rem;
+}
+
+.button-row > .candy-button {
+	flex: none;
+}
+