caramel/list.fur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added new tools

Browse Source
This commit is contained in:
planetabhi
2023-12-29 18:35:10 +05:30
parent b1bc5a069d
commit 64bef9bede
2 changed files with 6 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CategoryNav.jsx
+1 -1
View File
@@ -9,7 +9,7 @@ export default function CategoryNav({ filter, setFilter }) {
...data.tools
];
return <nav className="category-nav">
return <nav className="category-nav" tabindex="-1">
{navItems.map((c, i) => {
return <CategoryNavItem
key={i}
src/layouts/Layout.astro
+5 -83
View File
@@ -31,15 +31,16 @@ const { site, title, tagline } = Astro.props;
</head>
<body>
<div class="floating-nav">
<div class="floating-nav" aria-label="main navigation">
<div class="logo">
<a href="/"><img src="/icon.png" width="24" alt="Rise of Machine"></a>
<a href="/" aria-label="home page"><img src="/icon.png" width="24" height="24" alt="Rise of Machine" aria-hidden="true"></a>
</div>
<div class="btn-group">
<a
href="https://forms.gle/pzpG1cbxW6AA57uc9"
target="_blank"
class="submit-btn">Suggest a Tool</a
class="submit-btn"
>Suggest a Tool</a
>
<button
class="theme-toggle"
@@ -81,10 +82,6 @@ const { site, title, tagline } = Astro.props;
&#169; 2023 Method Black. All rights reserved.
</div>
<div class="rays_container">
<div class="rays rays_content"></div>
</div>
</body>
</html>
<style is:global>
@@ -136,7 +133,7 @@ const { site, title, tagline } = Astro.props;
position: -webkit-sticky;
position: sticky;
animation-name: slideDownNavigation;
animation-duration: 500ms;
animation-duration: 200ms;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
animation-fill-mode: both;
animation-iteration-count: 1;
@@ -267,81 +264,6 @@ const { site, title, tagline } = Astro.props;
}
}
/* gradient */
.rays_container {
overflow: hidden;
inset: 0px;
position: absolute;
z-index: -1;
}
.rays_content {
position: absolute;
inset: -10px;
opacity: 0.22;
}
.rays {
--stripes: linear-gradient(
180deg,
#fff 0%,
#fff 1%,
transparent 10%,
transparent 12%,
#fff 22%
);
--stripesDark: repeating-linear-gradient(
180deg,
#000 0%,
#000 1%,
transparent 10%,
transparent 12%,
#000 22%
);
--rainbow: repeating-linear-gradient(
180deg,
#60a5fa 10%,
#e879f9 15%,
#60a5fa 20%,
#5eead4 25%,
#60a5fa 30%
);
background-image: var(--stripes), var(--rainbow);
background-size: 300%, 200%;
background-position: 50% 50%, 50% 50%;
filter: invert(100%);
mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
pointer-events: none;
-o-mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
pointer-events: none;
-ms-mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
pointer-events: none;
-moz-mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
pointer-events: none;
}
.rays::after {
content: "";
position: absolute;
inset: 0;
background-image: var(--stripes), var(--rainbow);
background-size: 200%, 100%;
background-attachment: fixed;
mix-blend-mode: difference;
}
[data-new-ui-theme="dark"] {
.rays {
background-image: var(--stripesDark), var(--rainbow);
filter: blur(6px) opacity(8%) saturate(200%);
-webkit-filter: blur(6px) opacity(8%) saturate(200%);
}
.rays::after {
background-image: var(--stripesDark), var(--rainbow);
}
}
</style>
<!-- Google tag (gtag.js) -->