limepotato/limepot-xyz
1
0
Fork 0
Code Issues 3 Pull requests Activity

more styling

Browse source
This commit is contained in:
nelle 2022-12-19 14:49:25 -07:00
parent 2dc60b6acf
commit d7752ce561
2 changed files with 51 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
index.html
View file

@ -44,6 +44,12 @@
<span class="text">Videography</span> <span class="text">Videography</span>
</a> </a>
</li> </li>
<li class="list" style="--clr:rgb(0, 196, 157);">
<a href="#">
<span class="icon"><ion-icon name="archive"></ion-icon></span>
<span class="text">Old Site</span>
</a>
</li>
</ul> </ul>
</div> </div>

48
style.css
View file

@ -14,7 +14,7 @@ body
{ {
position: fixed; position: fixed;
inset: 20px 0 20px 20px; inset: 20px 0 20px 20px;
width: 140px; width: 80px;
background: #2b272b; background: #2b272b;
transition: 0.5s; transition: 0.5s;
display: flex; display: flex;
@ -83,7 +83,11 @@ body
width: 100%; width: 100%;
height: 60px; height: 60px;
padding: 0 10px; padding: 0 10px;
transition: 0.5; transition: 0.5s;
}
.navigation ul li.active
{
transform: translateX(30px)
} }
.navigation ul li a .navigation ul li a
{ {
@ -110,4 +114,42 @@ body
{ {
color: #fff; color: #fff;
background: var(--clr); background: var(--clr);
} }
.navigation ul li a .icon::before
{
content: '';
position: absolute;
top: 10px;
left: 0;
width: 100%;
height: 100%;
background: var(--clr);
filter: blur(8px);
opacity: 0;
transition: 0.5s;
}
.navigation ul li.active a .icon::before
{
opacity: 0.5;
}
.navigation ul li a .text
{
position: relative;
padding: 0 15px;
height: 60px;
display: flex;
align-items: center;
color: rgb(173, 173, 173);
opacity: 0;
visibility: hidden;
transition: 0.5s;
}
.navigation.open ul li a .text
{
opacity: 1;
visibility: visible;
}
.navigation ul li.active a .text
{
color: var(--clr);
}