diff --git a/assets/scripts/ProjectCard.js b/assets/scripts/ProjectCard.js index c1598b8..07c86fe 100644 --- a/assets/scripts/ProjectCard.js +++ b/assets/scripts/ProjectCard.js @@ -32,25 +32,29 @@ class ProjectCard extends HTMLElement { width: 320px; filter: drop-shadow(0px 10px 10px rgb(0, 0, 0, 0.4)); padding: 10px 20px; + transition: transform 0.2s ease, box-shadow 0.2s ease; } - .project-card .name { - color: rgb(0, 0, 0); - font-size: 1.8em; - font-weight: bold; + .project-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); } - .project-card .name:hover { + .project-card .name { + color: rgb(0, 0, 0); font-size: 2em; - margin: 0; - white-space: wrap; - overflow: auto; - text-overflow: unset; - transition: 0.1s ease all; + font-weight: bold; + display: block; + white-space: nowrap; + overflow-x: auto; } - .project-card img { - width = 100px; + .project-card .project-image { + align-self: center; + justify-self: center; + object-fit: fill; + height: 100%; + width: 100%; } .project-card button { @@ -62,7 +66,7 @@ class ProjectCard extends HTMLElement { height: auto; max-height: 50px; padding: 8px 20px; - transition: 0.1s ease all; + transition: background-color 0.1s ease; margin-right: 5px; margin-bottom: 2px; } @@ -73,23 +77,6 @@ class ProjectCard extends HTMLElement { transition: 0.1s ease all; } - .project-card .project-image { - align-self: center; - justify-self: center; - object-fit: fill; - height: 100%; - width: 100%; - } - .project-card .progress-bar { - position: relative; - width: 320px; - height: 20px; - background-image: url('assets/images/SpaceBackground_Pixelart.png'); - background-size: 100% cover; - background-position: center; - background-repeat: no-repeat; - } - .project-card .desc { width: 90%; height: 80%; @@ -103,6 +90,16 @@ class ProjectCard extends HTMLElement { border-radius: 5% 5% 5% 5%; background-color: rgba(0, 0, 0, 0.164); } + .project-card .progress-bar { + position: relative; + width: 320px; + height: 20px; + background-image: url('assets/images/SpaceBackground_Pixelart.png'); + background-size: 100% cover; + background-position: center; + background-repeat: no-repeat; + } + .progress-bar > .progress-bar-fill { position: absolute; height: 20px;