[Added] Scrolls for long items

This commit is contained in:
Ninjaws
2024-11-23 20:48:23 +01:00
parent 18b6489a06
commit 0a1a674074
2 changed files with 32 additions and 3 deletions
+9 -3
View File
@@ -6,15 +6,21 @@
<div *ngFor="let project of projects"
class="backface-hidden rounded-sm overflow-hidden shadow-lg md:hover:scale-105 transition-all
duration-300 group relative fade-in-up bg-white/5 border-none">
<!-- alt="{{project.title}}" -->
<!-- *ngIf="project.image" -->
<img src="{{project.image}}" alt="{{project.title}}" class="w-full max-h-56 aspect-[3/2] object-cover">
<div class="p-2 xs:p-3 xl:px-6 min-h-56">
<!-- min-h-56 -->
<div class="flex flex-wrap mb-2 xs:mb-4 items-center">
<h3 class="text-xl sm:text-2xl font-semibold text-teal-400 flex-grow">{{project.title}}</h3>
<p class="pl-2 ml-auto w-auto text-right text-sm xs:text-base text-gray-400">{{project.year}}</p>
</div>
<p class="text-gray-300 mb-4 whitespace-pre-line">{{project.description}}</p>
<p class="text-gray-300 mb-4 whitespace-pre-line max-h-48 overflow-auto">{{project.description}}</p>
<!-- <details class="text-gray-300 mb-4">
<summary class="cursor-pointer list-none">
</summary>
<p class="whitespace-pre-line">{{project.description}}</p>
</details> -->
<div class="flex flex-wrap gap-1">
<span *ngFor="let technology of project.technologies"
class="bg-gray-800 text-white text-sm sm:text-md px-1 sm:px-2 py-1 rounded-md">{{technology}}</span>
+23
View File
@@ -43,3 +43,26 @@ html {
animation: fadeInLeft 0.95s ease-out;
}
/* Custom scrollbar styles for Sass */
::-webkit-scrollbar {
width: 4px;
}
::-webkit-scrollbar-track {
background: rgb(61, 61, 61);
}
::-webkit-scrollbar-thumb {
background:rgb(116, 116, 116);//rgb(226, 147, 0);
border-radius: 20px;
transition: background 0.3s;
}
::-webkit-scrollbar-thumb:hover {
background: #357ABD;
}
// scrollbar-width: thin;
// scrollbar-color: #4A90E2 #f0f0f0;