1
0
mirror of https://github.com/zumbiepig/MineXLauncher.git synced 2025-06-26 10:05:10 +00:00

add tutorial open and close animation

This commit is contained in:
zumbiepig
2024-09-05 14:32:58 -07:00
parent c4d8a17876
commit 09a8a4f220
3 changed files with 42 additions and 9 deletions

View File

@@ -66,7 +66,7 @@
<div class="article-item" onclick="article.open('cloudflare-tunnel')">
<img class="article-icon" loading="lazy" src="/resources/images/icons/articles/cloudflare-tunnel.webp" />
<div class="article-details">
<strong class="article-name">How To Make A Cloudflare Tunnel Domain</strong>
<strong class="article-name">How to Set Up a Cloudflare Tunnel for an Eaglercraft Server</strong>
<p class="article-description">This brief guide walks you through configuring a Cloudflare Tunnel for your Eaglercraft server.</p>
</div>
</div>
@@ -88,7 +88,7 @@
</div>
<div id="article-mc-server" class="article">
<div class="article-content">
<span class="close-button" onclick="article.close()">&times;</span>
<span class="close-button" onclick="article.close('mc-server')">&times;</span>
<h1>How To Make An Eaglercraft Server</h1>
<h5>Written by ServerDotSo and revised by zumbiepig</h5>
<p>Have you ever wondered how to make an Eaglercraft Server?</p>
@@ -168,8 +168,8 @@
</div>
<div id="article-cloudflare-tunnel" class="article">
<div class="article-content">
<span class="close-button" onclick="article.close()">&times;</span>
<h1>How to Set Up A Cloudflare Tunnel for Eaglercraft Server</h1>
<span class="close-button" onclick="article.close('cloudflare-tunnel')">&times;</span>
<h1>How to Set Up a Cloudflare Tunnel for an Eaglercraft Server</h1>
<h5>Written by zumbiepig and SpeedSlicer</h5>
<p>In this guide, we'll walk you through the steps to set up a Cloudflare Tunnel for your Eaglercraft server, which is running on <code>ws://localhost:8081</code>.</p>
<h3>Prerequisites</h3>

View File

@@ -353,7 +353,6 @@ nav {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
@@ -777,6 +776,34 @@ nav {
align-items: center;
}
@keyframes openArticle {
0% {
opacity: 0;
scale: 0;
}
80% {
scale: 1.1;
}
100% {
opacity: 1;
scale: 1;
}
}
@keyframes closeArticle {
0% {
opacity: 1;
scale: 1;
}
20% {
scale: 1.1;
}
100% {
opacity: 0;
scale: 0;
}
}
.article .article-content {
background-color: #333;
padding: 20px;