Merge pull request 'Merge dev into main' (#8) from dev into main

Reviewed-on: https://gitpot.dev/ExploreCraft/website/pulls/8

src/app.scss

@@ -18,6 +18,7 @@ h1, h2, h3, h4, h5, h6, body {
   --primary-hover: #388e3c;
   --primary-focus: rgba(67, 160, 71, 0.125);
   --primary-inverse: #FFF;
+  background-color: #FAF9F6;
 }
 
 /* Green Dark scheme (Auto) */
@@ -30,7 +31,7 @@ h1, h2, h3, h4, h5, h6, body {
     --primary-inverse: #FFF;
   }
 }
-
+ 
 /* Green Dark scheme (Forced) */
 /* Enabled if forced with data-theme="dark" */
 [data-theme="dark"] {

src/routes/Header.svelte

@@ -15,6 +15,9 @@
 			<li>
 				<a href="/" class="contrast {$page.url.pathname === '/' ? 'current-page' : undefined}">Home</a>
 			</li>
+      <li>
+				<a href="/modlist" class="contrast {$page.url.pathname === '/modlist' ? 'current-page' : undefined}">Modlist</a>
+			</li>
 			<li>
 				<a href="/downloads" class="contrast {$page.url.pathname === '/downloads' ? 'current-page' : undefined}">Download</a>
 			</li>
@@ -29,6 +32,7 @@
 </div>
 <hr class="separator" />
 
+
 <style>
 .header {
   display: flex;
@@ -106,19 +110,45 @@
   font-weight: 600;
 }
 
+.navigation-bar a.current-page::after {
+  content: "";
+  display: block;
+  width: 20px;
+  height: 4px;
+  background-color: #000;
+  border-radius: 2px;
+  margin-top: 4px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 [data-theme="dark"] .navigation-bar a.current-page {
   font-weight: 500;
 }
 
-.navigation-bar a:hover {
+[data-theme="dark"] .navigation-bar a.current-page::after {
-  font-style: italic;
+  content: "";
-  font-weight: 300;
+  display: block;
+  width: 20px;
+  height: 4px;
+  background-color: #fff;
+  border-radius: 2px;
+  margin-top: 4px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-[data-theme="dark"] .navigation-bar a:hover {
+
+
+/* .navigation-bar a:hover {
+  font-style: italic;
+  font-weight: 300; 
+} */
+
+/* [data-theme="dark"] .navigation-bar a:hover {
   font-style: italic;
   font-weight: 200;
-}
+} */
 
 .link {
   text-decoration: none;

src/routes/downloads/+page.svelte

@@ -13,7 +13,7 @@
 </div>
 <MsgBox
   type="warning"
-  message="<br>Currently WIP. You'll find downloads on this page,<br>but they may not work properly."
+  message="<br>Currently WIP. You'll find downloads on this page,<br>though some links aren't currently ready."
   prefix="ℹ️ Note ℹ️"
 />
 
@@ -22,8 +22,9 @@
     <div>
       <h4>ExploreCraft: Marbled</h4>
       <p>
-        The main way to play ExploreCraft. This is also the most stable version,
+        The main way to play ExploreCraft. If you don't know what you're doing,
-        so you're better off playing with this rather than the other ones.
+        download this version. It is the most stable.
+        For more versions, open the "Unstable Releases" section down below.
       </p>
       <a role="button" href="https://gitpot.dev/attachments/7a690df1-d78f-41fd-a9f7-610eacb369a9">Download</a>
       <a href="#instructions" role="button" class="outline">Instructions</a>
@@ -55,7 +56,7 @@
       <p>
         ExploreCraft's Beta instance. Here be dragons! This is the in-dev version
         of ExploreCraft which may have game-breaking bugs, unfinished features and
-        world corruptions.
+        world corruptions at the cost of new features.
       </p>
       <a href="https://gitpot.dev/ExploreCraft/modpack" role="button">Download</a>
       <a href="#instructions" role="button" class="outline">Instructions</a>
@@ -79,7 +80,7 @@
   <li>
     Create a new instance by using Ctrl-N (Or CMD-N on MacOS).<br>
     Open the "Import from ZIP" tab, and choose the file you just downloaded.<br>
-    You can also give it a catchy name and a snazzy icon while you're at it.
+    You can also give it a catchy name and a snazzy icon while you're at it.<br>
     <img class="guide" alt="instance creation" src="assets/images/guide/instance-creation.png">
   </li>
   <li>
@@ -91,13 +92,16 @@
     This tool is also responsible for keeping the modpack up to date.
     <ul>
       <li class="indented">
-        A window will appear asking you which optional mods you'd like to download. As it implies, none of them are necessary but recommended.
+        A window will appear asking you which optional mods you'd like to download. As it implies, none of them are necessary but recommended.<br>
+        <img class="guide" src="assets/images/guide/optional-mods.png" alt="Manual Download error in packwiz">
       </li>
       <li class="indented">
-        Mods downloading:
+        Mods downloading:<br>
+        <img class="guide" src="assets/images/guide/loading.png" alt="Manual Download error in packwiz">
       </li>
       <li class="indented">
-        If a screen similar to this one appears, don't fret!
+        If a screen similar to this one appears, don't fret!<br>
+        <img class="guide" src="assets/images/guide/manual-download.png" alt="Manual Download error in packwiz"><br>
         Just follow the guide
         <a href="https://gitpot.dev/ExploreCraft/modpack/src/branch/marbled/manual-download.md" rel="noopener noreferrer" target="_blank">here</a>
         to continue:

src/routes/gallery/+page.svelte

@@ -5,40 +5,40 @@
 
 <div class="text-column">
 	<h1>Gallery</h1>
-	<p>Here you'll find the sweet screenshots 😉.</p>
+	<p>Have a sneak-peek into the modpack with some screenshots!</p>
 </div>
 
 <div class="grid">
-	<div><img class="gallery-image" src="assets/images/gallery/pic1.png" alt="1"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic1.png" alt="pic1"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic2.png" alt="2"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic2.png" alt="pic2"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic3.png" alt="3"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic3.png" alt="pic3"></div>
 </div>
 <div class="grid">
-	<div><img class="gallery-image" src="assets/images/gallery/pic9.png" alt="1"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic9.png" alt="pic4"></div>
 </div>
 <div class="grid">
-	<div><img class="gallery-image" src="assets/images/gallery/pic4.png" alt="1"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic4.png" alt="pic5"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic5.png" alt="2"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic5.png" alt="pic6"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic6.png" alt="3"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic6.png" alt="pic7"></div>
 </div>
 <div class="grid">
-	<div><img class="gallery-image" src="assets/images/gallery/pic7.png" alt="1"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic7.png" alt="pic8"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic8.png" alt="2"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic8.png" alt="pic9"></div>
 </div>
 <div class="grid">
-	<div><img class="gallery-image" src="assets/images/gallery/pic10.png" alt="1"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic10.png" alt="pic10"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic11.png" alt="2"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic11.png" alt="pic11"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic12.png" alt="3"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic12.png" alt="pic12"></div>
 </div>
 <div class="grid">
-	<div><img class="gallery-image" src="assets/images/gallery/pic13.png" alt="1"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic13.png" alt="pic13"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic14.png" alt="2"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic14.png" alt="pic14"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic15.png" alt="3"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic15.png" alt="pic15"></div>
 </div>
 <div class="grid">
-	<div><img class="gallery-image" src="assets/images/gallery/pic16.png" alt="1"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic16.png" alt="pic16"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic17.png" alt="2"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic17.png" alt="pic17"></div>
-	<div><img class="gallery-image" src="assets/images/gallery/pic18.png" alt="3"></div>
+	<div><img class="gallery-image" src="assets/images/gallery/pic18.png" alt="pic18"></div>
 </div>