Skip to content

Commit

Permalink
Enhancement: Added Visual effect to Sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@MrRowey
MrRowey committed May 23, 2024
1 parent 3c7ad77 commit 3a3c164
Show file tree
Hide file tree
Showing 5 changed files with 124 additions and 107 deletions.
32 changes: 14 additions & 18 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>FAForever Patchnotes</title>
<meta charset="utf-8">
<title>FAForever Patchnotes</title>
<meta name="viewport" content="width=device-width"/>
<meta name="description" content="FAForever Patchnotes">

Expand Down Expand Up @@ -31,41 +31,37 @@
<script src="./scripts/populatePatches.js"></script>
</head>
<body>
<main class="Grid">
<main class="GridContainer">
<div class="Space"></div>

<div class="Title GridBackground">
<div class="Title GridItemBackground">
<h1>
<img class="UEF" src="./assets/images/faction/UEF.svg">
<img class="CYBRAN" src="./assets/images/faction/Cybran.svg">
<img alt="UEF-Logo" class="UEF" src="./assets/images/faction/UEF.svg">
<img alt="Cybran-Logo" class="CYBRAN" src="./assets/images/faction/Cybran.svg">
FAForever Patchnotes
<img class="AEON" src="./assets/images/faction/Aeon.svg">
<img class="SERAPHIM" src="./assets/images/faction/Seraphim.svg">
<img alt="Aeon-Logo" class="AEON" src="./assets/images/faction/Aeon.svg">
<img alt="Seraphim-Logo" class="SERAPHIM" src="./assets/images/faction/Seraphim.svg">
</h1>
<p>One Location where the Balance &amp; Game Patchnote are Available in an easy-to-read manner.</p>
</div>

<div class="BalanceContainer GridBackground">
<div class="BalanceContainer GridItemBackground">
<h2>Balance</h2>
<div class="BalanceJSONList">
<!-- Import from Json-->
</div>
<div class="BalanceJSONList"></div>
</div>

<div class="GameContainer GridBackground">
<div class="GameContainer GridItemBackground">
<h2>Game</h2>
<p style="text-align: center;">To see Game Patches before 2022 Click <a href="/pages/oldGamepatches.html">here.</a></p>
<div class="GameJSONList">
<!-- Import from Json-->
</div>
<div class="GameJSONList"></div>
<p>To see Game Patches before 2022 Click <a href="/pages/oldGamepatches.html">here.</a></p>
</div>

<div class="BalanceDev GridBackground">
<div class="BalanceDev GridItemBackground">
<h3>Upcoming Balance Changes</h3>
<p>You can see the latest changes <a href="/pages/balanceChanges.html">here</a>. <br>This list of the current changes is on the FAF Develop game type and is subject to changes.</p>
</div>

