From 756a5a9a8a9e0209e4d4452ae990fb751e03d72a Mon Sep 17 00:00:00 2001 From: Salt <rehashedsalt@cock.li> Date: Tue, 9 Feb 2021 05:24:58 -0600 Subject: [PATCH] Work on more revamping of the Minecraft section --- minecraft/index.php | 20 ++++++---------- minecraft/setup/index.php | 48 +++++++++++++++++++------------------ minecraft/styles/styles.css | 30 +++++++++++++++++++++++ styles/styles.css | 2 ++ 4 files changed, 64 insertions(+), 36 deletions(-) diff --git a/minecraft/index.php b/minecraft/index.php index c344bda..b9a5d8b 100644 --- a/minecraft/index.php +++ b/minecraft/index.php @@ -5,22 +5,16 @@ <link href="/styles/buttons.css" type="text/css" rel="stylesheet" /> <link href="/minecraft/styles/styles.css" type="text/css" rel="stylesheet" /> <link rel="shortcut icon" href="/favicon.ico" /> - <title>9iron</title> + <title>9iron - Modded Minecraft</title> </head> <body> <?php include $_SERVER['DOCUMENT_ROOT'].'/src/common-header.php';?> <div class="content"> <div class="section"> - <h1>Modded Minecraft</h1> - <p>It's been a go-to of ours for a while. Ongoing and historical modpacks are listed here for your convenience and participation.</p> - <p>At-a-glance information is provided here for the various packs we play.</p> - <div class="iconbuttoncontainer"> - <a href="/minecraft/setup" class="iconbutton"> - <i class="fa fa-play"></i> - <h1>Setup</h1> - <p>Set up an entire modded Minecraft environment</p> - </a> - </div> + <a href="/minecraft/setup" class="startbutton"> + <i class="fa fa-play"></i> + <p>Confused? Click here to get started</p> + </a> </div> <?php # Define a pack card generator function @@ -72,14 +66,14 @@ if (!empty($packs)) { # We have a valid current pack, remove it from the list and print it upfront $currentpack = readlink("packs/current"); $packs = array_diff($packs, ["$currentpack", "current"]); - echo '<h1>Current Modpack</h1>'; + echo '<div class="currentcontainer"><h1>Current Modpack</h1>'; echo_pack($currentpack); # If there's a server IP name along with that, print that out too if (file_exists("packs/currentip")) { $ip = file_get_contents("packs/currentip"); echo "<p><code class=\"bigcode\">$ip</code></p>"; } - echo '</div><div class="section">'; + echo '</div></div><div class="section">'; } # Sort the list of remaining packs sort($packs); diff --git a/minecraft/setup/index.php b/minecraft/setup/index.php index 1073a32..9aab4b9 100644 --- a/minecraft/setup/index.php +++ b/minecraft/setup/index.php @@ -2,37 +2,35 @@ <html> <head> <?php include $_SERVER['DOCUMENT_ROOT'].'/src/common-meta.php';?> + <link href="/minecraft/styles/styles.css" type="text/css" rel="stylesheet" /> <title>9iron - Modded Minecraft Setup</title> </head> <body> <?php include $_SERVER['DOCUMENT_ROOT'].'/src/common-header.php';?> <div class="content"> <div class="section"> + <a href="/minecraft" class="startbutton"> + <p>Return to modpacks</p> + </a> <h1>Setting Up Modded Minecraft</h1> - <p>This guide will set you up with the following:</p> - <ul> - <li>Java, because that's <em>still</em> a pain in the dick to set up</li> - <li>A new Minecraft game launcher to help organize modpacks</li> - <li>Whatever modpack we're playing</li> - </ul> </div> - <div class="section" id="java"> - <h1>1. Installing Java</h1> + <div class="subcontainer" id="java"> + <h2>1. Installing Java</h2> + <p>Minecraft depends on Java. It's important that you have the latest 64-bit edition of Java installed.</p> <ol> - <li>Download <a href="https://sdlc-esd.oracle.com/ESD6/JSCDL/jdk/8u251-b08/3d5a2bb8f8d4428bbe94aed7ec7ae784/jre-8u251-windows-x64.exe?GroupName=JSC&FilePath=/ESD6/JSCDL/jdk/8u251-b08/3d5a2bb8f8d4428bbe94aed7ec7ae784/jre-8u251-windows-x64.exe&BHost=javadl.sun.com&File=jre-8u251-windows-x64.exe&AuthParam=1593609737_aee69d42e03369a5aed61477a858b110&ext=.exe">the 64-bit edition of Java 8</a></li> - <li>Run it</li> - <li>You're done</li> + <li>Go to <a href="https://www.java.com/en/download/manual.jsp">Java Downloads</a></li> + <li>Download and run the "Windows Offline (64-bit)" option</li> </ol> </div> - <div class="section" id="multimc"> - <h1>2. Installing MultiMC</h1> + <div class="subcontainer" id="multimc"> + <h2>2. Installing MultiMC</h2> <p>MultiMC is the launcher that we use to organize our modpacks. It has a number of features to make pack installation easier.</p> <ol> <li>Download <a href="https://multimc.org/#Download">MultiMC</a></li> - <li>Extract the zip file somewhere, like your desktop or Documents</li> + <li>Extract the zip file somewhere, like your desktop or Documents folder</li> <li>Run <code>multimc.exe</code></li> </ol> - <p>MultiMC will then run you through basic setup. You can accept the defaults, but change the following:</p> + <p>MultiMC will then run you through basic setup. You can accept the defaults, but will probably want to change the following:</p> <ul> <li>On the page where it asks you to set up Java, set these values:</li> <ul> @@ -42,28 +40,32 @@ </ul> <p>After that, it'll drop you to the main screen and you can progress to the next step.</p> </div> - <div class="section" id="pack"> - <h1>3. Installing a Modpack</h1> - <p>Packs on the server, as of the time of writing this document, will from now on be provided in a format that's much easier to use with MultiMC. If, for whatever reason, you have to install one that <em>isn't</em>, flag down a moderator and have them show you. It's honestly a pretty involved process.</p> + <div class="subcontainer" id="pack"> + <h2>3. Installing a Modpack</h2> + <p>All modpacks here are installable through MultiMC.</p> <ol> + <li>Download the modpack you want to play</li> <li>Open MultiMC</li> <li>Hit the "Add Instance" button in the upper-left</li> <li>Pick the option on the left called "Import from Zip"</li> - <li>Copy the pack download link from the previous page and stick it in the URL</li> + <li>Browse for the zip you just downloaded</li> <li>Click OK</li> </ol> <p>This will set you up with a nice, shiny new instance with all the mods ready to go. Double-click it to launch it.</p> <p>If MultiMC prompts for it, be sure to set up your Minecraft account.</p> </div> - <div class="section" id="joining"> - <h1>4. Joining a Server</h1> - <p>This one's pretty easy, thankfully</p> + <div class="subcontainer" id="joining"> + <h2>4. Joining the Server</h2> + <p>Now the last thing we need to do is connect you to the server.</p> <ol> + <li>Launch the game by double-clicking the modpack icon</li> <li>Copy the server URL (something like <code>modpack.mc.9iron.club</code>)</li> - <li>Open the game, go to Multiplayer, and click "Add Server"</li> + <li>In the game, go to "Multiplayer", and click "Add Server"</li> <li>Stick whatever name you want in the name field and paste the server URL in the "IP Address" field</li> <li>Double-click it to join</li> </ol> + <p>You're looking for the huge, can't-miss-it serif font with the gray background:</p> + <code class="bigcode">serverip.blah.blah</code> </div> </div> <?php include $_SERVER['DOCUMENT_ROOT'].'/src/common-footer.php';?> diff --git a/minecraft/styles/styles.css b/minecraft/styles/styles.css index 1082294..3e65ced 100644 --- a/minecraft/styles/styles.css +++ b/minecraft/styles/styles.css @@ -5,13 +5,43 @@ * Distributed under terms of the MIT license. */ +a.startbutton { + background: var(--greenlink); + border-radius: 8px; + box-shadow: 5px 5px var(--shadow); + color: var(--background); + display: block; + font-size: 140%; + padding: 1em; +} +a.startbutton:hover { + background: var(--greenlink-hover); +} +a.startbutton i { + float: right; + vertical-align: middle; +} +a.startbutton p { + display: inline-block; + font-weight: bold; + margin: 0; + vertical-align: middle; +} code.bigcode { + background: var(--background); + border-radius: 8px; display: block; font-size: 400%; text-align: center; margin: auto; padding: 0.5em; } +div.currentcontainer { + border: 4px solid var(--line); + border-radius: 8px; + margin: 1em 0; + padding: 1em; +} div.packcontainer { display: grid; grid-gap: 1em; diff --git a/styles/styles.css b/styles/styles.css index 02d800e..1410dc6 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -11,6 +11,8 @@ --background-bright: #fdfcfa; --background: #ecebe9; --line: #d6d5d3; + --greenlink: #327117; + --greenlink-hover: #47b625; --link: #286a9d; --link-hover: #3ea5f3; --shadow: 8px -5px #d6d5d3;