visibility updates

RPSoftCompany · Mar 2, 2024 · feb60b7 · feb60b7
1 parent 89b7ed4
commit feb60b7
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 23 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -3,19 +3,22 @@
     <nav
       class="z-10 antialiased bg-neutral-200 dark:bg-neutral-800 shadow-md dark:shadow-none border-gray-200 sticky top-0"
     >
-      <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
-        <RouterLink to="/" class="flex items-center space-x-3 rtl:space-x-reverse">
-          <img
-            v-if="darkTheme"
-            src="@/assets/logo_dark.svg"
-            class="h-8"
-            alt="Bridging the Gap logo"
-          />
-          <img v-else src="@/assets/logo.svg" class="h-8" alt="Bridging the Gap logo" />
-          <span
-            class="self-center text-2xl font-semibold whitespace-nowrap hidden xs:block text-black dark:text-gray-50 tracking-wide"
-            >Bridging the Gap</span
-          >
+      <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-1">
+        <RouterLink to="/">
+          <div class="flex content-center space-x-3 rtl:space-x-reverse">
+            <img
+              v-if="darkTheme"
+              class="h-8"
+              src="@/assets/logo_dark.svg"
+              alt="Bridging the Gap logo"
+            />
+            <img v-else src="@/assets/logo.svg" class="h-8" alt="Bridging the Gap logo" />
+            <div
+              class="self-center text-xl mt-1 font-semibold whitespace-nowrap hidden xs:block text-black dark:text-gray-50 tracking-wide"
+            >
+              Bridging the Gap
+            </div>
+          </div>
         </RouterLink>
         <button
           data-collapse-toggle="navbar-default"
@@ -48,15 +51,15 @@
             <li>
               <RouterLink
                 to="/about"
-                class="text-black dark:text-white navigation-button"
+                class="text-base text-black dark:text-white navigation-button"
                 aria-current="page"
                 >About us
               </RouterLink>
             </li>
             <li>
               <button aria-label="Change theme" type="button" @click="changeTheme">
                 <SvgIcon
-                  class="text-black dark:text-white"
+                  class="text-gray-500 hover:text-black dark:hover:text-white card"
                   type="mdi"
                   :path="mdiThemeLightDark"
                   :size="32"

diff --git a/src/assets/main.scss b/src/assets/main.scss
@@ -13,13 +13,17 @@ html {
   --color-scheme: light;
 
   --mainTransition: all 0.5s ease;
+  --cardTransition: all 200ms;
+  --navigationButtonTransition: text-decoration-color 300ms;
 
   color-scheme: var(--color-scheme);
 }
 
 @media (prefers-reduced-motion) {
   html {
     --mainTransition: none;
+    --cardTransition: none;
+    --navigationButtonTransition: none;
   }
 }
 
@@ -75,7 +79,7 @@ footer {
 }
 
 .card {
-  transition: all 200ms;
+  transition: var(--cardTransition);
 }
 
 .navigation-button {
@@ -86,7 +90,7 @@ footer {
   text-decoration-line: underline;
   text-underline-offset: 0.15rem;
 
-  transition: text-decoration-color 300ms;
+  transition: var(--navigationButtonTransition);
 
   &:hover {
     text-decoration-color: initial;

diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
@@ -60,7 +60,7 @@
           class="flex flex-col lg:items-start items-center lg:grid gap-3 lg:grid-flow-col grid-flow-row"
         >
           <a
-            class="link text-gray-600 text-lg hover:text-black dark:hover:text-white"
+            class="link text-gray-800 dark:text-gray-200 text-lg hover:text-black dark:hover:text-white"
             target="_blank"
             :href="reviewer.link"
             >{{ reviewer.name }}</a
@@ -69,7 +69,7 @@
             <div class="mb-1 lg:mt-0 mt-3">Articles reviewed by {{ reviewer.name }}</div>
             <template v-for="article of reviewer.reviewed.slice(0, reviewMax)">
               <router-link
-                class="link text-gray-600 hover:text-black dark:hover:text-white"
+                class="link text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white"
                 :to="`/articles/${article.link}`"
                 >{{ article.title }}
               </router-link>
@@ -78,19 +78,19 @@
               <template v-if="showMore === reviewer.name">
                 <router-link
                   v-for="article of reviewer.reviewed.slice(reviewMax)"
-                  class="link text-gray-600 hover:text-black dark:hover:text-white"
+                  class="link text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white"
                   :to="`/articles/${article.link}`"
                   >{{ article.title }}
                 </router-link>
                 <router-link
-                  class="link text-gray-600 hover:text-black dark:hover:text-white font-bold"
+                  class="link text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white font-bold"
                   to="about"
                   >show less
                 </router-link>
               </template>
               <template v-else>
                 <router-link
-                  class="link text-gray-600 hover:text-black dark:hover:text-white font-bold"
+                  class="link text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white font-bold"
                   :to="{ name: 'about', query: { reviewed: reviewer.name } }"
                   >show more
                 </router-link>
@@ -105,7 +105,12 @@
       <div class="flex flex-grow flex-col items-center gap-3">
         <h3>Source</h3>
         <div>Content of this webpage, including it's code, can be found on our</div>
-        <a href="https://github.com/skrzymek/BridgingTheGap" target="_blank"><b>GitHub</b></a>
+        <a
+          href="https://github.com/skrzymek/BridgingTheGap"
+          class="link text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white"
+          target="_blank"
+          ><b>GitHub</b></a
+        >
       </div>
     </div>
     <div class="md:hidden flex flex-grow items-center">
@@ -198,6 +203,10 @@ onBeforeMount(() => {
       reviewed: reviewersMap.get(reviewer)
     })
   }
+
+  reviewers.value = reviewers.value.sort((a, b) => {
+    return a.name.localeCompare(b.name)
+  })
 })
 
 watch(route, (current) => {