Major improvements to archive as well as server list

This commit is contained in:
LeoTurlock 2024-05-03 19:44:37 +02:00
parent 6e817b4b5b
commit a87faad887
12 changed files with 590 additions and 74 deletions

View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -8,6 +9,7 @@
<link rel="stylesheet" href="./nav_bar.css"> <link rel="stylesheet" href="./nav_bar.css">
<link rel="stylesheet" href="./archive_stylesheet.css"> <link rel="stylesheet" href="./archive_stylesheet.css">
</head> </head>
<body> <body>
<div id="nav_bar"> <div id="nav_bar">
@ -16,13 +18,14 @@
<img id="logo" src="./assets/images/EaglerArchive.png" alt="EaglerArchive"> <img id="logo" src="./assets/images/EaglerArchive.png" alt="EaglerArchive">
<p>EaglerArchive</p> <p>EaglerArchive</p>
</a> </a>
<a class="link-nav_bar" href="./index.html"> <a class="link-nav_bar" href="./index.html">
<img class="icon_link" src="./assets/icons/SF Symbols/house_fill.png" alt="home_icon"> <img class="icon_link" src="./assets/icons/SF Symbols/house_fill.png" alt="home_icon">
<p>Home</p> <p>Home</p>
</a> </a>
<a class="link-nav_bar" href="./archive.html"> <a class="link-nav_bar" href="./archive.html">
<img class="icon_link" src="./assets/icons/SF Symbols/square_stack_3d_down_right_fill.png" alt="archive_icon"> <img class="icon_link" src="./assets/icons/SF Symbols/square_stack_3d_down_right_fill.png"
alt="archive_icon">
<p>Archive</p> <p>Archive</p>
</a> </a>
<a class="link-nav_bar" href="./servers.html"> <a class="link-nav_bar" href="./servers.html">
@ -40,10 +43,10 @@
</a> </a>
</div> </div>
<a class="link-nav_bar blurple" id="link_discord" href="https://discord.gg/xi" target="_blank"> <a class="link-nav_bar blurple" id="link_discord" href="https://discord.gg/xi" target="_blank">
<img class="icon_link" src="./assets/images/Discord-icon-modified.png" alt=""> <img class="icon_link" src="./assets/images/Discord-icon-modified.png" alt="discord_icon">
<p>Discord</p> <p>Discord</p>
</a> </a>
</div> </div>
<div id="view"> <div id="view">
<div class="page-title"> <div class="page-title">
@ -51,64 +54,28 @@
<h1>Archive</h1> <h1>Archive</h1>
<hr> <hr>
</div> </div>
<div class="page-subtitle">
<div class="accordion"> <p>Clients</p>
<div class="accordion-item"> </div>
<input class="accordion-checkbox" type="checkbox" name="accordion" id="item1"> <div class="box-container">
<label for="item1"> <a class="box" href="./clients/1.3/1_3Clients.html">
<div class="accordion-title"> <div class="box-content">
<img class="chevron" src="./assets/icons/SF Symbols/arrowtriangle_right_circle_fill.png" alt="chevron_down"> <p>Eaglercraft 1.3 Clients</p>
<img class="accordion-icon" src="./assets/images/ResentIcon.png" alt="">
<p>Resent</p>
</div>
</label>
<div class="accordion-content">
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="./assets/images/ResentIcon.png" alt="">
<p>Resent 3.3.2 - patch 1 US </p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent/Resent_3.3.2_patch_1_1.8_US.html" target="_blank">Play</a>
<a href="./clients/1.8/Resent/Resent_3.3.2_patch_1_1.8_US.html" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="./assets/images/ResentIcon.png" alt="">
<p>Resent 3.4 - patch 1 US</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent/Resent_3.4_patch_1_1.8_US.html" target="_blank">Play</a>
<a href="./clients/1.8/Resent/Resent_3.4_patch_1_1.8_US.html" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="./assets/images/ResentIcon.png" alt="">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
</div> </div>
</div>
<div class="accordion-item"> </a>
<input type="checkbox" name="accordion" id="item2"> <a class="box" href="./clients/1.5/1_5Clients.html">
<label for="item2">Accordion Item 2</label> <div class="box-content">
<div class="accordion-content"> <p>Eaglercraft 1.5 Clients</p>
<p>Content for item 2.</p> </div>
</a>
<a class="box" href="./clients/1.8/1_8Clients.html">
<div class="box-content">
<p>EaglercraftX 1.8 Clients</p>
</div> </div>
</div> </a>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 26 KiB

View File

