Atridad Lahiji
88aa5b27d7
All checks were successful
Docker Deploy / build-and-push (push) Successful in 1m12s
1325 lines
28 KiB
CSS
Vendored
1325 lines
28 KiB
CSS
Vendored
/*========================================
|
|
This stylesheet is organized into:
|
|
1. Theme variables - Color schemes and design variables
|
|
2. Base elements - Core HTML element styling
|
|
3. Typography & Links - Text and link styling
|
|
4. Navigation - Navbar and menu styling
|
|
5. Buttons - Button styling and variants
|
|
6. Home page - Homepage specific styles
|
|
7. Projects page - Project listing and cards
|
|
8. Post page - Blog post styling
|
|
9. Markdown - Content styling for markdown
|
|
10. Cards & Components - Reusable UI components
|
|
11. Utility classes - Helper styles
|
|
12. Tools & Utility - Styles for tools and utility pages
|
|
========================================*/
|
|
|
|
/*========================================
|
|
1. THEME VARIABLES
|
|
========================================*/
|
|
|
|
:root {
|
|
--color-base-100: oklch(15% 0.09 281.288);
|
|
--color-base-200: oklch(20% 0.09 281.288);
|
|
--color-base-300: oklch(25% 0.09 281.288);
|
|
--color-base-content: oklch(78% 0.115 274.713);
|
|
--color-primary: oklch(71% 0.202 349.761);
|
|
--color-primary-content: oklch(28% 0.109 3.907);
|
|
--color-secondary: oklch(82% 0.111 230.318);
|
|
--color-secondary-content: oklch(29% 0.066 243.157);
|
|
--color-accent: oklch(75% 0.183 55.934);
|
|
--color-accent-content: oklch(26% 0.079 36.259);
|
|
--color-neutral: oklch(45% 0.24 277.023);
|
|
--color-neutral-content: oklch(87% 0.065 274.039);
|
|
--color-info: oklch(74% 0.16 232.661);
|
|
--color-info-content: oklch(29% 0.066 243.157);
|
|
--color-success: oklch(77% 0.152 181.912);
|
|
--color-success-content: oklch(27% 0.046 192.524);
|
|
--color-warning: oklch(90% 0.182 98.111);
|
|
--color-warning-content: oklch(42% 0.095 57.708);
|
|
--color-error: oklch(73.7% 0.121 32.639);
|
|
--color-error-content: oklch(23.501% 0.096 290.329);
|
|
--radius-selector: 1rem;
|
|
--radius-field: 0.5rem;
|
|
--radius-box: 1rem;
|
|
--size-selector: 0.25rem;
|
|
--size-field: 0.25rem;
|
|
|
|
/* Border styles */
|
|
--border: 1px;
|
|
--border-radius-sm: 0.25rem;
|
|
--border-radius-md: 0.5rem;
|
|
--border-radius-lg: 1rem;
|
|
--border-radius-full: 9999px;
|
|
|
|
/* Effects */
|
|
--depth: 0;
|
|
--noise: 0;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3);
|
|
|
|
/* Typography */
|
|
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
--font-size-xs: 0.75rem;
|
|
--font-size-sm: 0.875rem;
|
|
--font-size-md: 1rem;
|
|
--font-size-lg: 1.25rem;
|
|
--font-size-xl: 1.5rem;
|
|
--font-size-2xl: 2rem;
|
|
--font-size-3xl: 3rem;
|
|
--font-size-4xl: 3.75rem;
|
|
--font-weight-normal: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-bold: 700;
|
|
--line-height-tight: 1.1;
|
|
--line-height-normal: 1.5;
|
|
--line-height-loose: 1.8;
|
|
|
|
/* Spacing */
|
|
--spacing-xs: 0.25rem;
|
|
--spacing-sm: 0.5rem;
|
|
--spacing-md: 1rem;
|
|
--spacing-lg: 1.5rem;
|
|
--spacing-xl: 2rem;
|
|
--spacing-2xl: 3rem;
|
|
|
|
/* Animations */
|
|
--animation-fast: 0.2s;
|
|
--animation-normal: 0.3s;
|
|
--animation-slow: 0.5s;
|
|
--easing-default: ease-in-out;
|
|
|
|
/* Layout */
|
|
--navbar-height: 64px;
|
|
--container-max-width: 1200px;
|
|
--content-max-width: 768px;
|
|
|
|
/* Z-index layers */
|
|
--z-dropdown: 100;
|
|
--z-sticky: 200;
|
|
--z-overlay: 300;
|
|
--z-modal: 400;
|
|
}
|
|
|
|
/*========================================
|
|
2. BASE ELEMENTS
|
|
========================================*/
|
|
|
|
/* Reset and foundation styles */
|
|
html, body {
|
|
background-color: var(--color-base-200);
|
|
color: var(--color-base-content);
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow-x: hidden; /* Prevent horizontal scrolling */
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column; /* Stack elements vertically */
|
|
font-family: var(--font-family);
|
|
font-size: var(--font-size-md);
|
|
line-height: var(--line-height-normal);
|
|
}
|
|
|
|
/*========================================
|
|
4. NAVIGATION
|
|
========================================*/
|
|
|
|
/* Main navigation bar - complete redesign for mobile stability */
|
|
.navbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: var(--navbar-height);
|
|
padding: 0 var(--spacing-lg);
|
|
background-color: var(--color-base-200);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: var(--z-sticky);
|
|
font-weight: var(--font-weight-medium);
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Left side of navbar - title container */
|
|
.navbar .navbar-start {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: calc(100% - 60px);
|
|
padding-right: 10px;
|
|
}
|
|
|
|
/* Right side of navbar - hamburger container */
|
|
.navbar .navbar-end {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 44px;
|
|
min-width: 44px;
|
|
position: relative;
|
|
}
|
|
|
|
/* Ghost buttons in navbar */
|
|
.navbar a.btn-ghost {
|
|
color: var(--color-base-content);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.navbar a.btn-ghost:hover {
|
|
background-color: transparent;
|
|
color: var(--color-primary); /* Pink on hover */
|
|
}
|
|
|
|
/* Dropdown menu in navbar */
|
|
.dropdown .dropdown-content {
|
|
display: none; /* Hidden by default */
|
|
position: absolute;
|
|
right: 0;
|
|
background-color: var(--color-base-200);
|
|
min-width: 200px;
|
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
|
|
border-radius: var(--radius-box);
|
|
}
|
|
|
|
/* Show dropdown and nav menu when toggled */
|
|
.dropdown-content.show,
|
|
.nav-menu.show {
|
|
display: block;
|
|
}
|
|
|
|
/* Main content area */
|
|
main {
|
|
flex: 1; /* Take up all available space */
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center; /* Center content horizontally */
|
|
width: 100%;
|
|
padding: 1rem 1rem 2rem;
|
|
margin: 0 auto;
|
|
gap: 1.75rem; /* Space between child elements */
|
|
max-width: 800px; /* Maximum width for better readability */
|
|
box-sizing: border-box; /* Include padding in width calculation */
|
|
}
|
|
|
|
/*========================================
|
|
6. HOME PAGE
|
|
========================================*/
|
|
|
|
/* Center homepage content vertically */
|
|
body:has(.home-page) main {
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Homepage layout */
|
|
.home-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 2.5rem; /* Generous spacing between sections */
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Homepage buttons container */
|
|
.home-buttons-container {
|
|
display: flex;
|
|
flex-wrap: wrap; /* Allow buttons to wrap on small screens */
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
margin: 1rem auto;
|
|
max-width: 600px;
|
|
}
|
|
|
|
/* Icon styling for social links, etc */
|
|
.icon-link svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
color: var(--color-base-content);
|
|
fill: var(--color-base-content);
|
|
}
|
|
|
|
.icon-link:hover svg {
|
|
color: var(--color-primary); /* Pink on hover */
|
|
fill: var(--color-primary);
|
|
}
|
|
|
|
/* Standard container - centers content with max width */
|
|
.container {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0 auto; /* Center horizontally */
|
|
padding: 0 1rem; /* Side padding */
|
|
}
|
|
|
|
/*========================================
|
|
3. TYPOGRAPHY & LINKS
|
|
========================================*/
|
|
|
|
/* Basic link styling */
|
|
a {
|
|
color: var(--color-primary); /* Pink links */
|
|
text-decoration: none;
|
|
transition: all 0.2s ease-in-out; /* Smooth hover effect */
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--color-secondary); /* Blue on hover */
|
|
}
|
|
|
|
/*========================================
|
|
5. BUTTONS
|
|
========================================*/
|
|
|
|
/* Base button styles */
|
|
.btn {
|
|
text-transform: none;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease-in-out; /* Smooth hover effect */
|
|
height: auto;
|
|
min-height: 2.25rem;
|
|
padding: 0.375rem 1.25rem;
|
|
border-radius: var(--radius-field);
|
|
font-size: 0.9375rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
margin: 0 0.375rem;
|
|
}
|
|
|
|
/* Primary button - outline style with hover fill */
|
|
.btn-primary {
|
|
background-color: transparent;
|
|
border: 1px solid var(--color-primary); /* Pink border */
|
|
color: var(--color-primary); /* Pink text */
|
|
width: auto;
|
|
min-width: 5rem;
|
|
padding: 0.5rem 1.5rem;
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: var(--color-primary); /* Pink fill on hover */
|
|
color: var(--color-primary-content); /* Dark text on hover */
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
/* Outline style button */
|
|
.btn-outline {
|
|
border-width: 1px;
|
|
}
|
|
|
|
/* Link styled as button */
|
|
a.btn {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
margin: 0.25rem;
|
|
min-width: 120px; /* Ensure minimum clickable area */
|
|
}
|
|
|
|
/*========================================
|
|
10. CARDS & COMPONENTS
|
|
========================================*/
|
|
|
|
/* List styling for navbar dropdown */
|
|
ul.menu {
|
|
padding: 1rem 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
display: none;
|
|
}
|
|
|
|
ul.menu.show {
|
|
display: block;
|
|
}
|
|
|
|
ul.menu li {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: block;
|
|
}
|
|
|
|
ul.menu li a {
|
|
color: var(--color-base-content);
|
|
font-weight: 400;
|
|
padding: 0.75rem 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
ul.menu li a:hover {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
ul.menu li a::before {
|
|
content: "";
|
|
margin-right: 0;
|
|
}
|
|
|
|
/* Hamburger menu icon styling */
|
|
.menu-icon {
|
|
color: var(--color-base-content);
|
|
}
|
|
|
|
.dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.nav-menu {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 100%;
|
|
background-color: var(--color-base-200);
|
|
min-width: 200px;
|
|
z-index: 100;
|
|
}
|
|
|
|
/* Button styling for navbar toggle */
|
|
.navbar .btn-ghost {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.navbar .btn-ghost:hover {
|
|
opacity: 0.8;
|
|
background-color: transparent;
|
|
}
|
|
|
|
/*========================================
|
|
3. TYPOGRAPHY & HEADINGS
|
|
========================================*/
|
|
|
|
/* Basic heading styles */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin-bottom: 0.5rem;
|
|
font-weight: 700;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
/* Main heading */
|
|
h1 {
|
|
font-size: 3.75rem;
|
|
margin-bottom: 0.5rem;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
/* Subheading style */
|
|
h2 {
|
|
font-size: 1.25rem;
|
|
margin-top: 0;
|
|
margin-bottom: 0.5rem;
|
|
letter-spacing: -0.025em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/*========================================
|
|
11. UTILITY CLASSES
|
|
========================================*/
|
|
|
|
/* Gradient text - eye-catching pink to blue gradient for headings */
|
|
.gradient-text {
|
|
background-image: linear-gradient(to right, oklch(71% 0.202 349.761), oklch(82% 0.111 230.318));
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
display: inline-block;
|
|
font-weight: 800;
|
|
}
|
|
|
|
/* Section spacing - consistent spacing between main content blocks */
|
|
main > * {
|
|
margin-bottom: 2rem;
|
|
width: 100%;
|
|
}
|
|
|
|
/*========================================
|
|
12. RESPONSIVE DESIGN
|
|
========================================*/
|
|
|
|
/* Tablet and desktop adjustments */
|
|
@media (min-width: 640px) {
|
|
/* Larger headings on bigger screens */
|
|
h1 {
|
|
font-size: 4.5rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
/* Adjust spacing on larger screens */
|
|
main {
|
|
gap: 2rem;
|
|
padding: 1.5rem 1.5rem 4rem;
|
|
}
|
|
}
|
|
|
|
/* Icon styling for social links and tech stack */
|
|
.fill-white {
|
|
fill: var(--color-base-content); /* Match text color */
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
.fill-white:hover {
|
|
fill: var(--color-primary); /* Pink on hover */
|
|
transition: fill 0.2s ease-in-out;
|
|
}
|
|
|
|
/* Flex layout utility classes - FIXED to actually use flex, not grid */
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.flex-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.flex-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.flex-wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Spacing utilities */
|
|
.gap-1 {
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.gap-2 {
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.gap-3 {
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.gap-4 {
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.gap-6 {
|
|
gap: var(--spacing-xl);
|
|
}
|
|
|
|
/* Padding utilities */
|
|
.p-4 {
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
/* Alignment utilities */
|
|
.justify-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
.items-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
/* Specific styling for sections */
|
|
/* General section styling except for post content */
|
|
main:not(.container) > span,
|
|
main:not(.container) > section {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
margin-bottom: var(--spacing-sm);
|
|
width: 100%;
|
|
max-width: 100%; /* Allow content to use full width */
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* Button size adjustments */
|
|
.btn-md {
|
|
height: 2.25rem;
|
|
min-height: 2.25rem;
|
|
font-size: var(--font-size-sm);
|
|
border: var(--border) solid var(--color-primary);
|
|
transition: all var(--animation-fast) var(--easing-default);
|
|
}
|
|
|
|
.lg\:btn-lg {
|
|
height: 2.25rem;
|
|
min-height: 2.25rem;
|
|
font-size: var(--font-size-sm);
|
|
border: var(--border) solid var(--color-primary);
|
|
transition: all var(--animation-fast) var(--easing-default);
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.lg\:btn-lg {
|
|
height: 2.5rem;
|
|
min-height: 2.5rem;
|
|
font-size: var(--font-size-md);
|
|
}
|
|
}
|
|
|
|
/*========================================
|
|
10. CARD SYSTEM - Unified card grid and component styles
|
|
========================================*/
|
|
|
|
/* Card grid container and layout styles */
|
|
.card-grid-container {
|
|
width: 100%;
|
|
max-width: 80vw; /* Use 80% of viewport width */
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0 var(--spacing-md);
|
|
min-height: 70vh;
|
|
}
|
|
|
|
/* Override with !important for flex direction to ensure it takes precedence */
|
|
.card-grid {
|
|
display: flex !important;
|
|
flex-direction: row !important;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: var(--spacing-lg);
|
|
width: 100%;
|
|
max-width: 100%; /* Use full width of container */
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Project cards layout - proper flex row with wrapping */
|
|
section.flex.flex-row,
|
|
section.card-grid {
|
|
display: flex;
|
|
flex-direction: row; /* Ensure horizontal layout */
|
|
flex-wrap: wrap;
|
|
gap: 1.5rem;
|
|
width: 100%;
|
|
max-width: 100%; /* Use full width of container */
|
|
padding: 1.5rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Unified card styling - used for projects, posts, papers, and talks */
|
|
.project-card {
|
|
max-width: 100%;
|
|
width: 340px; /* Wider cards by default */
|
|
min-height: 240px;
|
|
height: auto;
|
|
background-color: var(--color-secondary);
|
|
border-radius: var(--border-radius-lg);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: transform var(--animation-fast) var(--easing-default), box-shadow var(--animation-fast) var(--easing-default);
|
|
box-shadow: var(--shadow-md);
|
|
margin: 0.75rem; /* Consistent margin all around */
|
|
flex: 0 0 auto; /* Prevent flex items from growing or shrinking */
|
|
}
|
|
|
|
.project-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.project-card-content {
|
|
padding: var(--spacing-lg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
height: 100%;
|
|
color: var(--color-primary-content);
|
|
position: relative;
|
|
padding-bottom: 3.5rem;
|
|
}
|
|
|
|
.project-card-title {
|
|
font-size: var(--font-size-lg);
|
|
font-weight: var(--font-weight-bold);
|
|
margin-bottom: var(--spacing-sm);
|
|
color: var(--color-base-100);
|
|
}
|
|
|
|
.project-card-description {
|
|
font-size: var(--font-size-sm);
|
|
margin-bottom: var(--spacing-md);
|
|
flex-grow: 1;
|
|
line-height: var(--line-height-normal);
|
|
}
|
|
|
|
.project-card-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-xs);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.project-tag {
|
|
font-size: var(--font-size-xs);
|
|
padding: var(--spacing-xs) var(--spacing-sm);
|
|
border-radius: var(--border-radius-sm);
|
|
background-color: var(--color-primary);
|
|
color: var(--color-primary-content);
|
|
transition: transform var(--animation-fast) var(--easing-default);
|
|
}
|
|
|
|
.project-tag:nth-child(2n) {
|
|
background-color: var(--color-accent);
|
|
color: var(--color-accent-content);
|
|
}
|
|
|
|
.project-tag:nth-child(3n) {
|
|
background-color: var(--color-info);
|
|
color: var(--color-info-content);
|
|
}
|
|
|
|
.project-tag:nth-child(4n) {
|
|
background-color: var(--color-warning);
|
|
color: var(--color-warning-content);
|
|
}
|
|
|
|
.project-card-link {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
position: absolute;
|
|
bottom: 1rem;
|
|
right: 1.25rem;
|
|
}
|
|
|
|
.project-link-button {
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
background-color: var(--color-base-100);
|
|
color: var(--color-base-content);
|
|
border: 1px solid var(--color-base-content);
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.project-link-button:hover {
|
|
background-color: var(--color-primary);
|
|
color: var(--color-primary-content);
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
/*========================================
|
|
7. PROJECTS PAGE
|
|
========================================*/
|
|
|
|
/* Project cards layout - proper flex row with wrapping */
|
|
section.flex.flex-row,
|
|
section.card-grid {
|
|
display: flex;
|
|
flex-direction: row; /* Ensure horizontal layout */
|
|
flex-wrap: wrap;
|
|
gap: 1.5rem;
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
padding: 1.5rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Remove the min-height from the section and put it on the container */
|
|
.card-grid-container {
|
|
min-height: 70vh;
|
|
display: flex;
|
|
flex-direction: row; /* Ensure container is also row */
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Improved empty state */
|
|
.card-grid:empty,
|
|
.card-grid:has(h2:only-child) {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 767px) {
|
|
.project-card {
|
|
width: 300px; /* Slightly smaller on mobile */
|
|
margin: 0.5rem; /* Smaller margin on mobile */
|
|
}
|
|
|
|
/* Even on mobile, ensure cards are in a row */
|
|
.card-grid,
|
|
section.card-grid,
|
|
section.flex.flex-row {
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) and (max-width: 1023px) {
|
|
.project-card {
|
|
width: 320px; /* Medium size on tablets */
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.card-grid {
|
|
gap: 2rem; /* More spacing on larger screens */
|
|
}
|
|
}
|
|
|
|
/*========================================
|
|
8. POST PAGE
|
|
========================================*/
|
|
|
|
main.container article {
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 700px; /* Limit width for post content */
|
|
margin-left: auto; /* Center the article */
|
|
margin-right: auto; /* Center the article */
|
|
line-height: 1.6;
|
|
text-align: left;
|
|
}
|
|
|
|
main.container h1 {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* Post metadata layout */
|
|
main.container article hr {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 1.5rem;
|
|
opacity: 0.15;
|
|
border-color: var(--color-base-content);
|
|
}
|
|
|
|
/* Post content layout */
|
|
main.container .markdown {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Icon buttons on post page */
|
|
.post-icon-button {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--color-base-content);
|
|
width: 2rem;
|
|
height: 2rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
|
|
.post-icon-button:hover {
|
|
color: var(--color-primary); /* Pink on hover */
|
|
transform: scale(1.1); /* Slight grow effect */
|
|
}
|
|
|
|
/* Back button for post navigation */
|
|
.post-back-button {
|
|
background-color: transparent;
|
|
color: var(--color-primary);
|
|
border: 1px solid var(--color-primary);
|
|
border-radius: var(--radius-field);
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 0.75rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
height: 28px;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.post-back-button:hover {
|
|
background-color: var(--color-primary);
|
|
color: var(--color-primary-content);
|
|
}
|
|
|
|
/*========================================
|
|
9. MARKDOWN CONTENT STYLING
|
|
========================================*/
|
|
|
|
/* Base markdown content */
|
|
.markdown {
|
|
line-height: 1.7; /* Better readability */
|
|
font-size: 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/* Paragraph spacing */
|
|
.markdown p {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
/* Headings within markdown */
|
|
.markdown h1,
|
|
.markdown h2,
|
|
.markdown h3,
|
|
.markdown h4,
|
|
.markdown h5,
|
|
.markdown h6 {
|
|
margin-top: 2rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Post title */
|
|
main article h1 {
|
|
font-size: 2.25rem;
|
|
margin-top: 2rem;
|
|
margin-bottom: 1.5rem;
|
|
color: var(--color-secondary); /* Blue color */
|
|
}
|
|
|
|
/* Tailwind-style text utilities */
|
|
.text-md {
|
|
font-size: var(--font-size-md);
|
|
}
|
|
|
|
.text-lg {
|
|
font-size: var(--font-size-lg);
|
|
}
|
|
|
|
.text-xl {
|
|
font-size: var(--font-size-xl);
|
|
}
|
|
|
|
.text-2xl {
|
|
font-size: var(--font-size-2xl);
|
|
}
|
|
|
|
.text-4xl {
|
|
font-size: var(--font-size-4xl);
|
|
}
|
|
|
|
.text-white {
|
|
color: white;
|
|
}
|
|
|
|
/* Font weight utilities */
|
|
.font-extrabold {
|
|
font-weight: 800;
|
|
}
|
|
|
|
/* Tracking/letter-spacing utilities */
|
|
.tracking-tight {
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
/* Media query screen size utilities */
|
|
@media (min-width: 640px) {
|
|
.sm\:text-8xl {
|
|
font-size: 6rem; /* Approximate 8xl size */
|
|
}
|
|
|
|
.sm\:text-\[1\.5rem\] {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.sm\:text-\[2rem\] {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.sm\:gap-6 {
|
|
gap: var(--spacing-xl);
|
|
}
|
|
}
|
|
|
|
/* Additional margin utilities */
|
|
.mb-2 {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/*========================================
|
|
13. TOOLS & UTILITY PAGES
|
|
========================================*/
|
|
|
|
/* General tool page styling */
|
|
.tool-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 2rem 1rem;
|
|
}
|
|
|
|
.tool-page h1 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1.5rem;
|
|
color: var(--color-secondary);
|
|
}
|
|
|
|
.tool-page p {
|
|
margin-bottom: 1.5rem;
|
|
text-align: center;
|
|
max-width: 700px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Form elements styling */
|
|
input[type="text"],
|
|
input[type="number"],
|
|
input[type="file"],
|
|
textarea {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
margin-bottom: 1.5rem;
|
|
background-color: var(--color-base-300);
|
|
border: 1px solid var(--color-secondary);
|
|
border-radius: var(--border-radius-md);
|
|
color: var(--color-base-content);
|
|
font-size: 1rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
input[type="text"]:focus,
|
|
input[type="number"]:focus,
|
|
textarea:focus {
|
|
border-color: var(--color-primary);
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px rgba(var(--color-primary), 0.25);
|
|
}
|
|
|
|
button[type="submit"],
|
|
.tool-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.75rem 1.5rem;
|
|
background-color: transparent;
|
|
color: var(--color-primary);
|
|
border: 1px solid var(--color-primary);
|
|
border-radius: var(--border-radius-md);
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
margin-top: 1rem;
|
|
width: 100%;
|
|
max-width: 400px;
|
|
}
|
|
|
|
button[type="submit"]:hover,
|
|
.tool-button:hover {
|
|
background-color: var(--color-primary);
|
|
color: var(--color-primary-content);
|
|
}
|
|
|
|
/* File input customization */
|
|
input[type="file"] {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
input[type="file"]::-webkit-file-upload-button {
|
|
padding: 0.5rem 1rem;
|
|
margin-right: 1rem;
|
|
background-color: var(--color-secondary);
|
|
color: var(--color-primary-content);
|
|
border: none;
|
|
border-radius: var(--border-radius-sm);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
input[type="file"]::-webkit-file-upload-button:hover {
|
|
background-color: var(--color-primary);
|
|
}
|
|
|
|
/* Form group styling */
|
|
.form-group {
|
|
width: 100%;
|
|
max-width: 700px;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
font-size: 1rem;
|
|
color: var(--color-base-content);
|
|
}
|
|
|
|
/* SSE specific styling */
|
|
.sse-message-container {
|
|
width: 100%;
|
|
max-width: 700px;
|
|
min-height: 100px;
|
|
padding: 1.5rem;
|
|
margin: 1.5rem 0;
|
|
background-color: var(--color-base-300);
|
|
border-radius: var(--border-radius-lg);
|
|
border: 1px dashed var(--color-secondary);
|
|
}
|
|
|
|
.sse-message {
|
|
margin-bottom: 0.5rem;
|
|
padding: 0.5rem;
|
|
border-radius: var(--border-radius-sm);
|
|
background-color: var(--color-base-200);
|
|
}
|
|
|
|
/* Tool links styling */
|
|
.tool-link {
|
|
color: var(--color-primary);
|
|
text-decoration: underline;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tool-link:hover {
|
|
color: var(--color-secondary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Standard container for pages */
|
|
main.container {
|
|
max-width: 90vw;
|
|
padding: 2rem 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Error message styling */
|
|
.error-message {
|
|
color: var(--color-error);
|
|
margin-top: 0.5rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* Tool cards specific styling */
|
|
.tools-page .card-grid-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 70vh;
|
|
}
|
|
|
|
.tools-page .project-card,
|
|
.tool-card {
|
|
position: relative;
|
|
max-width: 100%;
|
|
width: 340px;
|
|
min-height: 200px;
|
|
background-color: var(--color-secondary);
|
|
border-radius: var(--border-radius-lg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: transform var(--animation-fast) var(--easing-default), box-shadow var(--animation-fast) var(--easing-default);
|
|
box-shadow: var(--shadow-md);
|
|
margin: 0.75rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tools-page .project-card-content {
|
|
padding: var(--spacing-lg);
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
min-height: 180px;
|
|
}
|
|
|
|
/* Base elements for better mobile experience */
|
|
@media (max-width: 480px) {
|
|
html, body {
|
|
font-size: 15px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
main {
|
|
padding: 1rem 0.75rem 2rem;
|
|
}
|
|
}
|
|
|
|
/* Card grid container and layout styles - mobile improvements */
|
|
.card-grid-container {
|
|
width: 100%;
|
|
max-width: 80vw; /* Use 80% of viewport width */
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0 var(--spacing-md);
|
|
min-height: 70vh;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.card-grid-container {
|
|
max-width: 95vw; /* Use more screen width on mobile */
|
|
padding: 0 0.5rem;
|
|
}
|
|
|
|
.card-grid {
|
|
gap: 1rem; /* Tighter spacing on mobile */
|
|
}
|
|
}
|
|
|
|
/* Mobile improvements for tool pages */
|
|
@media (max-width: 480px) {
|
|
.tool-page {
|
|
padding: 1.5rem 0.75rem;
|
|
}
|
|
|
|
.tool-page h1 {
|
|
font-size: 2rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.form-group {
|
|
max-width: 100%;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="number"],
|
|
input[type="file"],
|
|
textarea {
|
|
padding: 0.5rem 0.75rem;
|
|
}
|
|
|
|
.sse-message-container {
|
|
padding: 1rem;
|
|
margin: 1rem 0;
|
|
}
|
|
}
|
|
|
|
/* Responsive adjustments for cards */
|
|
@media (max-width: 480px) {
|
|
.project-card {
|
|
width: 100%; /* Full width on very small screens */
|
|
max-width: 300px;
|
|
min-height: 220px;
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
.project-card-content {
|
|
padding: var(--spacing-md);
|
|
padding-bottom: 3rem;
|
|
}
|
|
|
|
.project-card-title {
|
|
font-size: 1.15rem;
|
|
}
|
|
|
|
.project-card-description {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.tools-page .project-card,
|
|
.tool-card {
|
|
width: 100%;
|
|
max-width: 300px;
|
|
min-height: 180px;
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
.tools-page .project-card-content {
|
|
min-height: 150px;
|
|
padding: var(--spacing-md);
|
|
}
|
|
}
|
|
|
|
/* Improved mobile styles for home page */
|
|
@media (max-width: 480px) {
|
|
.home-page {
|
|
gap: 1.75rem;
|
|
}
|
|
|
|
.home-buttons-container {
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.btn {
|
|
padding: 0.325rem 1rem;
|
|
min-width: 100px;
|
|
}
|
|
}
|
|
|
|
/* Button size adjustments for mobile */
|
|
@media (max-width: 480px) {
|
|
.btn-md {
|
|
height: 2rem;
|
|
min-height: 2rem;
|
|
font-size: var(--font-size-xs);
|
|
padding: 0.25rem 1rem;
|
|
}
|
|
|
|
.tool-button {
|
|
padding: 0.5rem 1.25rem;
|
|
}
|
|
}
|
|
|
|
/* Improve mobile menu usability */
|
|
@media (max-width: 480px) {
|
|
ul.menu li a {
|
|
padding: 0.875rem 1.25rem;
|
|
}
|
|
|
|
.dropdown .dropdown-content {
|
|
min-width: 180px;
|
|
}
|
|
}
|
|
|
|
/* Fix margin and width for post and markdown content on mobile */
|
|
@media (max-width: 480px) {
|
|
main.container {
|
|
padding: 1rem 0.75rem;
|
|
}
|
|
|
|
.markdown {
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
.markdown h1 {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.markdown h2 {
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|