|
61 | 61 | } |
62 | 62 |
|
63 | 63 | /* --- Project Section CSS --- */ |
64 | | - |
65 | | -/* Optional: Use CSS Grid for a multi-column layout */ |
66 | | - |
67 | | -.projects-container { |
68 | | - display: grid; |
69 | | - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */ |
70 | | - gap: 25px; /* Space between project cards */ |
| 64 | +/* Container for the slider, if you used one */ |
| 65 | +.project-slider-container { |
| 66 | + position: relative; /* For positioning custom arrows if you add them later */ |
| 67 | + max-width: 1200px; /* Or your preferred max width for the slider area */ |
| 68 | + margin: 30px auto; /* Center the slider container */ |
| 69 | + padding: 0 50px; /* Add padding on the sides for default arrows to sit in */ |
| 70 | + /* If default arrows are still outside, increase this padding */ |
71 | 71 | } |
72 | 72 |
|
| 73 | +/* The actual slider generated by Tiny Slider might have class tns-outer, tns-inner, tns-slider */ |
| 74 | +/* Your project items are the slides */ |
73 | 75 | .project-item { |
74 | | - background-color: rgba(26, 26, 46, 0.7); /* Slightly different background for project items */ |
| 76 | + background-color: rgba(26, 26, 46, 0.85); /* Darker, semi-transparent card */ |
75 | 77 | color: #dcdcdc; |
76 | | - padding: 20px; |
77 | | - margin-bottom: 15px; |
78 | | - border: 1px solid #444; |
79 | | - border-radius: 6px; |
| 78 | + padding: 25px; |
| 79 | + border: 1px solid #444; /* Darker border for dark theme */ |
| 80 | + border-radius: 8px; /* Increased radius */ |
80 | 81 | transition: transform 0.3s ease, box-shadow 0.3s ease; |
| 82 | + box-sizing: border-box; |
| 83 | + |
| 84 | + /* Flexbox for internal layout of each card */ |
| 85 | + display: flex; |
| 86 | + flex-direction: column; |
| 87 | + justify-content: space-between; /* Pushes elements apart vertically */ |
| 88 | + /* Set a fixed height for uniform cards, or let content dictate height */ |
| 89 | + margin-top: 20px; |
| 90 | + /*margin-left: 2px;*/ |
| 91 | + margin-right: 2px; |
| 92 | + height: 500px; /* Or auto, or a min-height. Adjust this! */ |
| 93 | + /* If you want variable heights, set autoHeight: true in JS init */ |
81 | 94 | } |
82 | 95 |
|
83 | 96 | .project-item:hover { |
84 | | - box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Enhanced shadow on hover */ |
85 | | - transform: translateY(-5px); /* Slightly lift card on hover */ |
| 97 | + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); |
| 98 | + transform: translateY(-5px); |
86 | 99 | } |
87 | 100 |
|
88 | 101 | .project-item h3 { |
89 | 102 | margin-top: 0; |
90 | 103 | color: #e8e8e8; |
91 | 104 | margin-bottom: 10px; |
| 105 | + font-size: 1.3em; /* Adjust for card width */ |
| 106 | +} |
| 107 | + |
| 108 | +.project-item p { /* Paragraphs within the project item */ |
| 109 | + font-size: 0.9em; |
| 110 | + line-height: 1.6; |
| 111 | + margin-bottom: 15px; |
| 112 | + flex-grow: 1; /* Allow paragraph to take up available space */ |
| 113 | +} |
| 114 | + |
| 115 | +.project-image { |
| 116 | + width: 100%; |
| 117 | + height: 180px; /* Adjust fixed height for images */ |
| 118 | + object-fit: contain; /* Or 'cover' if you prefer cropping to fill */ |
| 119 | + display: block; |
| 120 | + margin-bottom: 15px; |
| 121 | + border-radius: 4px; |
| 122 | + border: 1px solid #333; |
| 123 | + background-color: #1a1a2e; |
| 124 | +} |
| 125 | + |
| 126 | +.project-links { |
| 127 | + margin-top: auto; /* Pushes links to the bottom of the card */ |
92 | 128 | } |
93 | 129 |
|
94 | | -/* Style for project links */ |
95 | 130 | .project-links a { |
96 | 131 | display: inline-block; |
97 | | - margin-right: 15px; |
98 | | - margin-top: 10px; /* Space above links */ |
| 132 | + margin-right: 10px; /* Reduced margin */ |
| 133 | + margin-top: 10px; |
99 | 134 | text-decoration: none; |
100 | | - color: #a78bfa; /* Link color */ |
101 | | - font-weight: 600; /* Slightly bolder */ |
102 | | - padding-bottom: 3px; /* Space for border */ |
103 | | - border-bottom: 2px solid transparent; /* Prepare for hover effect */ |
| 135 | + color: #a78bfa; |
| 136 | + font-weight: 500; /* Slightly less bold */ |
| 137 | + padding-bottom: 2px; |
| 138 | + font-size: 0.9em; /* Smaller link text */ |
| 139 | + border-bottom: 1px solid transparent; |
104 | 140 | transition: border-color 0.2s ease-in-out; |
105 | 141 | } |
106 | 142 |
|
107 | 143 | .project-links a:hover { |
108 | | - border-bottom-color: #a78bfa; /* Underline effect on hover */ |
| 144 | + border-bottom-color: #a78bfa; |
109 | 145 | } |
110 | 146 |
|
111 | | -/* Optional: Style for technology tags */ |
112 | 147 | .project-tags { |
113 | | - margin-top: 15px; |
| 148 | + margin-top: 10px; /* Reduced margin */ |
| 149 | + flex-wrap: wrap; /* Ensure tags wrap if many */ |
| 150 | + display: flex; /* For better alignment if tags wrap */ |
114 | 151 | } |
115 | 152 |
|
116 | 153 | .project-tags span { |
117 | | - display: inline-block; |
118 | | - background-color: #2a2a3a; /* Light grey tag background */ |
119 | | - color: #ccc; /* Darker grey text */ |
120 | | - padding: 4px 12px; /* Tag padding */ |
121 | | - border-radius: 15px; /* Pill shape */ |
122 | | - font-size: 0.8em; |
| 154 | + background-color: #2a2a3a; |
| 155 | + color: #ccc; |
| 156 | + padding: 3px 10px; /* Slightly smaller padding */ |
| 157 | + border-radius: 12px; /* More pill-like */ |
| 158 | + font-size: 0.75em; /* Smaller tags */ |
123 | 159 | font-weight: 500; |
124 | | - margin-right: 6px; |
125 | | - margin-bottom: 6px; /* Allow tags to wrap */ |
| 160 | + margin-right: 5px; |
| 161 | + margin-bottom: 5px; |
| 162 | +} |
| 163 | + |
| 164 | +/* Styles for Tiny Slider Controls - these make the default text arrows look like icons */ |
| 165 | +.tns-controls button { |
| 166 | + font-size: 0 !important; /* Hide "prev" and "next" text */ |
| 167 | + width: 40px !important; |
| 168 | + height: 40px !important; |
| 169 | + border-radius: 50% !important; |
| 170 | + background-color: rgba(40, 40, 60, 0.6) !important; |
| 171 | + border: 1px solid rgba(255, 255, 255, 0.2) !important; |
| 172 | + position: absolute !important; |
| 173 | + top: 50% !important; |
| 174 | + transform: translateY(-50%) !important; |
| 175 | + z-index: 20 !important; |
| 176 | + padding: 0 !important; |
| 177 | + display: flex !important; |
| 178 | + align-items: center !important; |
| 179 | + justify-content: center !important; |
| 180 | + color: white !important; /* For actual icon if using ::before */ |
| 181 | +} |
| 182 | + |
| 183 | +.tns-controls button:hover { |
| 184 | + background-color: rgba(70, 70, 90, 0.7) !important; |
| 185 | +} |
| 186 | + |
| 187 | +.tns-controls button[data-controls="prev"] { |
| 188 | + left: 5px !important; /* Adjust to be inside padding or just outside */ |
| 189 | +} |
| 190 | +.tns-controls button[data-controls="prev"]::before { |
| 191 | + content: '\2039'; /* Left-pointing angle bracket */ |
| 192 | + font-size: 24px; |
| 193 | + font-weight: bold; |
126 | 194 | } |
127 | 195 |
|
128 | | -.project-image { |
129 | | - width: 100%; /* Make image fill container width */ |
130 | | - height: 200px; /* << SET A FIXED HEIGHT (e.g., 200px - adjust as needed) */ |
131 | | - object-fit: contain; /* << CONTROL HOW IMAGE FITS */ |
132 | | - /* --- Choose ONE object-fit value --- */ |
133 | | - /* object-fit: cover; */ /* Scales image to cover the box, may crop parts */ |
134 | | - /* object-fit: contain; */ /* Scales image to fit entirely inside, may add whitespace */ |
135 | | - /* object-fit: scale-down; */ /* Like 'contain' but won't upscale small images */ |
136 | | - |
137 | | - /* Keep other styles */ |
138 | | - display: block; |
139 | | - margin-bottom: 15px; |
140 | | - border-radius: 4px; |
141 | | - border: 1px solid #ddd; |
142 | | - background-color: #1a1a2e; /* Optional: Add a subtle background for 'contain' */ |
| 196 | +.tns-controls button[data-controls="next"] { |
| 197 | + right: 5px !important; /* Adjust */ |
| 198 | +} |
| 199 | +.tns-controls button[data-controls="next"]::before { |
| 200 | + content: '\203A'; /* Right-pointing angle bracket */ |
| 201 | + font-size: 24px; |
| 202 | + font-weight: bold; |
143 | 203 | } |
144 | 204 |
|
| 205 | +/* Ensure the main #projects intro paragraph is still centered */ |
145 | 206 | #projects > p:first-of-type { |
146 | 207 | text-align: center; |
147 | | - margin-bottom: 25px; /* Add margin below it before the project cards */ |
148 | | -} |
149 | | - |
150 | | -.project-item.inactive-project { |
151 | | - opacity: 0.75; /* Make it slightly faded */ |
152 | | - /* background-color: #f5f5f5; */ /* Optional: Slightly duller background */ |
153 | | - /* border-style: dashed; */ /* Optional: Dashed border */ |
154 | | -} |
155 | | - |
156 | | -.project-item.inactive-project:hover { |
157 | | - /* Optional: Reduce hover effect for inactive projects */ |
158 | | - box-shadow: 0 2px 5px rgba(0,0,0,0.08); |
159 | | - transform: translateY(0); /* No lift on hover */ |
160 | | - opacity: 0.85; /* Slightly less faded on hover */ |
161 | | -} |
162 | | - |
163 | | -.project-item.inactive-project .project-image { |
164 | | - /* filter: grayscale(80%); */ /* Optional: Make image grayscale */ |
| 208 | + margin-bottom: 30px; |
165 | 209 | } |
166 | 210 | /* --- End of Inactive Project CSS --- */ |
167 | 211 |
|
|
0 commit comments