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

Move submit button to floating nav

Browse Source
This commit is contained in:
Steve Paul committed 2023-12-19 18:47:04 +05:30
1 parent 983a456aaa
commit 0f5742aea0
1 file changed
+52 -6
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/Layout.astro
+52 -6
View File
@@ -36,12 +36,15 @@ const { site, title, tagline } = Astro.props;
<p class="nu-c-fs-normal nu-u-text--secondary">{tagline}</p>
</div>
</header>
<button class="theme-toggle" id="theme-toggle" title="Toggles light & dark" aria-label="auto" aria-live="polite">
<div class="floating-nav btn-group">
<a href="https://forms.gle/pzpG1cbxW6AA57uc9" target="_blank" class="submit-btn">Submit a new tool</a>
<button class="theme-toggle" id="theme-toggle" title="Toggles light & dark" aria-label="auto" aria-live="polite">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="var(--icon-secondary)" fill-opacity=".16" d="M8.57 17.93A5.98 5.98 0 0 1 6 13c0-3.31 2.69-6 6-6s6 2.69 6 6c0 2.05-1.03 3.86-2.6 4.94"/><path stroke="var(--icon-secondary)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5" d="M12 4V2M3 13H1m22 0h-2m-1.222-7.778-1.414 1.414m-12.728 0L4.222 5.222M4 18h16M8 21h8m-7.43-3.07A5.98 5.98 0 0 1 6 13c0-3.31 2.69-6 6-6s6 2.69 6 6c0 2.05-1.03 3.86-2.6 4.94l-6.83-.01Z"/></svg>
</button>
</div>
<slot />
<div class="footer">ᕦ(ò_óˇ)ᕤ <a href="https://forms.gle/pzpG1cbxW6AA57uc9" target="_blank" class="nu-u-link--subtle">Submit a new tool</a><br />Built with <a href="https://new-ui.com/?ref=riseofmachine" class="nu-u-link--subtle">New UI</a> </div>
<div class="footer">ᕦ(ò_óˇ)ᕤ<br />Built with <a href="https://new-ui.com/?ref=riseofmachine" class="nu-u-link--subtle">New UI</a> </div>
</body>
</html>
<style is:global>
@@ -56,6 +59,51 @@ const { site, title, tagline } = Astro.props;
section { margin-bottom: var(--spacing-10);}
p { margin-top: var(--spacing-00);}
.nu-u-link--subtle { color: var(--text-secondary) !important;}
.floating-nav {
position: fixed;
top: var(--spacing-07);
right: var(--spacing-07);
z-index: 999999;
}
.btn-group {
display: flex;
gap: var(--spacing-03);
align-items: center;
}
.submit-btn {
padding: 8px 24px;
border: 1px solid var(--border-muted);
outline: none;
text-decoration: none;
color: inherit;
cursor: pointer;
color: var(--text-secondary);
background-color: var(--background);
box-shadow: none;
border-radius: var(--spacing-03);
&:hover {
background-color: var(--background-secondary);
color: var(--text-primary);
}
&:active {
background-color: var(--background);
color: var(--text-secondary);
}
&.disabled {
background-color: var(--background);
color: var(--icon-secondary);
pointer-events: none;
}
&:focus {
background-color: var(--background);
outline: 1px solid var(--button-primary);
color: var(--icon-secondary);
}
}
.theme-toggle {
z-index: 999;
--icon-fill: var(--icon-secondary);
@@ -69,14 +117,12 @@ const { site, title, tagline } = Astro.props;
cursor: pointer;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
position: fixed;
top: var(--spacing-07);
right: var(--spacing-07);
display: flex;
justify-content: center;
align-items: center;
border: 1px solid var(--border-muted);
/* border: 1px solid var(--border-muted); */
border-radius: var(--spacing-02);
/* background-color: var(--background); */
@nest [data-theme="dark"] & { --icon-fill: var(--icon-secondary); --icon-fill-hover: var(--icon-secondary);}
}