Skip to content

Commit b95652a

Browse files
Kade-NKade-N
authored
Website: redesign
1 parent 3336553 commit b95652a

24 files changed

Lines changed: 287 additions & 261 deletions

‎docs/CNAME‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
https://smfx.sporecommunity.com

‎docs/README.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# SMFX website
2+
This is just a simple one-page site, no real configuration, pretty much everything is in index.html.
3+
4+
It uses Jekyll, which is built into GitHub Pages, to process some variables to pull data from the repo automatically.
5+
6+
## Overview of files
7+
- `screenshots` contains the screenshots of the app that appear on the website.
8+
- `style` contains CSS, images, and fonts, which define the visual style of the website.
9+
- `CNAME` sets the website URL. This file should not be modified.
10+
- `index.html` is the webpage.

‎docs/index.html‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
download_url: https://github.com/Spore-Community/SporeModder-FX/releases/latest/download/SporeModderFX.zip
3+
java_url: https://aka.ms/download-jdk/microsoft-jdk-21-windows-x64.msi
4+
smc_discord_url: https://discord.gg/QR8CjQT
5+
---
6+
<!DOCTYPE html>
7+
<html lang="en">
8+
9+
<head>
10+
<title>SporeModder FX</title>
11+
12+
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
13+
<link rel="stylesheet" href="/style/default.css">
14+
<link rel="icon" href="/style/images/smfx.png">
15+
<meta name="viewport" content="width=device-width, initial-scale=1">
16+
17+
<meta name="description" content="The most advanced and modern Spore data modding tool.">
18+
<meta name="keywords" content="Spore, SporeModder, SporeModderFX, SMFX, SporeMaster, DBPF, package, mods">
19+
<meta property="og:title" content="SporeModder FX">
20+
<meta property="og:description" content="The most advanced and modern Spore data modding tool.">
21+
<meta property="og:image" content="/style/images/smfx.png">
22+
</head>
23+
24+
<body>
25+
26+
<header>
27+
<div id="site-header" href="/">
28+
<img id="site-logo" src="/style/images/smfx.png" width="64" height="64" alt="SporeModder FX Logo">
29+
<h1 id="site-title">SporeModder FX</h1>
30+
</div>
31+
</header>
32+
33+
<article id="intro">
34+
35+
<div id="smfx-download">
36+
<p>The most advanced and modern Spore data modding tool.</p>
37+
<p>Open, browse, and edit the contents of Maxis Database Packed Files (DBPFs), also known as .package files.</p>
38+
<p>Enhanced editing support for a wide variety of custom Maxis file formats used in Spore.</p>
39+
<a rel="noopener" href="{{ page.download_url }}"><button>Download SporeModder FX</button></a>
40+
<p>Requires <a rel="noopener" href="{{ page.java_url }}">Java 11 or newer</a></p>
41+
</div>
42+
43+
<div id="useful-links">
44+
<a href="{{ site.github.wiki_url }}"><button>Documentation</button></a>
45+
<a href="{{ site.github.repository_url }}"><button>View on GitHub</button></a>
46+
<a target="_blank" rel="noopener noreferrer" href="{{ page.smc_discord_url }}"><button>Spore Modding Community Discord</button></a>
47+
</div>
48+
49+
</article>
50+
51+
<article>
52+
<h2>User-friendly</h2>
53+
<p>Simple, easy and pretty. A modern user interface for a modern tool.</p>
54+
<img src="/screenshots/ui-ribbon.png" class="screenshot" alt="Screenshot of SMFX's ribbon UI">
55+
56+
<h2>Easy coding</h2>
57+
<p>A new format that makes coding .prop files easier than ever. Includes error highlighting, so you can instantly detect what you are doing wrong. And autocomplete, to make coding a bit faster and more convienient.</p>
58+
<img src="/screenshots/text-errors.png" class="screenshot" alt="Screenshot of SMFX's error highlighting">
59+
<img src="/screenshots/text-autocomplete.png" class="screenshot" alt="Screenshot of SMFX's autocomplete">
60+
61+
<h2>User Interface Editor</h2>
62+
<img src="/screenshots/ui-editor.png" class="screenshot" alt="Screenshot of SMFX's UI editor">
63+
64+
<h2>Texture Viewer</h2>
65+
<img src="/screenshots/texture-viewer.png" class="screenshot" alt="Screenshot of SMFX's texture viewer">
66+
67+
<h2>Model Viewer</h2>
68+
<img src="/screenshots/model-viewer.png" class="screenshot" alt="Screenshot of SMFX's model viewer">
69+
</article>
70+
71+
<footer>
72+
<p>SporeModder FX is maintained by various contributors from the Spore community. Contact via <a target="_blank" rel="noopener noreferrer" href="{{ page.smc_discord_url }}">Discord</a> or <a href="mailto:smfx@sporecommunity.com">email</a>. Source code on <a target="_blank" rel="noopener noreferrer" href="{{ site.github.repository_url }}">GitHub</a>. Licensed under the <a href="{{ site.github.license.url }}">{{ site.github.license.name }}</a>.</p>
73+
<p><strong>Not associated with or endorsed by Electronic Arts or Maxis.</strong> SporeModder FX is unofficial and not supported by EA or Maxis.</p>
74+
</footer>
75+
76+
</body>
77+
78+
</html>

