Cyper/CyBySide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Added navbar home link + color fades
All checks were successful
Deploy Blog to Folder / deploy (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Cyper
2025-07-27 21:59:02 -04:00
parent beb83a9849
commit 4cffc3ff0d
2 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
public/css/style.css
View File

@ -86,7 +86,7 @@ footer {
.nav .hamburger ion-icon { .nav .hamburger ion-icon {
margin-top: 0.15rem; margin-top: 0.15rem;
} }
.nav-logo > img { .nav-logo img {
width: 64px; width: 64px;
height: 64px; height: 64px;
} }
@ -114,6 +114,7 @@ footer {
} }
.nav-hyperlinks a { .nav-hyperlinks a {
display: flex; display: flex;
flex-direction: row-reverse; /* row-reverse so `:hover ~ ion-icon` works */
align-items: center; align-items: center;
align-content: center; align-content: center;
text-decoration: none; text-decoration: none;
@ -122,10 +123,13 @@ footer {
.nav-hyperlinks ion-icon, .nav-hyperlinks ion-icon,
.mobile-nav-header ion-icon { .mobile-nav-header ion-icon {
color: rgba(var(--black), .52); color: rgba(var(--black), .52);
transition: color 0.25s ease-in-out,
background-color 0.25s ease-in-out;
} }
.nav-hyperlinks a:hover, .nav-hyperlinks a:hover,
.nav-hyperlinks ion-icon:hover, .nav-hyperlinks ion-icon:hover,
.mobile-nav-header ion-icon:hover { .mobile-nav-header ion-icon:hover,
.nav-hyperlinks a span:hover ~ ion-icon {
color: rgba(var(--black), .86); color: rgba(var(--black), .86);
} }
.nav-hyperlinks ion-icon { .nav-hyperlinks ion-icon {
@ -296,12 +300,18 @@ footer ul li:last-child {
} }
.footer-socials > a > ion-icon { .footer-socials > a > ion-icon {
color: rgba(var(--lightblue), .86); color: rgba(var(--lightblue), .86);
background-color: rgba(var(--brown), .86); background-color: rgba(var(--brown), .52);
border-radius: 100%; border-radius: 100%;
border: var(--borders); border: var(--borders);
box-sizing: content-box; box-sizing: content-box;
padding: 0.5rem; padding: 0.5rem;
margin: 0 0.5rem; margin: 0 0.5rem;
transition: color 0.25s ease-in-out,
background-color 0.25s ease-in-out;
}
.footer-socials > a > ion-icon:hover {
background-color: rgba(var(--brown), .86);
} }
.footer-socials > a:first-child > ion-icon { .footer-socials > a:first-child > ion-icon {
margin-left: 0; margin-left: 0;

12
src/_includes/components/navbars.liquid
View File

@ -1,6 +1,8 @@
<nav class="container nav h-100" aria-label="Main nav"> <nav class="container nav h-100" aria-label="Main nav">
<div class="nav-logo"> <div class="nav-logo">
<img class="site-logo" src="/img/logo.png" alt="CyBySide logo" /> <a href="/">
<img class="site-logo" src="/img/logo.png" alt="CyBySide logo" />
</a>
</div> </div>
<div class="nav-title"> <div class="nav-title">
<h1>{{ metadata.title }}</h1> <h1>{{ metadata.title }}</h1>
@ -13,21 +15,21 @@
</button> </button>
</li> </li>
<li> <li>
<a href="/"> <a href="/" style="display: flex; flex-direction: row-reverse">
<ion-icon name="home-sharp"></ion-icon>
<span>Home</span> <span>Home</span>
<ion-icon name="home-sharp"></ion-icon>
</a> </a>
</li> </li>
<li> <li>
<a href="/posts"> <a href="/posts">
<ion-icon name="newspaper-sharp"></ion-icon>
<span>Posts</span> <span>Posts</span>
<ion-icon name="newspaper-sharp"></ion-icon>
</a> </a>
</li> </li>
<li> <li>
<a href="/about"> <a href="/about">
<ion-icon name="help-circle-sharp"></ion-icon>
<span>About</span> <span>About</span>
<ion-icon name="help-circle-sharp"></ion-icon>
</a> </a>
</li> </li>
</ul> </ul>