<div class="Support GridBackground">
<div class="Support GridItemBackground">
<h3>Report Any Issues</h3>
<p>If you see any issues report please submit a report <a href="https://github.com/FAForever/patchnotes/issues">here.</a></p>
</div>
Expand Down
53 changes: 24 additions & 29 deletions pages/balance/2024/3801.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -471,43 +471,38 @@ <h3><img src="/assets/images/units/aeon/structure/T4RapidArty.png">T4 Arty (Salv
<div class="Sidebar">
<div class="IconSidebar">
<h2 class="IconSidebarTitle">Contents</h2>
<div class="IconSidebarSpace"></div>
<div class="IconSidebarSubgrid">

<h3 class="IconSidebarSubtitle">Land</h3><br>
<h3 class="IconSidebarSubtitle"> <u>Land</u> </h3>
<!-- ----------------LAND-------------------------- -->
<a href="#t1scouts"><img src="/assets/images/units/uef/land/T1Scout.png" /></a>
<a href="#t1aa"><img src="/assets/images/units/uef/land/T1MobileAA.png" /></a>
<a href="#t1tank"><img src="/assets/images/units/uef/land/T1Tank.png" /></a>
<a href="#t1arty"><img src="/assets/images/units/uef/land/T1MobileArty.png" /></a>
<a href="#t2shield"><img src="/assets/images/units/uef/land/T2MobileShield.png" /></a>
<a href="#t2flack"><img src="/assets/images/units/uef/land/T2MobileFlack.png" /></a>
<a href="#t2amphibtank"><img src="/assets/images/units/uef/land/T2HoverTank.png" /></a>
<a href="#t2tank"><img src="/assets/images/units/uef/land/T2Tank.png" /></a>
<a href="#mmls"><img src="/assets/images/units/uef/land/T2MobileML.png" /></a>
<a href="#t3mma"><img src="/assets/images/units/uef/land/T3MobileAA.png" /></a>
<a href="#t3arty"><img src="/assets/images/units/uef/land/T3MobileArty.png" /></a>
<a href="#t3tanky"><img src="/assets/images/units/cybran/land/T3Tank.png" /></a>
<a href="#exp"><img src="/assets/images/units/cybran/land/T4Mega.png" /></a>

<a aria-label="t1scout" href="#t1scouts"> <img aria-label="unit-icon" src="/assets/images/units/uef/land/T1Scout.png"/> </a>
<a aria-label="t1aa" href="#t1aa"> <img aria-label="unit-icon" src="/assets/images/units/uef/land/T1MobileAA.png"/> </a>
<a aria-label="t1tank" href="#t1tank"> <img aria-label="unit-icon" src="/assets/images/units/uef/land/T1Tank.png"/> </a>
<a aria-label="t1arty" href="#t1arty"> <img aria-label="unit-icon" src="/assets/images/units/uef/land/T1MobileArty.png"/> </a>
<a aria-label="t2shield" href="#t2shield"> <img aria-label="unit-icon" src="/assets/images/units/uef/land/T2MobileShield.png"/> </a>
<a aria-label="t2flack" href="#t2flack"> <img aria-label="unit-icon" src="/assets/images/units/uef/land/T2MobileFlack.png" /> </a>
<a aria-label="t2amphibtank" href="#t2amphibtank"> <img aria-label="unit-icon" src="/assets/images/units/uef/land/T2HoverTank.png"/> </a>
<a aria-label="t2tank" href="#t2tank"> <img aria-label="unit-icon" src="/assets/images/units/uef/land/T2Tank.png"/> </a>
<a aria-label="mmls" href="#mmls"> <img aria-label="unit-icon" src="/assets/images/units/uef/land/T2MobileML.png"/> </a>
<a aria-label="t3mma" href="#t3mma"> <img aria-label="unit-icon" src="/assets/images/units/uef/land/T3MobileAA.png"/> </a>
<a aria-label="t3arty" href="#t3arty"> <img aria-label="unit-icon" src="/assets/images/units/uef/land/T3MobileArty.png"/> </a>
<a aria-label="t3tanky" href="#t3tanky"> <img aria-label="unit-icon" src="/assets/images/units/cybran/land/T3Tank.png"/> </a>
<a aria-label="exp" href="#exp"> <img aria-label="unit-icon" src="/assets/images/units/cybran/land/T4Mega.png"/> </a>

<h3 class="IconSidebarSubtitle"> <u>Air</u> </h3>
<!-- ----------------AIR-------------------------- -->
<h3 class="IconSidebarSubtitle">Air</h3><br>
<a href="#torps"><img src="/assets/images/units/uef/air/T2TorpedoBomber.png" /></a>
<a href="#cybranasf"><img src="/assets/images/units/cybran/air/T3ASF.png" /></a>

<!-- ----------------NAVY--------------------------
<h3 class="IconSidebarSubtitle">Navy</h3><br>
-->
<a aria-label="torps" href="#torps"> <img aria-label="unit-icon" src="/assets/images/units/uef/air/T2TorpedoBomber.png"/> </a>
<a aria-label="cybranasf" href="#cybranasf"> <img aria-label="unit-icon" src="/assets/images/units/cybran/air/T3ASF.png"/> </a>


<!-- ----------------ACU/SCUs-------------------------- -->
<h3 class="IconSidebarSubtitle">ACU/SCUs</h3><br>
<a href="#aeonchrono"><img src="/assets/images/Enhancements/aeon/chrono.png" /></a>
<h3 class="IconSidebarSubtitle"><u>ACU &amp; SACU</u></h3>
<a aria-label="Chrono" href="#aeonchrono"> <img aria-label="unit-icon" src="/assets/images/Enhancements/aeon/chrono.png"/> </a>

<!-- ----------------STRUCTURE-------------------------- -->
<h3 class="IconSidebarSubtitle">Structure</h3><br>
<a href="#sonar"><img src="/assets/images/units/uef/structure/T3Sonar.png" /></a>
<a href="#salvation"><img src="/assets/images/units/aeon/structure/T4RapidArty.png" /></a>
""
<h3 class="IconSidebarSubtitle"><u>Structure</u></h3>
<a aria-label="sonar" href="#sonar"> <img aria-label="unit-icon" src="/assets/images/units/uef/structure/T3Sonar.png" /> </a>
<a aria-label="salvation" href="#salvation"> <img aria-label="unit-icon" src="/assets/images/units/aeon/structure/T4RapidArty.png"/> </a>
</div>
</div>
</div>
Expand Down
115 changes: 59 additions & 56 deletions style/balance.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,17 @@ h1, h2, h3, h4, h5, h6 {
}

.Grid {
padding: 10px;
display: grid;
grid-template-columns: 1fr 3fr .75fr;
grid-gap: 20px;
margin: 0px;
padding: 10px; /* Space inside the grid container */
display: grid; /* Enable grid layout */
grid-template-columns: 1fr 3fr 0.75fr; /* Define column sizes */
gap: 20px; /* Space between grid items */
margin: 0; /* Remove default margin */
}

.Content {
grid-column: 2 ;
}


#date {
text-align: right;
padding-right: 10px;
Expand All @@ -41,76 +40,80 @@ h1, h2, h3, h4, h5, h6 {
color: var(--Text);
}

/* Sidebar */
.Sidebar {
grid-column: 3;
position: relative;
grid-column: 3; /* Positioning within the grid */
position: relative; /* Relative positioning */
}

/* Sidebar Title */
.Sidebar h2 a {
color: var(--Text);
text-decoration: none;
color: var(--Text); /* Text color */
text-decoration: none; /* Remove underline from links */
}

/*Icon Sidebar Container */
.IconSidebar {
position: sticky;
top: 20px;
background: var(--IconGridBackground);
padding: 5px 20px 20px 20px;
margin-left: 5px;
color: var(--Text);
text-align: justify;
border-radius: 15px;
display: grid;
grid-template-columns: 3fr;
grid-template-rows: auto;
}

.IconSidebarSpace {
grid-column: 1 / 4;
height: 20px;
}

.IconSidebarTitle {
grid-column: 1 / 4;
text-align: center;
margin: 0;
}

.IconSidebarSubtitle {
grid-column: 1 / 4;
text-align: left;
margin: 0;
}

position: sticky; /* Sticky positioning */
top: 20px; /* Distance from the top */
background: var(--IconGridBackground); /* Background color */
padding: 5px 20px 20px 20px; /* Padding */
margin-left: 5px; /* Margin from the left */
color: var(--Text); /* Text color */
text-align: justify; /* Text alignment */
border-radius: 15px; /* Border radius */
display: grid; /* Enable grid layout */
grid-template-columns: repeat(4, 1fr); /* Four column layout */
row-gap: 5px; /* Space between rows */
column-gap: 5px; /* Space between columns */
}