‎docs/screenshots/model-viewer.png‎

48.5 KB
Loading

‎docs/screenshots/text-autocomplete.png‎

22.6 KB
Loading

‎docs/screenshots/text-errors.png‎

31.4 KB
Loading

‎docs/screenshots/texture-viewer.png‎

170 KB
Loading

‎docs/screenshots/ui-editor.png‎

119 KB
Loading

‎docs/screenshots/ui-ribbon.png‎

25.6 KB
Loading

‎docs/style/default.css‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
@import "spore.css";
2+
3+
:root {
4+
--smfx: #d4dbdc;
5+
--smfx-gradient: linear-gradient(#dce5e4, #cbd0d3);
6+
}
7+
8+
html {
9+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
10+
11+
background: var(--spore-glyphic-bg);
12+
color: var(--spore-text-color);
13+
}
14+
15+
body {
16+
max-width: 1200px;
17+
margin-left: auto;
18+
margin-right: auto;
19+
}
20+
21+
#site-header {
22+
display: flex;
23+
align-items: center;
24+
justify-content: center;
25+
26+
background: var(--smfx-gradient);
27+
background-clip: text;
28+
color: transparent;
29+
30+
text-decoration: none;
31+
}
32+
33+
#site-logo {
34+
width: 64px;
35+
height: 64px;
36+
margin-right: 16px;
37+
}
38+
39+
article {
40+
background: var(--spore-flat-bg);
41+
padding: 32px;
42+
margin-bottom: 32px;
43+
}
44+
45+
footer {
46+
font-size: 12px;
47+
}
48+
49+
#intro {
50+
display: flex;
51+
gap: 64px;
52+
}
53+
54+
#intro #useful-links button {
55+
width: 100%;
56+
margin-bottom: 16px;
57+
}
58+
59+
.screenshot {
60+
width: 100%;
61+
}
62+
63+
h1, h2, h3, h4, h5, h6 {
64+
font-family: var(--spore-font);
65+
}
66+
67+
a {
68+
color: var(--spore-light-space);
69+
}
70+
71+
hr {
72+
border: 2px solid var(--spore-mid-space);
73+
margin: 32px 0;
74+
}
75+
76+
td, th {
77+
border-top: 1px solid var(--spore-mid-space);
78+
border-bottom: 1px solid var(--spore-mid-space);
79+
padding: 4px;
80+
}
81+
82+
input {
83+
background: var(--spore-cool);
84+
font-size: 16px;
85+
padding: 5px 13px;
86+
border: 3px var(--spore-neutral) solid;
87+
border-radius: 32px;
88+
outline: none;
89+
}
90+
91+
input:focus {
92+
border-color: var(--spore-light-space);
93+
}
94+
95+
input:invalid:focus {
96+
border-color: #A42433;
97+
}
98+
99+
button {
100+
background: var(--spore-mid-space);
101+
color: var(--spore-white);
102+
font-family: var(--spore-font);
103+
font-size: 18px;
104+
padding: 5px 13px;
105+
border: 3px transparent solid;
106+
border-radius: 32px;
107+
transition: 0.1s;
108+
}
109+
110+
button:hover {
111+
border-color: var(--spore-light-space);
112+
}
113+
114+
button:active {
115+
background: var(--spore-deep-space-gradient);
116+
}
117+
118+
button:disabled {
119+
color: var(--spore-neutral);
120+
}
121+
122+
pre {
123+
white-space: pre-wrap;
124+
}

0 commit comments

Comments
 (0)