@ -71,7 +71,7 @@ class ServerEmbed {
self.isSpriteSheetLoaded = true; self.isSpriteSheetLoaded = true;
setInterval(() => self.redraw(), 50); setInterval(() => self.redraw(), 50);
}); });
this.spriteSheet.src = "icons.png"; this.spriteSheet.src = "./assets/scripts/icons.png";
this.socket = null; this.socket = null;
this.connected = false; this.connected = false;
this.dirty = false; this.dirty = false;

BIN
assets/scripts/icons.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.8 KiB

View File

@ -0,0 +1,367 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EaglerArchive</title>
<link rel="stylesheet" href="../../stylesheet.css">
<link rel="stylesheet" href="../../nav_bar.css">
<link rel="stylesheet" href="../archive_stylesheet.css">
</head>
<body>
<div id="nav_bar">
<div id="EaglerArchive">
<a id="link_EaglerArchive" href="../../index.html">
<img id="logo" src="../../assets/images/EaglerArchive.png" alt="EaglerArchive">
<p>EaglerArchive</p>
</a>
<a class="link-nav_bar" href="../../index.html">
<img class="icon_link" src="../../assets/icons/SF Symbols/house_fill.png" alt="home_icon">
<p>Home</p>
</a>
<a class="link-nav_bar" href="../../archive.html">
<img class="icon_link" src="../../assets/icons/SF Symbols/square_stack_3d_down_right_fill.png"
alt="archive_icon">
<p>Archive</p>
</a>
<a class="link-nav_bar" href="../../servers.html">
<img alt="server_icon" src="../../assets/icons/SF Symbols/hexagon.png" class="icon_link">
<p>Servers</p>
</a>
<a class="link-nav_bar" href="../../info.html">
<img class="icon_link" src="../../assets/icons/SF Symbols/exclamationmark.png" alt="info_icon">
<p>Info</p>
</a>
<a class="link-nav_bar" href="../../about.html">
<img class="icon_link" src="../../assets/icons/SF Symbols/question.png" alt="about_icon">
<p>About</p>
</a>
</div>
<a class="link-nav_bar blurple" id="link_discord" href="https://discord.gg/xi" target="_blank">
<img class="icon_link" src="../../assets/images/Discord-icon-modified.png" alt="discord_icon">
<p>Discord</p>
</a>
</div>
<div id="view">
<div class="page-title">
<hr>
<h1>Archive</h1>
<hr>
</div>
<div class="page-subtitle">
<p>1.8 Clients</p>
</div>
<div class="accordion">
<div class="accordion-item">
<input class="accordion-checkbox" type="checkbox" name="accordion" id="item1">
<label for="item1">
<div class="accordion-title">
<img class="chevron" src="../../assets/icons/SF Symbols/arrowtriangle_right_circle_fill.png"
alt="chevron_down">
<img class="accordion-icon" src="../../assets/images/eaglercraft.png" alt="Resent_icon">
<p>Eagtek</p>
</div>
</label>
<div class="accordion-content" id="eagler_content">
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/eaglercraft.png" alt="Resent_icon">
<p>EaglercraftX 1.8.8</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent/Resent_3.3.2_patch_1_1.8_US.html" target="_blank">Play</a>
<a href="./clients/1.8/Resent/Resent_3.3.2_patch_1_1.8_US.html" download>Download</a>
</div>
</div>
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/eaglercraft.png" alt="Resent_icon">
<p>Resent 3.3.2 - patch 1 - US </p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent/Resent_3.3.2_patch_1_1.8_US.html" target="_blank">Play</a>
<a href="./clients/1.8/Resent/Resent_3.3.2_patch_1_1.8_US.html" download>Download</a>
</div>
</div>
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/eaglercraft.png" alt="Resent_icon">
<p>Resent 3.3.2 - patch 1 - US </p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent/Resent_3.3.2_patch_1_1.8_US.html" target="_blank">Play</a>
<a href="./clients/1.8/Resent/Resent_3.3.2_patch_1_1.8_US.html" download>Download</a>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<input class="accordion-checkbox" type="checkbox" name="accordion" id="item2">
<label for="item2">
<div class="accordion-title">
<img class="chevron" src="../../assets/icons/SF Symbols/arrowtriangle_right_circle_fill.png"
alt="chevron_down">
<img class="accordion-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
</label>
<div class="accordion-content" id="resent_content">
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent 3.3.2 - patch 1 - US </p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent/Resent_3.3.2_patch_1_1.8_US.html" target="_blank">Play</a>
<a href="./clients/1.8/Resent/Resent_3.3.2_patch_1_1.8_US.html" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent 3.4 - patch 1 - US</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent/Resent_3.4_patch_1_1.8_US.html" target="_blank">Play</a>
<a href="./clients/1.8/Resent/Resent_3.4_patch_1_1.8_US.html" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent 3.6 - patch 1 - US</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent/Resent_3.6_patch_1_1.8_US.html" target="_blank">Play</a>
<a href="./clients/1.8/Resent/Resent_3.6_patch_1_1.8_US.html" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent 3.7 - patch 1 - International</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent/Resent_3.7_International.html" target="_blank">Play</a>
<a href="./clients/1.8/Resent/Resent_3.7_International.html" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent 3.8 - patch 1 - International</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent/Resent_3.8_Patch-1_Offline_International.html" target="_blank">Play</a>
<a href="./clients/1.8/Resent/Resent_3.8_Patch-1_Offline_International.html" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent 4.0 - patch - </p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent/Resent-4.0-Patch-0-English.html" target="_blank">Play</a>
<a href="./clients/1.8/Resent/Resent-4.0-Patch-0-English.html" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="client-item">
<div class="client-item-title">
<img class="client-icon" src="../../assets/images/ResentIcon.png" alt="Resent_icon">
<p>Resent</p>
</div>
<div class="client-item-buttons">
<a href="./clients/1.8/Resent" target="_blank">Play</a>
<a href="./clients/1.8/Resent" download>Download</a>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<input type="checkbox" name="accordion" id="item2">
<label for="item2">Accordion Item 2</label>
<div class="accordion-content">
<p>Content for item 2.</p>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -17,6 +17,7 @@
.accordion-icon { .accordion-icon {
width: 50px; width: 50px;
margin-right: 10px; margin-right: 10px;
border-radius: 50%;
} }
.accordion-item { .accordion-item {
@ -40,11 +41,10 @@
overflow: hidden; overflow: hidden;
background-color: #555; background-color: #555;
border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;
transition: max-height 0.1s ease-out;
} }
.accordion-item input:checked ~ .accordion-content { .accordion-item input:checked ~ .accordion-content {
max-height: calc(71px * 18); /* You can adjust this value depending on your content */ max-height: 100%; /* You can adjust this value depending on your content */
} }

