lucaspatenaude/ScoreSpot
1
0
Fork 0
Code Projects 1 Releases 1 Wiki Activity

Start of adding skewed lines to navigation bar

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-10 00:10:49 -06:00
parent 023e08c442
commit ea555155c9
2 changed files with 11 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
ProjectSourceCode/src/resources/css/navigation-bar/navigation-bar.css
View File

@@ -30,3 +30,13 @@
#logo:hover { #logo:hover {
font-size: 30px; font-size: 30px;
} }
#line {
height: 100%; /* spans the entire height of the navigation bar */
width: 10px;
background-color: white; /* makes the line white */
transform: skewx(-20deg); /* rotates the line by 20 degrees */
transform-origin: top left; /* sets the rotation origin to top left */
margin-left: 10px; /* Add margin to separate the line from the logo */
}

1
ProjectSourceCode/src/views/partials/navigation-bar/nav.hbs
View File

@@ -7,6 +7,7 @@
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<a class="logo" id="logo" href="/home">ScoreSpot</a> <a class="logo" id="logo" href="/home">ScoreSpot</a>
<div id="line"></div>
</div> </div>
<div class="collapse navbar-collapse" id="navbarToggler"> <div class="collapse navbar-collapse" id="navbarToggler">