minor changes

This commit is contained in:
Dex404 2024-04-16 09:41:19 +00:00
parent 692d73f97a
commit f856876713
2 changed files with 17 additions and 22 deletions

View file

@ -49,13 +49,13 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
showBackground ? "backdrop-blur" : "bg-transparent"
} fixed start-0 top-0 z-20 w-full bg-transparent dark:border-gray-600 dark:bg-gray-900`}
>
<section className="MOBILE-MENU flex hidden" style={mobileNavStyle}>
<section className="MOBILE-MENU flex hidden backdrop-blur-lg" style={mobileNavStyle}>
<div>
{" "}
<div className="CROSS-ICON absolute right-0 top-0 px-8 py-8">
<button onClick={() => setIsNavOpen(!isNavOpen)}>
<svg
className="h-8 w-8 text-gray-600"
className="h-8 w-8 text-white"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
@ -68,24 +68,24 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
</svg>
</button>
</div>
<ul className="MENU-LINK-MOBILE-OPEN flex min-h-[300px] flex-col items-center justify-center text-white backdrop-blur">
<ul className="MENU-LINK-MOBILE-OPEN flex min-h-[300px] flex-col items-center justify-center text-white">
<li className="my-2 border-b border-gray-400 uppercase">
<a href="/about">Home</a>
<a href="#">Home</a>
</li>
<li className="my-2 border-b border-gray-400 uppercase">
<a href="/portfolio">Services</a>
<a href="#">Services</a>
</li>
<li className="my-2 border-b border-gray-400 uppercase">
<a href="/contact">Portfolio</a>
<a href="#">Portfolio</a>
</li>
<li className="my-2 border-b border-gray-400 uppercase">
<a href="/contact">About</a>
<a href="#">About</a>
</li>
<li className="my-2 border-b border-gray-400 uppercase">
<a href="/contact">Sign In</a>
<a href="#">Sign In</a>
</li>
<li className="my-2 border-b border-gray-400 uppercase">
<a href="/contact">Sign Up</a>
<a href="#">Sign Up</a>
</li>
</ul>
</div>

View file

@ -2,9 +2,7 @@
const { pick, omit } = require("lodash")
const colors = require("tailwindcss/colors")
const defaultTheme = require("tailwindcss/defaultTheme")
const {
default: flattenColorPalette,
} = require("tailwindcss/lib/util/flattenColorPalette");
const { default: flattenColorPalette } = require("tailwindcss/lib/util/flattenColorPalette")
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: "class",
@ -19,7 +17,7 @@ module.exports = {
theme: {
extend: {
boxShadow: {
'3xl': '0 35px 60px -15px rgba(0, 0, 200, 0.3)',
"3xl": "0 35px 60px -15px rgba(0, 0, 200, 0.3)",
},
colors: {
black: "#0f172a",
@ -95,6 +93,8 @@ module.exports = {
},
animation: {
["infinite-slider"]: "infiniteSlider 20s linear infinite",
openmenu: "openmenu 1s ease-in",
closemenu: "closemenu 1s ease-in",
},
keyframes: {
infiniteSlider: {
@ -106,22 +106,17 @@ module.exports = {
},
},
},
plugins: [
require('@codaworks/react-glow/tailwind'),
addVariablesForColors
],
plugins: [require("@codaworks/react-glow/tailwind"), addVariablesForColors],
future: {
hoverOnlyWhenSupported: true,
},
}
function addVariablesForColors({ addBase, theme }) {
let allColors = flattenColorPalette(theme("colors"));
let newVars = Object.fromEntries(
Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
);
let allColors = flattenColorPalette(theme("colors"))
let newVars = Object.fromEntries(Object.entries(allColors).map(([key, val]) => [`--${key}`, val]))
addBase({
":root": newVars,
});
})
}