View File

@ -96,7 +96,11 @@
</div> </div>
</a> </a>
<div class="box"></div> <div class="box">
<div class="box-content">
<div class="folder invert-icon"></div>
</div>
</div>
</div> </div>

View File

@ -36,9 +36,12 @@
} }
#nav_bar { #nav_bar {
z-index: 1000;
display: flex; display: flex;
flex-direction:row; flex-direction:row;
justify-content: space-between; justify-content: space-between;
position: fixed;
width: 100%; width: 100%;
background-color: #333; background-color: #333;
color: white; color: white;
@ -46,7 +49,7 @@
padding-left: var(--side_distance); padding-left: var(--side_distance);
padding-right: calc(var(--side_distance) - 10px); padding-right: calc(var(--side_distance) - 10px);
box-shadow: 0px 5px 0px 0px rgb(0, 0, 0, 0.2); box-shadow: 0px 7.5px 7.5px 0px rgba(0, 0, 0, 0.5);
} }
.icon_link { .icon_link {

View File

@ -4,8 +4,134 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>Document</title>
<link rel="stylesheet" href="./stylesheet.css">
<link rel="stylesheet" href="./nav_bar.css">
<link rel="stylesheet" href="./servers_stylesheet.css">
<script type="text/javascript">
window.addEventListener("load", () => {
go();
});
async function go() {
document.getElementsByClassName("server-embed")[0].innerHTML = "";
await new ServerEmbed(document.getElementById("vanilla-embed")).ping("wss://vanillacraftsmp.us.to"),
await new ServerEmbed(document.getElementById("zentic-embed")).ping("wss://zentic.cc")
await new ServerEmbed(document.getElementById("serverId")).ping("")
await new ServerEmbed(document.getElementById("serverId")).ping("")
await new ServerEmbed(document.getElementById("serverId")).ping("")
}
</script>
</head> </head>
<body> <body>
<div id="nav_bar">
<div id="EaglerArchive">
<a id="link_EaglerArchive" href="./index.html">
<img id="logo" src="./assets/images/EaglerArchive.png" alt="EaglerArchive">
<p>EaglerArchive</p>
</a>
<a class="link-nav_bar" href="./index.html">
<img class="icon_link" src="./assets/icons/SF Symbols/house_fill.png" alt="home_icon">
<p>Home</p>
</a>
<a class="link-nav_bar" href="./archive.html">
<img class="icon_link" src="./assets/icons/SF Symbols/square_stack_3d_down_right_fill.png"
alt="archive_icon">
<p>Archive</p>
</a>
<a class="link-nav_bar" href="./servers.html">
<img alt="server_icon" src="./assets/icons/SF Symbols/hexagon.png" class="icon_link">
<p>Servers</p>
</a>
<a class="link-nav_bar" href="./info.html">
<img class="icon_link" src="./assets/icons/SF Symbols/exclamationmark.png" alt="info_icon">
<p>Info</p>
</a>
<a class="link-nav_bar" href="./about.html">
<img class="icon_link" src="./assets/icons/SF Symbols/question.png" alt="about_icon">
<p>About</p>
</a>
</div>
<a class="link-nav_bar blurple" id="link_discord" href="https://discord.gg/xi" target="_blank">
<img class="icon_link" src="./assets/images/Discord-icon-modified.png" alt="discord_icon">
<p>Discord</p>
</a>
</div>
<div id="view">
<div class="page-title">
<hr>
<h1>Servers</h1>
<hr>
</div>
<div class="page-subtitle">
<p>EaglercraftX 1.8 Server List</p>
</div>
<div class="server-embed-container">
<p class="server-name">VanillaCraftSMP</p>
<div id="vanilla-embed" class="server-embed"></div>
<script type="text/javascript" src="./assets/scripts/embed.js"></script>
<div class="server-info">
<div>
<p>Info:</p>
</div>
<div>
<p>IPs:</p>
</div>
</div>
</div>
<div class="server-embed-container">
<p class="server-name">Zentic</p>
<div id="zentic-embed" class="server-embed"></div>
<script type="text/javascript" src="./assets/scripts/embed.js"></script>
<div class="server-info">
<div>
<h3>Info:</h3>
<ul>
<li>
<p>Bedwars</p>
</li>
<li>
<p>Practice</p>
</li>
</ul>
</div>
<div>
<h3>IPs:</h3>
</div>
</div>
</div>
<div class="server-embed-container">
<p class="server-name">Server Name</p>
<!----- change this id -------------------------------------- -->
<div id="serverid" class="server-embed"></div>
<script type="text/javascript" src="./assets/scripts/embed.js"></script>
<div class="server-info">
<div>
<p>Info:</p>
</div>
<div>
<p>IPs:</p>
</div>
</div>
</div>
</div>
</body> </body>
</html> </html>

30
servers_stylesheet.css Normal file
View File

@ -0,0 +1,30 @@
.server-embed-container {
margin-bottom: 20px;
padding: 10px;
border-radius: 20px;
background-color: #333;
}
.server-name {
font-size: 20px;
font-family: 'SF-Bold';
}
.server-embed {
width: 900px;
height: 140px;
background-color: black;
margin: 10px 0;
}
.server-info div {
margin-bottom: 10px;
}
.server-info div:first-child {
font-family: 'SF-Bold';
}
.server-info li {
margin-left: 25px;
}

View File

@ -38,13 +38,7 @@ body {
width: 100%;; width: 100%;;
padding-left: var(--side_distance); padding-left: var(--side_distance);
padding-right: var(--side_distance); padding-right: var(--side_distance);
} padding-bottom: 30px;
#view .page-title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
} }
#view hr { #view hr {
@ -60,12 +54,35 @@ body {
text-align: center; text-align: center;
} }
.page-title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding-top: 65px;
}
.page-subtitle {
display: flex;
flex-direction: row;
margin-bottom: 20px;
}
.page-subtitle p {
font-family: 'SF-Bold';
font-size: 30px;
margin: 0;
}
.folder { .folder {
background-image: url('./assets/folder-closed.png'); width: 269px;
height: 212px;
margin: 0 auto;
background-image: url('./assets/images/folder_closed.png');
} }
.folder:hover { .folder:hover {
background-image: url('./assets/folder-open.png'); background-image: url('./assets/images/folder_open.png');
} }
.box-container { .box-container {
@ -80,6 +97,7 @@ body {
color: white; color: white;
font-size: 30px; font-size: 30px;
text-align: center; text-align: center;
justify-content: center;
padding: 25px; padding: 25px;
border-radius: 20px; border-radius: 20px;
text-decoration: none; text-decoration: none;
@ -92,12 +110,13 @@ body {
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
justify-content: center; justify-content: center;
align-items: center;
color: white; color: white;
transition: background-color 0.75s ease, color 0.75s ease, filter 0.75s ease; transition: background-color 0.75s ease, color 0.75s ease, filter 0.75s ease;
} }
.box-content img { .box-content img {
transition: filter 0.75s ease; transition: all 0.75s ease;
} }
.box:hover { .box:hover {