/* Title in Icon Sidebar */
.IconSidebarTitle, .IconSidebarSubtitle {
grid-column: 1 / -1; /* Spanning full width */
text-align: center; /* Centred text */
margin: 0; /* Remove default margin */
}

/* Subgrid in Icon Sidebar */
.IconSidebarSubgrid {
display: grid;
grid-template-columns: .15fr .15fr .15fr .15fr;
row-gap: 5px;
column-gap: 5px;
display: grid; /* Enable grid layout */
grid-template-columns: repeat(4, 0.15fr);
gap: 5px; /* Space between grid items */
}

/* Icon in Subgrid */
.IconSidebarSubgrid img {
width: 50px;
height: 50px;
width: 50px; /* Icon width */
height: 50px; /* Icon height */
text-decoration: none; /* Remove underline from links */
color: #3498db; /* Icon color */
transition: box-shadow 0.3s ease; /* Smooth box shadow transition */
}
.IconSidebarSubgrid img:hover {
box-shadow: 0 0 10px var(--IconGlow); /* Icon glow on hover */
}

/* Icon Grid Container */
.IconGrid {
position: sticky;
top: 20px;
background: var(--IconGridBackgroundG);
padding: 5px 20px 20px 20px;
color: var(--Text);
text-align: justify;
border-radius: 15px;
position: sticky; /* Sticky positioning */
top: 20px; /* Distance from the top */
background: var(--IconGridBackgroundG); /* Background color */
padding: 5px 20px 20px; /* Padding */
color: var(--Text); /* Text color */
text-align: justify; /* Text alignment */
border-radius: 15px; /* Rounded Corners */
}

