wellfedbison/nancypannikkat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added mobile responsiveness

Browse Source
This commit is contained in:
James Dinh 2023-01-09 23:35:51 -08:00
parent 067300003f
commit 0b128e294c
5 changed files with 143 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
about.html
View File

@ -38,19 +38,19 @@
<body> <body>
<!--Nav--> <!--Nav-->
<div class="nav-wrapper"> <div class="nav-wrapper">
<nav class="navBar"> <nav class="nav-container">
<div class="nav-left"> <div class="nav-left">
<a id="nav-logo-a" href="./"> <a id="nav-logo-a" href="./">
<h1>Nancy Pannikkat</h1> <h1>Nancy Pannikkat</h1>
</a> </a>
</div> </div>
<div id="nav-links-container"> <input class="menu-btn" type="checkbox" id="menu-btn" />
<ul id="navList"> <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<li><a class="navlink" href="./" title="gallery">Gallery</a></li> <ul class="nav-menu">
<li><a class="navlink active" href="./about.html" title="about">About</a></li> <li><a class="navlink" onclick="uncheck('menu-btn')" href="./" title="gallery">Gallery</a></li>
<li><a class="navlink boxed" href="./buy.html" title="buy">Buy</a></li> <li><a class="navlink active" onclick="uncheck('menu-btn')" href="./about.html" title="about">About</a></li>
<li><a class="navlink boxed" onclick="uncheck('menu-btn')" href="./buy.html" title="buy">Buy</a></li>
</ul> </ul>
</div>
</nav> </nav>
</div> </div>

14
buy.html
View File

@ -36,19 +36,19 @@
<body> <body>
<!--Nav--> <!--Nav-->
<div class="nav-wrapper"> <div class="nav-wrapper">
<nav class="navBar"> <nav class="nav-container">
<div class="nav-left"> <div class="nav-left">
<a id="nav-logo-a" href="./"> <a id="nav-logo-a" href="./">
<h1>Nancy Pannikkat</h1> <h1>Nancy Pannikkat</h1>
</a> </a>
</div> </div>
<div id="nav-links-container"> <input class="menu-btn" type="checkbox" id="menu-btn" />
<ul id="navList"> <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<li><a class="navlink" href="./" title="gallery">Gallery</a></li> <ul class="nav-menu">
<li><a class="navlink" href="./about.html" title="about">About</a></li> <li><a class="navlink" onclick="uncheck('menu-btn')" href="./" title="gallery">Gallery</a></li>
<li><a class="navlink boxed active" href="./buy.html" title="buy">Buy</a></li> <li><a class="navlink" onclick="uncheck('menu-btn')" href="./about.html" title="about">About</a></li>
<li><a class="navlink boxed active" onclick="uncheck('menu-btn')" href="./buy.html" title="buy">Buy</a></li>
</ul> </ul>
</div>
</nav> </nav>
</div> </div>
<main> <main>

131
css/general.css
View File

