System-End/hackatime
1
0
Fork 0
mirror of https://github.com/System-End/hackatime.git synced 2026-04-20 00:35:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Begin moving nav.css to TailwindCSS

Browse source 
* just a note, this is NOT done yet (and yes I know it won't work as is rn)
This commit is contained in:
Brian 2026-01-21 23:36:08 -06:00
parent fb4b1d3369
commit 0895891176
1 changed files with 33 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

109
app/assets/stylesheets/nav.css
View file

@ -1,120 +1,77 @@
@import "tailwindcss";
body {
display: flex;
min-height: 100vh;
@apply flex min-h-screen;
}
main {
flex: 1;
padding: 20px;
margin-bottom: 100px;
transition: margin-left 0.3s ease, max-width 0.3s ease;
@apply flex-1 p-5 mb-[100px] transition-[margin-left,max-width] duration-300 ease-[ease];
}
@media (max-width: 1023px) {
main {
margin-left: 0;
max-width: 100%;
padding: 60px 20px 20px 20px;
}
main {
@apply ml-0 max-w-full p-5 pt-[60px];
}
}
aside[data-nav-target="nav"] {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 250px;
background: #181c23;
color: #f3f3f3;
border-right: 1px solid #222;
z-index: 1000;
overflow-y: auto;
padding: 24px 8px 24px 8px;
transition: transform 0.3s ease;
@apply fixed left-0 top-0 bottom-0 w-[250px] bg-[#181c23] text-[#f3f3f3] border-r border-[#222] z-1000 overflow-y-auto py-6 px-2 transition-transform duration-300 ease-[ease];
}
aside[data-nav-target="nav"] a.block {
display: block;
padding: 10px 15px;
color: #f3f3f3;
border-radius: 6px;
transition: background-color 0.15s, color 0.15s;
text-decoration: none;
@apply block py-[10px] px-[15px] text-[#f3f3f3] rounded-[6px] transition-colors duration-150 no-underline;
}
aside[data-nav-target="nav"] a.block.bg-primary\/20 {
color: var(--primary-color, #e13950);
background: rgba(225, 57, 80, 0.12);
color: var(--primary-color, #e13950);
@apply bg-[rgba(225,57,80,0.12)];
}
aside[data-nav-target="nav"] a.block:hover {
background-color: #23272a;
color: var(--primary-color, #e13950);
@apply bg-[#23272a];
color: var(--primary-color, #e13950);
}
@media (max-width: 1023px) {
aside[data-nav-target="nav"] {
transform: translateX(-100%);
z-index: 9999;
}
aside[data-nav-target="nav"].open {
transform: translateX(0);
box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3);
}
aside[data-nav-target="nav"] {
@apply -translate-x-full z-9999;
}
aside[data-nav-target="nav"].open {
@apply translate-x-0 shadow-[2px_0_20px_rgba(0,0,0,0.3)];
}
}
.mobile-nav-button {
display: none;
position: fixed;
top: 20px;
left: 20px;
z-index: 100;
background: var(--color-darkless);
color: var(--primary-color);
border: none;
border-radius: 6px;
padding: 12px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transition: background-color 0.2s;
background: var(--color-darkless);
color: var(--primary-color);
@apply hidden fixed top-5 left-5 z-100 border-none rounded-[6px] p-3 cursor-pointer shadow-[0_2px_8px_rgba(0,0,0,0.2)] transition-[background-color] duration-200;
}
.mobile-nav-button:hover {
background: #23272a;
@apply bg-[#23272a];
}
.mobile-nav-button svg {
width: 24px;
height: 24px;
@apply size-6;
}
@media (max-width: 1023px) {
.mobile-nav-button {
display: block;
}
.mobile-nav-button {
@apply block;
}
}
.nav-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
z-index: 9998;
opacity: 0;
transition: opacity 0.3s ease;
@apply hidden fixed inset-0 bg-[rgba(0,0,0,0.5)] backdrop-blur-xs z-9998 opacity-0 transition-opacity duration-300 ease-[ease];
}
.nav-overlay.open {
opacity: 1;
@apply opacity-100;
}
@media (max-width: 1023px) {
.nav-overlay.open {
display: block;
}
.nav-overlay.open {
@apply block;
}
}