/* Icon Grid Title */
.IconGrid h2 {
margin: 10px 0 0 0;
margin: 10px; /* Margin */
}

/* Icons in Icon Grid */
.IconGrid img {
width: 45px;
height: 45px;
width: 45px; /* Icon width */
height: 45px; /* Icon height */
}

.BackToTop {
Expand Down
30 changes: 26 additions & 4 deletions style/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,18 +33,31 @@ a:hover { color: var(--Link-Hover); }
a:active { color: var(--Link-Active); }

/* Classes */
.Grid {
.GridContainer {
display: grid;
padding: 10px;
grid-template-columns: .25fr 2.5fr 2.5fr .25fr;
grid-template-columns: 0.25fr 2.5fr 2.5fr 0.25fr;
grid-gap: 20px;
margin: 10px;
}

.GridBackground {
.GridItemBackground {
position: relative;
background: var(--IndexGridBackground);
border-radius: 15px;
backdrop-filter: blur(10px);
overflow: hidden;
}

.GridItemBackground::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
filter: blur(25px);
z-index: -1;
}

.Space, .Title, .BalanceContainer, .GameContainer, .BalanceDev, .Support, .BalanceJSONList, .GameJSONList {
Expand All @@ -63,6 +76,7 @@ a:active { color: var(--Link-Active); }
}
.Title h1 {
font-size: 40px;
padding: 10px 0 10px 0;
}
.Title p {
font-size: 16px;
Expand All @@ -79,6 +93,10 @@ a:active { color: var(--Link-Active); }
grid-row: 3;
}

.GameContainer p {
text-align: center;
}

.BalanceDev {
grid-row: 4;
grid-column: 2 / span 1;
Expand All @@ -89,6 +107,10 @@ a:active { color: var(--Link-Active); }
grid-column: 3 / span 1;
}

.BalanceDev p, .Support p {
padding: 10px 0 10px 0;
}

.BalanceJSONList, .GameJSONList {
grid-row: 3;
text-align: left;
Expand Down
1 change: 1 addition & 0 deletions style/root.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
--LM-HR: #555;
--ButtonBackground: #4474c1;
--ButtonText: #fff;
--IconGlow: rgba(255, 255, 255, 0.7);
}

/* Base Elements */
Expand Down

0 comments on commit 3a3c164

Please sign in to comment.