translations + removed unused tag + animations while project filtering + accessability

data/tags.yml

@@ -11,9 +11,4 @@
 - title: GitHub
   slug: github
   icon: ai-github-fill
-  checked: False
-
-- title: Sonstiges
-  slug: other
-  icon: ai-paper
   checked: True

i18n/de.toml

@@ -11,3 +11,5 @@ godown = 'Nach unten!'
 language = 'Sprache'
 select-language = 'Sprache auswählen'
 load-more = 'Mehr laden'
+no-projects-found = 'Keine Projekte gefunden'
+no-more-projects = 'Keine weiteren Projekte verfügbar'

i18n/en.toml

@@ -11,3 +11,5 @@ godown = 'Scroll down!'
 language = 'Language'
 select-language = 'Select language'
 load-more = 'Load more'
+no-projects-found = 'No projects found'
+no-more-projects = 'No more projects available'

layouts/partials/projects.html

@@ -9,12 +9,12 @@
         {{ end }}
     </div>
 
-    <div class="project-list">
+    <div class="no-projects hidden">
+        <i class="ai-face-sad"></i>
+        <p>{{ T "no-projects-found" }}</p>
     </div>
 
-    <div class="no-projects">
-        <i class="ai-face-sad"></i>
-        <p>No projects found</p>
+    <div class="project-list">
     </div>
 
     <div class="project-loader-wrapper hidden">

static/main.js

@@ -117,11 +117,13 @@ document.querySelectorAll(".tag-checkbox").forEach(element => {
     });
 });
 
-function showSelectedProjects(category, show = true){
+function showSelectedProjects(category, show = true, noProjectSelector = '.no-projects'){
     if(category){
         document.querySelectorAll(`.${category}`).forEach(project => {
             project.classList.toggle("hidden", !show);
         });
+        // show message when no project is available
+        document.querySelector(noProjectSelector).classList.toggle('hidden', document.querySelector('.project-card:not(.hidden)'));
     }
     else{
         console.error("func showSelectedProjects(): Missing category name.");
@@ -183,7 +185,6 @@ async function getProjectCard(data){
     container.classList.add(category);
     if(!isCategoryEnabled(category)) container.classList.add("hidden");
     //container.style.animation = "fade-up var(--baseDuration) linear";
-    //container.style.backgroundImage = `url(${image})`;
 
     const cardFirst = document.createElement("div");
     cardFirst.classList = "card-first";

static/style.css

@@ -397,7 +397,8 @@ nav.small .nav-links a:last-child:focus{
     color: var(--color);
 }
 
-.tag:hover{
+.tag:hover,
+.tag:focus{
     padding: 5px 26px;
     background: var(--secondary);
     color: var(--color);
@@ -429,7 +430,8 @@ nav.small .nav-links a:last-child:focus{
     opacity: 0;
 }
 
-.project-load-btn:hover{
+.project-load-btn:hover,
+.project-load-btn:focus{
     padding: 10px 40px;
     background: var(--secondary);
     border: var(--border);
@@ -439,18 +441,19 @@ nav.small .nav-links a:last-child:focus{
 .no-projects{
     font-size: 1.8rem;
     font-weight: 600;
-    display: none;
+    transition: var(--baseTransition);
+}
+
+.no-projects.hidden{
+    opacity: 0;
+    scale: 0;
+    height: 0;
 }
 
 .no-projects i{
     font-size: 3rem;
 }
 
-/* show no projects message, when no project exists that isn't hidden and loader is hidden */
-.project-list:not(:has(.project-card:not(.hidden))) + .no-projects:not(:has(+ .project-loader-wrapper:not(.hidden))){
-    display: block;
-}
-
 /* hide load more btn when no projects are shown */
 .project-list:not(:has(.project-card:not(.hidden))) ~ .project-load .project-load-btn{
     display: none;
@@ -489,7 +492,8 @@ nav.small .nav-links a:last-child:focus{
 }
 
 .project-card.hidden{
-    display: none;
+    animation: fade-out var(--baseDuration) ease-in-out;
+    animation-fill-mode: forwards;
 }
 
 .card-first img{
@@ -502,7 +506,8 @@ nav.small .nav-links a:last-child:focus{
 }
 
 @media (pointer: fine){
-    .project-card:hover{
+    .project-card:hover,
+    .project-card:focus{
         background: var(--primary);
         background-image: var(--backgroundImage);
         background-size: cover;
@@ -524,7 +529,8 @@ nav.small .nav-links a:last-child:focus{
         opacity: 1;
     }
 
-    .project-card:hover .card-first{
+    .project-card:hover .card-first,
+    .project-card:focus .card-first{
         height: 0;
         opacity: 0;
     }
@@ -542,23 +548,27 @@ nav.small .nav-links a:last-child:focus{
         transform: rotate(90deg) scale(-1);
     }
     
-    .project-card:hover .card-second{
+    .project-card:hover .card-second,
+    .project-card:focus .card-second{
         height: 100%;
         opacity: 1;
         font-size: 1rem;
         transform: rotate(0deg);
     }
     
-    .project-card:hover .card-second h2{
+    .project-card:hover .card-second h2,
+    .project-card:focus .card-second h2{
         font-size: var(--fontSizeH2);
     }
     
-    .project-card:hover .card-second p{
+    .project-card:hover .card-second p,
+    .project-card:focus .card-second p{
         font-size: var(--fontSizeP);;
         font-weight: var(--fontWeightP);
     }
     
-    .project-card:hover .card-second i{
+    .project-card:hover .card-second i,
+    .project-card:focus .card-second i{
         font-size: var(--fontSizeIcon);;
     }
 }
@@ -621,6 +631,7 @@ nav.small .nav-links a:last-child:focus{
     --size: 2.5rem;
     --factor: 2.5;
     --duration: 2s;
+    --background: var(--primary);
 }
 
 .project-loader-wrapper.hidden{
@@ -632,14 +643,21 @@ nav.small .nav-links a:last-child:focus{
     height: var(--size);
     position: relative;
     animation: circleLoader var(--duration) linear infinite;
+    transition: var(--baseTransition);
+}
+
+.project-loader:hover{
+    --size: 3rem;
+    --background: var(--secondary);
 }
 
 .project-loader-circle{
     width: calc(var(--size) / var(--factor));
     height: calc(var(--size) / var(--factor));
-    background: var(--primary);
+    background: var(--background);
     border-radius: 50%;
     position: absolute;
+    transition: var(--baseTransition);
 }
 
 .project-loader-circle:nth-child(1){
@@ -979,3 +997,27 @@ nav.small .nav-links a:last-child:focus{
         scale: 1;
     }
 }
+
+@keyframes fade-in{
+    0%{
+        opacity: 0;
+        scale: 0;
+    }
+
+    100%{
+        opacity: 1;
+        scale: 1;
+    }
+}
+
+@keyframes fade-out{
+    0%{
+        opacity: 1;
+        scale: 1;
+    }
+
+    100%{
+        opacity: 0;
+        scale: 0;
+    }
+}