Skip to content

Commit d93f015

Browse files
committed
add initial content, styles
1 parent 18decf5 commit d93f015

File tree

4 files changed

+189
-11
lines changed

4 files changed

+189
-11
lines changed

.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
*.swp
2+

index.html

+80-11
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,82 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<title>Raytools</title>
5-
<meta charset="UTF-8">
6-
<link rel="stylesheet" href="candy.css">
7-
<link rel="icon" href="favicon.ico">
8-
</head>
9-
<body>
10-
<h1>Raytools</h1>
11-
<hr>
12-
</body>
2+
<html lang="en" class="candy-root candy-scrollbar">
3+
<head>
4+
<title>Raytools</title>
5+
<meta charset="UTF-8">
6+
<link rel="stylesheet" href="main.css">
7+
<link rel="stylesheet" href="candy.css">
8+
<link rel="icon" href="favicon.ico">
9+
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
10+
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>
11+
<link rel="preconnect" href="https://fonts.googleapis.com">
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13+
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
14+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
15+
</head>
16+
<body>
17+
18+
<header class="candy-texture-striped">
19+
<img src="logo.png" width="32" height="32">
20+
<b>raytools</b>
21+
</header>
22+
<main>
23+
<div class="content">
24+
<h1>welcome to raytools</h1>
25+
<p>
26+
This site aggregates various utilities and mods for Rayman 2 (and other CPA engine games).<br>
27+
TODO better description
28+
</p>
29+
</div>
30+
<section>
31+
<h2>essentials</h2>
32+
<div class="card-stack">
33+
<div class="candy-card">
34+
<h2>Ray2Fix</h2>
35+
<p>
36+
Collection of fixes and patches for Rayman 2.<br>
37+
Say goodbye to stutters, instability, and problems with graphics.<br>
38+
Includes patches for windowed mode, widescreen, and controller support.<br>
39+
</p>
40+
<div class="button-row">
41+
<a class="candy-button candy-primary" href="https://github.com/spitfirex86/Ray2Fix/releases/latest">download</a>
42+
<a class="candy-button" href="https://github.com/spitfirex86/Ray2Fix/blob/master/README.md">readme</a>
43+
<a class="candy-button" href="https://github.com/spitfirex86/Ray2Fix">source code</a>
44+
</div>
45+
</div>
46+
<div class="candy-card">
47+
<h2>Twofold</h2>
48+
<p>
49+
DLL mod loader for Rayman 2.<br>
50+
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.
51+
</p>
52+
<div class="button-row">
53+
<a class="candy-button candy-primary" href="https://github.com/spitfirex86/Twofold/releases/latest">download</a>
54+
<a class="candy-button" href="https://github.com/spitfirex86/Twofold">source code</a>
55+
</div>
56+
</div>
57+
<div class="candy-card">
58+
<h2>OpenSpaceToolbox</h2>
59+
<p>
60+
Toolbox and level switcher for Rayman 2, Rayman 3 and Donald Duck: Goin' Quackers.<br>
61+
Change the current map, save and load player position as bookmarks, and more.
62+
</p>
63+
<div class="button-row">
64+
<a class="candy-button candy-primary" href="https://github.com/raytools/OpenSpaceToolbox/releases/latest">download</a>
65+
<a class="candy-button" href="https://github.com/raytools/OpenSpaceToolbox">source code</a>
66+
</div>
67+
</div>
68+
</div>
69+
</section>
70+
<section>
71+
<h2>spitfire's mods</h2>
72+
<p>TODO</p>
73+
</section>
74+
<section>
75+
<div class="footer">
76+
<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>
77+
</div>
78+
</section>
79+
</main>
80+
81+
</body>
1382
</html>

logo.png

1.03 KB
Loading

main.css

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
:root {
2+
box-sizing: border-box;
3+
padding: 0;
4+
line-height: 1.5;
5+
font-family: "Noto Sans", "Roboto", sans-serif;
6+
font-optical-sizing: auto;
7+
color-scheme: light;
8+
}
9+
10+
body {
11+
margin: 0 auto;
12+
display: grid;
13+
grid-template-columns: minmax(0, 1fr);
14+
grid-template-areas: "header" "main";
15+
grid-template-rows: max-content 1fr;
16+
}
17+
18+
@media (min-width: 900px) {
19+
body {
20+
position: fixed;
21+
top: 0;
22+
left: 0;
23+
width: 100vw;
24+
height: 100vh;
25+
grid-template-areas: "header" "main";
26+
grid-template-rows: max-content 1fr;
27+
}
28+
}
29+
30+
header {
31+
grid-area: header;
32+
padding: 1rem;
33+
font-size: 1.25rem;
34+
display: flex;
35+
flex-flow: row wrap;
36+
align-items: center;
37+
gap: 1rem 2rem;
38+
border-bottom: 1px solid var(--candy-color-border1);
39+
box-shadow:
40+
0 1px 4px 0 var(--candy-color-shadow1),
41+
0 2px 8px 0 var(--candy-color-shadow1);
42+
z-index: 1;
43+
}
44+
45+
main {
46+
grid-area: main;
47+
overflow-y: auto;
48+
}
49+
50+
.content, section {
51+
box-sizing: border-box;
52+
padding: 0 1rem;
53+
max-width: 100ch;
54+
margin: 0 auto;
55+
}
56+
57+
section > h2, .content > h2 {
58+
padding-top: 1rem;
59+
border-top: 1px solid var(--candy-color-border3);
60+
}
61+
62+
.candy-card h2 {
63+
display: inline;
64+
}
65+
66+
a.candy-button {
67+
text-decoration: none;
68+
display: inline-block;
69+
cursor: default;
70+
}
71+
72+
.footer {
73+
margin-top: 3rem;
74+
font-size: 0.8rem;
75+
border-top: 1px solid var(--candy-color-border3);
76+
}
77+
78+
.card-deck {
79+
display: flex;
80+
flex-flow: row wrap;
81+
gap: 1rem;
82+
}
83+
84+
.card-deck > .candy-card {
85+
flex: calc(45ch - 2rem);
86+
}
87+
88+
.card-stack {
89+
display: flex;
90+
flex-flow: column;
91+
gap: 1rem;
92+
}
93+
94+
.card-stack > .candy-card {
95+
flex: auto;
96+
}
97+
98+
.button-row {
99+
display: flex;
100+
flex-flow: row wrap;
101+
gap: 0.5rem;
102+
}
103+
104+
.button-row > .candy-button {
105+
flex: none;
106+
}
107+

0 commit comments

Comments
 (0)