rodude123/my-portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Main off canvas navigation finished

Browse Source
This commit is contained in:
Rohit Pai 2021-07-31 11:49:38 +01:00
parent 50ab7f40be
commit d2a50070a6
4 changed files with 210 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/css/main.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/index.html vendored
View File

File diff suppressed because one or more lines are too long

188
src/css/main.css
View File

@ -10,6 +10,7 @@
--errorDefault: hsla(0, 62%, 51%, 1);
--grey: hsla(0, 0%, 39%, 1);
--mutedGrey: hsla(0, 0%, 67%, 0.58);
--mutedBlack: hsla(0, 0%, 0%, 0.25);
/* font sizes */
--titleFS: 2.25rem;
@ -73,15 +74,15 @@ a.btn:active, form input[type="submit"]:active{
}
.boxShadowOut:hover {
box-shadow: 0 6px 4px 0 hsla(0, 0%, 0%, 0.25);
box-shadow: 0 6px 4px 0 var(--mutedBlack);
}
.boxShadowIn:active {
box-shadow: inset 0 6px 4px 0 hsla(0, 0%, 0%, 0.25);
box-shadow: inset 0 6px 4px 0 var(--mutedBlack);
}
.textShadow:hover {
text-shadow: 0 6px 4px hsla(0, 0%, 0%, 0.25);
text-shadow: 0 6px 4px var(--mutedBlack);
}
/*** Standard Styles ****/
@ -95,7 +96,7 @@ body{
}
header {
background: url("../imgs/hero.jpg") no-repeat bottom;
background: #6A6A6A url("../imgs/hero.jpg") no-repeat bottom;
background-size: cover;
height: 40%;
color: #FFFFFF;
@ -108,6 +109,16 @@ nav{
flex-direction: row;
justify-content: space-between;
padding: 0.25em;
position: sticky;
top: 0;
}
nav #nav-check {
display: none;
}
nav .nav-btn {
display: none;
}
nav h1 {
@ -124,7 +135,7 @@ nav ul {
flex-direction: row;
gap: 1em;
margin: 0;
justify-content: right;
justify-content: flex-end;
align-items: flex-end;
}
@ -136,7 +147,7 @@ nav ul li span{
visibility: hidden;
}
nav ul li a:hover > span{
nav ul li a:hover span {
visibility: visible;
}
@ -168,17 +179,168 @@ i.fa-chevron-down{
margin: 1.5rem 0;
}
@media screen and (max-width: 75em) {
nav {
flex-direction: column;
justify-content: left;
align-items: end;
gap: 1em;
display: block;
height: 50px;
width: 100%;
background-color: #4d4d4d;
position: relative;
padding: 0;
}
nav a h1{
margin-left: 1ch;
}
nav .nav-btn {
display: inline-block;
position: absolute;
right: 30px;
top: -353px;
}
nav ul {
flex-direction: column;
padding: 0;
position: relative;
display: block;
width: 100%;
background-color: #333;
transition: all 0.4s ease-in;
overflow-y: hidden;
padding-left: 0;
margin-top: 7px;
}
nav ul li a {
display: block;
width: 100%;
transform: translateX(-30px);
transition: all 0.4s ease-in;
opacity: 0;
}
.nav-btn label {
display: inline-block;
padding: 13px 0;
margin: 0;
cursor: pointer;
width: 60px;
height: 20px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in;
-moz-transition: .5s ease-in;
-o-transition: .5s ease-in;
transition: .5s ease-in;
}
.nav-btn label span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background-color: #FFFFFF;
opacity: 1;
right: 0;
top: 20px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in;
-moz-transition: .25s ease-in;
-o-transition: .25s ease-in;
transition: .25s ease-in;
}
nav #nav-check:not(:checked) ~ ul{
height: auto;
max-height: 0;
}
nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(1) {
top: 0;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(2) {
top: 15px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(3) {
top: 30px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
nav .nav-btn label:hover, nav #nav-check:checked ~ .nav-btn label {
background-color: rgba(-1, 0, 0, 0.3);
}
nav #nav-check:checked ~ ul{
max-height: 50vh;
overflow-y: hidden;
}
nav #nav-check:checked ~ ul li a {
opacity: 1;
transform: translateX(0px);
}
nav #nav-check:checked ~ ul li:nth-child(1) a {
transition-delay: 0.15s;
}
nav #nav-check:checked ~ ul li:nth-child(2) a {
transition-delay: 0.25s;
}
nav #nav-check:checked ~ ul li:nth-child(3) a {
transition-delay: 0.35s;
}
nav #nav-check:checked ~ ul li:nth-child(4) a {
transition-delay: 0.45s;
}
nav #nav-check:checked ~ ul li:nth-child(5) a {
transition-delay: 0.55s;
}
nav #nav-check:checked ~ .nav-btn label span:first-child {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
nav #nav-check:checked ~ .nav-btn label span:nth-child(2){
width: 0;
opacity: 0;
}
nav #nav-check:checked ~ .nav-btn label span:last-child {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
@media screen and (max-width: 31em) {
header div h1{
width: min-content;
}
}

9
src/index.html
View File

@ -12,9 +12,17 @@
<body>
<header>
<nav>
<input type="checkbox" id="nav-check">
<a href="/">
<h1>rohit pai</h1>
</a>
<div class="nav-btn">
<label for="nav-check">
<span></span>
<span></span>
<span></span>
</label>
</div>
<ul>
<li><a href="#about" class="textShadow"><span>&lt;</span>about<span>&gt;</span></a></li>
<li><a href="#curiculumvitae" class="textShadow"><span>&lt;</span>cv<span>&gt;</span></a></li>
@ -22,6 +30,7 @@
<li><a href="#contact" class="textShadow"><span>&lt;</span>contact<span>&gt;</span></a></li>
<li><a href="#" class="textShadow"><span>&lt;</span>blog<span>&gt;</span></a></li>
</ul>
</nav>
<div>
<h1>full stack developer_</h1>