@ -23,14 +23,13 @@ body {
left: 0; left: 0;
position: fixed; position: fixed;
flex-wrap: nowrap; flex-wrap: nowrap;
background-color: rgba(229, 229, 229, 0.856); background-color: rgba(229, 229, 229, 0.91);
box-shadow: 0 1px 6px 0 rgb(0 0 0 / 20%); box-shadow: 0 1px 6px 0 rgb(0 0 0 / 20%);
z-index: 100; z-index: 100;
} }
nav { nav {
max-width: 1000px; max-width: 1000px;
min-width: 600px;
margin: 5px auto; margin: 5px auto;
padding: 17px; padding: 17px;
display: flex; display: flex;
@ -49,15 +48,7 @@ nav * {
.nav-left { .nav-left {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
} float: inline-start;
#nav-logo {
margin: 5px 0 0;
}
#nav-logo:hover {
transform: scale(1.01);
transition: 0.5s;
} }
#nav-logo-a { #nav-logo-a {
@ -66,17 +57,16 @@ nav * {
margin-left: 10px; margin-left: 10px;
} }
nav ul { /* nav ul {
margin-right: 20px; margin-right: 20px;
} }
nav ul li { nav ul li {
display: inline-flex;
line-height: 30px; line-height: 30px;
margin: 10px 7px; margin: 10px 7px;
padding: 3px 5px; padding: 3px 5px;
cursor: pointer; cursor: pointer;
} } */
.navlink { .navlink {
color:rgb(160, 160, 160); color:rgb(160, 160, 160);
@ -117,8 +107,111 @@ a:hover {
transform: scale(1); transform: scale(1);
} }
#nav-links-container { /* Mobile Nav */
display: inline-flex; .nav-container .nav-menu {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
clear: none;
float: right;
max-height: none;
}
.nav-container .nav-menu li {
display: inline-block;
line-height: 30px;
margin: 10px 7px;
padding: 3px 11px;
cursor: pointer;
}
/* menu icon */
.nav-container .menu-icon {
display: none;
}
.nav-container .menu-icon .navicon {
background: rgb(123, 123, 123);
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.nav-container .menu-icon .navicon:before,
.nav-container .menu-icon .navicon:after {
background: rgb(123, 123, 123);
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.nav-container .menu-icon .navicon:before {
top: 5px;
}
.nav-container .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.nav-container .menu-btn {
display: none;
}
.nav-container .menu-btn:checked ~ .nav-menu {
max-height: 300px;
transition: 0.5s;
}
.nav-container .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.nav-container .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.nav-container .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.nav-container .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.nav-container .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
@media (max-width: 700px) {
nav {
display: block;
}
.nav-container .nav-menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
text-align: center;
width: 100%;
margin-right: 0;
}
.nav-container .nav-menu li {
display: block;
}
.nav-container .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 16px 20px;
position: relative;
user-select: none;
}
} }
.boxed { .boxed {
@ -132,7 +225,7 @@ main {
align-items: center; align-items: center;
position: relative; position: relative;
margin: auto; margin: auto;
padding-top: 30px; padding-top: 10px;
} }
header { header {
@ -305,11 +398,11 @@ option {
color: #2c2c2c; color: #2c2c2c;
font-size: 26px; font-size: 26px;
text-transform: uppercase; text-transform: uppercase;
font-weight: 700; font-weight: 500;
text-align: center; text-align: center;
border-radius: 3px; border-radius: 3px;
transition: all 0.3s ease; transition: all 0.3s ease;
height: 60px; height: 50px;
border: none; border: none;
width: 30%; width: 30%;
} }

14
index.html
View File

@ -39,19 +39,19 @@
<body> <body>
<!--Nav--> <!--Nav-->
<div class="nav-wrapper"> <div class="nav-wrapper">
<nav class="navBar"> <nav class="nav-container">
<div class="nav-left"> <div class="nav-left">
<a id="nav-logo-a" href="./"> <a id="nav-logo-a" href="./">
<h1>Nancy Pannikkat</h1> <h1>Nancy Pannikkat</h1>
</a> </a>
</div> </div>
<div id="nav-links-container"> <input class="menu-btn" type="checkbox" id="menu-btn" />
<ul id="navList"> <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<li><a class="navlink active" href="./" title="gallery">Gallery</a></li> <ul class="nav-menu">
<li><a class="navlink" href="./about.html" title="about">About</a></li> <li><a class="navlink active" onclick="uncheck('menu-btn')" href="./" title="gallery">Gallery</a></li>
<li><a class="navlink boxed" href="./buy.html" title="buy">Buy</a></li> <li><a class="navlink" onclick="uncheck('menu-btn')" href="./about.html" title="about">About</a></li>
<li><a class="navlink boxed" onclick="uncheck('menu-btn')" href="./buy.html" title="buy">Buy</a></li>
</ul> </ul>
</div>
</nav> </nav>
</div> </div>

7
js/general.js
View File

@ -16,6 +16,13 @@ document.addEventListener( 'DOMContentLoaded', function() {
isNavigation: true, isNavigation: true,
pauseOnFocus: true, pauseOnFocus: true,
speed: 2000, speed: 2000,
interval: 7000,
} ); } );
splide.mount(); splide.mount();
window.onload = function() {
uncheck('menu-btn');
};
function uncheck(id) {
document.getElementById(id).checked = false;
}
}); });