Fix tags styles for DarkReader

README.md

@@ -16,15 +16,15 @@ npm run dev
 npm run build
 ```
 
-All that is needed to deploy is to copy the contents of the `./out/` folder onto any web hosting.
+All that is needed to deploy is to copy the contents of the `./out/` folder onto a web hosting.
 
 ## Configuration
 
 ### CV content
 
-- src/PersonalData.ts :: source of all data for the CV, nicely structured in a type-checked TypeScript object literal
+- [src/PersonalData.ts](src/PersonalData.ts) :: source of all data for the CV, nicely structured in a type-checked TypeScript object literal
 
 ### Images
 
-- public/favicon.ico
-- public/photo.png
+- [public/favicon.ico](public/favicon.ico) :: web favicon
+- [public/photo.png](public/photo.png) :: cover photo

src/app/components/Tag.tsx

@@ -2,6 +2,6 @@ import React from "react"
 
 export default function Tag(props: {text: string}) {
     return (
-        <span className='badge text-bg-light'>{props.text}</span>
+        <span className='badge text-bg-gentle'>{props.text}</span>
     )
 }

src/app/globals.css

@@ -21,6 +21,11 @@ body {
     margin-top: 1em;
 }
 
+.text-bg-gentle {
+    color: #555;
+    background-color: RGBA(108,117,125,0.1);
+}
+
 .job-card {
     margin-top: 1em;
 }
@@ -34,6 +39,9 @@ body {
 .job-card .card-subtitle {
     margin-bottom: 0.5rem;
 }
+.job-tags > span {
+    margin: 0.2em;
+}
 
 .cloud-primary .tag-badges  {
     font-size: 180%;
@@ -48,16 +56,6 @@ body {
 .tag-badges > span {
     margin: 0.4em;
 }
-.focusable {
-    transition: all 0.3s;
-}
-.focusable:hover {
-    background-color: rgba(236, 241, 245, 0.3);
-    filter: brightness(96%);
-}
-.focused-element {
-    border: 2px dashed red;
-}
 .contacts .contact {
     margin: 0.75em;
 }