hamburger menu
This commit is contained in:
parent
0eb7b94104
commit
a32297e574
52
package-lock.json
generated
52
package-lock.json
generated
@ -13,12 +13,14 @@
|
||||
"next": "14.2.3",
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"react-modal": "^3.16.1",
|
||||
"sass": "^1.77.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^18",
|
||||
"@types/react-dom": "^18",
|
||||
"@types/react-modal": "^3.16.3",
|
||||
"eslint": "^8",
|
||||
"eslint-config-next": "14.2.3",
|
||||
"typescript": "^5"
|
||||
@ -423,6 +425,15 @@
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-modal": {
|
||||
"version": "3.16.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.16.3.tgz",
|
||||
"integrity": "sha512-xXuGavyEGaFQDgBv4UVm8/ZsG+qxeQ7f77yNrW3n+1J6XAstUy5rYHeIHPh1KzsGc6IkCIdu6lQ2xWzu1jBTLg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/parser": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.2.0.tgz",
|
||||
@ -1839,6 +1850,11 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/exenv": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
|
||||
"integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
|
||||
},
|
||||
"node_modules/fast-deep-equal": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||
@ -3106,7 +3122,6 @@
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
@ -3418,7 +3433,6 @@
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
@ -3485,8 +3499,30 @@
|
||||
"node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"node_modules/react-lifecycles-compat": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
||||
},
|
||||
"node_modules/react-modal": {
|
||||
"version": "3.16.1",
|
||||
"resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
|
||||
"integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
|
||||
"dependencies": {
|
||||
"exenv": "^1.2.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-lifecycles-compat": "^3.0.0",
|
||||
"warning": "^4.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
|
||||
"react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
|
||||
}
|
||||
},
|
||||
"node_modules/readdirp": {
|
||||
"version": "3.6.0",
|
||||
@ -4253,6 +4289,14 @@
|
||||
"punycode": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/warning": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||
"integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/which": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||
|
||||
@ -14,12 +14,14 @@
|
||||
"next": "14.2.3",
|
||||
"react": "^18",
|
||||
"react-dom": "^18",
|
||||
"react-modal": "^3.16.1",
|
||||
"sass": "^1.77.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^18",
|
||||
"@types/react-dom": "^18",
|
||||
"@types/react-modal": "^3.16.3",
|
||||
"eslint": "^8",
|
||||
"eslint-config-next": "14.2.3",
|
||||
"typescript": "^5"
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import Navbar from "@/components/Navbar";
|
||||
import "@/app/global.scss";
|
||||
import Footer from "@/components/Footer";
|
||||
import "@/app/global.scss";
|
||||
|
||||
export default function Layout({ children }) {
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="container">
|
||||
<Navbar></Navbar>
|
||||
|
||||
@ -116,8 +116,8 @@ const Footer = () => {
|
||||
</ul>
|
||||
</div>
|
||||
<span className="footer-toes-span">
|
||||
© {new Date().getFullYear()} Illinois Tech Robotics
|
||||
</span>
|
||||
© {new Date().getFullYear()} Illinois Tech Robotics
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,8 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import Modal from "react-modal";
|
||||
import "@/stylesheets/navbar.scss";
|
||||
import index from "@/pages";
|
||||
|
||||
const Navbar = () => {
|
||||
const [modal, setModal] = useState(false);
|
||||
const [modalOpacity, setModalOpacity] = useState(0);
|
||||
const [navBackground, setNavBackground] = useState({
|
||||
backgroundColor: "transparent",
|
||||
});
|
||||
@ -16,6 +22,48 @@ const Navbar = () => {
|
||||
});
|
||||
}, []);
|
||||
|
||||
const modalStyle = {
|
||||
content: {
|
||||
opacity: modalOpacity,
|
||||
transition: "opacity 300ms ease-in-out",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
right: "auto",
|
||||
bottom: "auto",
|
||||
marginRight: "-50%",
|
||||
width: "100vw",
|
||||
height: "100vh",
|
||||
transform: "translate(-50%, -50%)",
|
||||
overflow: "hidden",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#232323",
|
||||
minWidth: "30%",
|
||||
minHeight: "30%",
|
||||
animation: "slideUp 500ms ease-in-out",
|
||||
border: "none",
|
||||
},
|
||||
overlay: {
|
||||
opacity: modalOpacity,
|
||||
transition: "opacity 300ms ease-in-out",
|
||||
backgroundColor: "rgba(255, 255, 255, 0.15)",
|
||||
backdropFilter: "blur(5px)",
|
||||
zIndex: "1000",
|
||||
},
|
||||
};
|
||||
|
||||
const openModal = () => {
|
||||
setModal(true);
|
||||
setTimeout(() => setModalOpacity(1), 10);
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
setModalOpacity(0);
|
||||
setTimeout(() => setModal(false), 300);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="navbar" style={navBackground}>
|
||||
<Link className="navbar-logo" href="/">
|
||||
@ -35,7 +83,48 @@ const Navbar = () => {
|
||||
📸 Gallery
|
||||
</Link>
|
||||
</div>
|
||||
<div className="navbar-hamburger">≡</div>
|
||||
<div
|
||||
className="navbar-hamburger"
|
||||
onClick={() => {
|
||||
openModal();
|
||||
}}
|
||||
>
|
||||
≡
|
||||
</div>
|
||||
<Modal
|
||||
isOpen={modal}
|
||||
onRequestClose={() => closeModal()}
|
||||
contentLabel="Menu"
|
||||
style={modalStyle}
|
||||
>
|
||||
<div className="hamburger">
|
||||
<Link className="navbar-logo" href="/">
|
||||
ITR
|
||||
</Link>
|
||||
<div
|
||||
className="navbar-x"
|
||||
onClick={() => {
|
||||
closeModal();
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</div>
|
||||
</div>
|
||||
<div className="hamburger-links">
|
||||
<Link className="hamburger-link" href="/">
|
||||
🏠 Home
|
||||
</Link>
|
||||
<Link className="hamburger-link" href="/about">
|
||||
❓ About
|
||||
</Link>
|
||||
<Link className="hamburger-link" href="/projects">
|
||||
🤖 Projects
|
||||
</Link>
|
||||
<Link className="hamburger-link" href="/gallery">
|
||||
📸 Gallery
|
||||
</Link>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,130 +1,130 @@
|
||||
@font-face {
|
||||
font-family: itrFont;
|
||||
src: url("../../public/LeagueSpartan-ExtraBold.ttf");
|
||||
font-family: itrFont;
|
||||
src: url("../../public/LeagueSpartan-ExtraBold.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: itrFontMedium;
|
||||
src: url("../../public/LeagueSpartan-Medium.ttf");
|
||||
font-family: itrFontMedium;
|
||||
src: url("../../public/LeagueSpartan-Medium.ttf");
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: #232323;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
border-top: 2px solid rgb(46 46 46);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: #232323;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
border-top: 2px solid rgb(46 46 46);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.footer-links-ul {
|
||||
width: 80vw;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 80vw;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-links-ul-li {
|
||||
padding: 0;
|
||||
margin: 20px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
margin: 20px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-links-ul-li-a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer-links-ul-li-svg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
filter: invert(100%) sepia(10%) saturate(1000%) hue-rotate(10deg) brightness(100%) contrast(100%);
|
||||
opacity: 0.3;
|
||||
transition: 0.3s;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
filter: invert(100%) sepia(10%) saturate(1000%) hue-rotate(10deg)
|
||||
brightness(100%) contrast(100%);
|
||||
opacity: 0.3;
|
||||
transition: 0.3s;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-links-ul-li-svg:hover {
|
||||
opacity: 0.7;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.footer-toes-links {
|
||||
display: flex;
|
||||
margin-bottom: 5px;
|
||||
display: flex;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.footer-toes-links-link {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-toes-links-link-a {
|
||||
font-family: itrFontMedium;
|
||||
font-size: 20px;
|
||||
color: #f5f5f5;
|
||||
text-decoration: none;
|
||||
transition: 0.3s;
|
||||
font-family: itrFontMedium;
|
||||
font-size: 20px;
|
||||
color: #f5f5f5;
|
||||
text-decoration: none;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.footer-toes-links-link-a:hover {
|
||||
color: white;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.footer-toes-span {
|
||||
font-family: itrFontMedium;
|
||||
font-size: 14px;
|
||||
color: #afafaf;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-family: itrFontMedium;
|
||||
font-size: 14px;
|
||||
color: #afafaf;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (width <=650px) {
|
||||
// Phones
|
||||
.footer-links-ul-li-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
// Phones
|
||||
.footer-links-ul-li-svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.footer-links-ul-li {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.footer-links-ul-li {
|
||||
margin: 15px;
|
||||
}
|
||||
.footer-toes-links-link-a {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.footer-toes-links-link-a {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.footer-toes-links-link {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
.footer-toes-links-link {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,120 +1,186 @@
|
||||
@font-face {
|
||||
font-family: itrFont;
|
||||
src: url("../../public/LeagueSpartan-ExtraBold.ttf");
|
||||
font-family: itrFont;
|
||||
src: url("../../public/LeagueSpartan-ExtraBold.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: itrFontMedium;
|
||||
src: url("../../public/LeagueSpartan-Medium.ttf");
|
||||
font-family: itrFontMedium;
|
||||
src: url("../../public/LeagueSpartan-Medium.ttf");
|
||||
}
|
||||
|
||||
.navbar {
|
||||
width: 100vw;
|
||||
height: 70px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
z-index: 1000;
|
||||
transition: 0.5s;
|
||||
width: 100vw;
|
||||
height: 70px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
z-index: 1000;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.navbar-logo {
|
||||
width: 100px;
|
||||
height: 60%;
|
||||
color: white;
|
||||
font-size: 50px;
|
||||
font-family: itrFont;
|
||||
transition: 0.5s;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
margin-left: 30px;
|
||||
margin-right: 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 6px;
|
||||
width: 100px;
|
||||
height: 60%;
|
||||
color: white;
|
||||
font-size: 50px;
|
||||
font-family: itrFont;
|
||||
transition: 0.5s;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
margin-left: 30px;
|
||||
margin-right: 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.navbar-logo:hover {
|
||||
color: red;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.navbar-links {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.navbar-link,
|
||||
.navbar-hamburger {
|
||||
width: auto;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
color: rgb(216 216 216);
|
||||
text-decoration: none;
|
||||
font-family: itrFontMedium;
|
||||
font-size: 20px;
|
||||
transition: 0.3s;
|
||||
cursor: pointer;
|
||||
width: auto;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
color: rgb(216 216 216);
|
||||
text-decoration: none;
|
||||
font-family: itrFontMedium;
|
||||
font-size: 20px;
|
||||
transition: 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navbar-link:hover,
|
||||
.navbar-hamburger:hover {
|
||||
color: white;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navbar-hamburger {
|
||||
border: none;
|
||||
width: 100px;;
|
||||
font-size: 40px;
|
||||
margin-right: 30px;
|
||||
margin-left: 0px;
|
||||
.navbar-hamburger,
|
||||
.navbar-x {
|
||||
border: none;
|
||||
width: 100px;
|
||||
font-size: 40px;
|
||||
margin-right: 30px;
|
||||
margin-left: 0px;
|
||||
visibility: hidden;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media screen and (width <=912px) {
|
||||
// Tablets
|
||||
.navbar-x {
|
||||
font-size: 30px;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@media screen and (width <=650px) {
|
||||
// Phones
|
||||
.hamburger {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hamburger-links {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hamburger-link:first-child {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.hamburger-link {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
margin-bottom: 3px;
|
||||
margin-top: 3px;
|
||||
color: rgb(216 216 216);
|
||||
text-decoration: none;
|
||||
font-family: itrFontMedium;
|
||||
font-size: 30px;
|
||||
transition: 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media screen and (width <=850px) {
|
||||
.navbar-hamburger,
|
||||
.navbar-x {
|
||||
visibility: visible;
|
||||
margin-right: 20px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.navbar-links {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-logo {
|
||||
margin-left: 20px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
top: 200%;
|
||||
}
|
||||
to {
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes navbar-logo {
|
||||
0%,
|
||||
100% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
0%,
|
||||
100% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 0;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 400% 0;
|
||||
}
|
||||
50% {
|
||||
background-position: 400% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
100% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user